Widget Categories for Docs (#223)

* Initial categories

* Replace links in docs

docs/pages/docs/_meta.ts

@@ -19,9 +19,13 @@ export default {
   },
   // TODO: Workaround for a seperator bug. Remove when patched.
   // A page need to be listed after a separator or else the order will be messed up.
-  accordion: 'Accordion',
+  layout: 'Layout',
+  form: 'Form',
+  data: 'Data Presentation',
+  navigation: 'Navigation',
+  feedback: 'Feedback',
+  overlay: 'Overlay',
   '*': {
     title: ''
   },
-
 };

docs/pages/docs/accordion.mdx → docs/pages/docs/data/accordion.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Accordion
 A vertically stacked set of interactive headings that each reveal a section of content.

docs/pages/docs/avatar.mdx → docs/pages/docs/data/avatar.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Avatar
 An image element with a fallback for representing the user.

docs/pages/docs/badge.mdx → docs/pages/docs/data/badge.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Badge
 A badge typically draws attention to specific information, such as labels and counts.

docs/pages/docs/card.mdx → docs/pages/docs/data/card.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Card
 A card, typically with a title, subtitle, and child widget.

docs/pages/docs/icon.mdx → docs/pages/docs/data/icon.mdx

@@ -1,8 +1,8 @@
 import { Tabs } from 'nextra/components';
 import { Callout } from "nextra/components";
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Icon
 An icon that inherits its style from an enclosing, supported widget, such as a [button](/docs/button).

docs/pages/docs/alert.mdx → docs/pages/docs/feedback/alert.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Alert
 Displays a callout for user attention.

docs/pages/docs/progress.mdx → docs/pages/docs/feedback/progress.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Progress
 Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

docs/pages/docs/button.mdx → docs/pages/docs/form/button.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Button
 A button.

docs/pages/docs/calendar.mdx → docs/pages/docs/form/calendar.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Calendar
 A date field component that allows users to enter and edit date.

docs/pages/docs/checkbox.mdx → docs/pages/docs/form/checkbox.mdx

@@ -1,7 +1,7 @@
 import {Callout, Tabs} from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Checkbox
 A control that allows the user to toggle between checked and not checked.

docs/pages/docs/label.mdx → docs/pages/docs/form/label.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Label
 Describes a form field with a label, description, and error message (if any). This widget is usually used for custom

docs/pages/docs/radio.mdx → docs/pages/docs/form/radio.mdx

@@ -1,7 +1,7 @@
 import {Callout, Tabs} from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Radio
 A radio button that typically allows the user to choose only one of a predefined set of options.

docs/pages/docs/select-group.mdx → docs/pages/docs/form/select-group.mdx

@@ -1,7 +1,7 @@
 import {Tabs} from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Select Group
 A set of items that are treated as a single selection.

docs/pages/docs/slider.mdx → docs/pages/docs/form/slider.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Slider
 An input where the user selects a value from within a given range.

docs/pages/docs/switch.mdx → docs/pages/docs/form/switch.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Switch
 A switch that allows the user to toggle between checked and unchecked.

docs/pages/docs/text-field.mdx → docs/pages/docs/form/text-field.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from '../../components/widget';
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from '../../../components/widget.tsx';
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Text Field
 A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. It can also be used

docs/pages/docs/divider.mdx → docs/pages/docs/layout/divider.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Divider
 Visually or semantically separates content.

docs/pages/docs/resizable.mdx → docs/pages/docs/layout/resizable.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Resizable
 A box which children can be resized along either the horizontal or vertical axis.

docs/pages/docs/scaffold.mdx → docs/pages/docs/layout/scaffold.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Scaffold
 Creates a visual scaffold for Forui widgets.

docs/pages/docs/bottom-navigation-bar.mdx → docs/pages/docs/navigation/bottom-navigation-bar.mdx

@@ -1,8 +1,8 @@
 import {Callout} from "nextra/components";
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Bottom Navigation Bar
 A bottom navigation bar is usually present at the bottom of root pages.

docs/pages/docs/header.mdx → docs/pages/docs/navigation/header.mdx

@@ -1,7 +1,7 @@
 import {Callout, Tabs} from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Header
 A header contains the page's title and navigation actions.

docs/pages/docs/tabs.mdx → docs/pages/docs/navigation/tabs.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Tabs
 A set of layered sections of content—known as tab entries—that are displayed one at a time.

docs/pages/docs/dialog.mdx → docs/pages/docs/overlay/dialog.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Dialog
 A modal dialog interrupts the user with important content and expects a response.

docs/pages/docs/popover.mdx → docs/pages/docs/overlay/popover.mdx

@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Popover
 A popover displays rich content in a portal that is aligned to a target.

docs/pages/docs/tooltip.mdx → docs/pages/docs/overlay/tooltip.mdx

@@ -1,8 +1,7 @@
-import { Callout } from "nextra/components";
 import { Tabs } from 'nextra/components';
-import { Widget } from "../../components/widget";
-import LinkBadge from "../../components/link-badge/link-badge";
-import LinkBadgeGroup from "../../components/link-badge/link-badge-group";
+import { Widget } from "../../../components/widget.tsx";
+import LinkBadge from "../../../components/link-badge/link-badge.tsx";
+import LinkBadgeGroup from "../../../components/link-badge/link-badge-group.tsx";
 
 # Tooltip
 A tooltip displays information related to a widget when focused, hovered over, and/or long pressed.

forui/lib/src/widgets/accordion/accordion.dart

@@ -8,7 +8,7 @@ import 'package:forui/forui.dart';
 /// A vertically stacked set of interactive headings that each reveal a section of content.
 ///
 /// See:
