### Clone Repository and Install Dependencies

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/2 - Contributing.mdx

Clone the Fondue repository and install its dependencies using pnpm. Ensure pnpm is installed globally.

```shell
$ git clone git@github.com:Frontify/fondue.git
$ pnpm i
```

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

### Install Fondue Design System Packages

Source: https://context7.com/frontify/fondue/llms.txt

Install the complete Fondue design system or individual packages using npm.

```bash
# Install complete design system
npm install @frontify/fondue

# Or install individual packages
npm install @frontify/fondue-components
npm install @frontify/fondue-icons
npm install @frontify/fondue-charts
npm install @frontify/fondue-tokens
npm install @frontify/fondue-rte
```

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

### Clone Repository and Install Dependencies

Source: https://github.com/frontify/fondue/blob/main/CONTRIBUTING.md

Clone the Fondue repository and install its dependencies using pnpm. Ensure you run `pnpm build` before starting Storybook.

```shell
$ git clone git@github.com:Frontify/fondue.git
$ pnpm i
$ pnpm build # needs to be ran before starting storybook
```

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

### Orderable List - Old Implementation Example

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

This example demonstrates the previous implementation of the Orderable List component, including state management for items and the `handleMove` function for reordering.

```tsx
const [items, setItems] = useState<OrderableListItem<MyItem>>([
    { id: '1', sort: 1, alt: 'Item 1', textContent: <p>Item 1</p> },
    { id: '2', sort: 2, alt: 'Item 2', textContent: <p>Item 2</p> },
    { id: '3', sort: 3, alt: 'Item 3', textContent: <p>Item 3</p> },
]);

const handleMove = (modifiedItems: DraggableItem<MyItem>[]) => {
    // Manual reordering logic
    setItems(reorder(modifiedItems));
};

<OrderableList
    items={items}
    onMove={handleMove}
    dragDisabled={false}
    dragHandlerPosition="right"
    selectedId={currentSelectedId}
    itemStyle={{
        spacingY: 'small',
        contentHight: 'content-fit',
        shadow: 'small',
        borderRadius: 'medium',
        borderWidth: 'x-small',
        borderStyle: 'solid',
        activeColorStyle: 'soft',
    }}
    renderContent={(item) => <div>{item.textContent}</div>}
/>;
```

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

### Install Monorepo Dependencies

Source: https://github.com/frontify/fondue/blob/main/packages/rte/README.md

Install all project dependencies from the monorepo root.

```shell
pnpm install
```

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

### Build Style Dictionary with Style-Dictionary

Source: https://github.com/frontify/fondue/blob/main/packages/tokens/README.md

Run this command to build your style dictionary if you have the style-dictionary module installed globally.

```bash
style-dictionary build
```

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

### Install Fondue Package

Source: https://github.com/frontify/fondue/blob/main/packages/fondue/README.md

Install the Fondue package using npm. This is the first step to integrate Fondue into your project.

```shell
npm install @frontify/fondue
```

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

### Install Fondue Rich Text Editor with pnpm

Source: https://github.com/frontify/fondue/blob/main/packages/rte/README.md

Use this command to install the package using pnpm.

```shell
pnpm add @frontify/fondue-rte
```

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

### Install Fondue Rich Text Editor with npm

Source: https://github.com/frontify/fondue/blob/main/packages/rte/README.md

Use this command to install the package using npm.

```shell
npm install @frontify/fondue-rte
```

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

### Install @frontify/fondue Package

Source: https://github.com/frontify/fondue/blob/main/README.md

Add the Fondue design system package as a dependency to your project using npm, pnpm, or yarn.

```shell
npm i @frontify/fondue
```

```shell
pnpm i @frontify/fondue
```

```shell
yarn add @frontify/fondue
```

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

### Old Dialog Implementation Example

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

This example shows the previous implementation of the Dialog component, demonstrating its usage with state management and props like 'anchor' and 'handleClose'.

```tsx
const [isOpen, setIsOpen] = useState(false);

return (
    <Button icon={<IconIcon/>} ref={triggerRef} onClick={() => setIsOpen(!isOpen)}>
        Dialog Trigger
    </Button>

    <Dialog anchor={triggerRef} open={isOpen} handleClose={() => setIsOpen(false)}>
        <DialogHeader>Header</DialogHeader>
        <DialogBody padding="spacious">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad illum impedit iure numquam praesentium vel.
                Distinctio perferendis, suscipit! Dolor doloremque et ex, modi nobis officiis perspiciatis quis tempora
                temporibus voluptates?
            </p>
        </DialogBody>
        <DialogFooter
            actionButtons={[
                {
                    children: 'Close',
                    onClick: () => {},
                },
            ]}
        ></DialogFooter>
    </Dialog>
)
```

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

### Run RTE Storybook

Source: https://github.com/frontify/fondue/blob/main/packages/rte/README.md

Start the Storybook server to develop and view the RTE components locally.

```shell
pnpm storybook
```

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

### Nested ThemeProvider Example

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/1 - Getting Started.mdx

Demonstrates nesting ThemeProvider components to specify different themes for specific sets of components. The closest provider's theme will be applied.

```tsx
<ThemeProvider theme="light">
    <ComponentUsingLightTheme />
    <ThemeProvider theme="dark">
        <ComponentUsingDarkTheme />
    </ThemeProvider>
</ThemeProvider>
```

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

### TextInput Component Examples

Source: https://context7.com/frontify/fondue/llms.txt

