### Default Input Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

A basic example of how to render a default input component. This serves as a starting point for most input use cases.

```typescript
import * as React from 'react';
import { Input } from '@fluentui/react-components';

export const DefaultInput = () => <Input placeholder="Enter text here" />;
```

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

### Install Motion Components Preview Package

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-introduction--docs

Install the beta package for motion components. Note that APIs may change before the stable release.

```bash
npm install @fluentui/react-motion-components-preview
```

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

### Persona Text Alignment Examples

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-persona--docs

Demonstrates the two text alignment options: 'start' (default) and 'center'. Use 'start' for standard alignment and 'center' for specific layout needs.

```typescript
import { Persona, PresenceBadge } from '@fluentui/react-components';

<Persona name="Kevin Sturgis" presenceOnly={false} presence={{ status: 'available' }} secondaryText="Software Engineer" tertiaryText="Microsoft" />
<Persona name="Kevin Sturgis" presenceOnly={false} presence={{ status: 'available' }} secondaryText="Software Engineer" tertiaryText="Microsoft" textAlignment="center" />
```

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

### Default Textarea Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-textarea--docs

A basic example of the default Textarea component.

```jsx
<Textarea />
```

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

### SwatchPicker Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-swatchpicker--docs

Demonstrates the basic usage of the SwatchPicker component.

```typescript
import { SwatchPicker } from '@fluentui/react-components';

<SwatchPicker />
```

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

### PresenceGroup Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-presencegroup--docs

Demonstrates the default usage of the PresenceGroup component, showing how to add and remove users.

```javascript
Add user
Remove user

AM
Allan Munger
Available

AB
Amanda Brady
Available

AM
Ashley McCarthy
Available
```

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

### Default List Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-list--docs

A basic example of a List component displaying a list of items. Native HTML attributes are supported.

```typescript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { List } from '@fluentui/react';

const items = [
  { key: 'Asia', content: 'Asia' },
  { key: 'Africa', content: 'Africa' },
  { key: 'Europe', content: 'Europe' },
  { key: 'North America', content: 'North America' },
  { key: 'South America', content: 'South America' },
  { key: 'Australia/Oceania', content: 'Australia/Oceania' },
  { key: 'Antarctica', content: 'Antarctica' },
];

ReactDOM.render(<List items={items} />, document.getElementById('root'));
```

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

### URL Input Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Example of a URL input type. Browser-default styling may activate and not match the Fluent design language.

```typescript
import { Input } from '@fluentui/react-components';

<Input type="url" placeholder="Enter a URL" />
```

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

### Default Select Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-select--docs

Demonstrates a basic Select component with options for color.

```typescript
import * as React from 'react';
import { Select, Option } from '@fluentui/react-components';

export const Default = () => (
  <Select>
    <Option>Red</Option>
    <Option>Green</Option>
    <Option>Blue</Option>
  </Select>
);
```

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

### Password Input Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Example of a password input type. No custom styling is applied for alternative types.

```typescript
import { Input } from '@fluentui/react-components';

<Input type="password" placeholder="Enter your password" />
```

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

### Collapse Component Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-collapse--docs

Demonstrates the basic usage of the Collapse component for managing content visibility with expand/collapse motion.

```javascript
import * as React from 'react';
import { Collapse } from '@fluentui/react-motion-components';

export const Default = () => (
  <Collapse>
    <div style={{ height: '100px', background: 'lightblue' }}>Visible</div>
  </Collapse>
);
```

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

### Toolbar with Popover Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Illustrates a Toolbar that includes a Popover for displaying contextual actions or information.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const WithPopover = () => <Toolbar />;
```

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

### Textarea with Placeholder

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-textarea--docs

Illustrates how to use a placeholder to guide user input in a Textarea.

```typescript
import { Textarea } from '@fluentui/react-components';

function App() {
  return (
    <{
      {
        Textarea
      }
    } 
    placeholder="Enter text here..."
    />
  );
}
```

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

### Default Spinner Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-spinner--docs

A basic example of the Spinner component. It shows a default spinner with no label.

```jsx
import * as React from 'react';
import { Spinner } from '@fluentui/react-components';

export const Default = () => <Spinner />;
```

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

### Default Switch Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-switch--docs

Demonstrates the basic usage of the Switch component. It renders a switch with a default label and state.

```javascript
import * as React from 'react';
import { Switch } from '@fluentui/react-components';

