From 79a56c1c97e6ccce958535a51d90502ed03117ae Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 22:00:36 +0800
Subject: [PATCH 01/11] Fix documentation bug

---
 forui/lib/src/widgets/switch.dart  | 5 +----
 samples/lib/widgets/separator.dart | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/forui/lib/src/widgets/switch.dart b/forui/lib/src/widgets/switch.dart
index 851218efe..22b6f0da5 100644
--- a/forui/lib/src/widgets/switch.dart
+++ b/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) {
diff --git a/samples/lib/widgets/separator.dart b/samples/lib/widgets/separator.dart
index 03f9cdc06..e31749d9d 100644
--- a/samples/lib/widgets/separator.dart
+++ b/samples/lib/widgets/separator.dart
@@ -13,7 +13,6 @@ class SeparatorPage extends SampleScaffold {
 
   @override
   Widget child(BuildContext context) {
-    final theme = context.theme;
     final colorScheme = theme.colorScheme;
     final typography = theme.typography;
 

From d79591509a0a6898348f45a1037fe738841368a5 Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 22:05:54 +0800
Subject: [PATCH 02/11] Add separator

---
 docs/pages/docs/separator.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/pages/docs/separator.mdx b/docs/pages/docs/separator.mdx
index 965a8b8dc..dc2bb4ef8 100644
--- a/docs/pages/docs/separator.mdx
+++ b/docs/pages/docs/separator.mdx
@@ -10,6 +10,10 @@ Visually or semantically separates content.
   </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(

From aa7b0d644def22f2c70bbba89a616fcaee38d6b2 Mon Sep 17 00:00:00 2001
From: Daviiddoo <Davidchew12345@gmail.com>
Date: Tue, 25 Jun 2024 22:05:58 +0800
Subject: [PATCH 03/11] fixes from david

---
 docs/.env.development              | 2 +-
 docs/components/widget.tsx         | 5 ++---
 samples/lib/sample_scaffold.dart   | 1 -
 samples/lib/widgets/separator.dart | 1 -
 4 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/docs/.env.development b/docs/.env.development
index e348e032b..e3549b1a8 100644
--- a/docs/.env.development
+++ b/docs/.env.development
@@ -1 +1 @@
-NEXT_PUBLIC_DEMO_URL=https://demo.master.forui.dev/card
\ No newline at end of file
+NEXT_PUBLIC_DEMO_URL=https://demo.forui.dev
\ No newline at end of file
diff --git a/docs/components/widget.tsx b/docs/components/widget.tsx
index 667bc5b09..64681a42b 100644
--- a/docs/components/widget.tsx
+++ b/docs/components/widget.tsx
@@ -8,15 +8,14 @@ interface Props {
 
 export function Widget({name, variant = 'default', 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"
             src={`${url}/${name}/${variant}?${new URLSearchParams(query).toString()}`}
-            width={0}
-            height={0}
         />
     );
 }
diff --git a/samples/lib/sample_scaffold.dart b/samples/lib/sample_scaffold.dart
index 7591528f0..4267865d3 100644
--- a/samples/lib/sample_scaffold.dart
+++ b/samples/lib/sample_scaffold.dart
@@ -21,7 +21,6 @@ abstract class SampleScaffold extends StatelessWidget {
   Widget build(BuildContext context) => FTheme(
       data: theme,
       child: FScaffold(
-
         content: Center(
         child: child(context),
       ),
diff --git a/samples/lib/widgets/separator.dart b/samples/lib/widgets/separator.dart
index e31749d9d..4c4599d52 100644
--- a/samples/lib/widgets/separator.dart
+++ b/samples/lib/widgets/separator.dart
@@ -20,7 +20,6 @@ class SeparatorPage extends SampleScaffold {
       padding: const EdgeInsets.all(16),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
             'Flutter Forui',

From 2eebe500804a4675ea268c988b7ef6a2017f5a0d Mon Sep 17 00:00:00 2001
From: Joe <kawaijoe@gmail.com>
Date: Tue, 25 Jun 2024 22:13:52 +0800
Subject: [PATCH 04/11] Update widget component

---
 docs/components/widget.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/components/widget.tsx b/docs/components/widget.tsx
index 64681a42b..3048f588f 100644
--- a/docs/components/widget.tsx
+++ b/docs/components/widget.tsx
@@ -3,10 +3,11 @@ 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'] = `zinc-${resolvedTheme}`;
 
@@ -14,7 +15,8 @@ export function Widget({name, variant = 'default', query}: Props) {
 
     return (
         <iframe
-            className="w-full border rounded"
+            className="w-full border rounded dark:border-neutral-400/20"
+            style={{height: `${height}px`}}
             src={`${url}/${name}/${variant}?${new URLSearchParams(query).toString()}`}
         />
     );

From 1c360264a127314e7deeb9e22cb387968f9a7690 Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 22:25:40 +0800
Subject: [PATCH 05/11] Adjust textfield vertical padding

---
 samples/lib/widgets/text_field.dart | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/samples/lib/widgets/text_field.dart b/samples/lib/widgets/text_field.dart
index db6b07370..ee4c049a3 100644
--- a/samples/lib/widgets/text_field.dart
+++ b/samples/lib/widgets/text_field.dart
@@ -16,7 +16,7 @@ class TextFieldPage extends SampleScaffold {
 
   @override
   Widget child(BuildContext context) => Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:10),
+    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
     child: FTextField(
       enabled: enabled,
       label: 'Email',
@@ -34,7 +34,7 @@ class PasswordTextFieldPage extends SampleScaffold {
 
   @override
   Widget child(BuildContext context) => Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:10),
+    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
     child: FTextField.password(
       controller: TextEditingController(text: 'My password'),
       label: 'Password',
@@ -51,7 +51,7 @@ class MultilineTextFieldPage extends SampleScaffold {
 
   @override
   Widget child(BuildContext context) => const Padding(
-    padding: EdgeInsets.symmetric(horizontal: 20, vertical:10),
+    padding: EdgeInsets.symmetric(horizontal: 20, vertical:30),
     child: FTextField.multiline(
       label: 'Leave a review',
     ),

From d3d8b0b7781a2ba46c81f78a7e06a1a89d26b73c Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 22:41:44 +0800
Subject: [PATCH 06/11] Make switch stateful

---
 samples/lib/widgets/switch.dart | 44 +++++++++++++++++++++++----------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/samples/lib/widgets/switch.dart b/samples/lib/widgets/switch.dart
index 848582e35..cc8330697 100644
--- a/samples/lib/widgets/switch.dart
+++ b/samples/lib/widgets/switch.dart
@@ -12,18 +12,36 @@ class SwitchPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) {
-    final notifier = ValueNotifier(false);
-    return Padding(
-      padding: const EdgeInsets.all(16),
-      child: ValueListenableBuilder(
-        valueListenable: notifier,
-        builder: (context, _, __) => FSwitch(
-          value: true,
-          autofocus: true,
-          onChanged: (value) {},
-        ),
-      ),
-    );
+  Widget child(BuildContext context) => const Switch();
+}
+
+class Switch extends StatefulWidget {
+  const Switch({super.key});
+
+  @override
+  State<Switch> createState() => _SwitchState();
+}
+
+class _SwitchState extends State<Switch> {
+  late final ValueNotifier<bool> notifier;
+
+  @override
+  void initState() {
+    super.initState();
+    notifier = ValueNotifier(false);
   }
+
+  @override
+  Widget build(BuildContext context) => Padding(
+    padding: const EdgeInsets.all(16),
+    child: ValueListenableBuilder(
+      valueListenable: notifier,
+      builder: (context, _, __) => FSwitch(
+        value: true,
+        autofocus: true,
+        onChanged: (value) {},
+      ),
+    ),
+  );
 }
+

From 23417f04fa0ca69fd5763ec789c888e9d4f93793 Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 22:44:32 +0800
Subject: [PATCH 07/11] Fix switch

---
 samples/lib/widgets/switch.dart | 44 ++++++++++-----------------------
 1 file changed, 13 insertions(+), 31 deletions(-)

diff --git a/samples/lib/widgets/switch.dart b/samples/lib/widgets/switch.dart
index cc8330697..44bbc759a 100644
--- a/samples/lib/widgets/switch.dart
+++ b/samples/lib/widgets/switch.dart
@@ -12,36 +12,18 @@ class SwitchPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => const Switch();
-}
-
-class Switch extends StatefulWidget {
-  const Switch({super.key});
-
-  @override
-  State<Switch> createState() => _SwitchState();
-}
-
-class _SwitchState extends State<Switch> {
-  late final ValueNotifier<bool> notifier;
-
-  @override
-  void initState() {
-    super.initState();
-    notifier = ValueNotifier(false);
-  }
-
-  @override
-  Widget build(BuildContext context) => Padding(
-    padding: const EdgeInsets.all(16),
-    child: ValueListenableBuilder(
-      valueListenable: notifier,
-      builder: (context, _, __) => FSwitch(
-        value: true,
-        autofocus: true,
-        onChanged: (value) {},
+  Widget child(BuildContext context) {
+    final notifier = ValueNotifier(false);
+    return Padding(
+      padding: const EdgeInsets.all(16),
+      child: ValueListenableBuilder(
+        valueListenable: notifier,
+        builder: (context, _, __) => FSwitch(
+          value: notifier.value,
+          autofocus: true,
+          onChanged: (value) => notifier.value = value,
+        ),
       ),
-    ),
-  );
+    );
+  }
 }
-

From e9163d806d8aff5bba57f9f4eefa53a2431bd371 Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 22:46:42 +0800
Subject: [PATCH 08/11] Fix switch again

---
 samples/lib/widgets/switch.dart | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/lib/widgets/switch.dart b/samples/lib/widgets/switch.dart
index 44bbc759a..20227d1f8 100644
--- a/samples/lib/widgets/switch.dart
+++ b/samples/lib/widgets/switch.dart
@@ -21,7 +21,7 @@ class SwitchPage extends SampleScaffold {
         builder: (context, _, __) => FSwitch(
           value: notifier.value,
           autofocus: true,
-          onChanged: (value) => notifier.value = value,
+          onChanged: (value) => notifier.value = !value,
         ),
       ),
     );

From b36f1f81e7e2d88cf3f7a8ae097fc5a6d9afc46d Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 22:48:18 +0800
Subject: [PATCH 09/11] again

---
 docs/pages/docs/switch.mdx      | 4 ++--
 samples/lib/widgets/switch.dart | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/pages/docs/switch.mdx b/docs/pages/docs/switch.mdx
index b5d56c89a..fd978942b 100644
--- a/docs/pages/docs/switch.mdx
+++ b/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,
       ),
     );
diff --git a/samples/lib/widgets/switch.dart b/samples/lib/widgets/switch.dart
index 20227d1f8..ed5e4138b 100644
--- a/samples/lib/widgets/switch.dart
+++ b/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: notifier.value,
+        builder: (context, value, __) => FSwitch(
+          value: value,
           autofocus: true,
-          onChanged: (value) => notifier.value = !value,
+          onChanged: (value) => notifier.value = value,
         ),
       ),
     );

From 262757734be8f2dfc28171478bcd04fce1cfff1e Mon Sep 17 00:00:00 2001
From: Daviiddoo <Davidchew12345@gmail.com>
Date: Tue, 25 Jun 2024 23:00:42 +0800
Subject: [PATCH 10/11] Doc height and width adjustments

---
 docs/.env.development                    |   2 +-
 docs/pages/docs/dialog.mdx               |   2 +-
 docs/pages/docs/scaffold.mdx             |   2 +-
 docs/pages/docs/separator.mdx            |   2 +-
 docs/pages/docs/tabs.mdx                 |   2 +-
 forui/lib/src/widgets/header/header.dart |   2 +-
 samples/lib/sample_scaffold.dart         |  20 ++--
 samples/lib/widgets/scaffold.dart        |  86 ++++++++++--------
 samples/lib/widgets/separator.dart       |  76 +++++++++-------
 samples/lib/widgets/tabs.dart            | 111 ++++++++++++-----------
 samples/lib/widgets/text_field.dart      |  51 +++++++----
 11 files changed, 197 insertions(+), 159 deletions(-)

diff --git a/docs/.env.development b/docs/.env.development
index e3549b1a8..d46828e14 100644
--- a/docs/.env.development
+++ b/docs/.env.development
@@ -1 +1 @@
-NEXT_PUBLIC_DEMO_URL=https://demo.forui.dev
\ No newline at end of file
+NEXT_PUBLIC_DEMO_URL=http://localhost:59874
\ No newline at end of file
diff --git a/docs/pages/docs/dialog.mdx b/docs/pages/docs/dialog.mdx
index 1723696cf..3db1c8fb8 100644
--- a/docs/pages/docs/dialog.mdx
+++ b/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
diff --git a/docs/pages/docs/scaffold.mdx b/docs/pages/docs/scaffold.mdx
index cc0539e03..2b46303e2 100644
--- a/docs/pages/docs/scaffold.mdx
+++ b/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
diff --git a/docs/pages/docs/separator.mdx b/docs/pages/docs/separator.mdx
index dc2bb4ef8..aad5f2b5c 100644
--- a/docs/pages/docs/separator.mdx
+++ b/docs/pages/docs/separator.mdx
@@ -6,7 +6,7 @@ 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
diff --git a/docs/pages/docs/tabs.mdx b/docs/pages/docs/tabs.mdx
index cb3c97882..855a6d1b0 100644
--- a/docs/pages/docs/tabs.mdx
+++ b/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
diff --git a/forui/lib/src/widgets/header/header.dart b/forui/lib/src/widgets/header/header.dart
index d1ab0b445..d3e0c4f5e 100644
--- a/forui/lib/src/widgets/header/header.dart
+++ b/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.
   ///
diff --git a/samples/lib/sample_scaffold.dart b/samples/lib/sample_scaffold.dart
index 4267865d3..e8775747c 100644
--- a/samples/lib/sample_scaffold.dart
+++ b/samples/lib/sample_scaffold.dart
@@ -14,18 +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);
 }
diff --git a/samples/lib/widgets/scaffold.dart b/samples/lib/widgets/scaffold.dart
index 38f084b3a..a2b22defc 100644
--- a/samples/lib/widgets/scaffold.dart
+++ b/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: 'john@doe.com',
-                    ),
-                    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: 'john@doe.com',
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 24, bottom: 16),
+                            child: FButton(
+                              label: 'Save',
+                              onPress: () {},
+                            ),
+                          ),
+                        ],
                       ),
                     ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
-          ],
-        ),
-      );
+      ),
+    ],
+  );
 }