Provides various examples of the TextInput component, including basic usage, different input types, status indicators, controlled inputs, slot usage, disabled/readonly states, and required fields with max length.

```tsx
import { TextInput } from '@frontify/fondue-components';
import { IconSearch, IconCheckMark } from '@frontify/fondue-icons';

function TextInputExamples() {
    return (
        <>
            {/* Basic text input */}
            <TextInput
                placeholder="Enter your name"
                onChange={(e) => console.log(e.target.value)}
            />

            {/* Different input types */}
            <TextInput type="email" placeholder="Email address" />
            <TextInput type="password" placeholder="Password" />
            <TextInput type="number" placeholder="Age" />
            <TextInput type="tel" placeholder="Phone number" />

            {/* Input with status indicators */}
            <TextInput status="neutral" placeholder="Neutral state" />
            <TextInput status="success" placeholder="Valid input" />
            <TextInput status="error" placeholder="Invalid input" />
            <TextInput status="loading" placeholder="Loading..." />

            {/* Controlled input */}
            <TextInput
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                onBlur={(e) => console.log('Input lost focus')}
                onFocus={(e) => console.log('Input focused')}
            />

            {/* Input with slots for icons/buttons */}
            <TextInput.Root placeholder="Search...">
                <TextInput.Slot name="left">
                    <IconSearch size={16} />
                </TextInput.Slot>
            </TextInput.Root>

            {/* Disabled and readonly states */}
            <TextInput disabled placeholder="Disabled input" />
            <TextInput readOnly value="Read-only value" />

            {/* Required input with max length */}
            <TextInput
                required
                maxLength={100}
                placeholder="Required field"
            />
        </>
    );
}
```

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

### Select Component Examples (React)

Source: https://context7.com/frontify/fondue/llms.txt

Demonstrates single and multiple selection dropdowns with and without search functionality. Use 'SelectSingle' or 'ComboboxSingle' for single selections, and 'SelectMultiple' or 'ComboboxMultiple' for multiple selections. 'Combobox' variants include search capabilities.

```tsx
import { SelectSingle, SelectMultiple, ComboboxSingle, ComboboxMultiple } from '@frontify/fondue-components';

function SelectExamples() {
    const [selectedValue, setSelectedValue] = useState<string | null>(null);
    const [selectedValues, setSelectedValues] = useState<string[]>([]);

    const options = [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'cherry', label: 'Cherry' },
        { value: 'date', label: 'Date' },
    ];

    return (
        <>
            {/* Single select (controlled) */}
            <SelectSingle
                value={selectedValue}
                onSelect={(value) => setSelectedValue(value)}
                placeholder="Select a fruit"
            >
                {options.map((option) => (
                    <Select.Option key={option.value} value={option.value}>
                        {option.label}
                    </Select.Option>
                ))}
            </SelectSingle>

            {/* Single select (uncontrolled) */}
            <SelectSingle
                defaultValue="apple"
                onSelect={(value) => console.log('Selected:', value)}
            >
                {options.map((option) => (
                    <Select.Option key={option.value} value={option.value}>
                        {option.label}
                    </Select.Option>
                ))}
            </SelectSingle>

            {/* Multi-select */}
            <SelectMultiple
                value={selectedValues}
                onSelect={(values) => setSelectedValues(values)}
                placeholder="Select fruits"
            >
                {options.map((option) => (
                    <Select.Option key={option.value} value={option.value}>
                        {option.label}
                    </Select.Option>
                ))}
            </SelectMultiple>

            {/* Combobox with search (single) */}
            <ComboboxSingle
                placeholder="Search and select..."
                onSelect={(value) => console.log('Selected:', value)}
            >
                {options.map((option) => (
                    <Select.Option key={option.value} value={option.value}>
                        {option.label}
                    </Select.Option>
                ))}
            </ComboboxSingle>

            {/* Combobox with search (multiple) */}
            <ComboboxMultiple
                placeholder="Search and select multiple..."
                onSelect={(values) => console.log('Selected:', values)}
            >
                {options.map((option) => (
                    <Select.Option key={option.value} value={option.value}>
                        {option.label}
                    </Select.Option>
                ))}
            </ComboboxMultiple>
        </>
    );
}
```

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

### Old Switch Component Example

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Illustrates the usage of the previous version of the Switch component, highlighting properties like `label`, `tooltip`, and `mode`.

```tsx
<Switch
    id="old-switch"
    label="Dark mode"
    tooltip="Toggle dark mode"
    mode={true}
    size="medium"
    hug={true}
    disabled={false}
    onChange={(event) => console.log('Value:', event.target.value}
    aria-label="Adjust volume level"
    data-test-id="switch-test"
/>
```

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

### Basic Dialog Example

Source: https://context7.com/frontify/fondue/llms.txt

Demonstrates a standard dialog with a trigger button, customizable header, body, footer, and optional side content. Use this for general-purpose modal interactions.