export const Default = () => (
  <Switch>Default Switch</Switch>
);
```

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

### Toolbar Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Demonstrates the default usage of the Toolbar component. It serves as a basic container for grouping controls.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const Default = () => <Toolbar />;
```

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

### Image Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-image--docs

Basic usage of the Image component. Ensure the 'src' prop is provided with the image path.

```javascript
import * as React from "react";
import { Image } from "@fluentui/react-components";

function ImageDefault() {
  return (
    <Image src="https://react.fluentui.dev/persona-male-1.png" alt="Default image example" />
  );
}

export default ImageDefault;
```

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

### Default Slider Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-slider--docs

A basic example of the Slider component. It demonstrates the default appearance and functionality.

```typescript
import * as React from 'react';
import { Slider } from '@fluentui/react-components';

export const DefaultSlider = () => <Slider defaultValue={40} />; 
```

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

### Switch Sizes Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-switch--docs

Demonstrates how to render the Switch component in different sizes using the `size` property. Available sizes are 'small' and 'medium'.

```javascript
import * as React from 'react';
import { Switch } from '@fluentui/react-components';

export const Size = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
    <Switch size="small">Small Switch</Switch>
    <Switch size="medium">Medium Switch</Switch>
  </div>
);
```

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

### Email Input Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Example of an email input type. Note that custom styling for alternative types is not currently applied.

```typescript
import { Input } from '@fluentui/react-components';

<Input type="email" placeholder="Enter your email" />
```

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

### Checkbox Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-checkbox--docs

Demonstrates the basic usage of the Checkbox component. It shows how to render a simple checkbox with a label.

```jsx
import { Checkbox } from '@fluentui/react-components';

function MyCheckbox() {
  return <Checkbox label="Basic Checkbox" />;
}
```

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

### Grouped TagPicker Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tagpicker--docs

An example of a TagPicker component with grouped options.

```typescript
import { TagPicker, TagPickerInput, TagPickerList, TagPickerOption, TagPickerGroup } from '@fluentui/react-components';

<TagPicker>
  <TagPickerInput />
  <TagPickerList>
    <TagPickerGroup header="Group 1">
      {(option: Option) => <TagPickerOption key={option.value}>{option.text}</TagPickerOption>}
    </TagPickerGroup>
    <TagPickerGroup header="Group 2">
      {(option: Option) => <TagPickerOption key={option.value}>{option.text}</TagPickerOption>}
    </TagPickerGroup>
  </TagPickerList>
</TagPicker>
```

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

### Transparent Toolbar Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Shows a Toolbar with a transparent background, suitable for designs where the toolbar should blend with the background.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const Transparent = () => <Toolbar />;
```

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

### Basic Toast Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toast--docs

Demonstrates the basic structure of a Toast with a title, body, and footer, rendered within a Toaster.

```typescript
import { Toaster, ToastTitle, ToastBody, ToastFooter } from '@fluentui/react-components';

<Toaster>
  {(toast) => (
    <Toast
      key={toast.toastId}
      toastId={toast.toastId}
      intent={toast.intent} // success, info, warning, error
      {
        ...toast.intentOptions
      }
    >
      <ToastTitle action={toast.actions ? toast.actions : null}>{toast.title}</ToastTitle>
      <ToastBody>{toast.body}</ToastBody>
      {toast.footer && <ToastFooter>{toast.footer}</ToastFooter>}
    </Toast>
  )}
</Toaster>
```

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

### Slide Component Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-slide--docs

Demonstrates the basic usage of the Slide component for managing content presence with slide in/out transitions.

```javascript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Slide } from '@fluentui/react-motion-components-preview';

