Fix various issues

docs/pages/docs/calendar.mdx

@@ -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),
   ),
@@ -55,7 +55,7 @@ FCalendar(
     <Tabs.Tab>
         ```dart
         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
         FCalendar(
-          controller: FCalendarMultiValueController(
+          controller: FCalendarController.dates(
             initialSelections: {DateTime.utc(2024, 7, 17), DateTime.utc(2024, 7, 20)},
           ),
           start: DateTime.utc(2000),
@@ -90,7 +90,7 @@ FCalendar(
     <Tabs.Tab>
       ```dart
       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),
         ),
@@ -110,7 +110,7 @@ FCalendar(
     <Tabs.Tab>
         ```dart
         FCalendar(
-          controller: FCalendarRangeController(
+          controller: FCalendarController.range(
             initialSelection: (DateTime.utc(2024, 7, 17), DateTime.utc(2024, 7, 20)),
           ),
           start: DateTime.utc(2000),

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),

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(...)
 );

docs/pages/docs/themes.mdx

@@ -49,7 +49,8 @@ The color schemes are heavily inspired by [shadcn/ui themes](https://ui.shadcn.c
 
 ## Usage
 
-`FTheme` uses inherited widgets to provide the `FThemeData` to all widgets in the subtree.
+[`FTheme`](https://pub.dev/documentation/forui/latest/forui.theme/FTheme-class.html) uses inherited widgets to provide the
+[`FThemeData`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData-class.html) to all widgets in the subtree.
 Forui provides an extension on `BuildContext` which allows for direct access to `FThemeData` through `context.theme`.
 
 ```dart {3-6}
@@ -65,18 +66,19 @@ Widget build(BuildContext context) {
 ```
 
 A high level overview of the theme data structure is as follows:
-- **`FThemeData`** contains `FColorScheme`, `FTypography`, `FStyle`, and widget styles (eg. `FCardStyle`).
-- **`FColorScheme`** contains the color scheme (eg. `background`, `foreground`, and `primary`).
-- **`FTypography`** contains the `defaultFontFamily` and various `TextStyle`s.
-- **`FStyle`** contains other miscellaneous styling options (eg. `borderRadius`).
+- [**`FThemeData`**](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData-class.html) contains `FColorScheme`, `FTypography`, `FStyle`, and widget styles (eg. `FCardStyle`).
+- [**`FColorScheme`**](https://pub.dev/documentation/forui/latest/forui.theme/FColorScheme-class.html) contains the color scheme (eg. `background`, `foreground`, and `primary`).
+- [**`FTypography`**](https://pub.dev/documentation/forui/latest/forui.theme/FTypography-class.html) contains the `defaultFontFamily` and various `TextStyle`s.
+- [**`FStyle`**](https://pub.dev/documentation/forui/latest/forui.theme/FStyle-class.html) contains other miscellaneous styling options (eg. `borderRadius`).
 
 A more detailed explanation of each class can be found in the [Class Diagram](#class-diagram) section.
 
 
 ## Customize Themes
 
-It's recommended to use the predefined themes as a starting point and customize them with the `inhert(...)`[] constructor
-and `copyWith(...)` method to suit your needs.
+It's recommended to use the predefined themes as a starting point and customize them with the
+[`inhert(...)`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData/FThemeData.inherit.html) constructor
+and [`copyWith(...)`](https://pub.dev/documentation/forui/latest/forui.theme/FThemeData/copyWith.html) method to suit your needs.
 
 ```dart filename="main.dart" {3-14, 17-23}
 @override
@@ -114,6 +116,24 @@ The example above uses `FThemes.zinc.light` theme as a starting point and custom
 - Remove the `borderRadius` through the style.
 - Although we removed the `borderRadius` for all widgets, override the `borderRadius` to `8` for the `FCard()` widget.
 
+<Callout type="info">
+    It's important to use the newly created `theme` instead of `FThemes.zinc.light`. This allows `colorScheme`,
+    `typography`, and `style` to be inherited by widget-specific themes.
+
+    ```dart {3-4}
+    return FTheme(
+      data: theme.copyWith(
+        cardStyle: theme.cardStyle.copyWith(
+          decoration: theme.cardStyle.decoration.copyWith(
+            borderRadius: const BorderRadius.all(Radius.circular(8)),
+          ),
+        ),
+      ),
+      child: const FScaffold(...),
+    );
+    ```
+</Callout>
+
 While the example may seem overwhelming, most use cases will only require customizations to the `FColorScheme`, `FTypography`, and `FStyle` class.
 Sensible defaults for each Forui widget will be automatically inherited.
 

forui/CHANGELOG.md

@@ -18,9 +18,13 @@
 * **Breaking:** Rename `FCalendarEntryStyle.focusedTextStyle` to `FCalendarEntryStyle.hoveredTextStyle`.
   This only affects users that customized `FCalendarEntryStyle`.
 
-* **Breaking:** Rename `FCalendarSingleValueController` to `FCalendarValueController`.
+* **Breaking:** Move `FCalendarSingleValueController` to `FCalendarController.date(...)`.
 
-* **Breaking:** Rename `FCalendarSingleRangeController` to `FCalendarRangeController`.
+* **Breaking:** Move `FCalendarMultiValueController` to `FCalendarController.dates(...)`.
+
+* **Breaking:** Rename `FCalendarSingleRangeController` to `FCalendarRangeController.range(...)`.
+
+* **Breaking:** Rename `FSeparator` to `FDivider`.
 
 * **Breaking:** Remove `colorScheme`, `typography` and `style` parameters from `FThemeData.copyWith(...)`.
   The problem was widget-specific styles not being re-created after the removed parameters were updated.

forui/example/lib/example.dart

@@ -17,36 +17,26 @@ class _ExampleState extends State<Example> {
   }
 
   @override
-  Widget build(BuildContext context) => Column(
+  Widget build(BuildContext context) => Row(
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          DecoratedBox(
-            decoration: BoxDecoration(
-              border: Border.all(color: context.theme.colorScheme.border),
-              borderRadius: BorderRadius.circular(8),
-            ),
-            child: FResizable(
-              controller: FResizableController.cascade(),
-              axis: Axis.vertical,
-              divider: FResizableDivider.dividerThumb,
-              crossAxisExtent: 300,
-              children: [
-                FResizableRegion(
-                  initialExtent: 200,
-                  minExtent: 100,
-                  builder: (_, data, __) => Label(data: data, icon: FAssets.icons.sunrise, label: 'Morning'),
-                ),
-                FResizableRegion(
-                  initialExtent: 200,
-                  minExtent: 100,
-                  builder: (_, data, __) => Label(data: data, icon: FAssets.icons.sun, label: 'Afternoon'),
-                ),
-                FResizableRegion(
-                  initialExtent: 200,
-                  minExtent: 100,
-                  builder: (_, data, __) => Label(data: data, icon: FAssets.icons.sunset, label: 'Evening'),
-                ),
-              ],
-            ),
+          CircleAvatar(
+            child: Image.network('https://raw.githubusercontent.com/forus-labs/forui/main/samples/assets/avatar.png'),
+          ),
+          FAvatar(
+            image:
+                const NetworkImage('https://raw.githubusercontent.com/forus-labs/forui/main/samples/assets/avatar.png'),
+            semanticLabel: 'My profile picture',
+            fallback: const Text('MN'),
+          ),
+          const SizedBox(width: 10),
+          FAvatar(
+            image: const AssetImage(''),
+            fallback: const Text('MN'),
+          ),
+          const SizedBox(width: 10),
+          FAvatar(
+            image: const AssetImage(''),
           ),
         ],
       );

forui/lib/src/theme/theme_data.dart

@@ -52,6 +52,9 @@ final class FThemeData with Diagnosticable {
   /// The dialog style.
   final FDialogStyle dialogStyle;
 
+  /// The divider styles.
+  final FDividerStyles dividerStyles;
+
   /// The header styles.
   final FHeaderStyles headerStyle;
 
@@ -70,9 +73,6 @@ final class FThemeData with Diagnosticable {
   /// The scaffold style.
   final FScaffoldStyle scaffoldStyle;
 
-  /// The separator styles.
-  final FSeparatorStyles separatorStyles;
-
   /// The switch style.
   final FSwitchStyle switchStyle;
 
@@ -99,7 +99,7 @@ final class FThemeData with Diagnosticable {
     required this.tabsStyle,
     required this.textFieldStyle,
     required this.scaffoldStyle,
-    required this.separatorStyles,
+    required this.dividerStyles,
     required this.switchStyle,
     this.typography = const FTypography(),
     this.style = const FStyle(),
@@ -132,7 +132,7 @@ final class FThemeData with Diagnosticable {
       tabsStyle: FTabsStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       textFieldStyle: FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       scaffoldStyle: FScaffoldStyle.inherit(colorScheme: colorScheme, style: style),
-      separatorStyles: FSeparatorStyles.inherit(colorScheme: colorScheme, style: style),
+      dividerStyles: FDividerStyles.inherit(colorScheme: colorScheme, style: style),
       switchStyle: FSwitchStyle.inherit(colorScheme: colorScheme),
     );
   }
@@ -150,6 +150,38 @@ final class FThemeData with Diagnosticable {
   /// print(theme.alertStyles == copy.alertStyles); // true
   /// print(theme.avatarStyle == copy.avatarStyle); // false
   /// ```
+  ///
+  /// To modify [colorScheme], [typography], and/or [style], create a new `FThemeData` using [FThemeData.inherit] first.
+  /// This allows the global theme data to propagate to widget-specific theme data.
+  ///
+  /// ```dart
+  /// @override
+  /// Widget build(BuildContext context) {
+  ///   final theme = FThemeData.inherit(
+  ///     colorScheme: FThemes.zinc.light.colorScheme.copyWith(
+  ///       primary: const Color(0xFF0D47A1), // dark blue
+  ///       primaryForeground: const Color(0xFFFFFFFF), // white
+  ///     ),
+  ///     typography: FThemes.zinc.light.typography.copyWith(
+  ///       defaultFontFamily: 'Roboto',
+  ///     ).scale(sizeScalar: 0.8),
+  ///     style: FThemes.zinc.light.style.copyWith(
+  ///       borderRadius: BorderRadius.zero,
+  ///     ),
+  ///   );
+  ///
+  ///   return FTheme(
+  ///     data: theme.copyWith(
+  ///       cardStyle: theme.cardStyle.copyWith(
+  ///         decoration: theme.cardStyle.decoration.copyWith(
+  ///           borderRadius: const BorderRadius.all(Radius.circular(8)),
+  ///         ),
+  ///       ),
+  ///     ),
+  ///     child: const FScaffold(...),
+  ///   );
+  /// }
+  ///```
   @useResult
   FThemeData copyWith({
     FAlertStyles? alertStyles,
@@ -167,7 +199,7 @@ final class FThemeData with Diagnosticable {
     FTabsStyle? tabsStyle,
     FTextFieldStyle? textFieldStyle,
     FScaffoldStyle? scaffoldStyle,
-    FSeparatorStyles? separatorStyles,
+    FDividerStyles? dividerStyles,
     FSwitchStyle? switchStyle,
   }) =>
       FThemeData(
@@ -183,13 +215,13 @@ final class FThemeData with Diagnosticable {
         cardStyle: cardStyle ?? this.cardStyle,
         checkboxStyle: checkboxStyle ?? this.checkboxStyle,
         dialogStyle: dialogStyle ?? this.dialogStyle,
+        dividerStyles: dividerStyles ?? this.dividerStyles,
         headerStyle: headerStyle ?? this.headerStyle,
         progressStyle: progressStyle ?? this.progressStyle,
         resizableStyle: resizableStyle ?? this.resizableStyle,
         tabsStyle: tabsStyle ?? this.tabsStyle,
         textFieldStyle: textFieldStyle ?? this.textFieldStyle,
         scaffoldStyle: scaffoldStyle ?? this.scaffoldStyle,
-        separatorStyles: separatorStyles ?? this.separatorStyles,
         switchStyle: switchStyle ?? this.switchStyle,
       );
 
@@ -215,7 +247,7 @@ final class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('tabsStyle', tabsStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('textFieldStyle', textFieldStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('scaffoldStyle', scaffoldStyle, level: DiagnosticLevel.debug))
-      ..add(DiagnosticsProperty('separatorStyles', separatorStyles, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty('separatorStyles', dividerStyles, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('switchStyle', switchStyle, level: DiagnosticLevel.debug));
   }
 
@@ -242,7 +274,7 @@ final class FThemeData with Diagnosticable {
           tabsStyle == other.tabsStyle &&
           textFieldStyle == other.textFieldStyle &&
           scaffoldStyle == other.scaffoldStyle &&
-          separatorStyles == other.separatorStyles &&
+          dividerStyles == other.dividerStyles &&
           switchStyle == other.switchStyle;
 
   @override
@@ -265,6 +297,6 @@ final class FThemeData with Diagnosticable {
       tabsStyle.hashCode ^
       textFieldStyle.hashCode ^
       scaffoldStyle.hashCode ^
-      separatorStyles.hashCode ^
+      dividerStyles.hashCode ^
       switchStyle.hashCode;
 }