```tsx
import { useState } from 'react';
import { Dialog, Button, TextInput, Flex } from '@frontify/fondue-components';

function DialogExample() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
            {
/* Trigger button */}
<Dialog.Trigger>
                <Button>Open Dialog</Button>
            </Dialog.Trigger>

            {
/* Dialog content */}
<Dialog.Content
                maxWidth="600px"
                minWidth="400px"
                showUnderlay={true}
                padding="compact"
            >
                {
/* Optional side content */}
<Dialog.SideContent>
                    <div style={{ backgroundColor: '#f0f0f0', height: '100%', width: '150px' }} />
                </Dialog.SideContent>

                {
/* Header with title and close button */}
<Dialog.Header showCloseButton>
                    <Dialog.Title>Edit Profile</Dialog.Title>
                </Dialog.Header>

                {
/* Body content */}
<Dialog.Body>
                    <Dialog.Description>
                        Update your profile information below.
                    </Dialog.Description>
                    <Flex direction="column" gap="16px">
                        <TextInput placeholder="Enter your name" />
                        <TextInput placeholder="Enter your email" type="email" />
                    </Flex>
                </Dialog.Body>

                {
/* Footer with actions */}
<Dialog.Footer>
                    <Dialog.Close>
                        <Button emphasis="default">Cancel</Button>
                    </Dialog.Close>
                    <Button onPress={() => setIsOpen(false)}>Save Changes</Button>
                </Dialog.Footer>
            </Dialog.Content>
        </Dialog.Root>
    );
}

```

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

### Old Dropdown Component Usage

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Example of the legacy Dropdown component, showing its structure with menuBlocks and menuItems.

```tsx
const [active, setActive] = useState(args.activeItemId);
useEffect(() => setActive(args.activeItemId), [args.activeItemId]);
return (
    <Dropdown activeItemId={active} onChange={(id) => setActive(id)} menuBlocks={[ 
        {
            id: 'block1',
            ariaLabel: 'First section',
            menuItems: [
                {
                    id: 1,
                    title: 'Simple',
                },
                {
                    id: 2,
                    title: 'Item with icon',
                    decorator: <IconMusicNote />,
                    style: MenuItemStyle.Danger,
                },
                {
                    id: 3,
                    title: 'Item small',
                    size: MenuItemContentSize.Small,
                },
            ],
        },

    ]}>
)
```

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

### Fondue Button Component Examples

Source: https://context7.com/frontify/fondue/llms.txt

Demonstrates various configurations of the Fondue Button component, including different variants, emphasis levels, sizes, and aspect ratios. Ensure icons are imported from '@frontify/fondue-icons'.

```tsx
import { Button } from '@frontify/fondue-components';
import { IconColorFan, IconIcon } from '@frontify/fondue-icons';

function ButtonExamples() {
    return (
        <>
            {/* Basic button with text */}
            <Button onPress={() => console.log('Button clicked')}> 
                Click Me
            </Button>

            {/* Button with icon and text */}
            <Button variant="default" emphasis="strong" size="medium">
                <IconColorFan size={16} />
                Button with Icon
            </Button>

            {/* Icon-only button (square aspect) */}
            <Button aspect="square" title="Settings">
                <IconIcon size={16} />
            </Button>

            {/* Different variants */}
            <Button variant="positive">Success Action</Button>
            <Button variant="negative">Delete Action</Button>
            <Button variant="danger">Danger Action</Button>
            <Button variant="loud">Loud Action</Button>

            {/* Different emphasis levels */}
            <Button emphasis="strong">Strong (Default)</Button>
            <Button emphasis="default">Default</Button>
            <Button emphasis="weak">Weak</Button>

            {/* Different sizes */}
            <Button size="small">Small</Button>
            <Button size="medium">Medium</Button>
            <Button size="large">Large</Button>

            {/* Fully rounded button */}
            <Button rounding="full" aspect="square">
                <IconIcon size={16} />
            </Button>

            {/* Disabled button */}
            <Button disabled>Disabled Button</Button>

            {/* Submit button for forms */}
            <Button type="submit" form="my-form">Submit Form</Button>
        </>
    );
}
```

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

### Old Slider Component Configuration

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Example of the previous Slider component, illustrating its properties like label, value, min, max, step, and valueSuffix.

```tsx
<Slider
    id="old-slider"
    label="Volume"
    value={50}
    min={0}
    max={100}
    showMinMax={true}
    step={5}
    stepMultiplier={10}
    valueSuffix="%"
    disabled={false}
    onError={(errorCode) => console.error('Error:', errorCode)}
    onChange={(value) => console.log('Value:', value.raw, value.withSuffix)}
    data-test-id="slider-test"
    aria-label="Adjust volume level"
/>
```

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

### New Switch Component Example

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Demonstrates the updated Switch component with new properties such as `name`, `defaultValue`, `required`, and improved accessibility props like `aria-labelledby` and `aria-describedby`. Includes event handlers for `onChange`, `onBlur`, and `onFocus`.

```tsx
<Label id="dark-mode-label" htmlFor="new-switch">Dark mode</Label>
<Tooltip.Root enterDelay={200}>
    <Tooltip.Trigger>
        <IconQuestionMarkCircle />
    </Tooltip.Trigger>
    <Tooltip.Content side="top" padding="spacious">
        <p id="dark-mode-switch-description">Toggle dark mode.</p>
    </Tooltip.Content>
</Tooltip.Root>
<Switch
    id="new-switch"
    name="dark-mode-switch"
    defaultValue={true}
    size="medium"
    required={true}
    disabled={false}
    onChange={(value) => console.log('Value:', value)}
    onBlur={(event) => console.log('Event:', event)}
    onFocus={(event) => console.log('Event:', event)}
    aria-labelledby="dark-mode-label"
    aria-describedby="dark-mode-switch-description"
    data-test-id="switch-test"
/>
```

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

### Icon Component Examples (React)

Source: https://context7.com/frontify/fondue/llms.txt

Shows how to use various icons from the Fondue Icons library. Icons are React components rendering SVGs. They support different sizes (8-32px), custom colors, and can inherit color using 'currentColor'.