const App = () => {
  return (
    <Slide>
      {state => (
        <div
          style={{
            background: 'lightblue',
            width: '100px',
            height: '100px',
            ...state.style
          }}
        />
      )}
    </Slide>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

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

### Virtualized List with Actionable Items

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-list--docs

Shows how to use `react-window` for virtualizing lists that contain interactive elements. This example demonstrates a virtualized list where items are actionable.

```typescript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListItem, List } from '@fluentui/react';

const items = [
  'Afghanistan',
  'Albania',
  'Algeria',
  'Andorra',
  'Angola',
  'Antigua & Deps',
  'Argentina',
  'Armenia',
  'Australia',
  'Austria',
  'Azerbaijan',
  'Bahamas',
  'Bahrain',
  'Bangladesh',
  'Barbados',
  'Belarus',
  'Belgium',
  'Belize',
  'Benin',
  'Bhutan',
  'Bolivia',
  'Bosnia Herzegovina',
];

const App = () => (
  <List virtualized>
    {items.map((item, index) => (
      <ListItem key={index} aria-setsize={items.length} aria-posinset={index + 1}>
        {item}
        <button>Action</button>
      </ListItem>
    ))}
  </List>
);

ReactDOM.render(<App />, document.getElementById('root'));

```

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

### Basic Tooltip Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tooltip--docs

Demonstrates a basic tooltip that appears on hover. The 'content' prop defines the tooltip's text.

```typescript
import * as React from 'react';
import { Tooltip } from '@fluentui/react-components';

export const DefaultTooltip = () => (
  <Tooltip content={'This is a tooltip'}>
    <button>Hover</button>
  </Tooltip>
);
```

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

### Toolbar with Tooltip Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Shows a Toolbar integrated with Tooltip for providing additional information on hover for its controls.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const WithTooltip = () => <Toolbar />;
```

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

### Default SearchBox Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-searchbox--docs

This snippet shows the basic implementation of a SearchBox component. It is useful for standard search input functionality.

```typescript
import * as React from 'react';
import { SearchBox } from '@fluentui/react';

export const DefaultSearchBox = () => {
  return <SearchBox placeholder="Search the site..." />; 
};
```

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

### Fade Atom Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-atoms--docs

Demonstrates how to use the `fadeAtom` to create an opacity transition. Specify direction, duration, and opacity values.

```typescript
fadeAtom({
  direction: 'enter',
  duration: 600,
  outOpacity: 0,
  inOpacity: 1,
})
```

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

### Vertical Slider Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-slider--docs

Demonstrates how to render a slider in a vertical orientation. The maximum value is positioned at the top.

```javascript
import * as React from 'react';
import { Slider } from '@fluentui/react';

export const VerticalSliderExample: React.FunctionComponent = () => (
  <Slider
    label="Vertical slider"
    vertical
    max={10}
    min={0}
    step={1}
    defaultValue={5}
    vertical
  />
);
```

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

### Toolbar Small Size Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Shows a Toolbar with a 'small' size, which has no vertical padding and uses 4px for horizontal padding around controls.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const Small = () => <Toolbar size="small" />;
```

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

### Empty Swatch Example with Selected State

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-swatchpicker--docs

Shows an empty swatch that can be selected, often used for adding new items.

```typescript
import { SwatchPicker, SwatchPickerEmptySwatch } from '@fluentui/react-components';

<SwatchPicker>
  <SwatchPickerEmptySwatch />
</SwatchPicker>
```

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

### Toolbar Medium Size Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Illustrates a Toolbar with a 'medium' size, featuring 4px vertical padding and 8px horizontal padding around controls.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const Medium = () => <Toolbar size="medium" />;
```

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

### Inline Input Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Demonstrates rendering an Input component inline with text. It's important to provide an `aria-label` for accessibility when used this way.

```typescript
import * as React from 'react';
import { Input } from '@fluentui/react-components';

export const InlineInput = () => (
  <p>
    This input is within a paragraph of text. Sample inline input{' '}
    <Input inline placeholder="Enter text" aria-label="Inline input example" />
    .
  </p>
);
```

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

### Flat Tree Component Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tree--docs

Demonstrates the use of the FlatTree component for a simplified and efficient tree structure management. Requires specific ARIA properties for each TreeItem.

```typescript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { FlatTree, FlatTreeItem, TreeItemLayout } from '@fluentui/react-components';

const App = () => {
  return (
    <FlatTree>
      <FlatTreeItem aria-level={1} aria-posinset={1} aria-setsize={2} value="item-1">
        <TreeItemLayout>Item 1, level 1</TreeItemLayout>
      </FlatTreeItem>
      <FlatTreeItem aria-level={1} aria-posinset={2} aria-setsize={2} value="item-2">
        <TreeItemLayout>Item 1, level 1</TreeItemLayout>
      </FlatTreeItem>
    </FlatTree>
  );
};

ReactDOM.render(<App />, document.querySelector('#root'));
```

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

### TabList Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tablist--docs

Demonstrates the default usage of the TabList component with multiple tabs. Use this for content-heavy pages where users need to switch between different sections.

```typescript
import { TabList, Tab } from '@fluentui/react-components';

<TabList defaultSelectedValue="tab1">
  <Tab value="tab1">First Tab</Tab>
  <Tab value="tab2">Second Tab</Tab>
  <Tab value="tab3">Third Tab</Tab>
  <Tab value="tab4">Fourth Tab</Tab>
</TabList>
```

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

### Create Presence Component

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-createpresencecomponent--docs

Use createPresenceComponent to build custom motion components. This example shows the basic structure for defining enter and exit motions.

```typescript
import {
  createPresenceComponent,
  PresenceMotion,
} from "@react-motion/motion";

interface MyFadePresenceProps {
  // Define any custom props here
}

const MyFade = createPresenceComponent<MyFadePresenceProps>({
  enter: {
    // Define enter motion properties
    opacity: [0, 1],
    scale: [0.8, 1],
  },
  exit: {
    // Define exit motion properties
    opacity: [1, 0],
    scale: [1, 0.8],
  },
});

// Usage:
// <MyFade visible={true}>...</MyFade>
```

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

### Persona Presence Size Examples

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-persona--docs

Shows the Persona component with different size options. The 'medium' size is the default. Select the appropriate size for your content.

```typescript
import { Persona, PresenceBadge } from '@fluentui/react-components';

<Persona name="Kevin Sturgis" size="huge" presence={{ status: 'available' }} />
<Persona name="Kevin Sturgis" size="large" presence={{ status: 'available' }} />
<Persona name="Kevin Sturgis" size="medium" presence={{ status: 'available' }} />
<Persona name="Kevin Sturgis" size="small" presence={{ status: 'available' }} />
<Persona name="Kevin Sturgis" size="extra-large" presence={{ status: 'available' }} />
<Persona name="Kevin Sturgis" size="extra-small" presence={{ status: 'available' }} />
```

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

### Custom Item Delay for Stagger

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-choreography-preview-stagger--docs

Control the time between each child's animation start using the 'itemDelay' prop. This example uses a 25ms delay.

```jsx
Hide
Item Delay: 25ms
1
2
3
4
5
6
7
8
Show code
```

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

### TagPicker Medium Size

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tagpicker--docs

Example of TagPicker with 'medium' size (default).

```typescript
import { TagPicker, TagPickerInput, TagPickerList, TagPickerOption } from '@fluentui/react-components';

<TagPicker size="medium">
  <TagPickerInput />
  <TagPickerList>
    {(option: Option) => <TagPickerOption key={option.value}>{option.text}</TagPickerOption>}
  </TagPickerList>
</TagPicker>
```

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

### Input with Placeholder

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Shows how to use the `placeholder` prop for guiding users. It's recommended to use a label instead of relying solely on a placeholder for usability and accessibility.

```typescript
import * as React from 'react';
import { Input } from '@fluentui/react-components';

export const Placeholder = () => <Input placeholder="Input with a placeholder" aria-label="Input with placeholder" />;
```

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

### TagPicker Extra Large Size

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tagpicker--docs

Example of TagPicker with 'extra-large' size.

```typescript
import { TagPicker, TagPickerInput, TagPickerList, TagPickerOption } from '@fluentui/react-components';

<TagPicker size="large">
  <TagPickerInput />
  <TagPickerList>
    {(option: Option) => <TagPickerOption key={option.value}>{option.text}</TagPickerOption>}
  </TagPickerList>
</TagPicker>
```

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

### Toast with Error Intent

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toast--docs

Provides an example of a toast with an 'error' intent to signal a problem.

```typescript
import { Toaster, ToastTitle, ToastBody, Toast } from '@fluentui/react-components';
import { useToastController } from '@fluentui/react-components';

function MyComponent() {
  const { dispatchToast } = useToastController();

  return (
    <Button
      onClick={() =>
        dispatchToast(
          <Toast intent="error">
            <ToastTitle>Error</ToastTitle>
            <ToastBody>An error occurred.</ToastBody>
          </Toast>
        )
      }
    >
      Show Error Toast
    </Button>
  );
}
```

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

### Disabled TagPicker

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tagpicker--docs

Example of a disabled TagPicker. The list is inaccessible, but selected options can still be modified.

```typescript
import { TagPicker, TagPickerInput, TagPickerList, TagPickerOption } from '@fluentui/react-components';

<TagPicker disabled>
  <TagPickerInput />
  <TagPickerList>
    {(option: Option) => <TagPickerOption key={option.value}>{option.text}</TagPickerOption>}
  </TagPickerList>
</TagPicker>
```

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

### TagPicker Default Usage

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tagpicker--docs

Basic example of the TagPicker component for selecting employees. This is the default configuration.

```typescript
import { TagPicker, TagPickerInput, TagPickerList, TagPickerOption } from '@fluentui/react-components';

<TagPicker>
  <TagPickerInput />
  <TagPickerList>
    {(option: Option) => <TagPickerOption key={option.value}>{option.text}</TagPickerOption>}
  </TagPickerList>
</TagPicker>
```

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

### Disabled Select Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-select--docs

Demonstrates how to disable a Select component using the native `disabled` prop.

```typescript
import * as React from 'react';
import { Select, Option } from '@fluentui/react-components';

export const Disabled = () => (
  <Select disabled>
    <Option>Red</Option>
    <Option>Green</Option>
    <Option>Blue</Option>
  </Select>
);
```

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

### Infinite Scrolling Tree Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tree--docs

Demonstrates how to implement infinite scrolling in a tree structure by loading additional items as the user navigates. This enhances responsiveness for large datasets.

```javascript
import * as React from 'react';
import { Tree, TreeItem, TreeItemLayout, useTree>}</script>
```

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

### Controlled Select Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-select--docs

Illustrates a controlled Select component where the selected option is managed by state.

```typescript
import * as React from 'react';
import { Select, Option, SelectOnChangeData } from '@fluentui/react-components';

export const Controlled = () => {
  const [selectedValue, setSelectedValue] = React.useState('blue');

  const handleChange = (
    _event: React.ChangeEvent<HTMLSelectElement>,
    data: SelectOnChangeData
  ) => {
    setSelectedValue(data.value);
  };

  return (
    <Select value={selectedValue} onChange={handleChange}>
      <Option value="red">Red</Option>
      <Option value="green">Green</Option>
      <Option value="blue">Blue</Option>
    </Select>
  );
};
```

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

### FluentProvider Default Usage

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-fluentprovider--docs

Demonstrates the default usage of FluentProvider with the Web Light theme. This is the most common way to set up theming for your application.

```jsx
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      {/* Your app content */}
    </FluentProvider>
  );
}
```

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

### Layered Blur with Inverse Visibility

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-components-preview-blur--docs

Demonstrates using two Blur components with inverse visibility. The background stripes start blurred and become clear when revealed, while the overlay button starts clear and blurs away when clicked. The button fades away with `animateOpacity` set to true, while the background blur stays visible in both states with `animateOpacity` set to false.

```typescript
import * as React from 'react';
import { Button, Stack, Text } from '@fluentui/react';
import { Blur } from '@fluentui/react-motion-components';

