### Default Select Tile Group Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/select-tile-group.mdx

Demonstrates the default configuration of the Select Tile Group widget. No specific setup is required beyond importing the necessary components.

```javascript
import {
  Tab,
  Tabs
} from 'fumadocs-ui/components/tabs';
import {
  Callout
} from 'fumadocs-ui/components/callout';
import {
  Widget
} from '@/components/demo/widget';
import {
  CodeSnippet
} from '@/components/code-snippet/code-snippet';
import {
  UsageSnippet
} from '@/components/usage-snippet/usage-snippet';
import selectTileGroupDefault from '@/snippets/examples/select-tile-group/default.json';
import selectTileGroupUsage from '@/snippets/usages/widgets/select_tile_group/selectTileGroup.json';
import selectTileGroupBuilderUsage from '@/snippets/usages/widgets/select_tile_group/selectTileGroupBuilder.json';
import selectTileUsage from '@/snippets/usages/widgets/select_tile_group/selectTile.json';
import selectTileSuffixUsage from '@/snippets/usages/widgets/select_tile_group/selectTileSuffix.json';
import selectTileGroupRadio from '@/snippets/examples/select-tile-group/radio.json';
import selectTileGroupMultiValue from '@/snippets/examples/select-tile-group/multi-value.json';
import selectTileGroupSuffix from '@/snippets/examples/select-tile-group/suffix.json';
import selectTileGroupLazy from '@/snippets/examples/select-tile-group/lazy.json';
import selectTileGroupScrollable from '@/snippets/examples/select-tile-group/scrollable.json';
import selectTileGroupFullDivider from '@/snippets/examples/select-tile-group/full-divider.json';
import selectTileGroupNoDivider from '@/snippets/examples/select-tile-group/no-divider.json';

<Callout type="info">
    For desktop, a [select group](/docs/form/select-group) is generally recommended over this.
</Callout>

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='select-tile-group' height={300}/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={selectTileGroupDefault} />
  </Tab>
</Tabs>
```

--------------------------------

### Install Application Executable

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Installs the main application executable to the specified runtime destination. This makes the executable available after installation.

```cmake
install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)
```

--------------------------------

### Define Installation Directories

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Defines the destination directories for installing application data and libraries. These paths are relative to the installation prefix.

```cmake
set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}")
```

--------------------------------

### Default Resizable Widget Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/layout/resizable.mdx

A basic example of the Resizable widget. This snippet demonstrates the default configuration.

```json
{
  "component": "FResizable",
  "props": {
    "children": [
      {
        "component": "FBox",
        "props": {
          "style": {
            "width": "50%",
            "height": "100%"
          },
          "children": "Content 1"
        }
      },
      {
        "component": "FBox",
        "props": {
          "style": {
            "width": "50%",
            "height": "100%"
          },
          "children": "Content 2"
        }
      }
    ]
  }
}
```

--------------------------------

### Getting Started with Themes

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/concepts/themes.mdx

Use `FTheme` to explicitly specify the theme brightness (light or dark) as Forui does not manage it automatically. This snippet demonstrates basic theme integration.

```javascript
import { FTheme } from "fumadocs-ui/theme";

export default function App() {
  return (
    <FTheme.Provider>
      {/* Your app content */}
    </FTheme.Provider>
  );
}
```

--------------------------------

### FHeader Usage Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/header.mdx

Example demonstrating the usage of the FHeader widget. Refer to the scaffold documentation for a complete example.

```javascript
import headerUsage from '@/snippets/usages/widgets/header/header.json';
```

--------------------------------

### FHeader.nested Usage Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/header.mdx

Example demonstrating the usage of the FHeader.nested widget. Refer to the scaffold documentation for a complete example.

```javascript
import headerNestedUsage from '@/snippets/usages/widgets/header/nested.json';
```

--------------------------------

### Changelog Entry Examples

Source: https://github.com/duobaseio/forui/blob/main/CLAUDE.md

Provides examples of how to format changelog entries for different types of changes (Additions, Changes, Removals, Fixes) and breaking changes. Follows specific ordering and grouping rules for clarity.

```markdown
### `FButton`
* Add `FButtonStyles.primary` getter.

* **Breaking** Remove `FButtonSizes` typedef. Use `FButtonSizeStyles` instead.


### `FSelect` & `FMultiSelect`
* Add `FSelect.search(...)`.

* **Breaking** Rename `FSelectStyle.selectFieldStyle` to `FSelectStyle.fieldStyle`.
* **Breaking** Remove `FSelectStyle.iconStyle`. Use `FSelectStyle.fieldStyle.iconStyle` instead.

* Fix `FSelect` still allowing tags to be removed when disabled.
```

--------------------------------

### GET /docs/llms-full.txt

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/reference/llms.mdx

Retrieves the full documentation content rendered as plain Markdown, including code examples and API details.