```tsx
import {
    IconCheckMark,
    IconCross,
    IconSearch,
    IconArrowDown,
    IconColorFan,
    IconIcon,
    IconExclamationMarkTriangle,
    icons  // namespace import for all icons
} from '@frontify/fondue-icons';

function IconExamples() {
    return (
        <>
            {/* Basic icon usage with default size (24px) */}
            <IconCheckMark />

            {/* Different sizes (8, 12, 16, 20, 24, 32) */}
            <IconSearch size={8} />
            <IconSearch size={12} />
            <IconSearch size={16} />
            <IconSearch size={20} />
            <IconSearch size={24} />
            <IconSearch size={32} />

            {/* Custom color */}
            <IconCheckMark color="green" />
            <IconCross color="red" />
            <IconArrowDown color="#3498db" />

            {/* Using currentColor (inherits from parent) */}
            <span style={{ color: 'purple' }}>
                <IconColorFan />
            </span>

            {/* Additional className */}
            <IconIcon className="custom-icon-class" />

            {/* Accessing icons dynamically */}
            {Object.entries(icons).slice(0, 5).map(([name, Icon]) => (
                <Icon key={name} size={20} />
            ))}
        </>
    );
}
```

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

### SegmentedControl Root Component Example

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Demonstrates the usage of the SegmentedControl.Root component with conditional rendering of items and custom item content.

```tsx
<SegmentedControl.Root defaultValue="item-1" value={value} onValueChange={setValue} disabled={disabled}>
    {isItem1Disabled ? <SegmentedControl.Item value="item-1">Item 1</SegmentedControl.Item> : null}

    <SegmentedControl.Item value="item-2">
        {/* Already has a default flex and gap, no need to wrap with a `div` */}
        <IconIcon />
        Item 2
    </SegmentedControl.Item>

    <SegmentedControl.Item value="item-3" aria-label="Item 3">
        <IconIcon />
    </SegmentedControl.Item>
</SegmentedControl.Root>
```

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

### DatePicker with Flyout and Input Trigger

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Example of composing DatePicker with Flyout and DatePicker.Input to create a popover calendar with an input trigger.

```tsx
const [isOpen, setIsOpen] = useState(false);
const [selectedDate, setSelectedDate] = useState<DatePickerDate>();

<Flyout.Root open={isOpen} onOpenChange={setIsOpen}>
    <Flyout.Trigger>
        <DatePicker.Input selected={selectedDate} isOpen={isOpen} onClear={() => setSelectedDate(undefined)} />
    </Flyout.Trigger>
    <Flyout.Content>
        <DatePicker selected={selectedDate} onChange={setSelectedDate} />
    </Flyout.Content>
</Flyout.Root>;
```

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

### Checkbox Component Examples

Source: https://context7.com/frontify/fondue/llms.txt

Demonstrates the Checkbox component's functionality, including uncontrolled and controlled states, indeterminate, different sizes, emphasis levels, error states, disabled/readonly options, and usage with labels.

```tsx
import { Checkbox } from '@frontify/fondue-components';

function CheckboxExamples() {
    const [isChecked, setIsChecked] = useState(false);

    return (
        <>
            {/* Basic checkbox (uncontrolled) */}
            <Checkbox
                defaultValue={false}
                onChange={(e) => console.log('Checkbox changed')}
            />

            {/* Controlled checkbox */}
            <Checkbox
                value={isChecked}
                onChange={() => setIsChecked(!isChecked)}
            />

            {/* Indeterminate state */}
            <Checkbox value="indeterminate" />

            {/* Different sizes */}
            <Checkbox size="default" defaultValue={true} />
            <Checkbox size="large" defaultValue={true} />

            {/* Different emphasis */}
            <Checkbox emphasis="default" defaultValue={true} />
            <Checkbox emphasis="weak" defaultValue={true} />

            {/* Error state */}
            <Checkbox status="error" defaultValue={false} />

            {/* Disabled and readonly */}
            <Checkbox disabled defaultValue={true} />
            <Checkbox readOnly value={true} />

            {/* With label (using label element) */}
            <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <Checkbox id="terms" required />
                I agree to the terms and conditions
            </label>
        </>
    );
}
```

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

### Build All Packages

Source: https://github.com/frontify/fondue/blob/main/CONTRIBUTING.md

Build all packages in the monorepo by running the `pnpm build` command in the root directory.

```shell
pnpm build
```

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

### Use ThemeProvider for Theming

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/1 - Getting Started.mdx

Wrap your application with the ThemeProvider component to manage themes ('light' or 'dark') and provide correct tokens to components. Import base tokens separately.

```tsx
import "@frontify/fondue/tokens/base";
import { ThemeProvider } from "@frontify/fondue/components";

const App = () => (
    <ThemeProvider theme="light">
        ...YourApp
    </ThemeProvider>
);
```

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

### Import Fondue Components

Source: https://github.com/frontify/fondue/blob/main/packages/fondue/README.md

Import specific components from the Fondue library to use them in your application. For example, importing the Button component.

```typescript
import { Button } from '@frontify/fondue';
```

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

### Run RTE Package Tests

Source: https://github.com/frontify/fondue/blob/main/packages/rte/README.md

Navigate to the RTE package directory and run its tests.

```shell
cd packages/rte
pnpm test
```

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

### Non-Dismissable Dialog Example

Source: https://context7.com/frontify/fondue/llms.txt

Shows a dialog that cannot be closed by pressing Escape or clicking outside the dialog area. Use this for critical confirmations where user interaction is mandatory.