export const LayeredBlurDemo = () => {
  const [isRevealed, setIsRevealed] = React.useState(false);

  return (
    <Stack horizontal tokens={{ childrenGap: 20 }}>
      <Blur animateOpacity={false} isRevealed={isRevealed} style={{ width: 200, height: 200, background: 'repeating-linear-gradient(45deg, #646464, #646464 10px, #303030 10px, #303030 20px)' }}>
        <Text>Background Stripes</Text>
      </Blur>
      <Blur animateOpacity={true} isRevealed={isRevealed} style={{ width: 200, height: 200, background: 'linear-gradient(to right, red, orange)' }}>
        <Button onClick={() => setIsRevealed(!isRevealed)} style={{ width: '100%', height: '100%' }}>
          {isRevealed ? 'Hide' : 'Reveal'}
        </Button>
      </Blur>
    </Stack>
  );
};

```

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

### Image Fit Options

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-image--docs

Demonstrates different ways to resize an image to fit its container using the 'fit' prop. Options include 'center', 'cover', and 'contain'.

```javascript
import * as React from "react";
import { Image } from "@fluentui/react-components";

function ImageFitContain() {
  return (
    <div style={{ width: "200px", height: "200px", border: "1px solid grey" }}>
      <Image src="https://react.fluentui.dev/persona-male-1.png" alt="Image fit contain" fit="contain" />
    </div>
  );
}