diff --git a/samples/lib/widgets/separator.dart b/samples/lib/widgets/separator.dart
index 4c4599d52..2585268d4 100644
--- a/samples/lib/widgets/separator.dart
+++ b/samples/lib/widgets/separator.dart
@@ -18,43 +18,49 @@ class SeparatorPage extends SampleScaffold {
 
     return Padding(
       padding: const EdgeInsets.all(16),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        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),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
diff --git a/samples/lib/widgets/tabs.dart b/samples/lib/widgets/tabs.dart
index f83131209..1d3ff1c3d 100644
--- a/samples/lib/widgets/tabs.dart
+++ b/samples/lib/widgets/tabs.dart
@@ -12,65 +12,70 @@ class TabsPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => Padding(
-        padding: const EdgeInsets.all(16),
-        child: FTabs(
-          tabs: [
-            FTabEntry(
-              label: 'Account',
-              content: 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',
+  Widget child(BuildContext context) => Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: FTabs(
+              tabs: [
+                FTabEntry(
+                  label: 'Account',
+                  content: 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: 'john@doe.com',
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 24, bottom: 16),
+                            child: FButton(
+                              label: 'Save',
+                              onPress: () {},
+                            ),
+                          ),
+                        ],
                       ),
-                      const SizedBox(height: 10),
-                      const FTextField(
-                        label: 'Email',
-                        hint: 'john@doe.com',
-                      ),
-                      Padding(
-                        padding: const EdgeInsets.only(top: 24, bottom: 16),
-                        child: FButton(
-                          label: 'Save',
-                          onPress: () {},
-                        ),
-                      ),
-                    ],
+                    ),
                   ),
                 ),