```tsx
// Non-dismissable dialog (cannot close with Escape or clicking outside)
function NonDismissableDialog() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <Dialog.Root
            open={isOpen}
            onOpenChange={setIsOpen}
            dismissable={false}
        >
            <Dialog.Trigger>
                <Button>Open Important Dialog</Button>
            </Dialog.Trigger>
            <Dialog.Content showUnderlay>
                <Dialog.Header>
                    <Dialog.Title>Confirm Action</Dialog.Title>
                </Dialog.Header>
                <Dialog.Body>
                    This action cannot be undone. Are you sure you want to proceed?
                </Dialog.Body>
                <Dialog.Footer>
                    <Dialog.Close>
                        <Button emphasis="default">Cancel</Button>
                    </Dialog.Close>
                    <Button variant="danger" onPress={() => setIsOpen(false)}>
                        Confirm Delete
                    </Button>
                </Dialog.Footer>
            </Dialog.Content>
        </Dialog.Root>
    );
}

```

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

### Create a New Component with Script

Source: https://github.com/frontify/fondue/blob/main/CONTRIBUTING.md

Use the `create:component` script to generate the necessary files for a new component, including React component, tests, stories, and styling.

```shell
pnpm create:component FancyComponent
```

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

### Create a Changeset for Package Release

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/2 - Contributing.mdx

Initiate the package version bumping process using `pnpm changeset`. Follow the prompts to select packages and version bumps, and prefix descriptions with conventional commit types.

```shell
pnpm changeset
```

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

### Find and Replace Deprecated Imports with Codemod

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/3 - Upgrading.mdx

Use this codemod to find and replace deprecated imports and legacy component/utility usage. Ensure you have the correct package version installed.

```bash
pnpm --package=@frontify/fondue@v13.0.0 dlx find-deprecated-imports <path-to-your-project>
```

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

### Create New Component Files

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/2 - Contributing.mdx

Use the `component:create` script to generate the necessary files for a new component, including its React component, tests, and Storybook stories.

```shell
pnpm component:create FancyComponent
```

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

### Linear Gauge Component Examples

Source: https://context7.com/frontify/fondue/llms.txt

Displays proportional data as colored segments in a horizontal bar. Supports basic display, total value display, and detailed breakdowns.

```tsx
import { LinearGauge, type LinearGaugeSection } from '@frontify/fondue-charts';
import '@frontify/fondue-charts/styles';

function LinearGaugeExample() {
    const sections: LinearGaugeSection[] = [
        { name: 'Used Storage', label: '2 GB', percentage: 30 },
        { name: 'Documents', label: '1.5 GB', percentage: 22 },
        { name: 'Photos', label: '2.5 GB', percentage: 38 },
    ];

    return (
        <>
            {/* Basic linear gauge */}
            <LinearGauge sections={sections} />

            {/* With total display */}
            <LinearGauge
                sections={sections}
                totalLabel="Total Used"
                totalValue="6 GB"
            />

            {/* Storage breakdown example */}
            <LinearGauge
                sections={[
                    { name: 'System', label: '15 GB', percentage: 15 },
                    { name: 'Apps', label: '25 GB', percentage: 25 },
                    { name: 'Media', label: '40 GB', percentage: 40 },
                    { name: 'Other', label: '5 GB', percentage: 5 },
                ]}
                totalLabel="Used Space"
                totalValue="85 GB of 100 GB"
            />
        </>
    );
}
```

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

### Import and Use Legacy Components

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/1 - Getting Started.mdx

Import legacy components directly from the '@frontify/fondue' package if indicated by a [legacy] badge in Storybook.

```tsx
import { Button } from '@frontify/fondue';

const App = () => <Button>Click Me</Button>;
```

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

### Import and Use Fondue Components

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/1 - Getting Started.mdx

Import and use components from the '@frontify/fondue/components' subpackage. Ensure component styles are imported separately.

```tsx
import { Button } from '@frontify/fondue/components';

const App = () => <Button>Click Me</Button>;
```

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

### Build Rich Text Editor Package

Source: https://github.com/frontify/fondue/blob/main/packages/rte/README.md

Build the RTE package within the Fondue monorepo.

```shell
pnpm build:rte
```

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

### Import Base Tokens and Default Theme

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/3 - Upgrading.mdx

Import the base tokens and default theme at the root of your application. This is required for the updated token system.

```jsx
import "@frontify/fondue/tokens/base";

export const App = () => {
    return (
        <div>
            {/* Your application */}
        </div>
    );
};
```

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

### Build Individual Packages

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/2 - Contributing.mdx

Build specific packages within the monorepo by running `pnpm build` in their respective directories or using root-level build scripts.

```shell
pnpm build:components
```

```shell
pnpm build:fondue
```

```shell
pnpm build:icons
```

```shell
pnpm build:charts
```

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

### OrderableList with Selection and Actions

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Shows how to implement selection and actions within OrderableList items. Uses 'react-state' for order and selection management.

```tsx
const [order, setOrder] = useState(['1', '2', '3']);
const [selectedId, setSelectedId] = useState<string | null>(null);

<OrderableList.Root spacing="compact" order={order} onOrderChange={setOrder}>
    <OrderableList.Item
        id="1"
        selected={selectedId === '1'}
        onSelect={() => setSelectedId(selectedId === '1' ? null : '1')}
    >
        <OrderableList.ItemDecorator>A</OrderableList.ItemDecorator>
        <OrderableList.ItemTitle>Item 1</OrderableList.ItemTitle>
        <OrderableList.ItemDescription>Click to select</OrderableList.ItemDescription>
        <OrderableList.ItemAction>
            <Button aspect="square" emphasis="default" size="small">
                <IconTrashBin size={16} />
            </Button>
        </OrderableList.ItemAction>
        <OrderableList.DragHandle />
    </OrderableList.Item>
</OrderableList.Root>;
```

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