export default ImageFitContain;
```

```javascript
import * as React from "react";
import { Image } from "@fluentui/react-components";

function ImageFitCover() {
  return (
    <div style={{ width: "200px", height: "200px", border: "1px solid grey" }}>
      <Image src="https://react.fluentui.dev/persona-male-1.png" alt="Image fit cover" fit="cover" />
    </div>
  );
}

export default ImageFitCover;
```

```javascript
import * as React from "react";
import { Image } from "@fluentui/react-components";

function ImageFitCenter() {
  return (
    <div style={{ width: "200px", height: "200px", border: "1px solid grey" }}>
      <Image src="https://react.fluentui.dev/persona-male-1.png" alt="Image fit center" fit="center" />
    </div>
  );
}

export default ImageFitCenter;
```

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

### Subtle Toolbar Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Presents a Toolbar with a subtle appearance, likely for less prominent UI elements.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const Subtle = () => <Toolbar />;
```

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

### Enable Virtualization with Flexbox Layout

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-table--docs

Use the `noNativeElements` prop on the `Table` component to switch from semantic table elements to a flexbox-based layout. This is recommended for enabling virtualization, as native table elements have strict layouting that hinders virtualization.

```javascript
import * as React from 'react';
import { Table, TableBody, TableCell, TableRow } from '@fluentui/react-components';
import { useVirtualizer } from '@tanstack/react-virtual';

const items = Array.from({
  length: 1000,
}, (_, index) => ({ key: String(index), name: `Item ${index}` }));

const VirtualizedTable = () => {
  const tableRef = React.useRef(null);

  const rowVirtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => tableRef.current,
    estimateSize: () => 35,
    overscan: 5,
  });

  return (
    <div
      ref={tableRef}
      style={{ height: '400px', overflow: 'auto' }}
    >
      <Table noNativeElements>
        <TableBody>
          {rowVirtualizer.getVirtualItems().map(virtualItem => (
            <TableRow key={items[virtualItem.index].key} name={items[virtualItem.index].name}>
              <TableCell>{items[virtualItem.index].name}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

export default VirtualizedTable;
```

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