```APIDOC
## GET /docs/llms-full.txt

### Description
The full documentation content rendered as plain Markdown. This includes all pages with code examples, API details, and usage instructions.

### Method
GET

### Endpoint
/docs/llms-full.txt
```

--------------------------------

### Install Forui Icons Separately

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/getting-started.mdx

If you only need Forui icons and not the entire Forui package, use this command to install the `forui_assets` package.

```bash
flutter pub add forui_assets
```

--------------------------------

### Install Bundled Plugin Libraries

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Installs any bundled plugin libraries to the installation directory. This ensures that plugin dependencies are available at runtime.

```cmake
if(PLUGIN_BUNDLED_LIBRARIES)
  install(FILES "${PLUGIN_BUNDLED_LIBRARIES}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endif()
```

--------------------------------

### Portal Usage Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/foundation/portal.mdx

Demonstrates the usage of the FPortal widget. This snippet shows how to integrate the portal into your application.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Callout } from 'fumadocs-ui/components/callout';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import { UsageSnippet } from '@/components/usage-snippet/usage-snippet';
import portalDefault from '@/snippets/examples/portal/default.json';
import portalUsage from '@/snippets/usages/foundation/portal/portal.json';

## Usage

### `FPortal(...)`
<UsageSnippet usage={portalUsage} />
```

--------------------------------

### Run Development Server

Source: https://github.com/duobaseio/forui/blob/main/docs/README.md

Commands to start the local development environment using various package managers.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Pagination with PageView Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/pagination.mdx

This example illustrates how to integrate the Pagination widget with a PageView component, allowing for synchronized navigation between pages. This is useful for creating multi-step forms or wizards.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import pageViewSnippet from '@/snippets/examples/pagination/page-view.json';

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='pagination' variant='page-view' height={400}/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={pageViewSnippet} />
  </Tab>
</Tabs>
```

--------------------------------

### Install Forui using Flutter CLI

Source: https://context7.com/duobaseio/forui/llms.txt

Install the forui package using the flutter pub add command. Use --major-versions flag for upgrades.

```bash
flutter pub add forui
# Upgrade to latest minor (pre-1.0 packages require --major-versions)
flutter pub upgrade forui --major-versions
```

--------------------------------

### Install Flutter Library

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Installs the Flutter library file to the root installation directory. This is a core component required for Flutter applications.

```cmake
install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)
```

--------------------------------

### Set Installation Prefix for Runtime

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Configures the installation prefix to be adjacent to the executable for runtime. This allows the application to run from its build directory, simplifying development workflows.

```cmake
set(BUILD_BUNDLE_DIR "$<TARGET_FILE_DIR:${BINARY_NAME}>")
set(CMAKE_VS_INCLUDE_INSTALL_TO_DEFAULT_BUILD 1)
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()
```

--------------------------------

### Pagination with Custom Icons Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/pagination.mdx

This example shows how to use custom icons for the previous and next page navigation buttons in the Pagination widget. Ensure your custom icons are properly imported and configured.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import customIconSnippet from '@/snippets/examples/pagination/custom-icon.json';

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='pagination' variant='custom-icon' height={400}/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={customIconSnippet} />
  </Tab>
</Tabs>
```

--------------------------------

### Example Accordion Style Snippet

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/guides/customizing-themes.mdx

This is an example of a generated accordion style file that can be added to your theme.

```json
{
  "name": "accordion",
  "description": "",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@forui/core": "^1.0.0"
  }
}
```

--------------------------------

### Lazy Scrollable Select Menu Tile Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/select-menu-tile.mdx

This example shows a lazy scrollable Select Menu Tile, which loads options on demand as the user scrolls. This is efficient for very large datasets.

```json
{
  "component": "FSelectMenuTile",
  "props": {
    "label": "Select a city",
    "options": [
      {"label": "City 1", "value": "city1"},
      {"label": "City 2", "value": "city2"},
      {"label": "City 3", "value": "city3"},
      {"label": "City 4", "value": "city4"},
      {"label": "City 5", "value": "city5"}
    ],
    "lazy": true
  }
}
```

--------------------------------

### Example main.dart structure

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/guides/customizing-themes.mdx

This snippet shows the structure of the generated main.dart file, where you will integrate your custom theme.

```json
{
  "name": "main",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@forui/core": "^1.0.0"
  }
}
```

--------------------------------

### Install Native Assets

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Copies native assets provided by the build.dart script from all packages to the installation directory. This ensures that platform-specific assets are included.

```cmake
set(NATIVE_ASSETS_DIR "${PROJECT_BUILD_DIR}native_assets/windows/")
install(DIRECTORY "${NATIVE_ASSETS_DIR}"
   DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
   COMPONENT Runtime)