### Import Fondue Design Tokens and Tailwind Configuration

Source: https://context7.com/frontify/fondue/llms.txt

Import base styles and CSS variables for theming, and configure Tailwind CSS with the provided preset. This sets up the foundation for consistent styling across your application.

```typescript
// Import CSS tokens (base styles and CSS variables)
import '@frontify/fondue-tokens/styles';

// Import Tailwind configuration
import fondueConfig from '@frontify/fondue-tokens/tailwind';

// tailwind.config.js
export default {
    presets: [fondueConfig],
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
};
```

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

### Basic OrderableList Usage

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Demonstrates the basic structure of an OrderableList with draggable items. Requires 'react-state' for managing order.

```tsx
const [order, setOrder] = useState(['1', '2', '3']);

<OrderableList.Root spacing="compact" order={order} onOrderChange={setOrder}>
    <OrderableList.Item id="1">
        <OrderableList.ItemTitle>Item 1</OrderableList.ItemTitle>
        <OrderableList.ItemDescription>Item 1 description</OrderableList.ItemDescription>
        <OrderableList.DragHandle />
    </OrderableList.Item>
    <OrderableList.Item id="2">
        <OrderableList.ItemTitle>Item 2</OrderableList.ItemTitle>
        <OrderableList.ItemDescription>Item 2 description</OrderableList.ItemDescription>
        <OrderableList.DragHandle />
    </OrderableList.Item>
    <OrderableList.Item id="3">
        <OrderableList.ItemTitle>Item 3</OrderableList.ItemTitle>
        <OrderableList.ItemDescription>Item 3 description</OrderableList.ItemDescription>
        <OrderableList.DragHandle />
    </OrderableList.Item>
</OrderableList.Root>;
```

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

### Load Fondue Stylesheet

Source: https://github.com/frontify/fondue/blob/main/packages/fondue/README.md

Import the main Fondue stylesheet to apply the design system's styles. This should be done early in your application's entry point.

```typescript
import '@frontify/fondue/style';
```

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

### Old Dropdown Component Implementation

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Shows the previous implementation of the Dropdown component using `menuBlocks` and various item configurations.

```tsx
<Dropdown menuBlocks={[
    {
        id: 'block1',
        ariaLabel: 'First section',
        menuItems: [
            {
                id: 1,
                title: 'Item default',
            },
            {
                id: 2,
                title: 'Item small',
                size: MenuItemContentSize.Small,
            },
            {
                id: 3,
                title: 'Item decorator',
                decorator: <IconMusicNote />,
            },
        ],
    },
    {
        id: 'block2',
        ariaLabel: 'Second section',
        menuItems: [
            {
                id: '9',
                title: 'Item disabled',
                disabled: true,
            },
            {
                id: '10',
                title: 'Item danger',
                style: MenuItemStyle.Danger,
            },
        ],
    },
]}>
```

```tsx
<Menu onClose={() => {}}>
    <MenuItem onClick={() => {}}>Item default</MenuItem>
    <MenuItem onClick={() => {}}>
        <span className="tw-text-sm">Item small</span>
    </MenuItem>
    <MenuItem onClick={() => {}}>
        <div style={{display: "flex", gap: 8}}>
            <IconIcon size={16} />
            <span> Item decorator </span>
        </div>
    </MenuItem>
    <hr />
    <MenuItem disabled>
        Item disabled
    </MenuItem>
    <MenuItem onClick={() => {}}>
        <span className="tw-bg-red-50">Item danger</span>
    </MenuItem>
    <MenuItem link="/?path=/docs/components-menu--docs">
        Item link
    </MenuItem>
</Menu>
```

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

### New Dialog Component Implementation

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Demonstrates the structure of the new Dialog component, including its trigger, content, header, body, and footer.

```tsx
<Dialog.Root>
    <Dialog.Trigger>
        <Button>
            <IconIcon />
            Dialog Trigger
        </Button>
    </Dialog.Trigger>
    <Dialog.Content>
        <Dialog.SideContent>
            <div className="tw-bg-success tw-h-full tw-w-full"></div>
        </Dialog.SideContent>
        <Dialog.Header>Header</Dialog.Header>
        <Dialog.Body padding="spacious">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad illum impedit iure numquam praesentium vel.
            Distinctio perferendis, suscipit! Dolor doloremque et ex, modi nobis officiis perspiciatis quis tempora
            temporibus voluptates?
        </Dialog.Body>
        <Dialog.Footer>
            <Button onPress={() => {}}>Close</Button>
        </Dialog.Footer>
    </Dialog.Content>
</Dialog.Root>
```

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

### Migrate InlineDialog to Flyout

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Use Flyout.Root, Flyout.Trigger, and Flyout.Content for new flyout implementations. The old InlineDialog is deprecated.

```tsx
const [isOpen, setIsOpen] = useState(false);

return (
    <Box className="tw-w-fit">
        <Button icon={<IconIcon />} onClick={() => setIsOpen(!isOpen)}>
            Trigger
        </Button>
        <InlineDialog anchor={triggerRef} open={isOpen} handleClose={() => setIsOpen(false)}>
            <DialogBody padding="comfortable">
                <Box className="tw-text-primary">
                    <TextExample />
                    <TextExample />
                    <TextExample />
                    <Button onClick={() => setIsOpen(!isOpen)}>Close</Button>
                </Box>
            </DialogBody>
        </InlineDialog>
    </Box>
);
```