### FluentProvider with Teams Light Theme

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-fluentprovider--docs

Shows how to use FluentProvider with the Teams Light theme. This is useful for applications that need to adhere to Microsoft Teams' visual guidelines.

```jsx
import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={teamsLightTheme}>
      {/* Your app content */}
    </FluentProvider>
  );
}
```

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

### Persona Default Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-persona--docs

Displays a basic Persona with a name and presence. Use this for standard user representations.

```typescript
import { Persona, PresenceBadge } from '@fluentui/react-components';

<Persona name="Kevin Sturgis" presenceOnly={false} presence={{ status: 'available' }} />
```

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

### Using Presence Component with Appear Prop

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-createpresencecomponent--docs

Shows how to enable the enter animation on initial mount by setting both the 'appear' and 'visible' props to true. By default, the enter animation is skipped on the first render.

```typescript
import {
  createPresenceComponent,
  PresenceMotion,
} from "@react-motion/motion";

interface MyFadePresenceProps {
  // Define any custom props here
}

const MyFade = createPresenceComponent<MyFadePresenceProps>({
  enter: {
    opacity: [0, 1],
    scale: [0.8, 1],
  },
  exit: {
    opacity: [1, 0],
    scale: [1, 0.8],
  },
});

// Usage:
// Enable enter animation on initial mount
<MyFade visible={true} appear={true}>
  <div>Content that will appear</div>
</MyFade>
```

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

### Create Motion Slot with Default Animation

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-motionslot--docs

This example demonstrates how a component author creates a motion slot from scratch using motionSlot(). It involves creating a default motion, defining slot types, wiring the slot, and rendering it.