-              ),
-            ),
-            FTabEntry(
-              label: 'Password',
-              content: FCard(
-                title: 'Password',
-                subtitle: 'Change your password here. After saving, you will be logged out.',
-                child: Padding(
-                  padding: const EdgeInsets.only(top: 10),
-                  child: Column(
-                    children: [
-                      const FTextField(label: 'Current password'),
-                      const SizedBox(height: 10),
-                      const FTextField(label: 'New password'),
-                      Padding(
-                        padding: const EdgeInsets.only(top: 24, bottom: 16),
-                        child: FButton(
-                          label: 'Save',
-                          onPress: () {},
-                        ),
+                FTabEntry(
+                  label: 'Password',
+                  content: FCard(
+                    title: 'Password',
+                    subtitle: 'Change your password here. After saving, you will be logged out.',
+                    child: Padding(
+                      padding: const EdgeInsets.only(top: 10),
+                      child: Column(
+                        children: [
+                          const FTextField(label: 'Current password'),
+                          const SizedBox(height: 10),
+                          const FTextField(label: 'New password'),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 24, bottom: 16),
+                            child: FButton(
+                              label: 'Save',
+                              onPress: () {},
+                            ),
+                          ),
+                        ],
                       ),
-                    ],
+                    ),
                   ),
                 ),
-              ),
+              ],
             ),