```tsx
<Flyout.Root>
    <Flyout.Trigger>
        <Button>
            <IconIcon />
            Trigger
        </Button>
    </Flyout.Trigger>
    <Flyout.Content side="right">
        <Flyout.Header showCloseButton>Header</Flyout.Header>
        <Flyout.Body />
        <Flyout.Footer>
            <Button emphasis="default">Cancel</Button>
            <Button>Submit</Button>
        </Flyout.Footer>
    </Flyout.Content>
</Flyout.Root>
```

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

### Render Basic Bar Chart - React

Source: https://context7.com/frontify/fondue/llms.txt

Demonstrates how to render a basic vertical bar chart using single series data. Ensure '@frontify/fondue-charts' is imported along with its styles.

```tsx
import { BarChart, type BarChartSeries } from '@frontify/fondue-charts';
import '@frontify/fondue-charts/styles';

function BarChartExample() {
    // Single series data
    const singleSeries: BarChartSeries[] = [
        {
            name: 'Sales by Region',
            dataPoints: [
                { label: 'North', value: 120 },
                { label: 'South', value: 85 },
                { label: 'East', value: 150 },
                { label: 'West', value: 95 },
            ],
        },
    ];

    return (
        <>
            {/* Basic vertical bar chart */}
            <BarChart
                series={singleSeries}
                width={800}
                height={400}
            />
        </>
    );
}
```

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

### New Dropdown Component Implementation

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Illustrates the updated Dropdown component structure with `Dropdown.Root`, `Dropdown.Trigger`, and `Dropdown.Content`, including slots for customization.

```tsx
<Dropdown.Root onOpenChange={() => {}} open={open}>
    <Dropdown.Trigger>
        <Button>Trigger</Button>
    </Dropdown.Trigger>
    <Dropdown.Content onOpen={() => {}}  onClose={() => {}}>
        <Dropdown.Item onSelect={() => {}}>Item default</Dropdown.Item>
        <Dropdown.Item onSelect={() => {}}>
            <span className="tw-text-sm">Item small</span>
        </Dropdown.Item>
        <Dropdown.Item onSelect={() => {}}>
            <Dropdown.Slot name="left">
                <IconIcon size={16} />
            </Dropdown.Slot>
            Item decorator
        </Dropdown.Item>
        <hr />
        <Dropdown.Item disabled>
            Item disabled
        </Dropdown.Item>
        <Dropdown.Item onSelect={() => {}}>
            <span className="tw-bg-red-50">Item danger</span>
        </Dropdown.Item>
        <Dropdown.Item>
            <a href="https://www.frontify.com/" target="_blank">Item link</span>
        </Dropdown.Item>
    </Dropdown.Content>
</Dropdown.Root>
```

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

### SCSS Variables

Source: https://github.com/frontify/fondue/blob/main/packages/tokens/README.md

SCSS file defining variables for colors and font sizes.

```scss
// variables.scss
$color-base-gray-light: #cccccc;
$color-base-gray-medium: #999999;
$color-base-gray-dark: #111111;
$color-base-red: #ff0000;
$color-base-green: #00ff00;
$color-font-base: #ff0000;
$color-font-secondary: #00ff00;
$color-font-tertiary: #cccccc;
$size-font-small: 0.75rem;
$size-font-medium: 1rem;
$size-font-large: 2rem;
$size-font-base: 1rem;
```

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

### Update Color Picker Component Usage

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Shows how to use the Color Picker component with the new Flyout composition pattern and separate input/gradient components.

```tsx
<ColorPicker
    currentColor={selectedColor}
    currentFormat={currentFormat}
    setFormat={setCurrentFormat}
    onSelect={(color) => {}}
/>
```

```tsx
const [currentColor, setCurrentColor] = useState({ red: 85, green: 102, blue: 255 });

<Flyout.Root>
    <Flyout.Trigger>
        <ColorPicker.Input currentColor={currentColor} onColorChange={setCurrentColor} />
    </Flyout.Trigger>
    <Flyout.Content>
        <ColorPicker.Root defaultFormat="HEX" currentColor={currentColor} onColorChange={setCurrentColor}>
            <ColorPicker.Values />
            <ColorPicker.Gradient />
        </ColorPicker.Root>
    </Flyout.Content>
</Flyout.Root>

// or

<ColorPicker.Root defaultFormat="HEX" currentColor={currentColor} onColorChange={setCurrentColor}>
    <ColorPicker.Values />
    <ColorPicker.Gradient />
</ColorPicker.Root>
```

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

### Compose Size Definitions

Source: https://github.com/frontify/fondue/blob/main/packages/tokens/README.md

Kotlin object defining size tokens (e.g., font sizes) for Jetpack Compose applications.

```kotlin
object StyleDictionarySize {
  /** the base size of the font */
  val sizeFontBase = 16.00.sp
  /** the large size of the font */
  val sizeFontLarge = 32.00.sp
  /** the medium size of the font */
  val sizeFontMedium = 16.00.sp
  /** the small size of the font */
  val sizeFontSmall = 12.00.sp
}
```

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

### Update Icon Imports and Usage

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/3 - Upgrading.mdx

Update your icon imports to use the `@frontify/fondue/icons` package. Icons with a `filled` variant are now separate exports, and size is set via a prop.