```

--------------------------------

### Managed Mode Example

Source: https://github.com/duobaseio/forui/blob/main/design_docs/shipped/declarative_state_management.md

Example of using the 'managed' mode with an explicit TextEditingController. The controller can be provided or will default to an internal one.

```dart
class _State extends State<MyWidget> {
  final controller = TextEditingController();
  
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => FTextField(
    control: .managed(
      controller: controller, // Optional, will default to an internal controller if omitted.
      initial: TextEditingValue(text: 'Hello'),
    ),
  );
}
```

--------------------------------

### Detailed Multi Select Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/multi-select.mdx

Demonstrates a detailed variant of the multi-select component. Use the detailed snippet for this example.

```dart
CodeSnippet snippet={detailedSnippet}
```

--------------------------------

### Bootstrap Project Dependencies

Source: https://github.com/duobaseio/forui/blob/main/CONTRIBUTING.md

Install dependencies and generate required files for the Forui project.

```shell
make bootstrap
```

```shell
make bs # shorthand
```

--------------------------------

### Default Tile Group Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/tile-group.mdx

Displays a standard tile group. Ensure the necessary imports are present.

```javascript
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { Callout } from 'fumadocs-ui/components/callout';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import { UsageSnippet } from '@/components/usage-snippet/usage-snippet';
import tileGroupDefault from '@/snippets/examples/tile-group/default.json';

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='tile-group'/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={tileGroupDefault} />
  </Tab>
</Tabs>
```

--------------------------------

### FCheckbox Widget Examples

Source: https://context7.com/duobaseio/forui/llms.txt

Shows how to use FCheckbox with labels, descriptions, error states, and different positioning (leading label). Also includes a disabled state example. Requires state management for interactive checkboxes.

```dart
import 'package:flutter/widgets.dart';
import 'package:forui/forui.dart';

class CheckboxExample extends StatefulWidget {
  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}
class _CheckboxExampleState extends State<CheckboxExample> {
  bool _accepted = false;

  @override
  Widget build(BuildContext context) => Column(
    children: [
      // Standard checkbox
      FCheckbox(
        label: const Text('Accept terms and conditions'),
        description: const Text('You agree to our terms.'),
        error: _accepted ? null : const Text('You must accept the terms.'),
        semanticsLabel: 'Accept terms',
        value: _accepted,
        onChange: (value) => setState(() => _accepted = value),
      ),
      // Leading label (label appears before the checkbox)
      FCheckbox(
        leadingLabel: true,
        label: const Text('Marketing emails'),
        value: false,
        onChange: (_) {},
      ),
      // Disabled
      FCheckbox(
        label: const Text('Read-only option'),
        value: true,
        onChange: (_) {},
        enabled: false,
      ),
    ],
  );
}
```

--------------------------------

### Define Interactive Widget Examples

Source: https://github.com/duobaseio/forui/blob/main/docs_snippets/AGENTS.md

Use @RoutePage and @Options annotations to define runnable widget examples. Ensure classes extend the appropriate base classes and include corresponding router entries.

```dart
const fruits = ['Apple', 'Banana', 'Blueberry'];

@RoutePage()
@Options(include: [fruits])  // fruits will be included in generated snippet
class CollapsiblePage extends StatefulExample {
  CollapsiblePage({@queryParam super.theme});

  @override
  State<CollapsiblePage> createState() => _State();
}

class _State extends StatefulExampleState<CollapsiblePage> {
  @override
  Widget example(BuildContext _) => FButton(onPress: () {}, child: Text('Click'));
}

@RoutePage()
@Options(inline: _Accordion)  // _Accordion's build method will be shown
class AccordionPage extends Example {
  @override
  Widget example(BuildContext _) => const _Accordion();
}

class _Accordion extends StatelessWidget {
  @override
  Widget build(BuildContext _) => FAccordion(...);  // This is what gets shown
}
```

--------------------------------

### Default Pagination Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/pagination.mdx

This snippet shows the default configuration for the Pagination widget. Ensure you have imported the necessary components.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import defaultSnippet from '@/snippets/examples/pagination/default.json';

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='pagination' height={400}/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={defaultSnippet} />
  </Tab>
</Tabs>
```

--------------------------------

### FWidgetStateMap Resolution Constraints

Source: https://github.com/duobaseio/forui/blob/main/design_docs/shipped/styling_2.0.md

Examples illustrating the first-match-wins strategy and the order-dependency issues within FWidgetStateMap.

```text
hovered: A()
hovered & focused: B()
```

```text
// Where should "hovered & selected: C()" go?

hovered: A()
hovered & selected & focused: B()
```

--------------------------------

### Pagination with Siblings Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/pagination.mdx

This example shows how to configure the Pagination widget to display a specific number of sibling page links around the active page. Adjust the 'siblings' prop as needed.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import siblingsSnippet from '@/snippets/examples/pagination/siblings.json';

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='pagination' variant='siblings' height={400}/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={siblingsSnippet} />
  </Tab>