-/// * https://forui.dev/docs/accordion for working examples.
+/// * https://forui.dev/docs/data/accordion for working examples.
 /// * [FAccordionController] for customizing the accordion's behavior.
 /// * [FAccordionItem] for adding items to an accordion.
 /// * [FAccordionStyle] for customizing an accordion's appearance.

forui/lib/src/widgets/accordion/accordion_item.dart

@@ -11,7 +11,7 @@ import 'package:forui/src/widgets/accordion/accordion.dart';
 /// An interactive heading that reveals a section of content.
 ///
 /// See:
-/// * https://forui.dev/docs/accordion for working examples.
+/// * https://forui.dev/docs/data/accordion for working examples.
 class FAccordionItem extends StatefulWidget {
   /// The accordion's style. Defaults to [FThemeData.accordionStyle].
   final FAccordionStyle? style;

forui/lib/src/widgets/alert.dart

@@ -10,7 +10,7 @@ import 'package:forui/forui.dart';
 /// Displays a callout for user attention.
 ///
 /// See:
-/// * https://forui.dev/docs/alert for working examples.
+/// * https://forui.dev/docs/navigation/alert for working examples.
 /// * [FAlertStyle] for customizing an alert's appearance.
 class FAlert extends StatelessWidget {
   /// The icon. Defaults to [FAssets.icons.circleAlert].

forui/lib/src/widgets/avatar/avatar.dart

@@ -13,6 +13,9 @@ import 'package:forui/src/widgets/avatar/avatar_content.dart';
 ///
 /// If the user's profile has no image, use the fallback property to display the initials using a [Text] widget styled
 /// with [FAvatarStyle.backgroundColor].
+///
+/// See:
+/// * https://forui.dev/docs/data/avatar for working examples.
 class FAvatar extends StatelessWidget {
   /// The style. Defaults to [FThemeData.avatarStyle].
   final FAvatarStyle? style;

forui/lib/src/widgets/badge/badge.dart

@@ -11,7 +11,7 @@ import 'package:forui/src/widgets/badge/badge_content.dart';
 /// The constants in [FBadgeStyle] provide a convenient way to style a badge.
 ///
 /// See:
-/// * https://forui.dev/docs/badge for working examples.
+/// * https://forui.dev/docs/data/badge for working examples.
 /// * [FBadgeCustomStyle] for customizing a badge's appearance.
 class FBadge extends StatelessWidget {
   /// The style. Defaults to [FBadgeStyle.primary].

forui/lib/src/widgets/bottom_navigation_bar/bottom_navigation_bar.dart

@@ -12,7 +12,7 @@ import 'package:forui/src/foundation/tappable.dart';
 /// number of views, typically between three and five.
 ///
 /// See:
-/// * https://forui.dev/docs/bottom-navigation-bar for working examples.
+/// * https://forui.dev/docs/navigation/bottom-navigation-bar for working examples.
 /// * [FBottomNavigationBarStyle] for customizing a bottom navigation bar's appearance.
 /// * [FBottomNavigationBarItem] for the items in a bottom navigation bar.
 class FBottomNavigationBar extends StatelessWidget {

forui/lib/src/widgets/button/button.dart

@@ -15,7 +15,7 @@ import 'package:forui/src/widgets/button/button_content.dart';
 /// The constants in [FButtonStyle] provide a convenient way to style a badge.
 ///
 /// See:
-/// * https://forui.dev/docs/button for working examples.
+/// * https://forui.dev/docs/form/button for working examples.
 /// * [FButtonCustomStyle] for customizing a button's appearance.
 class FButton extends StatelessWidget {
   /// The style. Defaults to [FButtonStyle.primary].

forui/lib/src/widgets/calendar/calendar.dart

@@ -19,7 +19,7 @@ import 'package:forui/src/widgets/calendar/year_month_picker.dart';
 /// [DateTime]s outside [start] and [end] are unselectable regardless of the [FCalendarController] used.
 ///
 /// See:
-/// * https://forui.dev/docs/calendar for working examples.
+/// * https://forui.dev/docs/form/calendar for working examples.
 /// * [FCalendarController] for customizing a calendar's date selection behavior.
 /// * [FCalendarStyle] for customizing a calendar's appearance.
 class FCalendar extends StatelessWidget {

forui/lib/src/widgets/card/card.dart

@@ -11,7 +11,7 @@ import 'package:forui/src/widgets/card/card_content.dart';
 /// Card are typically used to group related information together.
 ///
 /// See:
-/// * https://forui.dev/docs/card for working examples.
+/// * https://forui.dev/docs/data/card for working examples.
 /// * [FCardStyle] for customizing a card's appearance.
 final class FCard extends StatelessWidget {
   /// The style. Defaults to [FThemeData.cardStyle].

forui/lib/src/widgets/checkbox.dart

@@ -11,7 +11,7 @@ import 'package:forui/forui.dart';
 /// For touch devices, a [FSwitch] is generally recommended over a [FCheckbox].
 ///
 /// See:
-/// * https://forui.dev/docs/checkbox for working examples.
+/// * https://forui.dev/docs/form/checkbox for working examples.
 /// * [FCheckboxStyle] for customizing a checkbox's appearance.
 class FCheckbox extends StatelessWidget {
   /// The style. Defaults to [FThemeData.checkboxStyle].

forui/lib/src/widgets/dialog/dialog.dart

@@ -13,7 +13,7 @@ import 'package:forui/src/widgets/dialog/dialog_content.dart';
 /// [showAdaptiveDialog] and [showDialog].
 ///
 /// See:
-/// * https://forui.dev/docs/dialog for working examples.
+/// * https://forui.dev/docs/overlay/dialog for working examples.
 /// * [FDialogStyle] for customizing a dialog's appearance.
 class FDialog extends StatelessWidget {
   static const _defaultDuration = Duration(milliseconds: 100);