-          ],
-        ),
+          ),
+        ],
       );
 }
diff --git a/samples/lib/widgets/text_field.dart b/samples/lib/widgets/text_field.dart
index ee4c049a3..0d6bf966e 100644
--- a/samples/lib/widgets/text_field.dart
+++ b/samples/lib/widgets/text_field.dart
@@ -15,13 +15,18 @@ class TextFieldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
-    child: FTextField(
-      enabled: enabled,
-      label: 'Email',
-      hint: 'john@doe.com',
-    ),
+  Widget child(BuildContext context) => Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
+        child: FTextField(
+          enabled: enabled,
+          label: 'Email',
+          hint: 'john@doe.com',
+        ),
+      ),
+    ],
   );
 }
 
@@ -33,12 +38,17 @@ class PasswordTextFieldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
-    child: FTextField.password(
-      controller: TextEditingController(text: 'My password'),
-      label: 'Password',
-    ),
+  Widget child(BuildContext context) => Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
+        child: FTextField.password(
+          controller: TextEditingController(text: 'My password'),
+          label: 'Password',
+        ),
+      ),
+    ],
   );
 }
 
@@ -50,10 +60,15 @@ class MultilineTextFieldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => const Padding(
-    padding: EdgeInsets.symmetric(horizontal: 20, vertical:30),
-    child: FTextField.multiline(
-      label: 'Leave a review',
-    ),
+  Widget child(BuildContext context) => const Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      Padding(
+        padding: EdgeInsets.symmetric(horizontal: 20, vertical:30),
+        child: FTextField.multiline(
+          label: 'Leave a review',
+        ),
+      ),
+    ],
   );
 }

From 93156426516490a06f1ab5d58e6ca31bdee9d6fb Mon Sep 17 00:00:00 2001
From: Daviiddoo <Davidchew12345@gmail.com>
Date: Tue, 25 Jun 2024 23:02:49 +0800
Subject: [PATCH 11/11] Update .env.development

---
 docs/.env.development | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.env.development b/docs/.env.development
index d46828e14..5678937ad 100644
--- a/docs/.env.development
+++ b/docs/.env.development
@@ -1 +1 @@
-NEXT_PUBLIC_DEMO_URL=http://localhost:59874
\ No newline at end of file
+NEXT_PUBLIC_DEMO_URL=https://dev.demo.forui.dev
\ No newline at end of file