Fix various issues

docs/pages/docs/alert.mdx

@@ -53,7 +53,7 @@ FAlert(
     <Widget name='alert' query={{style: 'destructive'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {4}
     FAlert(
       title: const Text('Heads Up!'),
       subtitle: const Text('You can add components to your app using the cli.'),

docs/pages/docs/avatar.mdx

@@ -13,21 +13,21 @@ An image element with a fallback for representing the user.
       Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          // With Valid image.
+          // With valid image.
           FAvatar(
             image: const NetworkImage('https://raw.githubusercontent.com/forus-labs/forui/main/samples/assets/avatar.png'),
             fallback: const Text('MN'),
           ),
           const SizedBox(width: 10),
 
-          // With Invalid image and fallback.
+          // With invalid image and fallback.
           FAvatar(
             image: const NetworkImage(''),
             fallback: const Text('MN'),
           ),
           const SizedBox(width: 10),
 
-          // With Invalid image without fallback.
+          // With invalid image without fallback.
           FAvatar(image: const NetworkImage('')),
         ],
       );
@@ -62,7 +62,7 @@ FAvatar.raw(child: const Text('MN'));
 
 ## Examples
 
-### Invalid image
+### Invalid Image
 <Tabs items={['Preview', 'Code']}>
     <Tabs.Tab>
         <Widget name='avatar' variant='invalid' query={{}}/>
@@ -87,7 +87,7 @@ FAvatar.raw(child: const Text('MN'));
     </Tabs.Tab>
 </Tabs>
 
-### Without fallback
+### Raw Constructor
 <Tabs items={['Preview', 'Code']}>
     <Tabs.Tab>
         <Widget name='avatar' variant='raw' query={{}}/>

docs/pages/docs/badge.mdx

@@ -48,7 +48,7 @@ FBadge.raw(builder: (context, style) => Text('Badge'));
       <Widget name='badge' query={{style: 'secondary'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-      ```dart
+      ```dart {3}
       FBadge(
         label: const Text('Badge'),
         style: FBadgeStyle.secondary,
@@ -63,7 +63,7 @@ FBadge.raw(builder: (context, style) => Text('Badge'));
       <Widget name='badge' query={{style: 'outline'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-      ```dart
+      ```dart {3}
       FBadge(
         label: const Text('Badge'),
         style: FBadgeStyle.outline,
@@ -78,7 +78,7 @@ FBadge.raw(builder: (context, style) => Text('Badge'));
       <Widget name='badge' query={{style: 'destructive'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-      ```dart
+      ```dart {3}
       FBadge(
         label: const Text('Badge'),
         style: FBadgeStyle.destructive,

docs/pages/docs/button.mdx

@@ -61,7 +61,7 @@ FButton.raw(
     <Widget name='button' variant='text' query={{style: 'secondary'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {3}
     FButton(
       label: const Text('Button'),
       style: FButtonStyle.secondary,
@@ -77,7 +77,7 @@ FButton.raw(
     <Widget name='button' variant='text' query={{style: 'outline'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {3}
     FButton(
       label: const Text('Button'),
       style: FButtonStyle.outline,
@@ -93,7 +93,7 @@ FButton.raw(
     <Widget name='button' variant='text' query={{style: 'destructive'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {3}
     FButton(
       label: const Text('Button'),
       style: FButtonStyle.destructive,
@@ -109,7 +109,7 @@ FButton.raw(
     <Widget name='button' variant='icon' query={{}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {2}
     FButton(
       prefix: FButtonIcon(icon: FAssets.icons.mail),
       label: const Text('Login with Email'),

docs/pages/docs/calendar.mdx

@@ -7,7 +7,7 @@ A date field component that allows users to enter and edit date.
 The calendar pages are designed to be navigable through swipe gestures on mobile platforms, allowing left and right
 swipes to transition between pages.
 
-A [FCalendarController](https://pub.dev/documentation/forui/latest/forui.widgets/FCalendarController-class.html) is used
+A [`FCalendarController`](https://pub.dev/documentation/forui/latest/forui.widgets/FCalendarController-class.html) is used
 to customize the date selection behavior.
 
 <Tabs items={['Preview', 'Code']}>
@@ -17,7 +17,7 @@ to customize the date selection behavior.
     <Tabs.Tab>
         ```dart
         FCalendar(
-          controller: FCalendarValueController(initialSelection: selected),
+          controller: FCalendarController.date(initialSelection: selected),
           start: DateTime.utc(2000),
           end: DateTime.utc(2030),
         );
@@ -31,7 +31,7 @@ to customize the date selection behavior.
 
 ```dart
 FCalendar(
-  controller: FCalendarValueController(
+  controller: FCalendarController.date(
     initialSelection: DateTime.utc(2024, 9, 13),
     selectable: (date) => allowedDates.contains(date),
   ),
@@ -53,9 +53,9 @@ FCalendar(
         <Widget name='calendar' query={{}} height={500}/>
     </Tabs.Tab>
     <Tabs.Tab>
-        ```dart
+        ```dart {2}
         FCalendar(
-          controller: FCalendarSingleValueController(),
+          controller: FCalendarController.date(),
           start: DateTime.utc(2000),
           end: DateTime.utc(2030),
         );
@@ -66,12 +66,12 @@ FCalendar(
 ### Multiple Dates with Initial Selections
 <Tabs items={['Preview', 'Code']}>
     <Tabs.Tab>
-        <Widget name='calendar' variant='multi-value' query={{}} height={500}/>
+        <Widget name='calendar' variant='dates' query={{}} height={500}/>
     </Tabs.Tab>
     <Tabs.Tab>
-        ```dart
+        ```dart {2-4}
         FCalendar(
-          controller: FCalendarMultiValueController(
+          controller: FCalendarController.dates(
             initialSelections: {DateTime.utc(2024, 7, 17), DateTime.utc(2024, 7, 20)},
           ),
           start: DateTime.utc(2000),
@@ -88,9 +88,9 @@ FCalendar(
         <Widget name='calendar' variant='unselectable' query={{}} height={500}/>
     </Tabs.Tab>
     <Tabs.Tab>
-      ```dart
+      ```dart {4}
       FCalendar(
-        controller: FCalendarMultiValueController(
+        controller: FCalendarController.dates(
           initialSelections: {DateTime.utc(2024, 7, 17), DateTime.utc(2024, 7, 20)},
           selectable: (date) => !{DateTime.utc(2024, 7, 18), DateTime.utc(2024, 7, 19)}.contains(date),
         ),
@@ -108,9 +108,9 @@ FCalendar(
         <Widget name='calendar' variant='range' query={{}} height={500}/>
     </Tabs.Tab>
     <Tabs.Tab>
-        ```dart
+        ```dart {2-4}
         FCalendar(
-          controller: FCalendarRangeController(
+          controller: FCalendarController.range(
             initialSelection: (DateTime.utc(2024, 7, 17), DateTime.utc(2024, 7, 20)),
           ),
           start: DateTime.utc(2000),

docs/pages/docs/checkbox.mdx

@@ -39,7 +39,7 @@ FCheckbox(
     <Widget name='checkbox' query={{enabled: 'false'}}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {2}
     FCheckbox(
       enabled: false,
     );
@@ -54,7 +54,7 @@ FCheckbox(
     <Widget name='checkbox' variant='form' query={{}} height={550}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {37}
     class LoginForm extends StatefulWidget {
       const LoginForm({super.key});
 

docs/pages/docs/dialog.mdx

@@ -68,7 +68,7 @@ FDialog.raw(
     <Widget name='dialog' query={{vertical: "false"}} height={400}/>
   </Tabs.Tab>
   <Tabs.Tab>
-    ```dart
+    ```dart {10}
     Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
@@ -102,7 +102,7 @@ FDialog.raw(
     <Widget name='dialog' query={{vertical: "true"}} height={400}/>
   </Tabs.Tab>
   <Tabs.Tab>
-      ```dart
+      ```dart {10}
       Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [

docs/pages/docs/separator.mdx → docs/pages/docs/divider.mdx

@@ -1,12 +1,12 @@
 import { Tabs } from 'nextra/components';
 import { Widget } from "../../components/widget";
 
-# Separator
+# Divider
 Visually or semantically separates content.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='separator' query={{}} height={300}/>
+    <Widget name='divider' query={{}} height={300}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart
@@ -31,7 +31,7 @@ Visually or semantically separates content.
             'An open-source widget library.',
             style: typography.sm.copyWith(color: colorScheme.mutedForeground),
           ),
-          const FSeparator(),
+          const FDivider(),
           SizedBox(
             height: 30,
             child: Row(
@@ -40,12 +40,12 @@ Visually or semantically separates content.
                   'Blog',
                   style: typography.sm.copyWith(color: colorScheme.foreground),
                 ),
-                const FSeparator(vertical: true),
+                const FDivider(vertical: true),
                 Text(
                   'Docs',
                   style: typography.sm.copyWith(color: colorScheme.foreground),
                 ),
-                const FSeparator(vertical: true),
+                const FDivider(vertical: true),
                 Text(
                   'Source',
                   style: typography.sm.copyWith(color: colorScheme.foreground),
@@ -62,8 +62,8 @@ Visually or semantically separates content.
 
 ## Usage
 
-### `FSeparator(...)`
+### `FDivider(...)`
 
 ```dart
-FSeparator(vertical: true);
+FDivider(vertical: true);
 ```

docs/pages/docs/header.mdx

@@ -126,13 +126,13 @@ FHeader.nested(
   </Tabs.Tab>
 </Tabs>
 
-### Nested Header with back icon
+### Nested Header with Back Icon
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
     <Widget name='header' variant='nested' />
   </Tabs.Tab>
   <Tabs.Tab>
-        ```dart
+        ```dart {3-5}
         FHeader.nested(
           title: const Text('Appointment'),
           leftActions: [
@@ -153,13 +153,13 @@ FHeader.nested(
   </Tabs.Tab>
 </Tabs>
 
-### Nested Header with X icon
+### Nested Header with X Icon
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
     <Widget name='header' variant='nested-x' />
   </Tabs.Tab>
   <Tabs.Tab>
-        ```dart
+        ```dart {13-15}
         FHeader.nested(
           title: const Text('Climate'),
           leftActions: [

docs/pages/docs/index.mdx

@@ -19,10 +19,10 @@ flutter pub add forui
 ### Forui Icons
 
 <Callout type="info">
-    Forui Icons is bundled with forui package. You don't need to install it separately if you installed `forui`.
+    Forui Icons is bundled with the forui package. You don't need to install it separately if you install `forui`.
 </Callout>
 
-If you would like to only use the icon package, run the following command from your Flutter project directory.
+If you would like to only use the icons, run the following command from your Flutter project's directory.
 
 ```bash filename="bash"
 flutter pub add forui_assets
@@ -31,7 +31,8 @@ flutter pub add forui_assets
 
 ## Usage
 
-To use Forui widgets in your Flutter app, import the Forui package and place the `FTheme` widget at the root of the widget tree.
+To use Forui widgets in your Flutter app, import the Forui package and place the
+[`FTheme`](https://pub.dev/documentation/forui/latest/forui.theme/FTheme-class.html) widget at the root of the widget tree.
 
 ```dart filename="main.dart" {3,12-16}
 import 'package:flutter/widgets.dart';
@@ -75,7 +76,7 @@ Widget build(BuildContext context) => MaterialApp(
   // Other configurations...
   builder: (context, child) => FTheme(
     data: FThemes.zinc.light,
-    child: child,
+    child: child!,
   ),
   home: const FScaffold(...)
 );