Fix documentation (#55)

docs/.env.development

@@ -1 +1 @@
-NEXT_PUBLIC_DEMO_URL=https://demo.master.forui.dev/card
+NEXT_PUBLIC_DEMO_URL=https://dev.demo.forui.dev

docs/components/widget.tsx

@@ -3,20 +3,21 @@ import {useTheme} from "nextra-theme-docs";
 interface Props {
     name: string;
     variant?: string;
+    height?: number;
     query: Record<string, string>;
 }
 
-export function Widget({name, variant = 'default', query}: Props) {
+export function Widget({name, variant = 'default', height = 200, query}: Props) {
     const {resolvedTheme} = useTheme();
-    query['theme'] = resolvedTheme;
+    query['theme'] = `zinc-${resolvedTheme}`;
 
     const url = process.env['NEXT_PUBLIC_DEMO_URL'];
 
     return (
         <iframe
+            className="w-full border rounded dark:border-neutral-400/20"
+            style={{height: `${height}px`}}
             src={`${url}/${name}/${variant}?${new URLSearchParams(query).toString()}`}
-            width={0}
-            height={0}
         />
     );
 }

docs/pages/docs/dialog.mdx

@@ -6,7 +6,7 @@ A modal dialog interrupts the user with important content and expects a response
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='dialog' query={{vertical: "false"}}/>
+    <Widget name='dialog' query={{vertical: "false"}} height={400}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart

docs/pages/docs/scaffold.mdx

@@ -6,7 +6,7 @@ Creates a visual scaffold for Forui widgets.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='scaffold' query={{}}/>
+    <Widget name='scaffold' query={{}} height={600}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart

docs/pages/docs/separator.mdx

@@ -6,10 +6,14 @@ Visually or semantically separates content.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='separator' query={{}}/>
+    <Widget name='separator' query={{}} height={300}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart
+    final theme = context.theme;
+    final colorScheme = theme.colorScheme;
+    final typography = theme.typography;
+
     Padding(
       padding: const EdgeInsets.all(16),
       child: Column(

docs/pages/docs/switch.mdx

@@ -14,8 +14,8 @@ A switch that allows the user to toggle between checked and unchecked.
 
     ValueListenableBuilder(
       valueListenable: notifier,
-      builder: (context, _, __) => FSwitch(
-        value: notifier.value,
+      builder: (context, value, __) => FSwitch(
+        value: value,
         onChanged: (value) => notifier.value = value,
       ),
     );

docs/pages/docs/tabs.mdx

@@ -6,7 +6,7 @@ A set of layered sections of content—known as tab entries—that are displayed
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='tabs' query={{}}/>
+    <Widget name='tabs' query={{}} height={500}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart

forui/lib/src/widgets/header/header.dart

@@ -125,7 +125,7 @@ final class FHeaderStyle with Diagnosticable {
           height: 1,
         ),
         action = FHeaderActionStyle.inherit(colorScheme: colorScheme),
-        padding = style.pagePadding.copyWith(bottom: 10);
+        padding = style.pagePadding.copyWith(bottom: 15);
 
   /// Returns a copy of this [FHeaderStyle] with the given properties replaced.
   ///

forui/lib/src/widgets/switch.dart

@@ -153,10 +153,7 @@ final class FSwitchStyle with Diagnosticable {
       : checkedColor = colorScheme.primary,
         uncheckedColor = colorScheme.border,
         thumbColor = colorScheme.background,
-        focusColor = HSLColor.fromColor(colorScheme.primary.withOpacity(0.80))
-            .withLightness(0.69)
-            .withSaturation(0.835)
-            .toColor();
+        focusColor = colorScheme.primary;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {

samples/lib/sample_scaffold.dart

@@ -14,19 +14,20 @@ abstract class SampleScaffold extends StatelessWidget {
   SampleScaffold({
     String theme = 'zinc-light',
     super.key,
-  }):
-    theme = themes[theme]!;
+  }) : theme = themes[theme]!;
 
   @override
   Widget build(BuildContext context) => FTheme(
-      data: theme,
-      child: FScaffold(
-
-        content: Center(
-        child: child(context),
-      ),
-    ),
-  );
+        data: theme,
+        child: FScaffold(
+          content: Center(
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxWidth: 600),
+              child: child(context),
+            ),
+          ),
+        ),
+      );
 
   Widget child(BuildContext context);
 }

samples/lib/widgets/scaffold.dart

@@ -12,46 +12,56 @@ class ScaffoldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => FScaffold(
-        header: FHeader(
-          title: 'Settings',
-          actions: [
-            FHeaderAction(
-              icon: FAssets.icons.ellipsis,
-              onPress: () {},
-            ),
-          ],
-        ),
-        content: ListView(
-          children: [
-            FCard(
-              title: 'Account',
-              subtitle: 'Make changes to your account here. Click save when you are done.',
-              child: Padding(
-                padding: const EdgeInsets.only(top: 10),
-                child: Column(
-                  children: [
-                    const FTextField(
-                      label: 'Name',
-                      hint: 'John Renalo',
-                    ),
-                    const SizedBox(height: 10),
-                    const FTextField(
-                      label: 'Email',
-                      hint: '[email protected]',
-                    ),
-                    Padding(
-                      padding: const EdgeInsets.only(top: 24, bottom: 16),
-                      child: FButton(
-                        label: 'Save',
-                        onPress: () {},
+  Widget child(BuildContext context) => Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      const SizedBox(height: 30),
+      SizedBox(
+        height: 420,
+        child: FScaffold(
+              header: FHeader(
+                title: 'Settings',
+                actions: [
+                  FHeaderAction(
+                    icon: FAssets.icons.ellipsis,
+                    onPress: () {},
+                  ),
+                ],
+              ),
+              content: Column(
+                children: [
+                  const SizedBox(height: 5),
+                  FCard(
+                    title: 'Account',
+                    subtitle: 'Make changes to your account here. Click save when you are done.',
+                    child: Padding(
+                      padding: const EdgeInsets.only(top: 10),
+                      child: Column(
+                        children: [
+                          const FTextField(
+                            label: 'Name',
+                            hint: 'John Renalo',
+                          ),
+                          const SizedBox(height: 10),
+                          const FTextField(
+                            label: 'Email',
+                            hint: '[email protected]',
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 24, bottom: 16),
+                            child: FButton(
+                              label: 'Save',
+                              onPress: () {},
+                            ),
+                          ),
+                        ],
                       ),
                     ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
-          ],
-        ),
-      );
+      ),
+    ],
+  );
 }

samples/lib/widgets/separator.dart

@@ -13,50 +13,54 @@ class SeparatorPage extends SampleScaffold {
 
   @override
   Widget child(BuildContext context) {
-    final theme = context.theme;
     final colorScheme = theme.colorScheme;
     final typography = theme.typography;
 
     return Padding(
       padding: const EdgeInsets.all(16),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text(
-            'Flutter Forui',
-            style: typography.xl2.copyWith(
-              color: colorScheme.foreground,
-              fontWeight: FontWeight.w600,
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 300),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              'Flutter Forui',
+              style: typography.xl2.copyWith(
+                color: colorScheme.foreground,
+                fontWeight: FontWeight.w600,
+              ),
             ),
-          ),
-          Text(
-            'An open-source widget library.',
-            style: typography.sm.copyWith(color: colorScheme.mutedForeground),
-          ),
-          const FSeparator(),
-          SizedBox(
-            height: 30,
-            child: Row(
-              children: [
-                Text(
-                  'Blog',
-                  style: typography.sm.copyWith(color: colorScheme.foreground),
-                ),
-                const FSeparator(vertical: true),
-                Text(
-                  'Docs',
-                  style: typography.sm.copyWith(color: colorScheme.foreground),
-                ),
-                const FSeparator(vertical: true),
-                Text(
-                  'Source',
-                  style: typography.sm.copyWith(color: colorScheme.foreground),
-                ),
-              ],
+            Text(
+              'An open-source widget library.',
+              style: typography.sm.copyWith(color: colorScheme.mutedForeground),
             ),
-          ),
-        ],
+            const FSeparator(),
+            SizedBox(
+              height: 30,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    'Blog',
+                    style: typography.sm.copyWith(color: colorScheme.foreground),
+                  ),
+                  const FSeparator(vertical: true),
+                  Text(
+                    'Docs',
+                    style: typography.sm.copyWith(color: colorScheme.foreground),
+                  ),
+                  const FSeparator(vertical: true),
+                  Text(
+                    'Source',
+                    style: typography.sm.copyWith(color: colorScheme.foreground),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

samples/lib/widgets/switch.dart

@@ -18,10 +18,10 @@ class SwitchPage extends SampleScaffold {
       padding: const EdgeInsets.all(16),
       child: ValueListenableBuilder(
         valueListenable: notifier,
-        builder: (context, _, __) => FSwitch(
-          value: true,
+        builder: (context, value, __) => FSwitch(
+          value: value,
           autofocus: true,
-          onChanged: (value) {},
+          onChanged: (value) => notifier.value = value,
         ),
       ),
     );