</Tabs>
```

--------------------------------

### Select Menu Tile with No Auto Hide Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/select-menu-tile.mdx

This example configures the Select Menu Tile to not automatically hide the options list when an item is selected. This is useful when users need to see the options after selection.

```json
{
  "component": "FSelectMenuTile",
  "props": {
    "label": "Select a color",
    "options": [
      {
        "label": "Red",
        "value": "red"
      },
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ],
    "autoHide": false
  }
}
```

--------------------------------

### Define Widget State Constraints

Source: https://github.com/duobaseio/forui/blob/main/design_docs/shipped/styling_2.0.md

Example of defining state-based widget resolution using AND operators.

```text
hovered: A(),
hovered & focused: B(),
```

--------------------------------

### Button Example - Primary

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/button.mdx

Demonstrates the primary variant of the button. This is the default style.

```dart
FButton(
  text: 'Primary',
  onPressed: () => print('Primary button pressed'),
)
```

--------------------------------

### Multi-value Select Tile Group Form Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/select-tile-group.mdx

This example configures the Select Tile Group to allow multiple selections, functioning as a multi-value form input. The 'multi-value' variant should be used.

```javascript
<CodeSnippet snippet={selectTileGroupMultiValue} />
```

--------------------------------

### Default Popover Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/overlay/popover.mdx

This snippet shows the basic implementation of the FPopover widget. Ensure necessary imports are included.

```javascript
import defaultSnippet from '@/snippets/examples/popover/default.json';
```

--------------------------------

### Range Selection Calendar Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/data/calendar.mdx

Illustrates how to use `FCalendar` for selecting a date range, including an initial range.

```json
{
  "component": "FCalendar",
  "variant": "range",
  "props": {
    "controller": {
      "type": "FCalendarController",
      "initialRange": {
        "start": "2024-01-15T00:00:00.000Z",
        "end": "2024-01-20T00:00:00.000Z"
      }
    }
  }
}
```

--------------------------------

### Select Tile Group with Custom Suffix Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/select-tile-group.mdx

This example shows how to customize the suffix of tiles within the Select Tile Group, often used for icons or status indicators. The 'suffix' variant is applied here.

```javascript
<CodeSnippet snippet={selectTileGroupSuffix} />
```

--------------------------------

### Default Portal Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/foundation/portal.mdx

Renders a default portal widget. This is typically used as a base for more complex UI elements.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Callout } from 'fumadocs-ui/components/callout';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import { UsageSnippet } from '@/components/usage-snippet/usage-snippet';
import portalDefault from '@/snippets/examples/portal/default.json';
import portalUsage from '@/snippets/usages/foundation/portal/portal.json';

<Callout type="info">
  This widget is typically used to create other high-level widgets, e.g., [popover](../overlay/popover) or
  [tooltip](../overlay/tooltip). You should prefer those high-level widgets unless you're creating a custom widget.
</Callout>

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='portal' height={500}/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={portalDefault} />
  </Tab>
</Tabs>
```

--------------------------------

### Forui CLI Commands for Theming and Styling

Source: https://context7.com/duobaseio/forui/llms.txt

Provides examples of using the Forui CLI to initialize projects, generate custom themes, and copy widget styles for customization.

```bash
dart run forui init
```

```bash
dart run forui init --template=router
```

```bash
dart run forui theme create neutral
```

```bash
dart run forui style create accordion
```

```bash
dart run forui style create button
```

```bash
dart run forui style create buttons        # all button variants
```

```bash
dart run forui style create button-sizes
```

```bash
dart run forui snippet create material-mapping
```

--------------------------------

### Default Multi Select Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/multi-select.mdx

Displays a basic multi-select component. Ensure necessary imports are present.

```dart
CodeSnippet snippet={defaultSnippet}
```

--------------------------------

### Install Forui Hooks dependencies

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/reference/hooks.mdx

Run these commands in your Flutter project directory to add the necessary packages.

```bash
flutter pub add flutter_hooks
flutter pub add forui_hooks
```

--------------------------------

### Forui Style Create Command Help

Source: https://github.com/duobaseio/forui/blob/main/design_docs/shipped/style_generation_cli.md

Shows detailed help for the 'create' subcommand, including options for generating all styles, forcing overwrites, and specifying output.

```shell
Usage: forui style create [styles]
-h, --help      Print this usage information.
-a, --all       Create all styles.
-f, --force     Overwrite existing files if they exist.
-o, --output    The output directory or file.
                (defaults to "<project root>/lib/styles")

Run "forui help" to see global options.
```

--------------------------------

### Button Example - Toggleable

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/button.mdx

Demonstrates a toggleable button. This variant can be used for stateful actions.

```dart
FButton(
  variant: ButtonVariant.toggle,
  text: 'Toggle',
  onPressed: () => print('Toggle button pressed'),
)
```

--------------------------------

### Button Example - Secondary

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/button.mdx