```typescript
import * as React from 'react';
import {
  createMotionComponent,
  MotionSlotProps,
  motionSlot,
  Slot,
  assertSlots,
} from '@fluentui/react-motion-components';
import { motionTokens } from '@fluentui/react-theme';

// 1. Create a default motion
const pulseMotion = createMotionComponent({
  // ... animation definition for a looping pulse
  // For example:
  states: {
    looping: {
      keyframes: {
        from: { opacity: 1 },
        to: { opacity: 0.5 },
      },
      duration: motionTokens.durationUltraSlow,
      iterations: Infinity,
      direction: 'alternate',
    },
  },
  defaultState: 'looping',
});

interface MyComponentSlots {
  // 2. Define slot types
  pulseMotion: Slot<MotionSlotProps<typeof pulseMotion>>;
}

interface MyComponentState {
  pulseMotion: ReturnType<typeof motionSlot>;
}

export const useMyComponent = (props: {}): MyComponentState => {
  // 3. Wire the slot
  const state: MyComponentState = {
    pulseMotion: motionSlot(pulseMotion, {
      // defaultProps for the motion component
      defaultProps: {
        // e.g., setting default duration if not provided by consumer
        // duration: motionTokens.durationNormal,
      },
    }),
  };

  return state;
};

interface MyComponentProps extends MyComponentSlots {
  children: React.ReactNode;
}

export const MyComponent = (props: MyComponentProps) => {
  const state = useMyComponent(props);
  const { pulseMotion } = state;

  // 4. Render the slot
  const slots = assertSlots<MyComponentSlots>()(props);

  return (
    <pulseMotion.Component
      {...slots.pulseMotion.props}
      render={slots.pulseMotion.render}
    >
      {props.children}
    </pulseMotion.Component>
  );
};

```

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

### Vertical Toolbar Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Presents a Toolbar oriented vertically, suitable for sidebars or other contexts requiring a vertical layout.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const Vertical = () => <Toolbar />;
```

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

### Create Presence Motion Slot

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-apis-presencemotionslot--docs

This example demonstrates how a component author creates a presence motion slot from scratch using `presenceMotionSlot()`. It involves creating a default motion, defining slot types, wiring the slot in the state hook, and rendering the slot.

```typescript
import * as React from 'react';
import { Slot, createPresenceComponent, useSlot } from '@fluentui/react-components';
import { assertSlots } from '@fluentui/react-utilities';

// 1. Create a default motion
const DefaultMotion = createPresenceComponent({
  enter: {
    // Define enter animation properties
    opacity: [0, 1],
    scale: [0.9, 1],
  },
  exit: {
    // Define exit animation properties
    opacity: [1, 0],
    scale: [1, 0.9],
  },
});

// 2. Define slot types
interface MyComponentSlots {
  surfaceMotion: Slot<PresenceMotionSlotProps>;
}

// 3. Wire the slot
function useMyComponentState() {
  const state = useSlot<MyComponentSlots>();

  // Use presenceMotionSlot to manage the motion slot
  state.surfaceMotion = presenceMotionSlot({
    elementType: DefaultMotion,
    defaultProps: {
      visible: true, // Control visibility
      unmountOnExit: true, // Unmount when animation finishes
    },
    // Other props can be passed here, e.g., 'appear'
  });

  return state;
}

// 4. Render the slot
function MyComponent(props) {
  const state = useMyComponentState();
  assertSlots<MyComponentSlots>(state);

  return (
    <state.surfaceMotion>
      {/* Content to be animated */}
      <div>Animated Content</div>
    </state.surfaceMotion>
  );
}

```

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

### Toolbar Radio Group Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Shows a Toolbar containing a Radio Group for selecting a single option from a set.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const Radio = () => <Toolbar />;
```

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

### Toolbar with Overflow Items Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Demonstrates how to use the Overflow component with a Toolbar to manage a large number of controls. Refer to Overflow component documentation for complex scenarios.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const OverflowItems = () => <Toolbar />;
```

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

### Disabled Input Examples

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-input--docs

Illustrates how to disable the Input component, making it non-interactive. This can be applied to various appearance styles.

```typescript
import * as React from 'react';
import { Input } from '@fluentui/react-components';

export const Disabled = () => <Input disabled placeholder="Disabled input" />;

export const DisabledUnderline = () => (
  <Input disabled appearance="underline" placeholder="Disabled underline" />
);

export const DisabledFilledLighter = () => (
  <Input disabled appearance="filled-lighter" placeholder="Disabled filled lighter" />
);

export const DisabledFilledDarker = () => (
  <Input disabled appearance="filled-darker" placeholder="Disabled filled darker" />
);
```

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

### Controlled Radio Group in Toolbar Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-toolbar--docs

Illustrates a Toolbar with a Radio Group where the selected value is managed by component state.

```javascript
import * as React from 'react';
import { Toolbar } from '@fluentui/react-components';

