upd

optimus_widgetbook/lib/components/forms/checkbox.dart

@@ -26,21 +26,16 @@ class CheckboxStoryState extends State<CheckboxStory> {
   Widget build(BuildContext context) {
     final k = context.knobs;
 
-    return Center(
-      child: SizedBox(
-        width: 400,
-        child: OptimusCheckbox(
-          label: Text(k.string(label: 'Label', initialValue: 'Checkbox Label')),
-          error: k.string(label: 'Error'),
-          isEnabled: k.boolean(label: 'Enabled', initialValue: true),
-          size: k.list(
-            label: 'Size',
-            options: OptimusCheckboxSize.values,
-          ),
-          isChecked: _isChecked,
-          onChanged: _handleChanged,
-        ),
+    return OptimusCheckbox(
+      label: Text(k.string(label: 'Label', initialValue: 'Checkbox Label')),
+      error: k.string(label: 'Error'),
+      isEnabled: k.boolean(label: 'Enabled', initialValue: true),
+      size: k.list(
+        label: 'Size',
+        options: OptimusCheckboxSize.values,
       ),
+      isChecked: _isChecked,
+      onChanged: _handleChanged,
     );
   }
 }

optimus_widgetbook/lib/components/forms/checkbox_group.dart

@@ -8,7 +8,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
   type: OptimusCheckboxGroup<int>,
   path: '[Forms]/Checkbox/',
 )
-CheckboxGroupUseCase defaultStyle(_) => const CheckboxGroupUseCase();
+Widget defaultStyle(BuildContext _) => const CheckboxGroupUseCase();
 
 class CheckboxGroupUseCase extends StatefulWidget {
   const CheckboxGroupUseCase({super.key});

optimus_widgetbook/lib/components/forms/checkbox_nested.dart

@@ -1,12 +1,83 @@
 import 'package:flutter/widgets.dart';
 import 'package:optimus/optimus.dart';
+import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
 @widgetbook.UseCase(
   name: 'Nested Checkbox Group',
   type: OptimusNestedCheckboxGroup,
   path: '[Forms]/Nested Group',
 )
-Widget defaultStyle(BuildContext context) {
-  return Center();
+Widget defaultStyle(BuildContext _) => const CheckboxGroupExample();
+
+class CheckboxGroupExample extends StatefulWidget {
+  const CheckboxGroupExample({super.key});
+
+  @override
+  CheckboxGroupExampleState createState() => CheckboxGroupExampleState();
+}
+
+class CheckboxGroupExampleState extends State<CheckboxGroupExample> {
+  // ignore: avoid-duplicate-collection-elements, duplicity is intentional
+  final List<bool> _values = [false, true, false, false, false];
+  bool _isRootChecked = false;
+
+  void _handleChanged(int position, bool isChecked) =>
+      setState(() => _values[position] = isChecked);
+
+  void _handleRootChanged(bool isRootChecked) =>
+      setState(() => _isRootChecked = isRootChecked);
+
+  @override
+  Widget build(BuildContext context) {
+    final k = context.knobs;
+    final isEnabled = k.boolean(label: 'Enabled', initialValue: true);
+
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          OptimusCheckbox(
+            label: const Text('Outside Checkbox'),
+            isChecked: _isRootChecked,
+            isEnabled: isEnabled,
+            onChanged: _handleRootChanged,
+          ),
+          OptimusNestedCheckboxGroup(
+            parent: const Text('Parent'),
+            label: k.string(label: 'Label'),
+            error: k.string(label: 'Error'),
+            isEnabled: isEnabled,
+            children: [
+              OptimusNestedCheckbox(
+                label: const Text('Checkbox 1'),
+                isChecked: _values.first,
+                onChanged: (bool isChecked) => _handleChanged(0, isChecked),
+              ),
+              OptimusNestedCheckbox(
+                label: const Text('Checkbox 2'),
+                isChecked: _values[1],
+                onChanged: (bool isChecked) => _handleChanged(1, isChecked),
+              ),
+              OptimusNestedCheckbox(
+                isChecked: _values[2],
+                label: const Text('Checkbox 3'),
+                onChanged: (bool isChecked) => _handleChanged(2, isChecked),
+              ),
+              OptimusNestedCheckbox(
+                isChecked: _values[3],
+                label: const Text('Checkbox 4'),
+                onChanged: (bool isChecked) => _handleChanged(3, isChecked),
+              ),
+              OptimusNestedCheckbox(
+                isChecked: _values.last,
+                label: const Text('Checkbox 5'),
+                onChanged: (bool isChecked) => _handleChanged(4, isChecked),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
 }

optimus_widgetbook/lib/main.dart

@@ -4,18 +4,24 @@ import 'package:optimus_widgetbook/main.directories.g.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
-void main() {
-  runApp(const WidgetbookApp());
-}
+void main() => runApp(const WidgetbookApp());
 
 @widgetbook.App()
 class WidgetbookApp extends StatelessWidget {
   const WidgetbookApp({super.key});
 
   @override
   Widget build(BuildContext context) => Widgetbook.material(
-        addons: [
-          DeviceFrameAddon(devices: Devices.all),
+        addons: <WidgetbookAddon>[
+          DeviceFrameAddon(
+            devices: [
+              Devices.ios.iPhone13Mini,
+              Devices.ios.iPhone13,
+              Devices.ios.iPhone13ProMax,
+              Devices.ios.iPadAir4,
+              Devices.ios.iPad12InchesGen4,
+            ],
+          ),
           InspectorAddon(),
           AlignmentAddon(),
           ThemeAddon<OptimusThemeData>(
@@ -37,34 +43,21 @@ class WidgetbookApp extends StatelessWidget {
                 ),
               ),
             ],
-            themeBuilder: (
-              context,
-              theme,
-              child,
-            ) =>
-                OptimusTheme(
+            themeBuilder: (context, theme, child) => OptimusTheme(
               themeMode: theme.brightness == Brightness.light
                   ? ThemeMode.light
                   : ThemeMode.dark,
               child: child,
             ),
           ),
           BuilderAddon(
-              name: 'Background Builder',
-              builder: (BuildContext context, Widget widget) {
-                return Theme(
-                  data: ThemeData(scaffoldBackgroundColor: Colors.white),
-                  child: widget,
-                );
-              })
+            name: 'Background builder',
+            builder: (BuildContext context, Widget widget) => ColoredBox(
+              color: context.tokens.backgroundStaticFlat,
+              child: Center(child: widget),
+            ),
+          ),
         ],
         directories: directories,
       );
 }
-
-extension on String? {
-  ThemeMode toThemeMode() => ThemeMode.values
-      .firstWhere((e) => e.name == this, orElse: () => ThemeMode.system);
-}
-
-const _keyTheme = 'themeMode';