Demonstrates the secondary variant of the button. Use this for less prominent actions.

```dart
FButton(
  variant: ButtonVariant.secondary,
  text: 'Secondary',
  onPressed: () => print('Secondary button pressed'),
)
```

--------------------------------

### Default Header Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/header.mdx

A standard header for the root of a navigation stack. Ensure the `defaultSnippet` is imported.

```javascript
import defaultSnippet from '@/snippets/examples/header/default.json';
```

--------------------------------

### Multiple Dates Calendar Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/data/calendar.mdx

Demonstrates how to configure `FCalendar` for selecting multiple dates, including initial selections.

```json
{
  "component": "FCalendar",
  "variant": "dates",
  "props": {
    "controller": {
      "type": "FCalendarController",
      "initialDates": [
        "2024-01-15T00:00:00.000Z",
        "2024-01-20T00:00:00.000Z"
      ]
    }
  }
}
```

--------------------------------

### Initialize Forui Project

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/reference/cli.mdx

Creates forui.yaml and main.dart files in the project directory.

```shell
dart run forui init
```

```shell
Usage: forui init
-h, --help         Print this usage information.
-f, --force        Overwrite existing files if they exist.
-t, --template     The main.dart template to generate.
                   [basic (default), router]
```

--------------------------------

### Default Checkbox Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/checkbox.mdx

A basic example of the Checkbox component.

```dart
import 'package:flutter/material.dart';

class CheckboxExample extends StatelessWidget {
  const CheckboxExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Checkbox Example'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Select an option:'),
            SizedBox(height: 10),
            FCheckbox(value: false, onChanged: null),
          ],
        ),
      ),
    );
  }
}

class FCheckbox extends StatefulWidget {
  const FCheckbox({super.key, required this.value, required this.onChanged});

  final bool value;
  final ValueChanged<bool?>? onChanged;

  @override
  State<FCheckbox> createState() => _FCheckboxState();
}

class _FCheckboxState extends State<FCheckbox> {
  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: widget.value,
      onChanged: widget.onChanged,
    );
  }
}

```

--------------------------------

### Generate Basic Forui App Structure

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/getting-started.mdx

Run this command to generate a basic Forui app structure. This initializes the necessary files and configurations for a Forui project.

```bash
dart run forui init
```

--------------------------------

### Create Project Styles

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/reference/cli.mdx

Generates a style in the project, defaulting to lib/theme.

```shell
dart run forui style create [styles]
```

```shell
Usage: forui style create [styles]
-h, --help      Print this usage information.
-a, --all       Create all styles.
-f, --force     Overwrite existing files if they exist.
-o, --output    The output directory or file, relative to the project directory.
                (defaults to "lib/theme")
```

--------------------------------

### List Available Styles

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/reference/cli.mdx

Lists all available styles in the project.

```shell
dart run forui style ls
```

```shell
Usage: forui style ls
-h, --help    Print this usage information.
```

--------------------------------

### Using Responsive Breakpoints

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/concepts/responsive.mdx

Shows how to implement responsive design using predefined breakpoints.

```dart
import usageSnippet from '@/snippets/snippets/concepts/responsive/usage.json';
```

--------------------------------

### List Available Themes

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/reference/cli.mdx

Lists all available themes in the project.

```shell
dart run forui theme ls
```

```shell
Usage: forui theme ls
-h, --help    Print this usage information.
```

--------------------------------

### Install ICU Data File

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Installs the ICU data file to the data directory. This file is necessary for internationalization and localization features.

```cmake
install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)
```

--------------------------------

### Button Example - Sizes

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/button.mdx

Demonstrates different size variants for the button. Ensure you use the appropriate size for your UI context.

```dart
FButton(
  variant: ButtonVariant.sizes,
  text: 'Sizes',
  onPressed: () => print('Sizes button pressed'),
)
```

--------------------------------

### Default Select Menu Tile Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/select-menu-tile.mdx

This snippet shows the default configuration for the Select Menu Tile. It's a basic implementation for displaying a list of options.

```json
{
  "component": "FSelectMenuTile",
  "props": {
    "label": "Select a fruit",
    "options": [
      {
        "label": "Apple",
        "value": "apple"
      },
      {
        "label": "Banana",
        "value": "banana"
      },
      {
        "label": "Orange",
        "value": "orange"
      }
    ]
  }
}
```

--------------------------------

### Declarative Mode Example

Source: https://github.com/duobaseio/forui/blob/main/design_docs/shipped/declarative_state_management.md

Example of using the declarative 'lifted' mode for state management in a widget. State is managed externally and updated via setState.

```dart
class _State extends State<MyWidget> {
  TextEditingValue _v = TextEditingValue(text: 'Banana');

  @override
  Widget build(BuildContext context) => FTextField(
    control: .lifted(
      value: _v,
      onChange: (v) => setState(() {
        if (v.text.contains('x')) {
          return; // reject changes with 'x'
        }
        _v = v;
      }),
    ),
  );
}
```