export const ControlledRadio = () => <Toolbar />;
```

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

### Disabled SearchBox Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-searchbox--docs

Illustrates how to disable the SearchBox component. Disabled inputs are not interactive and typically appear visually distinct.

```typescript
import * as React from 'react';
import { SearchBox } from '@fluentui/react';

export const DisabledSearchBox = () => {
  return <SearchBox placeholder="Disabled SearchBox" disabled />; 
};
```

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

### Tree Size Variants

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tree--docs

Demonstrates how to render a tree in small or medium (default) size.

```javascript
import { Tree, TreeItem, makeStyles } from '@fluentui/react-components';

const useStyles = makeStyles({
  smallTree: {
    // Styles for small tree
  },
});

const App = () => {
  const styles = useStyles();
  return (
    <Tree size="small" className={styles.smallTree}>
      <TreeItem>level 1, item 1</TreeItem>
      <TreeItem>level 1, item 2</TreeItem>
    </Tree>
  );
};

export default App;
```

```javascript
import { Tree, TreeItem } from '@fluentui/react-components';

const App = () => {
  return (
    <Tree>
      <TreeItem>level 1, item 1</TreeItem>
      <TreeItem>level 1, item 2</TreeItem>
    </Tree>
  );
};

export default App;
```

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

### FluentProvider with Teams Dark Theme

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-fluentprovider--docs

Illustrates using FluentProvider with the Teams Dark theme. This is essential for applications requiring a dark mode experience consistent with Teams.

```jsx
import { FluentProvider, teamsDarkTheme } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={teamsDarkTheme}>
      {/* Your app content */}
    </FluentProvider>
  );
}
```

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

### Tree Item Layouts

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-tree--docs

Illustrates using TreeItemLayout and TreeItemPersonaLayout for different tree item structures.

```javascript
import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-components';

const App = () => {
  return (
    <Tree>
      <TreeItem itemType="branch">
        <TreeItemLayout>Tree using TreeItemLayout</TreeItemLayout>
      </TreeItem>
    </Tree>
  );
};

export default App;
```

```javascript
import { Tree, TreeItem, TreeItemPersonaLayout } from '@fluentui/react-components';

const App = () => {
  return (
    <Tree>
      <TreeItem itemType="branch">
        <TreeItemPersonaLayout>Tree using TreeItemPersonaLayout</TreeItemPersonaLayout>
      </TreeItem>
    </Tree>
  );
};

export default App;
```

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

### Uncontrolled SpinButton

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-spinbutton--docs

An uncontrolled SpinButton example. The `defaultValue` prop is used to set the initial value, and the component manages its own state.

```typescript
import { SpinButton } from "@fluentui/react";

export const UncontrolledSpinButton = () => (
  <SpinButton
    defaultValue={5}
    label="Uncontrolled SpinButton"
    // Other props are not shown for brevity
  />
);
```

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

### Text Component with Presets

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-text--docs

Shows how to use predefined Text presets for consistent typography. Presets handle font, size, and weight automatically.

```typescript
import { Text } from "@fluentui/react-components";

<Text preset="caption2">This is a caption2 preset.</Text>
<Text preset="body1strong">This is a body1strong preset.</Text>
<Text preset="subtitle1">This is a subtitle1 preset.</Text>
```

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

### Disabled Slider Example

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fcomponents-slider--docs

Shows how to disable a slider. A disabled slider will not respond to clicks or keyboard input and will not fire events.

```javascript
import * as React from 'react';
import { Slider } from '@fluentui/react';

export const DisabledSliderExample: React.FunctionComponent = () => (
  <Slider label="Disabled slider" disabled defaultValue={3} />
);
```

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

### Using Motion Tokens for CSS and JS Animations

Source: https://storybooks.fluentui.dev/react?path=%2Fdocs%2Fmotion-tokens--docs

Demonstrates how to use `tokens` for CSS-based animations and `motionTokens` for JavaScript-based animations. Ensure correct imports are used for each scenario.

```typescript
import { createMotionComponent, makeStyles, motionTokens, tokens } from '@fluentui/react-components';

// 💡 Use `tokens` for defining CSS based animations
const useClasses = makeStyles({
  root: {
    animationDuration: tokens.curveAccelerateMid,
  },
});

// 💡 Use `motionTokens` for defining JS based animations
const Motion = createMotionComponent({
  duration: motionTokens.curveAccelerateMid,
});

```