```jsx
- import { SampleIcon16 } from '@frontify/fondue';
+ import { SampleIconFilled } from '@frontify/fondue/icons';

- <SampleIcon16 size={16} filled />
+ <SampleIconFilled size={16} />
```

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

### New Select Component with Slots

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Demonstrates the new Select component using slots for left, right, and menu content, allowing complex item structures.

```tsx
const [activeItem, setActiveItem] = useState('');

return(
    <Select
        onSelect={(selectedItem) => {
            setActiveItem(() => selectedItem);
        }}
        value={activeItem}
    >
        <Select.Slot name="left">
            <IconIcon size={16} />
        </Select.Slot>
        <Select.Slot name="right">
            <IconIcon size={16} />
        </Select.Slot>
        <Select.Slot name="menu">
            <Select.Item value="simple">Simple</Select.Item>
            <Select.Item value="item-with-icon">
                <div className="tw-flex tw-items-center tw-gap-4">
                    <IconMusicNote />
                    <span>Item with icon</span>
                </div>
            </Select.Item>
            <Select.Item value="small-item">
                <span class="tw-text-sm">Small item</span>
            </Select.Item>
        </Select.Slot>
    </Select>
)

// Or, for a simpler setup you don't have to use the slots:

<Select>
    <Select.Item value="item-1">Item 2</Select.Item>
    <Select.Item value="item-2">Item 2</Select.Item>
    <Select.Item value="item-3">Item 3</Select.Item>
</Select>
```

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

### Migrate CSS Variables and Tailwind Classes to Token System with Codemod

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/3 - Upgrading.mdx

This codemod helps migrate CSS variables and Tailwind classes to the new token system. Options include dry runs and targeting specific migration types (CSS or Tailwind).

```bash
pnpm --package=@frontify/fondue@v13.0.0 dlx migrate-tokens <path-to-your-project>
```

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

### Update Rich Text Editor Imports

Source: https://github.com/frontify/fondue/blob/main/storybook-docs/stories/3 - Upgrading.mdx

Update your imports for the rich text editor to point to the new `@frontify/fondue/rte` package.

```jsx
- import { ... } from '@frontify/fondue';
+ import { ... } from '@frontify/fondue/rte';
```

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

### TextInput with Slots for Decorators and Actions

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Configures TextInput with leading and trailing slots for decorators, clear buttons, and copy actions. Uses TextInput.Root and TextInput.Slot.

```tsx
<TextInput.Root>
    <TextInput.Slot name="left">
        <IconIcon />
    </TextInput.Slot>

    <TextInput.Slot name="right">
        <Button onPress={(event) => {}}>
            <IconClear />
        </Button>

        <Button onPress={(event) => {}}>
            <IconCopy />
        </Button>
    </TextInput.Slot>
</TextInput.Root>
```

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

### Implement ThemeProvider for Dark Mode and RTL

Source: https://context7.com/frontify/fondue/llms.txt

Wrap your application with the ThemeProvider component to enable dark mode and right-to-left (RTL) text direction. This component manages the theme context for your application.

```tsx
import { ThemeProvider, useFondueTheme } from '@frontify/fondue-components';

function App() {
    return (
        <ThemeProvider theme="light" dir="ltr">
            <YourApplication />
        </ThemeProvider>
    );
}

// Dark mode
function DarkModeApp() {
    return (
        <ThemeProvider theme="dark">
            <YourApplication />
        </ThemeProvider>
    );
}

// RTL support
function RTLApp() {
    return (
        <ThemeProvider dir="rtl">
            <YourApplication />
        </ThemeProvider>
    );
}

// Access theme context in components
function ThemedComponent() {
    const { theme, dir } = useFondueTheme();

    return (
        <div>
            Current theme: {theme}
            Direction: {dir}
        </div>
    );
}
```

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

### Utilize Fondue CSS Variables for Styling

Source: https://context7.com/frontify/fondue/llms.txt

Demonstrates how to use CSS variables provided by Fondue tokens for colors, spacing, typography, borders, and shadows within your custom components. This ensures adherence to the design system's visual language.

```css
/* Using CSS variables in your styles */
.custom-component {
    /* Color tokens */
    background-color: var(--color-box-neutral);
    color: var(--color-text-default);
    border-color: var(--color-line-default);

    /* Spacing tokens */
    padding: var(--spacing-4);
    margin: var(--spacing-2);
    gap: var(--spacing-3);

    /* Typography tokens */
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-default);

    /* Border radius tokens */
    border-radius: var(--radius-medium);

    /* Shadow tokens */
    box-shadow: var(--shadow-default);
}

/* Status colors */
.success { color: var(--color-text-positive); }
.error { color: var(--color-text-negative); }
.warning { color: var(--color-text-warning); }

/* Interactive states */
.interactive:hover {
    background-color: var(--color-box-neutral-hover);
}
.interactive:active {
    background-color: var(--color-box-neutral-pressed);
}
```

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

### Old DatePicker Single Usage

Source: https://github.com/frontify/fondue/blob/main/packages/components/MIGRATING.md

Demonstrates the previous implementation of the single DatePicker component using native Date objects and various props.

```tsx
const [selectedDate, setSelectedDate] = useState<Date | null>(new Date(2026, 0, 17));

<DatePicker
    value={selectedDate}
    onChange={(date) => setSelectedDate(date)}
    dateFormat="MMM dd, yyyy"
    placeHolder="Select a date"
    isClearable
    minDate={new Date()}
    validation={Validation.Default}
/>;
```