--------------------------------

### Install AOT Library for Release/Profile Builds

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Installs the Ahead-Of-Time (AOT) compiled library only for 'Profile' and 'Release' configurations. This optimizes performance for non-debug builds.

```cmake
install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  CONFIGURATIONS Profile;Release
  COMPONENT Runtime)
```

--------------------------------

### FButton Widget Examples

Source: https://context7.com/duobaseio/forui/llms.txt

Demonstrates various configurations of FButton, including different variants, sizes, icon usage, loading states, and toggleable functionality. Ensure necessary imports are present.

```dart
import 'package:flutter/widgets.dart';
import 'package:forui/forui.dart';

// Primary (default)
FButton(onPress: () {}, child: const Text('Save'))
```

```dart
// Variant + size
FButton(
  variant: .secondary,
  size: .sm,
  mainAxisSize: MainAxisSize.min,
  onPress: () {},
  child: const Text('Cancel'),
)
```

```dart
// Destructive with icon prefix
FButton(
  variant: .destructive,
  prefix: const Icon(FIcons.trash),
  onPress: () {},
  child: const Text('Delete Account'),
)
```

```dart
// Icon-only button
FButton.icon(
  size: .lg,
  onPress: () {},
  child: const Icon(FIcons.chevronRight),
)
```

```dart
// Loading state (disabled while loading)
FButton(
  prefix: const FCircularProgress(),
  onPress: null, // null disables the button
  child: const Text('Please wait'),
)
```

```dart
// Toggleable (e.g. italic text toggle)
class ToggleButton extends StatefulWidget {
  @override
  State<ToggleButton> createState() => _ToggleButtonState();
}
class _ToggleButtonState extends State<ToggleButton> {
  bool _italic = false;
  @override
  Widget build(BuildContext context) => FButton(
    variant: .outline,
    size: .sm,
    mainAxisSize: MainAxisSize.min,
    selected: _italic,
    onPress: () => setState(() => _italic = !_italic),
    prefix: const Icon(FIcons.italic),
    child: Text('Italic', style: TextStyle(decoration: _italic ? TextDecoration.underline : null)),
  );
}
```

--------------------------------

### Flutter Example Widget Definition

Source: https://github.com/duobaseio/forui/blob/main/docs_snippets/README.md

Defines a Flutter example widget, including route registration and options for including external variables or inlining build methods.

```dart
const fruits = ['Apple', 'Banana', 'Blueberry'];

@RoutePage()
@Options(include: [fruits])  // fruits will be included in generated snippet
class CollapsiblePage extends StatefulExample {
  CollapsiblePage({@queryParam super.theme});

  @override
  State<CollapsiblePage> createState() => _State();
}

class _State extends StatefulExampleState<CollapsiblePage> {
  @override
  Widget example(BuildContext _) => FButton(onPress: () {}, child: Text('Click'));
}

@RoutePage()
@Options(inline: _Accordion)  // _Accordion's build method will be shown
class AccordionPage extends Example {
  @override
  Widget example(BuildContext _) => const _Accordion();
}

class _Accordion extends StatelessWidget {
  @override
  Widget build(BuildContext _) => FAccordion(...);  // This is what gets shown
```

--------------------------------

### Forui App Initialization with Router

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/getting-started.mdx

This code snippet demonstrates the initialization of a Forui app with a router setup, including the `FTheme` widget and a basic `MaterialApp`.

```dart
import "package:flutter/material.dart";
import "package:forui/forui.dart";
import "package:go_router/go_router.dart";

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      builder: (context, state) => Container(),
      path: "/",
    ),
  ],
);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return FTheme(
      data: FThemes.neutral.light,
      child: MaterialApp.router(
        routerConfig: _router.routerConfig,
        title: "Forui App",
      ),
    );
  }
}
```

--------------------------------

### Scrollable Select Tile Group Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/select-tile-group.mdx

This example demonstrates a scrollable version of the Select Tile Group, suitable for a large number of options. It requires the 'scrollable' variant to be applied.

```javascript
<CodeSnippet snippet={selectTileGroupScrollable} />
```

--------------------------------

### Forui CLI Help

Source: https://github.com/duobaseio/forui/blob/main/design_docs/shipped/style_generation_cli.md

Displays help information for the Forui CLI, listing available subcommands and global options.

```shell
Usage: forui style <subcommand> [arguments]
-h, --help    Print this usage information.

Available subcommands:
  create   Create Forui widget style file(s).
  ls       List all Forui widget styles.

Run "forui help" to see global options.
```

--------------------------------

### Horizontal Resizable Widget Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/layout/resizable.mdx

Demonstrates a Resizable widget configured for horizontal resizing. This allows content panes to be resized side-by-side.

```json
{
  "component": "FResizable",
  "props": {
    "direction": "horizontal",
    "children": [
      {
        "component": "FBox",
        "props": {
          "style": {
            "width": "50%",
            "height": "100%"
          },
          "children": "Content 1"
        }
      },
      {
        "component": "FBox",
        "props": {
          "style": {
            "width": "50%",
            "height": "100%"
          },
          "children": "Content 2"
        }
      }
    ]
  }
}
```

--------------------------------

### Pagination with Hidden Edges Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/pagination.mdx

This example demonstrates how to hide the first and last page number links in the Pagination widget. This can simplify the UI when dealing with a large number of pages.

```javascript
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
import { Widget } from '@/components/demo/widget';
import { CodeSnippet } from '@/components/code-snippet/code-snippet';
import hideEdgesSnippet from '@/snippets/examples/pagination/hide-edges.json';

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview">
    <Widget name='pagination' variant='hide-edges' height={400}/>
  </Tab>
  <Tab value="Code">
    <CodeSnippet snippet={hideEdgesSnippet} />
  </Tab>
</Tabs>
```

--------------------------------

### Accordion Example with Max Expanded Items

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/data/accordion.mdx

This example demonstrates the Accordion widget configured to limit the maximum number of simultaneously expanded items. The 'variant' prop is set to 'max'.

```javascript
import {
  Tabs,
  Tab
} from 'fumadocs-ui/components/tabs';
import {
  Widget
} from '@/components/demo/widget';
import {
  CodeSnippet
} from '@/components/code-snippet/code-snippet';
import maxSnippet from '@/snippets/examples/accordion/max.json';

<Tabs items={['Preview', 'Code']}>
    <Tab value="Preview">
        <Widget name='accordion' variant='max' height={600}/>
    </Tab>
    <Tab value="Code">
        <CodeSnippet snippet={maxSnippet} />
    </Tab>
</Tabs>
```

--------------------------------

### Install Flutter Assets

Source: https://github.com/duobaseio/forui/blob/main/forui/example/windows/CMakeLists.txt

Installs the Flutter assets directory, ensuring it's fully re-copied on each build to prevent stale files. This is essential for the correct functioning of Flutter applications.

```cmake
set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)
```

--------------------------------

### Bootstrap App with FTheme and FScaffold

Source: https://context7.com/duobaseio/forui/llms.txt

Set up the root of your Flutter application using FTheme for theming and FScaffold as the main layout. This example demonstrates platform-specific theme selection and integration with Material themes.

```dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:forui/forui.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Automatically select desktop vs. touch theme variant based on platform
    final theme = const <TargetPlatform>{.android, .iOS, .fuchsia}.contains(defaultTargetPlatform)
        ? FThemes.neutral.dark.touch
        : FThemes.neutral.dark.desktop;

    return MaterialApp(
      supportedLocales: FLocalizations.supportedLocales,
      localizationsDelegates: const [...FLocalizations.localizationsDelegates],
      // Keep Material theme in sync with Forui theme for interop widgets
      theme: theme.toApproximateMaterialTheme(),
      builder: (_, child) => FTheme(
        data: theme,
        // FToaster and FTooltipGroup must wrap the app to enable toasts/tooltips
        child: FToaster(child: FTooltipGroup(child: child!)),
      ),
      home: const FScaffold(child: MyHomePage()),
    );
  }
}
```

--------------------------------

### Generate Forui App Structure with Router

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/getting-started.mdx

Use this command with the `--template=router` flag to generate a Forui app structure that includes routing setup.

```bash
dart run forui init --template=router
```

--------------------------------

### Disabled Slider Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/slider.mdx

Shows a slider that is disabled and cannot be interacted with.

```dart
import 'package:flutter/material.dart';
import 'package:forui/forui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Disabled Slider'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: FSlider(
            value: 50,
            onChanged: null, // Set to null to disable
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Default Slider Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/slider.mdx

A basic implementation of the FSlider component.

```dart
import 'package:flutter/material.dart';
import 'package:forui/forui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Default Slider'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: FSlider(
            value: 50,
            onChanged: (double value) {},
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Pagination Usage Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/navigation/pagination.mdx

This snippet demonstrates the basic usage of the FPagination widget. Refer to the API documentation for detailed parameter information.

```javascript
import { UsageSnippet } from '@/components/usage-snippet/usage-snippet';
import paginationUsage from '@/snippets/usages/widgets/pagination/pagination.json';

<UsageSnippet usage={paginationUsage} />
```

--------------------------------

### Disabled Checkbox Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/checkbox.mdx

Shows a Checkbox in a disabled state, which cannot be interacted with.

```dart
import 'package:flutter/material.dart';

class DisabledCheckboxExample extends StatelessWidget {
  const DisabledCheckboxExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Disabled Checkbox'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This option is not available:'),
            SizedBox(height: 10),
            FCheckbox(value: false, onChanged: null),
          ],
        ),
      ),
    );
  }
}

class FCheckbox extends StatefulWidget {
  const FCheckbox({super.key, required this.value, required this.onChanged});

  final bool value;
  final ValueChanged<bool?>? onChanged;

  @override
  State<FCheckbox> createState() => _FCheckboxState();
}

class _FCheckboxState extends State<FCheckbox> {
  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: widget.value,
      onChanged: widget.onChanged,
    );
  }
}

```

--------------------------------

### Application Scaffold with Header and Bottom Navigation

Source: https://context7.com/duobaseio/forui/llms.txt

Demonstrates the usage of FScaffold, FHeader, and FBottomNavigationBar for creating a basic app structure with navigation.

```dart
import 'package:flutter/widgets.dart';
import 'package:forui/forui.dart';

class AppShell extends StatefulWidget {
  @override
  State<AppShell> createState() => _AppShellState();
}
class _AppShellState extends State<AppShell> {
  int _index = 0;

  final _headers = [
    const FHeader(title: Text('Home')),
    const FHeader(title: Text('Search')),
    FHeader(
      title: const Text('Settings'),
      suffixes: [FHeaderAction(icon: const Icon(FIcons.ellipsis), onPress: () {})],
    ),
  ];

  final _bodies = [
    const Center(child: Text('Home')),
    const Center(child: Text('Search')),
    const Center(child: Text('Settings')),
  ];

  @override
  Widget build(BuildContext context) => FScaffold(
    header: _headers[_index],
    footer: FBottomNavigationBar(
      index: _index,
      onChange: (i) => setState(() => _index = i),
      children: const [
        FBottomNavigationBarItem(icon: Icon(FIcons.house), label: Text('Home')),
        FBottomNavigationBarItem(icon: Icon(FIcons.search), label: Text('Search')),
        FBottomNavigationBarItem(icon: Icon(FIcons.settings), label: Text('Settings')),
      ],
    ),
    child: _bodies[_index],
  );
}
```

--------------------------------

### Labelled Slider Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/slider.mdx

Demonstrates a slider with a label indicating its current value.

```dart
import 'package:flutter/material.dart';
import 'package:forui/forui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Labelled Slider'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: FSlider(
            value: 50,
            label: '50',
            onChanged: (double value) {},
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Generate main.dart file

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/guides/customizing-themes.mdx

Run this command in your project directory to generate the main.dart file where your theme will be added.

```shell
dart run forui init
```

--------------------------------

### Vertical Slider Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/slider.mdx

Displays a slider in a vertical orientation, suitable for space-constrained layouts.

```dart
import 'package:flutter/material.dart';
import 'package:forui/forui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Vertical Slider'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SizedBox(
            height: 300, // Ensure sufficient height for vertical slider
            child: FSlider(
              value: 50,
              onChanged: (double value) {},
              vertical: true,
            ),
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Discrete Slider Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/slider.mdx

A slider configured to select values from a discrete set of options.

```dart
import 'package:flutter/material.dart';
import 'package:forui/forui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Discrete Slider'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: FSlider(
            value: 50,
            divisions: 10,
            label: '50',
            onChanged: (double value) {},
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Slider with Tooltip Example

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/slider.mdx

A slider that displays a tooltip showing the selected value when interacted with.

```dart
import 'package:flutter/material.dart';
import 'package:forui/forui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Tooltip Slider'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: FSlider(
            value: 50,
            tooltip: true,
            onChanged: (double value) {},
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Button Example - With Text and Icon

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/button.mdx

Demonstrates a button that includes both text and an icon. This is useful for providing visual cues alongside labels.

```dart
FButton(
  variant: ButtonVariant.icon,
  text: 'Icon Button',
  icon: const Icon(Icons.star),
  onPressed: () => print('Icon button pressed'),
)
```

--------------------------------

### OTP Field without Formatter

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/form/otp-field.mdx

An OTP Field example where input formatting is disabled.

```json
{
  "component": "FOtpField",
  "props": {
    "length": 6,
    "formatter": false
  }
}
```

--------------------------------

### FTileGroup Usage

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/tile/tile-group.mdx

Demonstrates the standard usage of the FTileGroup widget. Ensure the 'tileGroupUsage' snippet is imported.

```javascript
import { UsageSnippet } from '@/components/usage-snippet/usage-snippet';
import tileGroupUsage from '@/snippets/usages/widgets/tile_group/tileGroup.json';

<UsageSnippet usage={tileGroupUsage} />
```

--------------------------------

### Popover Not Closing on Tap Outside

Source: https://github.com/duobaseio/forui/blob/main/docs/content/docs/overlay/popover.mdx

This example configures the popover so that tapping outside of it does not cause it to close.

```javascript
import noHideRegionSnippet from '@/snippets/examples/popover/no-hide-region.json';
```