file: components/(deprecated)/action-chip.mdx

# Action Chip





<ComponentExample name="react/action-chip/preview">
  ```tsx
  import { ActionChip } from "@seed-design/react";

  export default function ActionChipPreview() {
    return <ActionChip>라벨</ActionChip>;
  }
  ```
</ComponentExample>

## Usage

```tsx
import { ActionChip } from "@seed-design/react";
```

```tsx
<ActionChip />
```

## Props

<TypeTable
  type={{
    size: {
        "type": "\"medium\" | \"small\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Medium

<ComponentExample name="react/action-chip/medium">
  ```tsx
  import { ActionChip } from "@seed-design/react";

  export default function ActionChipMedium() {
    return <ActionChip size="medium">라벨</ActionChip>;
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="react/action-chip/small">
  ```tsx
  import { ActionChip } from "@seed-design/react";

  export default function ActionChipSmall() {
    return <ActionChip size="small">라벨</ActionChip>;
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="react/action-chip/icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { ActionChip, Icon } from "@seed-design/react";

  export default function ActionChipIconOnly() {
    return (
      <ActionChip layout="iconOnly" aria-label="추가">
        <Icon svg={<IconPlusFill />} />
      </ActionChip>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="react/action-chip/prefix-icon">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { ActionChip, PrefixIcon } from "@seed-design/react";

  export default function ActionChipPrefixIcon() {
    return (
      <ActionChip>
        <PrefixIcon svg={<IconPlusFill />} />
        라벨
      </ActionChip>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="react/action-chip/suffix-icon">
  ```tsx
  import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
  import { ActionChip, SuffixIcon } from "@seed-design/react";

  export default function ActionChipSuffixIcon() {
    return (
      <ActionChip>
        라벨
        <SuffixIcon svg={<IconChevronDownFill />} />
      </ActionChip>
    );
  }
  ```
</ComponentExample>


---

file: components/(deprecated)/action-sheet.mdx

# Action Sheet





<ComponentExample name="react/action-sheet/preview">
  ```tsx
  import {
    ActionSheetContent,
    ActionSheetItem,
    ActionSheetRoot,
    ActionSheetTrigger,
  } from "seed-design/ui/action-sheet";
  import { ActionButton } from "seed-design/ui/action-button";

  const ActionSheetPreview = () => {
    return (
      <ActionSheetRoot>
        <ActionSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </ActionSheetTrigger>
        <ActionSheetContent aria-label="Action Sheet">
          <ActionSheetItem label="Action 1" />
          <ActionSheetItem label="Action 2" />
          <ActionSheetItem tone="critical" label="Action 3" />
        </ActionSheetContent>
      </ActionSheetRoot>
    );
  };

  export default ActionSheetPreview;
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:action-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:action-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:action-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:action-sheet
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="action-sheet" />

## Props

### `ActionSheetRoot`

<TypeTable
  type={{
    lazyMount: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\" | undefined",
        "default": "\"dialog\"",
        "required": false,
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    closeOnEscape: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onOpenChange: {
        "type": "((open: boolean, details?: DialogChangeDetails) => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `ActionSheetContent`

<TypeTable
  type={{
    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    layerIndex: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ActionSheetItem`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    tone: {
        "type": "\"neutral\" | \"critical\" | undefined",
        "default": "\"neutral\"",
        "required": false
    }
}}
/>

## Examples

### Portalled

`<Portal>`으로 `<ActionSheetContent>`를 감싸서 컨텐츠를 원하는 요소에 렌더링할 수 있습니다.

Portal은 기본적으로 `document.body`에 렌더링됩니다.

<ComponentExample name="react/action-sheet/portalled">
  ```tsx
  import { Portal } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    ActionSheetContent,
    ActionSheetItem,
    ActionSheetRoot,
    ActionSheetTrigger,
  } from "seed-design/ui/action-sheet";

  const ActionSheetPortalled = () => {
    return (
      <ActionSheetRoot>
        <ActionSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </ActionSheetTrigger>
        <Portal>
          <ActionSheetContent aria-label="Action Sheet">
            <ActionSheetItem label="Action 1" />
            <ActionSheetItem label="Action 2" />
            <ActionSheetItem tone="critical" label="Action 3" />
          </ActionSheetContent>
        </Portal>
      </ActionSheetRoot>
    );
  };

  export default ActionSheetPortalled;
  ```
</ComponentExample>


---

file: components/(deprecated)/columns.mdx

# Columns

여러 열로 구성된 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/columns/preview">
  ```tsx
  import { Column, Columns } from "@seed-design/react";

  /**
   * @deprecated use `HStack` instead.
   */
  export default function ColumnsPreview() {
    return (
      <Columns bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Column>
        <Column bg="bg.brandSolid" px="x4" py="x3" width="content" borderRadius="r2">
          Content Width
        </Column>
        <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Column>
      </Columns>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Columns, Column } from "@seed-design/react";
```

```tsx
<Columns />
```

## Props

### `Columns`

<TypeTable
  type={{
    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `Column`

<TypeTable
  type={{
    width: {
        "type": "\"content\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    color: {
        "type": "(string & {}) | ScopedColorFg | ScopedColorPalette | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "(string & {}) | ScopedColorPalette | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>


---

file: components/(deprecated)/control-chip.mdx

# Control Chip





<ComponentExample name="react/control-chip/preview">
  ```tsx
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipPreview() {
    return <ControlChip.Toggle>라벨</ControlChip.Toggle>;
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:control-chip
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:control-chip
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:control-chip
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:control-chip
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="control-chip" />

## Props

### ControlChip.Button

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    size: {
        "type": "\"medium\" | \"small\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\" | undefined",
        "default": "\"withText\"",
        "required": false
    }
}}
/>

### ControlChip.Toggle

<TypeTable
  type={{
    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    size: {
        "type": "\"medium\" | \"small\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    required: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    checked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultChecked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    indeterminate: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### ControlChip.RadioRoot

<TypeTable
  type={{
    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    form: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((value: string) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### ControlChip.RadioItem

<TypeTable
  type={{
    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    size: {
        "type": "\"medium\" | \"small\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Medium

<ComponentExample name="react/control-chip/medium">
  ```tsx
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ActionChipMedium() {
    return <ControlChip.Toggle size="medium">라벨</ControlChip.Toggle>;
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="react/control-chip/small">
  ```tsx
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ActionChipSmall() {
    return <ControlChip.Toggle size="small">라벨</ControlChip.Toggle>;
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="react/control-chip/icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipIconOnly() {
    return (
      <ControlChip.Toggle layout="iconOnly" inputProps={{ "aria-label": "추가" }}>
        <Icon svg={<IconPlusFill />} />
      </ControlChip.Toggle>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="react/control-chip/prefix-icon">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipPrefixIcon() {
    return (
      <ControlChip.Toggle>
        <PrefixIcon svg={<IconPlusFill />} />
        라벨
      </ControlChip.Toggle>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="react/control-chip/suffix-icon">
  ```tsx
  import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
  import { SuffixIcon } from "@seed-design/react";
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipSuffixIcon() {
    return (
      <ControlChip.Toggle>
        라벨
        <SuffixIcon svg={<IconChevronDownFill />} />
      </ControlChip.Toggle>
    );
  }
  ```
</ComponentExample>


---

file: components/(deprecated)/error-state.mdx

# Error State

사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.



<ComponentExample name="react/error-state/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ErrorState } from "seed-design/ui/error-state";

  export default function ErrorStatePreview() {
    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
        <ErrorState
          title="에러 타이틀"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          primaryActionProps={{
            children: "메인 액션",
          }}
          secondaryActionProps={{
            children: "보조 액션",
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:error-state
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:error-state
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:error-state
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:error-state
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="error-state" />

## Props

<TypeTable
  type={{
    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    primaryActionProps: {
        "type": "ActionButtonProps | undefined",
        "default": undefined,
        "required": false
    },

    secondaryActionProps: {
        "type": "ActionButtonProps | undefined",
        "default": undefined,
        "required": false
    },

    variant: {
        "type": "\"default\" | \"basement\" | undefined",
        "default": "\"default\"",
        "required": false
    }
}}
/>

## Examples

### Basement

layer-basement 배경 위에서는 basement variant를 사용합니다.

<ComponentExample name="react/error-state/basement">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ErrorState } from "seed-design/ui/error-state";

  export default function ErrorStateBasement() {
    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
        <ErrorState
          variant="basement"
          title="에러 타이틀"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          primaryActionProps={{
            children: "메인 액션",
          }}
          secondaryActionProps={{
            children: "보조 액션",
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/(deprecated)/extended-action-sheet.mdx

# Extended Action Sheet





<ComponentExample name="react/extended-action-sheet/preview">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    ExtendedActionSheetContent,
    ExtendedActionSheetGroup,
    ExtendedActionSheetItem,
    ExtendedActionSheetRoot,
    ExtendedActionSheetTrigger,
  } from "seed-design/ui/extended-action-sheet";

  const ExtendedActionSheetPreview = () => {
    return (
      <ExtendedActionSheetRoot>
        <ExtendedActionSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </ExtendedActionSheetTrigger>
        <ExtendedActionSheetContent aria-label="Extended Action Sheet">
          <ExtendedActionSheetGroup>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 1
            </ExtendedActionSheetItem>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 2
            </ExtendedActionSheetItem>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 3
            </ExtendedActionSheetItem>
          </ExtendedActionSheetGroup>
          <ExtendedActionSheetGroup>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 4
            </ExtendedActionSheetItem>
            <ExtendedActionSheetItem tone="critical">
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 5
            </ExtendedActionSheetItem>
          </ExtendedActionSheetGroup>
        </ExtendedActionSheetContent>
      </ExtendedActionSheetRoot>
    );
  };

  export default ExtendedActionSheetPreview;
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:extended-action-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:extended-action-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:extended-action-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:extended-action-sheet
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="extended-action-sheet" />

## Props

### `ExtendedActionSheetRoot`

<TypeTable
  type={{
    lazyMount: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\" | undefined",
        "default": "\"dialog\"",
        "required": false,
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    closeOnEscape: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onOpenChange: {
        "type": "((open: boolean, details?: DialogChangeDetails) => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `ExtendedActionSheetTrigger`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ExtendedActionSheetContent`

<TypeTable
  type={{
    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    layerIndex: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ExtendedActionSheetGroup`

<TypeTable type={{}} />

### `ExtendedActionSheetItem`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    tone: {
        "type": "\"neutral\" | \"critical\" | undefined",
        "default": "\"neutral\"",
        "required": false
    }
}}
/>


---

file: components/(deprecated)/extended-fab.mdx

# Extended FAB





<ComponentExample name="react/extended-fab/preview">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabPreview() {
    return (
      <ExtendedFab>
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
```

```tsx
<ExtendedFab>
  <PrefixIcon svg={<IconPlusLine />} />
  라벨
</ExtendedFab>
```

## Props

<TypeTable
  type={{
    variant: {
        "type": "\"neutralSolid\" | \"layerFloating\" | undefined",
        "default": "\"neutralSolid\"",
        "required": false
    },

    size: {
        "type": "\"small\" | \"medium\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Medium

<ComponentExample name="react/extended-fab/medium">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabMedium() {
    return (
      <ExtendedFab size="medium">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="react/extended-fab/small">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabSmall() {
    return (
      <ExtendedFab size="small">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

### Neutral Solid

<ComponentExample name="react/extended-fab/neutral-solid">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabNeutralSolid() {
    return (
      <ExtendedFab variant="neutralSolid">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

### Layer Floating

<ComponentExample name="react/extended-fab/layer-floating">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabLayerFloating() {
    return (
      <ExtendedFab variant="layerFloating">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>


---

file: components/(deprecated)/fab.mdx

# FAB





<ComponentExample name="react/fab/preview">
  ```tsx
  import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
  import { Fab, Icon } from "@seed-design/react";

  export default function FabPreview() {
    return (
      <Fab aria-label="Example FAB">
        <Icon svg={<IconPlusLine />} />
      </Fab>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Fab, Icon } from "@seed-design/react";
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
```

```tsx
<Fab>
  <Icon svg={<IconPlusLine />} />
</Fab>
```

## Props

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>


---

file: components/(deprecated)/inline-banner.mdx

# Inline Banner





<ComponentExample name="react/inline-banner/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerPreview() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <ActionableInlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <DismissibleInlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:inline-banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:inline-banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:inline-banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:inline-banner
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="inline-banner" />

## Props

### `InlineBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    linkProps: {
        "type": "SeedInlineBanner.LinkProps | undefined",
        "default": undefined,
        "required": false
    },

    variant: {
        "type": "\"neutralWeak\" | \"positiveWeak\" | \"informativeWeak\" | \"warningWeak\" | \"warningSolid\" | \"criticalWeak\" | \"criticalSolid\" | undefined",
        "default": "\"neutralWeak\"",
        "required": false
    }
}}
/>

### `ActionableInlineBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    variant: {
        "type": "\"neutralWeak\" | \"positiveWeak\" | \"informativeWeak\" | \"warningWeak\" | \"warningSolid\" | \"criticalWeak\" | \"criticalSolid\" | undefined",
        "default": "\"neutralWeak\"",
        "required": false
    }
}}
/>

### `DismissibleInlineBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    variant: {
        "type": "\"neutralWeak\" | \"positiveWeak\" | \"informativeWeak\" | \"warningWeak\" | \"warningSolid\" | undefined",
        "default": undefined,
        "required": false
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onDismiss: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Content Layout

#### With Link Label

<Callout type="warn">
  `linkProps` prop은 `InlineBanner`에서만 제공돼요.
</Callout>

<ComponentExample name="react/inline-banner/with-link-label">
  ```tsx
  import { InlineBanner } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithLinkLabel() {
    return (
      <InlineBanner
        description="사업자 정보를 등록해주세요."
        linkProps={{ children: "자세히 보기" }}
      />
    );
  }
  ```
</ComponentExample>

#### Text Only

<ComponentExample name="react/inline-banner/text-only">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerTextOnly() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner description="사업자 정보를 등록해주세요." />
        <ActionableInlineBanner description="사업자 정보를 등록해주세요." />
        <DismissibleInlineBanner description="사업자 정보를 등록해주세요." />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Icon

<ComponentExample name="react/inline-banner/with-icon">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithIcon() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner prefixIcon={<IconBellFill />} description="사업자 정보를 등록해주세요." />
        <ActionableInlineBanner
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Title Text

<ComponentExample name="react/inline-banner/with-title-text">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithTitleText() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
        <ActionableInlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
        <DismissibleInlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With All

<ComponentExample name="react/inline-banner/with-all">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithAll() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          prefixIcon={<IconBellFill />}
          title="타이틀"
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          prefixIcon={<IconBellFill />}
          title="타이틀"
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          prefixIcon={<IconBellFill />}
          title="타이틀"
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Rendering `LinkInlineBanner`’s Link Label as Child

<ComponentExample name="react/inline-banner/link-label-as-child">
  ```tsx
  import { InlineBanner } from "seed-design/ui/inline-banner";

  export default function InlineBannerLinkLabelAsChild() {
    return (
      <InlineBanner
        description="사업자 정보를 등록해주세요."
        linkProps={{
          asChild: true,
          children: (
            <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
              자세히 보기
            </a>
          ),
        }}
      />
    );
  }
  ```
</ComponentExample>

### Variants

#### Neutral Weak (Default)

<ComponentExample name="react/inline-banner/neutral-weak">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerNeutralWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="neutralWeak"
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="neutralWeak"
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="neutralWeak"
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Positive Weak

<ComponentExample name="react/inline-banner/positive-weak">
  ```tsx
  import { IconCheckmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerPositiveWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="positiveWeak"
          prefixIcon={<IconCheckmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="positiveWeak"
          prefixIcon={<IconCheckmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="positiveWeak"
          prefixIcon={<IconCheckmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Informative Weak

<ComponentExample name="react/inline-banner/informative-weak">
  ```tsx
  import { IconILowercaseSerifCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerInformativeWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="informativeWeak"
          prefixIcon={<IconILowercaseSerifCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="informativeWeak"
          prefixIcon={<IconILowercaseSerifCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="informativeWeak"
          prefixIcon={<IconILowercaseSerifCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Warning Weak

<ComponentExample name="react/inline-banner/warning-weak">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWarningWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="warningWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="warningWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="warningWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Warning Solid

<ComponentExample name="react/inline-banner/warning-solid">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWarningSolid() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="warningSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="warningSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="warningSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Critical Weak

<ComponentExample name="react/inline-banner/critical-weak">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableInlineBanner, InlineBanner } from "seed-design/ui/inline-banner";

  export default function InlineBannerCriticalWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="criticalWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="criticalWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Critical Solid

<Callout type="warn">
  `criticalWeak`과 `criticalSolid` variant는 `InlineBanner`와 `ActionableInlineBanner`에서만 제공돼요.
</Callout>

<Callout type="warn">
  variant가 `criticalWeak`이나 `criticalSolid`인 경우 `position: sticky` 등을 활용하여 화면을 스크롤했을 때도 인라인 배너가 상단에 고정되도록 해 주세요.
</Callout>

<ComponentExample name="react/inline-banner/critical-solid">
  ```tsx
  import { ActionableInlineBanner, InlineBanner } from "seed-design/ui/inline-banner";
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";

  export default function InlineBannerCriticalSolid() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="criticalSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="criticalSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

<StackflowExample names={["react/inline-banner/activity"]}>
  ```tsx
  import * as React from "react";

  import { ActionButton } from "seed-design/ui/action-button";
  import { InlineBanner, type InlineBannerProps } from "seed-design/ui/inline-banner";
  import type { ActivityComponentType } from "@stackflow/react/future";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { AppBar, AppBarMain } from "seed-design/ui/app-bar";

  declare module "@stackflow/config" {
    interface Register {
      "react/inline-banner/activity": {};
    }
  }

  const InlineBannerActivity: ActivityComponentType<"react/inline-banner/activity"> = () => {
    const [variant, setVariant] =
      React.useState<Extract<InlineBannerProps["variant"], "neutralWeak" | "criticalSolid">>(
        "criticalSolid",
      );

    return (
      <AppScreen>
        <AppBar>
          <AppBarMain>Inline Banner</AppBarMain>
        </AppBar>
        <AppScreenContent>
          <InlineBanner
            description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
            variant={variant}
            {...(variant === "criticalSolid" && { style: { position: "sticky", top: 0 } })}
          />
          <div style={{ display: "flex", flexDirection: "column", padding: "1rem", gap: "0.75rem" }}>
            <ActionButton
              onClick={() =>
                setVariant((prev) => (prev === "criticalSolid" ? "neutralWeak" : "criticalSolid"))
              }
            >
              Toggle tone
            </ActionButton>
            <p style={{ marginBlock: 0, lineHeight: 1.35 }}>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint
              sapiente. Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat
              magnam, quos eaque dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Possimus labore unde minus temporibus beatae commodi et nesciunt iure in dignissimos
              suscipit, alias ab voluptatem facilis tempora numquam. Veritatis, dolorum suscipit!
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo fugiat molestias
              iusto, ipsum distinctio officia ad id ratione esse ducimus architecto deleniti illum
              reiciendis rerum, at blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet
              consectetur adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum
              earum quas porro repudiandae explicabo repellat repellendus magni, corporis omnis
              laborum, velit dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing
              elit. Debitis, eveniet quas. Accusamus facere veritatis expedita delectus, asperiores
              numquam placeat necessitatibus assumenda, nesciunt in dolorem sit provident repellendus,
              voluptatem earum! Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Aut earum asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur
              dolores nobis, deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam
              maxime? Quidem enim, sed itaque at veritatis nihil officia esse qui provident ipsa
              adipisci necessitatibus officiis distinctio laborum!
            </p>
          </div>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default InlineBannerActivity;
  ```
</StackflowExample>


---

file: components/(deprecated)/inline.mdx

# Inline

인라인 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/inline/preview">
  ```tsx
  import { Box, Inline } from "@seed-design/react";

  /**
   * @deprecated Use `HStack` instead.
   */
  export default function InlinePreview() {
    return (
      <Inline bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </Inline>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Inline } from "@seed-design/react";
```

```tsx
<Inline />
```

## Props

<TypeTable
  type={{
    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>


---

file: components/(deprecated)/link-content.mdx

# Link Content





<ComponentExample name="react/link-content/preview">
  ```tsx
  import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
  import { LinkContent, SuffixIcon } from "@seed-design/react";

  export default function LinkContentPreview() {
    return (
      <LinkContent>
        새 글
        <SuffixIcon svg={<IconChevronRightLine />} />
      </LinkContent>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { LinkContent, SuffixIcon } from "@seed-design/react";
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
```

```tsx
<LinkContent>
  Label
  <SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
```

## Props

<TypeTable
  type={{
    weight: {
        "type": "\"bold\" | \"regular\" | undefined",
        "default": "\"regular\"",
        "required": false
    },

    size: {
        "type": "\"t6\" | \"t5\" | \"t4\" | undefined",
        "default": "\"t4\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Size

<ComponentExample name="react/link-content/size">
  ```tsx
  import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
  import { LinkContent, SuffixIcon, VStack } from "@seed-design/react";

  export default function LinkContentSize() {
    return (
      <VStack>
        <LinkContent size="t4">
          추가
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent size="t5">
          추가
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent size="t6">
          추가
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Color

<ComponentExample name="react/link-content/color">
  ```tsx
  import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
  import { LinkContent, VStack, SuffixIcon } from "@seed-design/react";

  export default function LinkContentColor() {
    return (
      <VStack>
        <LinkContent color="fg.neutral">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent color="fg.neutralSubtle">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent color="fg.brand">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent color="fg.informative">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/(deprecated)/stack.mdx

# Stack

세로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/stack/preview">
  ```tsx
  import { Box, Stack } from "@seed-design/react";

  /**
   * @deprecated Use `VStack` instead.
   */
  export default function StackPreview() {
    return (
      <Stack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </Stack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Stack } from "@seed-design/react";
```

```tsx
<Stack />
```

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\" | undefined",
        "default": "\"flex\"",
        "required": false
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{"."}</p></>
    },

    shrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    }
}}
/>


---

file: components/(foundation)/iconography/composition.mdx

# Composition

아이콘을 사용하는 방법을 설명합니다.



## 개요

[당근 아이콘 라이브러리](/docs/foundation/iconography/library)는 디자인 시스템에 독립적(agnostic)으로 설계되었으며 SEED Design의 의견이 포함되어 있지 않습니다. 때로는 라이브러리에 없는 커스텀 아이콘을 사용하면서도 아이콘 합성 패턴을 활용해야 하는 경우가 있습니다.

이를 위해 `svg` 속성을 통해 아이콘을 받아 디자인 시스템에 연결하는 유틸리티 컴포넌트를 제공합니다:

* `Icon`: 아이콘을 독립적으로 사용하거나 아이콘만 표시하는 컴포넌트에서 사용합니다.
* `PrefixIcon`, `SuffixIcon`: 컴포넌트 내에 아이콘과 텍스트를 함께 배치할 때 사용합니다.

## Icon 컴포넌트

`Icon` 컴포넌트는 아이콘을 독립적으로 사용하거나 아이콘만 표시하는 컴포넌트에서 사용합니다.

```jsx
import { Icon } from "@seed-design/react";
import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";

// 독립형 아이콘
<Icon svg={<IconHeartFill />} />

// 아이콘만 표시하는 버튼
<ActionButton layout="iconOnly">
  <Icon svg={<IconPlusLine />} />
</ActionButton>
```

## PrefixIcon과 SuffixIcon

컴포넌트 내에 아이콘과 텍스트를 함께 배치할 때는 `PrefixIcon`, `SuffixIcon` 컴포넌트를 children으로 배치합니다.

```jsx
import { PrefixIcon, SuffixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { IconPlusFill, IconChevronRightFill } from "@karrotmarket/react-monochrome-icon";

// 앞에 아이콘 배치
<ActionButton>
  <PrefixIcon svg={<IconPlusFill />} />
  라벨
</ActionButton>

// 뒤에 아이콘 배치
<ActionButton>
  라벨
  <SuffixIcon svg={<IconChevronRightFill />} />
</ActionButton>

// 아이콘 양쪽에 배치
<ActionButton>
  <PrefixIcon svg={<IconPlusFill />} />
  라벨
  <SuffixIcon svg={<IconChevronRightFill />} />
</ActionButton>
```

이 패턴은 다음과 같은 컴포넌트에서 일관되게 사용됩니다:

* `ActionButton`: 버튼 내 아이콘 배치
* `Button`: 일반 버튼 내 아이콘 배치
* `ToggleButton`: 토글 버튼 내 아이콘 배치
* `ActionChip`: 액션 칩 내 아이콘 배치
* `ControlChip`: 컨트롤 칩 내 아이콘 배치


---

file: components/(foundation)/iconography/library.mdx

# Library

리액트 아이콘 패키지는 아이콘을 사용할 때 필요한 컴포넌트를 제공합니다.



## Overview

<Card title="Iconography Library" href="/docs/foundation/iconography/library" icon={<IconSprout />}>
  아이콘 라이브러리에 포함된 아이콘을 확인합니다.
</Card>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Package

* [@karrotmarket/react-monochrome-icon](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-monochrome-icon)
* [@karrotmarket/react-multicolor-icon](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)


---

file: components/(foundation)/layout/box.mdx

# Box

Box 컴포넌트는 가장 기초적인 레이아웃 컴포넌트입니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/box/preview">
  ```tsx
  import { Box } from "@seed-design/react";

  export default function BoxPreview() {
    return (
      <Box
        bg="bg.neutralWeak"
        borderWidth="2"
        borderColor="stroke.brandWeak"
        borderRadius="r2"
        px="x3"
        py="x2"
        boxShadow="s2"
      >
        Box Example
      </Box>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Box } from "@seed-design/react";
```

```tsx
<Box />
```

## Props

<TypeTable
  type={{
    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    color: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorFg | undefined",
        "default": undefined,
        "required": false
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    display: {
        "type": "\"block\" | \"flex\" | \"inline-flex\" | \"inline\" | \"inline-block\" | \"none\" | \"inlineFlex\" | \"inlineBlock\" | undefined",
        "default": undefined,
        "required": false
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"visible\" | \"scroll\" | \"auto\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"visible\" | \"scroll\" | \"auto\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Gradient

<ComponentExample name="react/box/gradient">
  ```tsx
  import { Box, VStack } from "@seed-design/react";

  export default function BoxGradient() {
    return (
      <VStack gap="x2">
        <Box
          backgroundGradient="highlightMagic"
          backgroundGradientDirection="43deg"
          borderRadius="r2"
          color="palette.staticWhite"
          px="x3"
          py="x2"
        >
          Box Gradient
        </Box>
        <Box
          backgroundGradient="highlightMagic"
          backgroundGradientDirection="to bottom"
          borderRadius="r2"
          color="palette.staticWhite"
          px="x3"
          py="x2"
        >
          Box Gradient
        </Box>
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/(foundation)/layout/flex.mdx

# Flex

Flex 컴포넌트는 flexbox를 사용하며 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/flex/preview">
  ```tsx
  import { Flex } from "@seed-design/react";

  export default function FlexPreview() {
    return (
      <Flex direction="row" bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Flex
          direction="column"
          bg="bg.brandSolid"
          gap="x1_5"
          px="x2"
          py="x2"
          flexGrow={1}
          borderRadius="r2"
        >
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            1
          </Flex>
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            2
          </Flex>
        </Flex>
        <Flex
          direction="row"
          bg="bg.brandSolid"
          gap="x1_5"
          px="x2"
          py="x2"
          flexGrow={1}
          borderRadius="r2"
        >
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            3
          </Flex>
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            4
          </Flex>
        </Flex>
        <Flex bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          5
        </Flex>
      </Flex>
    );
  }
  ```
</ComponentExample>

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\" | undefined",
        "default": "\"flex\"",
        "required": false
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"flexStart\" | \"flexEnd\" | \"space-between\" | \"space-around\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{"."}</p></>
    },

    shrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | 1 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | 1 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | 1 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | 1 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | 1 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"flexStart\" | \"flexEnd\" | \"space-between\" | \"space-around\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"stretch\" | \"start\" | \"end\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>


---

file: components/(foundation)/layout/float.mdx

# Float

Float 컴포넌트는 특정 위치에 고정된 요소를 배치할 때 사용합니다.



<ComponentExample name="react/float/preview">
  ```tsx
  import { Box, Float } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function FloatPreview() {
    return (
      <Box
        position="relative"
        width="480px"
        height="480px"
        borderWidth={1}
        borderColor="stroke.neutralMuted"
      >
        <Float placement="top-start">
          <ContextualFloatingButton>Top Start</ContextualFloatingButton>
        </Float>
        <Float placement="top-center">
          <ContextualFloatingButton>Top Center</ContextualFloatingButton>
        </Float>
        <Float placement="top-end">
          <ContextualFloatingButton>Top End</ContextualFloatingButton>
        </Float>
        <Float placement="middle-start">
          <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
        </Float>
        <Float placement="middle-center">
          <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
        </Float>
        <Float placement="middle-end">
          <ContextualFloatingButton>Middle End</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-start">
          <ContextualFloatingButton>Bottom Start</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-center">
          <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-end">
          <ContextualFloatingButton>Bottom End</ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>

## Props

<TypeTable
  type={{
    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    placement: {
        "type": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\" | \"bottom-center\" | \"top-center\" | \"middle-center\" | \"middle-end\" | \"middle-start\"",
        "default": undefined,
        "required": true
    },

    offsetX: {
        "type": "0 | Dimension | (string & {}) | undefined",
        "default": "0",
        "required": false
    },

    offsetY: {
        "type": "0 | Dimension | (string & {}) | undefined",
        "default": "0",
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Offset X

`offsetX` 속성을 사용하면 좌우 방향으로 위치를 조정할 수 있습니다.

`start`, `middle`에서는 우측 방향으로 조정되고, `end`에서는 좌측 방향으로 조정됩니다.

<ComponentExample name="react/float/offset-x">
  ```tsx
  import { Box, Float } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function FloatOffsetX() {
    return (
      <Box
        position="relative"
        width="480px"
        height="480px"
        borderWidth={1}
        borderColor="stroke.neutralMuted"
      >
        <Float placement="middle-start" offsetX="x4">
          <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
        </Float>
        <Float placement="middle-center" offsetX="x4">
          <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
        </Float>
        <Float placement="middle-end" offsetX="x4">
          <ContextualFloatingButton>Middle End</ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>

### Offset Y

`offsetY` 속성을 사용하면 상하 방향으로 위치를 조정할 수 있습니다.

`top`, `middle`에서는 하측 방향으로 조정되고, `bottom`에서는 상측 방향으로 조정됩니다.

<ComponentExample name="react/float/offset-y">
  ```tsx
  import { Box, Float } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function FloatOffsetY() {
    return (
      <Box
        position="relative"
        width="480px"
        height="480px"
        borderWidth={1}
        borderColor="stroke.neutralMuted"
      >
        <Float placement="top-center" offsetY="x4">
          <ContextualFloatingButton>Top Center</ContextualFloatingButton>
        </Float>
        <Float placement="middle-center" offsetY="x4">
          <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-center" offsetY="x4">
          <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>


---

file: components/(foundation)/layout/grid.mdx

# Grid

Grid 컴포넌트는 CSS Grid를 사용하며 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/grid/preview">
  ```tsx
  import { Flex, Grid } from "@seed-design/react";

  export default function GridPreview() {
    return (
      <Grid columns={3} gap="x2" width="full" height="full" p="x8">
        {Array.from({ length: 6 }).map((_, index) => (
          <Flex
            key={index}
            bg="palette.purple300"
            color="palette.purple700"
            borderRadius="r2"
            align="center"
            justify="center"
          >
            {index + 1}
          </Flex>
        ))}
      </Grid>
    );
  }
  ```
</ComponentExample>

## Props

### `Grid`

<TypeTable
  type={{
    display: {
        "type": "\"grid\" | \"none\" | undefined",
        "default": "\"grid\"",
        "required": false
    },

    align: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"flexStart\" | \"flexEnd\" | \"space-between\" | \"space-around\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    justifyItems: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    columns: {
        "type": "string | number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"gridTemplateColumns"}</code>{".\nIf number, "}<code>{"repeat({columns}, minmax(0, 1fr))"}</code>{" is applied."}</p></>
    },

    rows: {
        "type": "string | number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"gridTemplateRows"}</code>{".\nIf number, "}<code>{"repeat({rows}, minmax(0, 1fr))"}</code>{" is applied."}</p></>
    },

    autoFlow: {
        "type": "\"row\" | \"column\" | \"row dense\" | \"column dense\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"gridAutoFlow"}</code>{"."}</p></>
    },

    autoColumns: {
        "type": "string | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"gridAutoColumns"}</code>{"."}</p></>
    },

    autoRows: {
        "type": "string | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"gridAutoRows"}</code>{"."}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"flexStart\" | \"flexEnd\" | \"space-between\" | \"space-around\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"stretch\" | \"start\" | \"end\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `GridItem`

`GridItem`은 Grid 컨테이너 내에서 아이템의 배치를 제어하는 컴포넌트입니다. Grid 내부의 모든 아이템이 `GridItem`일 필요는 없습니다.

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"If true, the component will render its children directly without a wrapper element."}</p></>
    },

    colSpan: {
        "type": "number | \"full\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Number of columns to span, or \"full\" for full width (1 / -1)."}</p></>
    },

    rowSpan: {
        "type": "number | \"full\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Number of rows to span, or \"full\" for full height (1 / -1)."}</p></>
    },

    colStart: {
        "type": "number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Starting column"}</p></>
    },

    colEnd: {
        "type": "number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Ending column."}</p></>
    },

    rowStart: {
        "type": "number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Starting row"}</p></>
    },

    rowEnd: {
        "type": "number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Ending row."}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "\"full\" | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "\"full\" | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "\"full\" | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "\"full\" | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "\"full\" | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "\"full\" | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    display: {
        "type": "\"none\" | \"inline\" | \"block\" | \"flex\" | \"inline-flex\" | \"inline-block\" | \"inlineFlex\" | \"inlineBlock\" | undefined",
        "default": undefined,
        "required": false
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Columns and Rows

`<Grid>`의 `columns` 또는 `rows` prop에 number를 지정하여 `grid-template-columns` 또는 `grid-template-rows`를 `repeat(${columns|rows}, minmax(0, 1fr))`로 설정할 수 있습니다.

<ComponentExample name="react/grid/number">
  ```tsx
  import { Divider, Flex, Grid, HStack } from "@seed-design/react";

  export default function GridNumber() {
    return (
      <HStack gap="x4" width="full" height="full" p="x8">
        <Grid flexGrow columns={2} gap="x2">
          {[1, 2, 3, 4, 5].map((n) => (
            <Flex
              key={n}
              bg="palette.purple300"
              color="palette.purple700"
              borderRadius="r2"
              align="center"
              justify="center"
            >
              {n}
            </Flex>
          ))}
        </Grid>
        <Divider orientation="vertical" />
        <Grid flexGrow rows={2} gap="x2" autoFlow="column">
          {[1, 2, 3, 4, 5].map((n) => (
            <Flex
              key={n}
              bg="palette.green300"
              color="palette.green700"
              borderRadius="r2"
              align="center"
              justify="center"
            >
              {n}
            </Flex>
          ))}
        </Grid>
      </HStack>
    );
  }
  ```
</ComponentExample>

`<Grid>`의 `columns` 또는 `rows`에 `grid-template-columns` 또는 `grid-template-rows` 값을 직접 지정할 수도 있습니다.

<ComponentExample name="react/grid/string">
  ```tsx
  import { Divider, Flex, Grid, HStack } from "@seed-design/react";

  export default function GridString() {
    return (
      <HStack gap="x4" width="full" height="full" p="x8">
        <Grid flexGrow columns="3fr 1fr" gap="x2">
          {[1, 2, 3, 4, 5].map((n) => (
            <Flex
              key={n}
              bg="palette.purple300"
              color="palette.purple700"
              borderRadius="r2"
              align="center"
              justify="center"
            >
              {n}
            </Flex>
          ))}
        </Grid>
        <Divider orientation="vertical" />
        <Grid flexGrow rows="1fr 3fr" gap="x2" autoFlow="column">
          {[1, 2, 3, 4, 5].map((n) => (
            <Flex
              key={n}
              bg="palette.green300"
              color="palette.green700"
              borderRadius="r2"
              align="center"
              justify="center"
            >
              {n}
            </Flex>
          ))}
        </Grid>
      </HStack>
    );
  }
  ```
</ComponentExample>

## Spanning Items

`<GridItem>`을 활용하여 그리드 아이템이 여러 열이나 행을 차지하도록 할 수 있습니다.

* `colSpan` 또는 `colStart`, `colEnd` prop으로 열 span을 지정합니다. `colSpan="full"`을 전달하면 행 전체 (좌우 양 끝)을 차지합니다.
* `rowSpan` 또는 `rowStart`, `rowEnd` prop으로 행 span을 지정합니다. `rowSpan="full"`을 전달하면 열 전체 (상하 양 끝)을 차지합니다.

<ComponentExample name="react/grid/spanning">
  ```tsx
  import { Divider, Grid, GridItem, HStack } from "@seed-design/react";

  export default function Spanning() {
    return (
      <HStack gap="x4" width="full" height="full" p="x8">
        <Grid flexGrow columns={4} gap="x2">
          <GridItem
            colSpan={2}
            display="flex"
            bg="palette.purple600"
            color="palette.purple200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            1
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.purple300"
            color="palette.purple600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            2
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.purple300"
            color="palette.purple600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            3
          </GridItem>
          <GridItem
            colSpan="full"
            display="flex"
            bg="palette.purple600"
            color="palette.purple200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            4
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.purple300"
            color="palette.purple600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            5
          </GridItem>
          <GridItem
            rowSpan={2}
            display="flex"
            bg="palette.purple600"
            color="palette.purple200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            6
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.purple300"
            color="palette.purple600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            7
          </GridItem>
          <GridItem
            colStart={2}
            colEnd={-1}
            display="flex"
            bg="palette.purple600"
            color="palette.purple200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            8
          </GridItem>
        </Grid>
        <Divider orientation="vertical" />
        <Grid flexGrow rows={4} gap="x2" autoFlow="column">
          <GridItem
            rowSpan={2}
            display="flex"
            bg="palette.green600"
            color="palette.green200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            1
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.green300"
            color="palette.green600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            2
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.green300"
            color="palette.green600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            3
          </GridItem>
          <GridItem
            rowSpan="full"
            display="flex"
            bg="palette.green600"
            color="palette.green200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            4
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.green300"
            color="palette.green600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            5
          </GridItem>
          <GridItem
            colSpan={2}
            display="flex"
            bg="palette.green600"
            color="palette.green200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            6
          </GridItem>
          <GridItem
            display="flex"
            bg="palette.green300"
            color="palette.green600"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            7
          </GridItem>
          <GridItem
            rowStart={2}
            rowEnd={-1}
            display="flex"
            bg="palette.green600"
            color="palette.green200"
            borderRadius="r2"
            alignItems="center"
            justifyContent="center"
          >
            8
          </GridItem>
        </Grid>
      </HStack>
    );
  }
  ```
</ComponentExample>

## Auto Flow

`<Grid>`의 `autoFlow` prop을 사용하여 아이템이 배치되는 방향을 지정할 수 있습니다.

<ComponentExample name="react/grid/auto-flow">
  ```tsx
  import { useState } from "react";
  import { Grid, type GridProps, GridItem, VStack } from "@seed-design/react";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  type AutoFlow = NonNullable<GridProps["autoFlow"]>;

  export default function AutoFlow() {
    const [autoFlow, setAutoFlow] = useState<AutoFlow>("row");

    const isColumn = autoFlow.startsWith("column");
    const color = isColumn ? "green" : "purple";

    const gridProps = isColumn ? { rows: 3 } : { columns: 3 };
    const spanProps = isColumn ? { rowSpan: 2 } : { colSpan: 2 };

    return (
      <VStack gap="x6" width="full" height="full" p="x8" align="center">
        <Grid {...gridProps} alignSelf="stretch" flexGrow gap="x2" autoFlow={autoFlow}>
          {[1, 2].map((n) => (
            <GridItem
              key={n}
              {...spanProps}
              display="flex"
              bg={`palette.${color}600`}
              color={`palette.${color}200`}
              borderRadius="r2"
              alignItems="center"
              justifyContent="center"
            >
              {n}
            </GridItem>
          ))}
          {[3, 4, 5].map((n) => (
            <GridItem
              key={n}
              display="flex"
              bg={`palette.${color}300`}
              color={`palette.${color}600`}
              borderRadius="r2"
              alignItems="center"
              justifyContent="center"
            >
              {n}
            </GridItem>
          ))}
        </Grid>
        <SegmentedControl
          value={autoFlow}
          onValueChange={(value) => setAutoFlow(value as AutoFlow)}
          aria-label="Auto Flow"
        >
          <SegmentedControlItem value="row">row</SegmentedControlItem>
          <SegmentedControlItem value="row dense">row dense</SegmentedControlItem>
          <SegmentedControlItem value="column">column</SegmentedControlItem>
          <SegmentedControlItem value="column dense">column dense</SegmentedControlItem>
        </SegmentedControl>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Auto Rows / Columns

`<Grid>`의 `autoRows` 또는 `autoColumns` prop을 사용하여 암시적으로 생성되는 행이나 열의 크기를 지정할 수 있습니다. 동적으로 아이템이 추가되는 그리드에서 유용합니다.

<ComponentExample name="react/grid/auto-rows-columns">
  ```tsx
  import { Divider, Flex, Grid, HStack } from "@seed-design/react";

  export default function AutoRowsColumns() {
    return (
      <HStack gap="x4" width="full" height="full" p="x8" align="flex-start">
        <Grid flexGrow columns={3} autoRows="1fr" gap="x2">
          {[1, 2, 3, 4, 5].map((n) => (
            <Flex
              key={n}
              bg={n === 2 ? "palette.purple600" : "palette.purple300"}
              color={n === 2 ? "palette.purple200" : "palette.purple700"}
              borderRadius="r2"
              align="center"
              justify="center"
              p="x4"
            >
              {n === 2
                ? "Ea anim non aute minim ea deserunt enim Elit deserunt laborum et quis sit."
                : n}
            </Flex>
          ))}
        </Grid>
        <Divider orientation="vertical" style={{ alignSelf: "stretch" }} />
        <Grid flexGrow rows={3} autoColumns="1fr" autoFlow="column" gap="x2">
          {[1, 2, 3, 4, 5].map((n) => (
            <Flex
              key={n}
              bg={n === 2 ? "palette.green600" : "palette.green300"}
              color={n === 2 ? "palette.green200" : "palette.green700"}
              borderRadius="r2"
              align="center"
              justify="center"
              p="x4"
            >
              {n === 2
                ? "Ea anim non aute minim ea deserunt enim Elit deserunt laborum et quis sit."
                : n}
            </Flex>
          ))}
        </Grid>
      </HStack>
    );
  }
  ```
</ComponentExample>

## Using `asChild` Prop

`GridItem`은 `asChild` prop을 사용하여 자식 요소에 직접 grid 속성을 적용할 수 있습니다.

<Card title="Composition" href="/react/components/concepts/composition#aschild-prop" icon={<IconComponent />}>
  `asChild` prop에 대해 자세히 알아봅니다.
</Card>

```tsx
<Grid columns={3}>
  <GridItem colSpan={2} asChild>
    <a href="/link">Link spanning 2 columns</a>
  </GridItem>
</Grid>
```

## Using Box for Grid Item Placement

`GridItem`은 내부적으로 `colSpan`, `colStart`, `colEnd`, `rowSpan`, `rowStart`, `rowEnd` prop을 `gridColumn` 및 `gridRow` 스타일로 변환하여 `Box`에 적용합니다.

따라서 `Box` 컴포넌트에서 `gridColumn`, `gridRow` prop을 직접 사용할 수도 있습니다.

```tsx
<Grid columns={3}>
  <Box gridColumn="span 2">colSpan=2</Box>
  <Box gridColumn="1 / -1">colSpan=full</Box>
  <Box gridColumn="2 / 4">colStart=2 colEnd=4</Box>
</Grid>
```


---

file: components/(foundation)/layout/h-stack.mdx

# HStack

가로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/h-stack/preview">
  ```tsx
  import { Box, HStack } from "@seed-design/react";

  export default function HStackPreview() {
    return (
      <HStack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </HStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { HStack } from "@seed-design/react";
```

```tsx
<HStack />
```

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\" | undefined",
        "default": "\"flex\"",
        "required": false
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{"."}</p></>
    },

    shrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    }
}}
/>


---

file: components/(foundation)/layout/v-stack.mdx

# VStack

세로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.



<ComponentExample name="react/v-stack/preview">
  ```tsx
  import { Box, VStack } from "@seed-design/react";

  export default function VStackPreview() {
    return (
      <VStack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { VStack } from "@seed-design/react";
```

```tsx
<VStack />
```

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\" | undefined",
        "default": "\"flex\"",
        "required": false
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{"."}</p></>
    },

    shrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    }
}}
/>


---

file: components/(foundation)/typography/text.mdx

# Text

텍스트를 표시하는 기본 타이포그래피 컴포넌트입니다. 일관된 글꼴 스타일과 크기를 적용하여 텍스트를 렌더링할 때 사용됩니다.



<ComponentExample name="react/text/preview">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextPreview() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" textStyle="t1Regular">
          t1Regular
        </Text>
        <Text color="fg.neutral" textStyle="t2Regular">
          t2Regular
        </Text>
        <Text color="fg.neutral" textStyle="t3Regular">
          t3Regular
        </Text>
        <Text color="fg.neutral" textStyle="t4Regular">
          t4Regular
        </Text>
        <Text color="fg.neutral" textStyle="t5Regular">
          t5Regular
        </Text>
        <Text color="fg.neutral" textStyle="t6Bold">
          t6Bold
        </Text>
        <Text color="fg.neutral" textStyle="t7Bold">
          t7Bold
        </Text>
        <Text color="fg.neutral" textStyle="t8Bold">
          t8Bold
        </Text>
        <Text color="fg.neutral" textStyle="t9Bold">
          t9Bold
        </Text>
        <Text color="fg.neutral" textStyle="t10Bold">
          t10Bold
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Text } from "@seed-design/react";
```

```tsx
<Text />
```

## Props

<TypeTable
  type={{
    as: {
        "type": "\"dt\" | \"dd\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"strong\" | \"legend\" | undefined",
        "default": "\"span\"",
        "required": false,
        description: <><p>{"The element to render as"}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The color of the text."}</p></>
    },

    fontSize: {
        "type": "(string & {}) | \"t1\" | \"t2\" | \"t3\" | \"t4\" | \"t5\" | \"t6\" | \"t7\" | \"t8\" | \"t9\" | \"t10\" | \"t1Static\" | \"t2Static\" | \"t3Static\" | \"t4Static\" | \"t5Static\" | \"t6Static\" | \"t7Static\" | \"t8Static\" | \"t9Static\" | \"t10Static\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The font size of the text. Partially overrides the textStyle."}</p></>
    },

    lineHeight: {
        "type": "(string & {}) | \"t1\" | \"t2\" | \"t3\" | \"t4\" | \"t5\" | \"t6\" | \"t7\" | \"t8\" | \"t9\" | \"t10\" | \"t1Static\" | \"t2Static\" | \"t3Static\" | \"t4Static\" | \"t5Static\" | \"t6Static\" | \"t7Static\" | \"t8Static\" | \"t9Static\" | \"t10Static\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The line height of the text. Partially overrides the textStyle."}</p></>
    },

    fontWeight: {
        "type": "\"regular\" | \"medium\" | \"bold\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The font weight of the text. Partially overrides the textStyle."}</p></>
    },

    maxLines: {
        "type": "number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The maximum number of lines to display. If the text overflows, it will be truncated."}</p></>
    },

    align: {
        "type": "\"center\" | \"left\" | \"right\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The alignment of the text."}</p></>
    },

    userSelect: {
        "type": "\"auto\" | \"none\" | \"text\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The user-select behavior of the text."}</p></>
    },

    whiteSpace: {
        "type": "\"break-spaces\" | \"normal\" | \"nowrap\" | \"pre\" | \"pre-line\" | \"pre-wrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The white-space behavior of the text."}</p></>
    },

    textStyle: {
        "type": "\"screenTitle\" | \"articleBody\" | \"articleNote\" | \"t1Regular\" | \"t1Medium\" | \"t1Bold\" | \"t2Regular\" | \"t2Medium\" | \"t2Bold\" | \"t3Regular\" | \"t3Medium\" | \"t3Bold\" | \"t4Regular\" | \"t4Medium\" | \"t4Bold\" | \"t5Regular\" | \"t5Medium\" | \"t5Bold\" | \"t6Regular\" | \"t6Medium\" | \"t6Bold\" | \"t7Regular\" | \"t7Medium\" | \"t7Bold\" | \"t8Bold\" | \"t9Bold\" | \"t10Bold\" | \"t1StaticRegular\" | \"t1StaticMedium\" | \"t1StaticBold\" | \"t2StaticRegular\" | \"t2StaticMedium\" | \"t2StaticBold\" | \"t3StaticRegular\" | \"t3StaticMedium\" | \"t3StaticBold\" | \"t4StaticRegular\" | \"t4StaticMedium\" | \"t4StaticBold\" | \"t5StaticRegular\" | \"t5StaticMedium\" | \"t5StaticBold\" | \"t6StaticRegular\" | \"t6StaticMedium\" | \"t6StaticBold\" | \"t7StaticRegular\" | \"t7StaticMedium\" | \"t7StaticBold\" | \"t8StaticBold\" | \"t9StaticBold\" | \"t10StaticBold\" | undefined",
        "default": "\"t5Regular\"",
        "required": false
    },

    textDecorationLine: {
        "type": "\"none\" | \"line-through\" | \"underline\" | undefined",
        "default": "\"none\"",
        "required": false
    }
}}
/>

## Examples

### Text Styles

Figma의 Text Style과 대응되는 `textStyle` 속성을 사용하는 것이 기본 방법입니다. `textStyle`은 글꼴 크기, 줄 간격, 글꼴 굵기를 한 번에 설정합니다.

<ComponentExample name="react/text/text-styles">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextTextStyles() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" textStyle="t1Regular">
          t1Regular
        </Text>
        <Text color="fg.neutral" textStyle="t2Regular">
          t2Regular
        </Text>
        <Text color="fg.neutral" textStyle="t3Regular">
          t3Regular
        </Text>
        <Text color="fg.neutral" textStyle="t4Regular">
          t4Regular
        </Text>
        <Text color="fg.neutral" textStyle="t5Regular">
          t5Regular
        </Text>
        <Text color="fg.neutral" textStyle="t6Bold">
          t6Bold
        </Text>
        <Text color="fg.neutral" textStyle="t7Bold">
          t7Bold
        </Text>
        <Text color="fg.neutral" textStyle="t8Bold">
          t8Bold
        </Text>
        <Text color="fg.neutral" textStyle="t9Bold">
          t9Bold
        </Text>
        <Text color="fg.neutral" textStyle="t10Bold">
          t10Bold
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

#### Font Sizes

더 구체적으로 변경이 필요한 경우 `fontSize` 및 `lineHeight` 속성을 각각 사용할 수 있습니다.

`lineHeight` 속성은 `fontSize`에 대응되는 기본값으로 설정되며, `lineHeight` 속성으로 변경이 가능합니다.

<ComponentExample name="react/text/font-sizes">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextFontSizes() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" fontSize="t1">
          t1
        </Text>
        <Text color="fg.neutral" fontSize="t2">
          t2
        </Text>
        <Text color="fg.neutral" fontSize="t3">
          t3
        </Text>
        <Text color="fg.neutral" fontSize="t4">
          t4
        </Text>
        <Text color="fg.neutral" fontSize="t5">
          t5
        </Text>
        <Text color="fg.neutral" fontSize="t6">
          t6
        </Text>
        <Text color="fg.neutral" fontSize="t7">
          t7
        </Text>
        <Text color="fg.neutral" fontSize="t8">
          t8
        </Text>
        <Text color="fg.neutral" fontSize="t9">
          t9
        </Text>
        <Text color="fg.neutral" fontSize="t10">
          t10
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

#### Font Weights

더 구체적으로 변경이 필요한 경우 `fontWeight` 속성을 사용할 수 있습니다.

<ComponentExample name="react/text/font-weights">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextFontWeights() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" fontSize="t5" fontWeight="regular">
          regular
        </Text>
        <Text color="fg.neutral" fontSize="t5" fontWeight="medium">
          medium
        </Text>
        <Text color="fg.neutral" fontSize="t5" fontWeight="bold">
          bold
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Text Decoration Lines

`textDecorationLine` 속성을 사용하여 텍스트에 밑줄 또는 취소선을 추가할 수 있습니다.

<Callout type="warning" title={"textDecorationLine=\"underline\"을 사용하기 전 읽어보기"}>
  * 링크가 아닌 텍스트를 강조하기 위해 밑줄을 적용할 때는 사용자 경험을 고려해야 합니다. 밑줄이 있는 텍스트는 링크로 인식될 수 있으므로, 혼동을 피하기 위해 적절한 상황에서만 사용해야 합니다.
  * 본문 밖 영역에서 인라인 텍스트를 링크 용도로 사용하고자 하는 경우 [ActionButton](/react/components/action-button)을 `variant="ghost" bleedX="asPadding" bleedY="asPadding"` 옵션으로 사용하는 것을 고려해보세요.
</Callout>

<ComponentExample name="react/text/text-decoration-lines">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextTextDecorationLines() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" fontSize="t5" textDecorationLine="underline">
          underline
        </Text>
        <Text color="fg.neutral" fontSize="t5" textDecorationLine="line-through">
          line-through
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Max Lines

`maxLines` 속성을 사용하여 텍스트가 차지하는 최대 줄 수를 제한할 수 있습니다. 지정된 줄 수를 초과하는 텍스트는 생략 부호(ellipsis) `…` 로 표시됩니다.

<ComponentExample name="react/text/max-lines">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextMaxLines() {
    return (
      <Flex direction="column" gap="x2" width="full">
        <Text color="fg.neutral" fontSize="t5" maxLines={1}>
          maxLines=1 Aliquip pariatur adipisicing elit consectetur velit commodo Lorem nulla eu.
          Occaecat sint voluptate ut dolore eiusmod minim qui reprehenderit. Do aliquip tempor ipsum
          aliqua enim. Incididunt irure do ullamco esse sit enim mollit nisi anim laboris do. Ut
          fugiat aliquip velit eiusmod ad incididunt. Consequat qui quis in ad culpa officia eu in
          Lorem. Elit voluptate est veniam aliqua magna Lorem proident incididunt amet aliquip.
          Aliquip sint sit ex eiusmod sint. Eiusmod incididunt consequat fugiat.
        </Text>
        <Text color="fg.neutral" fontSize="t5" maxLines={2}>
          maxLines=2 Aliquip pariatur adipisicing elit consectetur velit commodo Lorem nulla eu.
          Occaecat sint voluptate ut dolore eiusmod minim qui reprehenderit. Do aliquip tempor ipsum
          aliqua enim. Incididunt irure do ullamco esse sit enim mollit nisi anim laboris do. Ut
          fugiat aliquip velit eiusmod ad incididunt. Consequat qui quis in ad culpa officia eu in
          Lorem. Elit voluptate est veniam aliqua magna Lorem proident incididunt amet aliquip.
          Aliquip sint sit ex eiusmod sint. Eiusmod incididunt consequat fugiat.
        </Text>
        <Text color="fg.neutral" fontSize="t5" maxLines={3}>
          maxLines=3 Aliquip pariatur adipisicing elit consectetur velit commodo Lorem nulla eu.
          Occaecat sint voluptate ut dolore eiusmod minim qui reprehenderit. Do aliquip tempor ipsum
          aliqua enim. Incididunt irure do ullamco esse sit enim mollit nisi anim laboris do. Ut
          fugiat aliquip velit eiusmod ad incididunt. Consequat qui quis in ad culpa officia eu in
          Lorem. Elit voluptate est veniam aliqua magna Lorem proident incididunt amet aliquip.
          Aliquip sint sit ex eiusmod sint. Eiusmod incididunt consequat fugiat.
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### User Select

`userSelect` 속성을 사용하여 사용자가 텍스트를 선택할 수 있는지 여부를 제어할 수 있습니다.

<ComponentExample name="react/text/user-select">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextUserSelect() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" fontSize="t5" userSelect="auto">
          auto
        </Text>
        <Text color="fg.neutral" fontSize="t5" userSelect="none">
          none
        </Text>
        <Text color="fg.neutral" fontSize="t5" userSelect="text">
          text
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Static

폰트 스케일링에 반응하지 않는 static 토큰을 활용하는 텍스트 스타일을 적용할 수 있습니다.

<ComponentExample name="react/text/static">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextStatic() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" textStyle="t1StaticRegular">
          t1StaticRegular
        </Text>
        <Text color="fg.neutral" textStyle="t2StaticRegular">
          t2StaticRegular
        </Text>
        <Text color="fg.neutral" textStyle="t3StaticRegular">
          t3StaticRegular
        </Text>
        <Text color="fg.neutral" textStyle="t4StaticRegular">
          t4StaticRegular
        </Text>
        <Text color="fg.neutral" textStyle="t5StaticRegular">
          t5StaticRegular
        </Text>
        <Text color="fg.neutral" textStyle="t6StaticBold">
          t6StaticBold
        </Text>
        <Text color="fg.neutral" textStyle="t7StaticBold">
          t7StaticBold
        </Text>
        <Text color="fg.neutral" textStyle="t8StaticBold">
          t8StaticBold
        </Text>
        <Text color="fg.neutral" textStyle="t9StaticBold">
          t9StaticBold
        </Text>
        <Text color="fg.neutral" textStyle="t10StaticBold">
          t10StaticBold
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### White Space

<Callout type="warning">
  `whiteSpace` prop은 `maxLines` prop을 사용하지 않을 때만 적용됩니다.
</Callout>

<ComponentExample name="react/text/white-space">
  ```tsx
  import { Box, Text, VStack } from "@seed-design/react";

  const sampleText = `이것은 여러 개         의
  공백, 줄바꿈과
      들여쓰기를 포함한 샘플 텍스트입니다.          각각의 white-space 속성\n값이 어떻게 작동하는지 보여줍니다.`;

  export default function TextWhiteSpace() {
    return (
      <VStack gap="x4" width="full">
        {(["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"] as const).map(
          (value) => (
            <VStack gap="x2" key={value}>
              <Text textStyle="t4Bold">{value}</Text>
              <Box width="full" padding="x4" borderRadius="r2" bg="bg.neutralWeak" overflowX="auto">
                <Text whiteSpace={value}>{sampleText}</Text>
              </Box>
            </VStack>
          ),
        )}
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/(tabs)/chip-tabs.mdx

# Chip Tabs

Chip 형태로 표현된 탭 컴포넌트입니다. 카테고리나 필터를 선택하여 콘텐츠를 전환할 때 사용됩니다.



<ComponentExample name="react/chip-tabs/preview">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsPreview() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:chip-tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:chip-tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:chip-tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:chip-tabs
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="chip-tabs" />

## Props

### `ChipTabsRoot`

<TypeTable
  type={{
    size: {
        "type": "\"medium\" | \"large\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    variant: {
        "type": "\"neutralSolid\" | \"neutralOutline\" | \"brandSolid\" | undefined",
        "default": "\"neutralSolid\"",
        "required": false
    },

    contentLayout: {
        "type": "\"fill\" | \"hug\" | undefined",
        "default": "\"hug\"",
        "required": false
    },

    stickyList: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    orientation: {
        "type": "\"horizontal\" | \"vertical\" | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((value: string) => void) | undefined",
        "default": undefined,
        "required": false
    },

    lazyMount: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted lazily."}</p></>
    },

    unmountOnExit: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be unmounted when it's not selected."}</p></>
    },

    present: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ChipTabsList`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ChipTabsTrigger`

<TypeTable
  type={{
    notification: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `ChipTabsCarousel`

<TypeTable
  type={{
    swipeable: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    autoHeight: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    loop: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    dragThreshold: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    onSettle: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    },

    onSwipeStart: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"스와이프 시작 시 호출됩니다."}</p></>
    },

    onSwipeEnd: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"스와이프 종료 시 호출됩니다."}</p></>
    }
}}
/>

### `ChipTabsContent`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    }
}}
/>

## Examples

### Size=Medium

<ComponentExample name="react/chip-tabs/size-medium">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsSizeMedium() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralSolid"
          size="medium"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### Size=Large

<ComponentExample name="react/chip-tabs/size-large">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsSizeLarge() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralSolid"
          size="large"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### Variant=Neutral Solid

<ComponentExample name="react/chip-tabs/variant-neutral-solid">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsVariantNeutralSolid() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### Variant=Neutral Outline

<ComponentExample name="react/chip-tabs/variant-neutral-outline">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsVariantNeutralOutline() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralOutline"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### Variant=Brand Solid (Deprecated)

<Callout type="warn">
  brandSolid는 deprecated 됐습니다. neutralSolid, neutralOutline을 사용해주세요.
</Callout>

<ComponentExample name="react/chip-tabs/variant-brand-solid">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsVariantBrandSolid() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="brandSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### Notification

<ComponentExample name="react/chip-tabs/notification">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsNotification() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralOutline"
          size="medium"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger notification value="1">
              라벨1
            </ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### With Scroll Fog

탭이 많아 가로 스크롤이 필요한 경우 [Scroll Fog](/react/components/scroll-fog)를 적용하여 좌우 스크롤 힌트를 제공할 수 있습니다.

권장 padding인 `20px`을 유지해야 합니다.

<ComponentExample name="react/chip-tabs/with-scroll-fog">
  ```tsx
  import { ScrollFog } from "@seed-design/react";
  import {
    ChipTabsCarousel,
    ChipTabsList,
    ChipTabsRoot,
    ChipTabsTrigger,
  } from "seed-design/ui/chip-tabs";

  export default function ChipTabsWithScrollFog() {
    return (
      <div style={{ maxWidth: "360px" }}>
        <ChipTabsRoot variant="neutralSolid" defaultValue="1">
          <ChipTabsCarousel>
            <ScrollFog placement={["left", "right"]}>
              <ChipTabsList style={{ paddingLeft: "20px", paddingRight: "20px" }}>
                {Array.from({ length: 15 }, (_, i) => (
                  <ChipTabsTrigger key={i + 1} value={String(i + 1)}>
                    라벨{i + 1}
                  </ChipTabsTrigger>
                ))}
              </ChipTabsList>
            </ScrollFog>
          </ChipTabsCarousel>
        </ChipTabsRoot>
      </div>
    );
  }
  ```
</ComponentExample>

### Stackflow

<StackflowExample names={["react/chip-tabs/basic-activity"]}>
  ```tsx
  import * as React from "react";

  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
  import type { ActivityComponentType } from "@stackflow/react/future";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { AppBar, AppBarMain } from "seed-design/ui/app-bar";

  declare module "@stackflow/config" {
    interface Register {
      "react/chip-tabs/basic-activity": {};
    }
  }

  const ChipTabsBasicActivity: ActivityComponentType<"react/chip-tabs/basic-activity"> = () => {
    const [value, setValue] = React.useState("1");

    const commonStyle = {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#eeeeee",
      height: "100%",
    };

    return (
      <AppScreen>
        <AppBar>
          <AppBarMain>Chip Tabs</AppBarMain>
        </AppBar>
        <AppScreenContent>
          <ChipTabsRoot
            variant="neutralSolid"
            defaultValue="1"
            value={value}
            onValueChange={(value) => setValue(value)}
          >
            <ChipTabsList>
              <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
              <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
              <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
            </ChipTabsList>
          </ChipTabsRoot>
          {value === "1" && <div style={commonStyle}>content 1</div>}
          {value === "2" && <div style={commonStyle}>content 2</div>}
          {value === "3" && <div style={commonStyle}>content 3</div>}
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ChipTabsBasicActivity;
  ```
</StackflowExample>


---

file: components/(tabs)/tabs.mdx

# Tabs

한 화면 내에서 콘텐츠를 탭 단위로 구분하여 전환할 수 있는 컴포넌트입니다.



<ComponentExample name="react/tabs/preview">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsPreview() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:tabs
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:tabs
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="tabs" />

## Props

### `TabsRoot`

<TypeTable
  type={{
    triggerLayout: {
        "type": "\"fill\" | \"hug\" | undefined",
        "default": "\"fill\"",
        "required": false
    },

    contentLayout: {
        "type": "\"fill\" | \"hug\" | undefined",
        "default": "\"hug\"",
        "required": false
    },

    size: {
        "type": "\"small\" | \"medium\" | undefined",
        "default": "\"small\"",
        "required": false
    },

    stickyList: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    orientation: {
        "type": "\"horizontal\" | \"vertical\" | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((value: string) => void) | undefined",
        "default": undefined,
        "required": false
    },

    lazyMount: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted lazily."}</p></>
    },

    unmountOnExit: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be unmounted when it's not selected."}</p></>
    },

    present: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `TabsList`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `TabsTrigger`

<TypeTable
  type={{
    notification: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `TabsCarousel`

<TypeTable
  type={{
    swipeable: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    autoHeight: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    loop: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    dragThreshold: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    onSettle: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    },

    onSwipeStart: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"스와이프 시작 시 호출됩니다."}</p></>
    },

    onSwipeEnd: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"스와이프 종료 시 호출됩니다."}</p></>
    }
}}
/>

### `TabsContent`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    }
}}
/>

## Examples

### Layout Fill (Default)

<ComponentExample name="react/tabs/layout-fill">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsLayoutFill() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="2" triggerLayout="fill">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Layout Hug

<ComponentExample name="react/tabs/layout-hug">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsLayoutHug() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" triggerLayout="hug">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Size Medium

<ComponentExample name="react/tabs/size-medium">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsSizeMedium() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" size="medium">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Size Small (Default)

<ComponentExample name="react/tabs/size-small">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsSizeSmall() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" size="small">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Transition

`TabsCarousel` 컴포넌트로 `TabsContent` 컴포넌트들을 감싸면 탭 변경시 컨텐츠가 자연스럽게 전환됩니다.

<ComponentExample name="react/tabs/transition">
  ```tsx
  import { TabsRoot, TabsList, TabsTrigger, TabsCarousel, TabsContent } from "seed-design/ui/tabs";

  export default function TabsTransition() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="2">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsCarousel>
            <TabsContent value="1">
              <Content>Content 1</Content>
            </TabsContent>
            <TabsContent value="2">
              <Content>Content 2</Content>
            </TabsContent>
            <TabsContent value="3">
              <Content>Content 3</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Swipeable

`TabsCarousel` 컴포넌트에 `swipeable` 속성을 추가하면 스와이프 제스처로 탭을 이동할 수 있습니다.

<ComponentExample name="react/tabs/swipeable">
  ```tsx
  import { TabsRoot, TabsList, TabsTrigger, TabsCarousel, TabsContent } from "seed-design/ui/tabs";

  export default function TabsSwipeable() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="2">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable>
            <TabsContent value="1">
              <Content>Content 1</Content>
            </TabsContent>
            <TabsContent value="2">
              <Content>Content 2</Content>
            </TabsContent>
            <TabsContent value="3">
              <Content>Content 3</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Carousel Prevent Drag

`Tabs.carouselPreventDrag`를 사용하면 특정 요소가 드래그 제스처에 반응하지 않도록 설정할 수 있습니다.

<ComponentExample name="react/tabs/carousel-prevent-drag">
  ```tsx
  import { Box, Tabs } from "@seed-design/react";
  import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsCarouselPreventDrag() {
    return (
      <Box width="360px" height="480px">
        <TabsRoot contentLayout="fill" defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">Tab 1</TabsTrigger>
            <TabsTrigger value="2">Tab 2</TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable>
            <TabsContent value="1">
              <Box overflowX="scroll" {...Tabs.carouselPreventDrag}>
                <Box width="1000px" height="100px" bg="bg.criticalWeak">
                  Scrollable area
                </Box>
              </Box>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis ab ex accusantium
              sit. Amet maxime eum molestiae nemo. Beatae sint omnis aut cumque doloremque fugit
              perspiciatis rerum possimus, reiciendis eaque?
            </TabsContent>
            <TabsContent value="2">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </Box>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/tabs/disabled">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsDisabled() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2" disabled>
              라벨2
            </TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Notification

<ComponentExample name="react/tabs/notification">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsNotification() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2" notification>
              라벨2
            </TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Sticky List

<Callout type="info">
  탭이 전체화면을 차지하고, Tabs.List가 top에 고정되어 있는 경우 사용하는 예시입니다.
</Callout>

<ComponentExample name="react/tabs/sticky-list">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsStickyList() {
    return (
      // 600은 화면 높이라고 가정합니다.
      <div style={{ width: "360px", height: "600px" }}>
        <TabsRoot
          defaultValue="1"
          size="medium"
          stickyList
          style={{ height: "100%" }} // 탭 영역을 전체 화면으로 설정합니다.
        >
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content height="1000px">Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content height="1000px">Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content height="1000px">Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren<{ height: string }>) => {
    const { height, children } = props;
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height,
          background: "linear-gradient(to bottom, white, gray)",
        }}
      >
        {children}
      </div>
    );
  };
  ```
</ComponentExample>

### Standalone

<Callout type="info">
  TabContent를 사용하지 않고, 컨텐츠 영역을 온전히 소유하고 싶을 때 사용하는 예시입니다.
</Callout>

<Callout type="warn">
  탭에서 제공하는 Swipe 기능을 사용할 수 없습니다.
</Callout>

<ComponentExample name="react/tabs/standalone">
  ```tsx
  import { useState } from "react";
  import { TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsStandalone() {
    const [activeTab, setActiveTab] = useState("1");

    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" onValueChange={setActiveTab}>
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          {activeTab === "1" && (
            <div>
              <Content>Content 1</Content>
            </div>
          )}
          {activeTab === "2" && (
            <div>
              <Content>Content 2</Content>
            </div>
          )}
          {activeTab === "3" && (
            <div>
              <Content>Content 3</Content>
            </div>
          )}
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Dynamic Height

<Callout type="info">
  각 탭의 높이가 다를 때, 아래의 컨텐츠를 탭 아래에 바로 맞추기 위해서 사용하는 예시입니다.
</Callout>

<Callout type="warn">
  탭이 자주 바뀌고, 탭에 네트워크 요청이 많은 경우 캐싱을 잘 고려해주세요.
</Callout>

<ComponentExample name="react/tabs/dynamic-height">
  ```tsx
  import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsDynamicHeight() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" lazyMount unmountOnExit>
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsCarousel autoHeight>
            <TabsContent value="1">
              <Content height="100px">Content 1</Content>
            </TabsContent>
            <TabsContent value="2">
              <Content height="200px">Content 2</Content>
            </TabsContent>
            <TabsContent value="3">
              <Content height="300px">Content 3</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
        <div style={{ height: "100px", backgroundColor: "gray" }}>아래 컨텐츠</div>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren<{ height: string }>) => {
    const { height, children } = props;
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height,
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {children}
      </div>
    );
  };
  ```
</ComponentExample>

### Scroll to Top

<ComponentExample name="react/tabs/scroll-top">
  ```tsx
  import { RefObject, useRef, useState } from "react";
  import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsScrollTop() {
    const [currentTab, setCurrentTab] = useState("1");
    const contentRefs: Record<string, RefObject<HTMLDivElement | null>> = {
      "1": useRef(null),
      "2": useRef(null),
    };

    const handleTriggerClick = (value: string) => {
      if (value === currentTab) {
        contentRefs[value].current?.scrollTo({ top: 0, behavior: "smooth" });
      }
    };

    return (
      <div style={{ width: "360px" }}>
        <TabsRoot triggerLayout="fill" value={currentTab} onValueChange={setCurrentTab}>
          <TabsList>
            <TabsTrigger onClick={() => handleTriggerClick("1")} value="1">
              라벨1
            </TabsTrigger>
            <TabsTrigger onClick={() => handleTriggerClick("2")} value="2">
              라벨2
            </TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable>
            <TabsContent ref={contentRefs["1"]} value="1" style={{ maxHeight: "200px" }}>
              <Content height="1000px">Content 1</Content>
            </TabsContent>
            <TabsContent ref={contentRefs["2"]} value="2" style={{ maxHeight: "200px" }}>
              <Content height="1000px">Content 2</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren<{ height: string }>) => {
    const { height, children } = props;
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          height,
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {children}
      </div>
    );
  };
  ```
</ComponentExample>


---

file: components/(text-field)/text-field-input.mdx

# Text Field Input

한 줄 텍스트를 입력받는 컴포넌트입니다.



<ComponentExample name="react/text-field-input/preview">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldPreview() {
    return (
      <TextField label="라벨">
        <TextFieldInput autoFocus />
      </TextField>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="text-field" />

## Props

### `TextField`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    hideCharacterCount: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    maxGraphemeCount: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    fieldRef: {
        "type": "React.Ref<HTMLDivElement> | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((values: { value: string; graphemes: string[]; slicedValue: string; slicedGraphemes: string[]; }) => void) | undefined",
        "default": undefined,
        "required": false
    },

    variant: {
        "type": "\"outline\" | \"underline\" | undefined",
        "default": "\"outline\"",
        "required": false
    },

    size: {
        "type": "\"medium\" | \"large\" | undefined",
        "default": "\"large\"",
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    required: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    readOnly: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `TextFieldInput`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### State

#### Enabled

<ComponentExample name="react/text-field-input/enabled">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputEnabled() {
    return (
      <VStack width="full" gap="spacingY.componentDefault">
        <HStack gap="x3">
          <TextField label="라벨" description="설명을 써주세요">
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
          <TextField
            label="라벨"
            description="설명을 써주세요"
            invalid
            errorMessage="오류가 발생한 이유를 써주세요"
          >
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
        </HStack>
        <HStack gap="x3">
          <TextField variant="underline" description="설명을 써주세요">
            <TextFieldInput aria-label="라벨" placeholder="플레이스홀더" />
          </TextField>
          <TextField
            variant="underline"
            description="설명을 써주세요"
            invalid
            errorMessage="오류가 발생한 이유를 써주세요"
          >
            <TextFieldInput aria-label="라벨" placeholder="플레이스홀더" />
          </TextField>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Disabled

<ComponentExample name="react/text-field-input/disabled">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputDisabled() {
    return (
      <VStack width="full" gap="spacingY.componentDefault">
        <HStack gap="x3">
          <TextField label="라벨" description="설명을 써주세요" disabled>
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
          <TextField
            label="라벨"
            description="설명을 써주세요"
            disabled
            invalid
            errorMessage="오류가 발생한 이유를 써주세요"
          >
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
        </HStack>
        <HStack gap="x3">
          <TextField variant="underline" description="설명을 써주세요" disabled>
            <TextFieldInput aria-label="라벨" placeholder="플레이스홀더" />
          </TextField>
          <TextField
            variant="underline"
            description="설명을 써주세요"
            disabled
            invalid
            errorMessage="오류가 발생한 이유를 써주세요"
          >
            <TextFieldInput aria-label="라벨" placeholder="플레이스홀더" />
          </TextField>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Read Only

<ComponentExample name="react/text-field-input/read-only">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputReadOnly() {
    return (
      <VStack width="full" gap="spacingY.componentDefault">
        <HStack gap="x3">
          <TextField label="라벨" description="설명을 써주세요" readOnly>
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
          <TextField
            label="라벨"
            description="설명을 써주세요"
            readOnly
            invalid
            errorMessage="오류가 발생한 이유를 써주세요"
          >
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
        </HStack>
        <HStack gap="x3">
          <TextField variant="underline" description="설명을 써주세요" readOnly>
            <TextFieldInput aria-label="라벨" placeholder="플레이스홀더" />
          </TextField>
          <TextField
            variant="underline"
            description="설명을 써주세요"
            readOnly
            invalid
            errorMessage="오류가 발생한 이유를 써주세요"
          >
            <TextFieldInput aria-label="라벨" placeholder="플레이스홀더" />
          </TextField>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

아이콘만으로 맥락을 전달하려고 할 때 유의하세요. `description` 또는 `label`에 아이콘의 의미를 명확히 설명하는 텍스트를 포함하거나, 아이콘이 스크린 리더에 의해 읽히도록 설정하고 `aria-label`을 제공하세요.

#### Prefix

<ComponentExample name="react/text-field-input/prefix">
  ```tsx
  import { IconMagnifyingglassLine } from "@karrotmarket/react-monochrome-icon";
  import { HStack, VStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputPrefix() {
    return (
      <VStack width="full" gap="spacingY.componentDefault">
        <HStack gap="x3">
          <TextField
            label="소셜 미디어 URL"
            description="프로필이나 페이지 URL을 입력해주세요."
            prefix="https://"
          >
            <TextFieldInput placeholder="example.com" />
          </TextField>
          <TextField
            label="검색"
            description="글 제목 또는 내용으로 검색할 수 있습니다."
            prefixIcon={<IconMagnifyingglassLine />}
          >
            <TextFieldInput placeholder="레모네이드 레시피" />
          </TextField>
        </HStack>
        <HStack gap="x3">
          <TextField
            variant="underline"
            description="프로필이나 페이지 URL을 입력해주세요."
            prefix="https://"
          >
            <TextFieldInput aria-label="소셜 미디어 URL" placeholder="example.com" />
          </TextField>
          <TextField
            variant="underline"
            description="글 제목 또는 내용으로 검색할 수 있습니다."
            prefixIcon={<IconMagnifyingglassLine />}
          >
            <TextFieldInput aria-label="검색" placeholder="레모네이드 레시피" />
          </TextField>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Suffix

<ComponentExample name="react/text-field-input/suffix">
  ```tsx
  import { IconWonLine } from "@karrotmarket/react-monochrome-icon";
  import { HStack, VStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputSuffix() {
    return (
      <VStack width="full" gap="spacingY.componentDefault">
        <HStack gap="x3">
          <TextField label="너비" description="직접 측정 후 입력해주세요." suffix="cm">
            <TextFieldInput placeholder="200" />
          </TextField>
          <TextField label="금액" description="단위: 원" suffixIcon={<IconWonLine />}>
            <TextFieldInput placeholder="50,000" />
          </TextField>
        </HStack>
        <HStack gap="x3">
          <TextField variant="underline" description="직접 측정 후 입력해주세요." suffix="cm">
            <TextFieldInput aria-label="너비" placeholder="200" />
          </TextField>
          <TextField variant="underline" description="단위: 원" suffixIcon={<IconWonLine />}>
            <TextFieldInput aria-label="금액" placeholder="50,000" />
          </TextField>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Both Affixes

<ComponentExample name="react/text-field-input/both-affixes">
  ```tsx
  import { IconPlusCircleLine, IconWonLine } from "@karrotmarket/react-monochrome-icon";
  import { HStack, VStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputBothAffixes() {
    return (
      <VStack width="full" gap="spacingY.componentDefault">
        <HStack gap="x3">
          <TextField
            label="나이"
            description="오늘 기준, 만 나이를 입력해주세요."
            prefix="만"
            suffix="세"
          >
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
          <TextField
            label="금액"
            description="정산할 금액을 입력해주세요."
            prefixIcon={<IconPlusCircleLine />}
            suffixIcon={<IconWonLine aria-label="원" aria-hidden={false} />}
          >
            <TextFieldInput placeholder="플레이스홀더" />
          </TextField>
        </HStack>
        <HStack gap="x3">
          <TextField
            variant="underline"
            description="오늘 기준, 만 나이를 입력해주세요."
            prefix="만"
            suffix="세"
          >
            <TextFieldInput aria-label="나이" placeholder="플레이스홀더" />
          </TextField>
          <TextField
            variant="underline"
            description="정산할 금액을 입력해주세요."
            prefixIcon={<IconPlusCircleLine />}
            suffixIcon={<IconWonLine aria-label="원" aria-hidden={false} />}
          >
            <TextFieldInput aria-label="금액" placeholder="플레이스홀더" />
          </TextField>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Indicator

`indicator` 또는 `showRequiredIndicator` prop을 사용할 수 있습니다.

<ComponentExample name="react/text-field-input/indicator">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputIndicator() {
    return (
      <HStack gap="x3" width="full">
        <TextField
          label="선택 필드"
          labelWeight="bold"
          description="설명을 써주세요"
          indicator="선택"
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField label="필수 필드" description="설명을 써주세요" required>
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField label="필수 필드" description="설명을 써주세요" required showRequiredIndicator>
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Grapheme Count

<ComponentExample name="react/text-field-input/grapheme-count">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { HStack } from "@seed-design/react";

  export default function TextFieldInputGraphemeCount() {
    return (
      <HStack gap="x3" width="full">
        <TextField label="라벨" description="설명을 써주세요" maxGraphemeCount={8}>
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          maxGraphemeCount={8}
          invalid
          errorMessage="에러 메시지"
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

자소 단위로 쪼개진 `value`에 관한 정보를 `onValueChange` 콜백에서 `graphemes`와 `slicedGraphemes`로 제공합니다.

자소 분리는 [unicode-segmenter](https://github.com/cometkim/unicode-segmenter)를 통해 이루어집니다.

<ComponentExample name="react/text-field-input/grapheme-count-controlled">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { useState } from "react";
  import { Text, VStack } from "@seed-design/react";

  export default function TextFieldInputGraphemeControlled() {
    const [value, setValue] = useState("");
    const [graphemes, setGraphemes] = useState<string[]>([]);

    return (
      <VStack gap="x4" width="full" align="center">
        <TextField
          label="라벨"
          description="국기 이모지 🇰🇷 를 추가해보세요."
          maxGraphemeCount={100}
          value={value}
          onValueChange={({ slicedValue, slicedGraphemes }) => {
            setValue(slicedValue);
            setGraphemes(slicedGraphemes);
          }}
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            rowGap: "16px",
            columnGap: "32px",
            padding: "16px",
          }}
        >
          <Text textStyle="t3Medium">
            <code>graphemes.length</code>: {graphemes.length}
          </Text>
          <Text textStyle="t3Medium">
            <code>value.length</code>: {value.length}
          </Text>
          <Text textStyle="t3Medium">
            <code>graphemes</code>: {JSON.stringify(graphemes)}
          </Text>
          <Text textStyle="t3Medium">
            <code>value</code>: {value}
          </Text>
        </div>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### Form (Uncontrolled)

<ComponentExample name="react/text-field-input/form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, useState, type FormEvent } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  type FieldErrors = {
    name?: string;
    address?: string;
  };

  export default function TextFieldInputForm() {
    const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});

    const handleSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      const formData = new FormData(event.currentTarget);

      const name = formData.get("name")?.toString();
      const address = formData.get("address")?.toString();

      const newFieldErrors: FieldErrors = {};

      if (!name) {
        newFieldErrors.name = "필수 입력 항목입니다";
      }

      if (!address) {
        newFieldErrors.address = "필수 입력 항목입니다";
      }

      if (address && !address.startsWith("대한민국")) {
        newFieldErrors.address = "대한민국으로 시작해주세요";
      }

      setFieldErrors(newFieldErrors);

      if (Object.keys(newFieldErrors).length > 0) return;

      window.alert(JSON.stringify(Object.fromEntries(formData.entries()), null, 2));
    }, []);

    return (
      <VStack asChild gap="x3" width="full">
        <form onSubmit={handleSubmit}>
          <HStack gap="x2">
            <TextField
              label="이름"
              description="이름을 써주세요"
              name="name"
              required
              showRequiredIndicator
              {...(fieldErrors.name && { invalid: true, errorMessage: fieldErrors.name })}
            >
              <TextFieldInput placeholder="홍길동" />
            </TextField>
            <TextField
              label="주소"
              description="주소를 써주세요"
              name="address"
              maxGraphemeCount={30}
              required
              showRequiredIndicator
              {...(fieldErrors.address && { invalid: true, errorMessage: fieldErrors.address })}
            >
              <TextFieldInput placeholder="대한민국" />
            </TextField>
          </HStack>
          <ActionButton type="submit" variant="neutralSolid">
            제출
          </ActionButton>
        </form>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### React Hook Form

<ComponentExample name="react/text-field-input/react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  interface FormValues {
    name: string;
    address: string;
  }

  export default function TextFieldInputReactHookForm() {
    const { handleSubmit, reset, control } = useForm<FormValues>({
      reValidateMode: "onSubmit",
      defaultValues: {
        name: "",
        address: "",
      },
    });

    const {
      field: { onChange: nameOnChange, ...nameField },
      fieldState: nameFieldState,
    } = useController({
      name: "name",
      control,
      rules: {
        required: "필수 입력 항목입니다",
      },
    });
    const {
      field: { onChange: addressOnChange, ...addressField },
      fieldState: addressFieldState,
    } = useController({
      name: "address",
      control,
      rules: {
        required: "필수 입력 항목입니다",
        pattern: { value: /^대한민국/, message: "대한민국으로 시작해주세요" },
      },
    });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <HStack gap="x2">
          <TextField
            label="이름"
            description="이름을 써주세요"
            invalid={nameFieldState.invalid}
            errorMessage={nameFieldState.error?.message}
            onValueChange={({ value }) => nameOnChange(value)}
            required
            showRequiredIndicator
            {...nameField}
          >
            <TextFieldInput placeholder="홍길동" />
          </TextField>
          <TextField
            label="주소"
            description="주소를 써주세요"
            invalid={addressFieldState.invalid}
            errorMessage={addressFieldState.error?.message}
            maxGraphemeCount={30}
            onValueChange={({ slicedValue }) => addressOnChange(slicedValue)}
            required
            showRequiredIndicator
            {...addressField}
          >
            <TextFieldInput placeholder="대한민국" />
          </TextField>
        </HStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Number Formatting

<ComponentExample name="react/text-field-input/number-formatting">
  ```tsx
  import { useMemo, useState } from "react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputNumberFormatting() {
    const [value, setValue] = useState("1000");

    const formattedValue = useMemo(() => {
      if (value === "") return value;

      const number = Number(value.replace(/,/g, ""));
      if (Number.isNaN(number)) return "";

      return number.toLocaleString();
    }, [value]);

    return (
      <TextField
        label="금액"
        description="금액을 써주세요"
        value={formattedValue}
        onValueChange={({ value }) => setValue(value)}
      >
        <TextFieldInput placeholder="9,999,999" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Slicing

<ComponentExample name="react/text-field-input/slicing">
  ```tsx
  import { useState } from "react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldInputSlicing() {
    const [value, setValue] = useState("");

    return (
      <TextField
        label="라벨"
        description="6글자까지 입력 가능합니다"
        maxGraphemeCount={6}
        value={value}
        onValueChange={({ slicedValue }) => setValue(slicedValue)}
      >
        <TextFieldInput placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>


---

file: components/(text-field)/text-field-textarea.mdx

# Text Field Textarea

여러 줄의 긴 텍스트를 입력받고 자동으로 높이를 조절하는 컴포넌트입니다.



<ComponentExample name="react/text-field-textarea/preview">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldPreview() {
    return (
      <TextField label="라벨">
        <TextFieldTextarea autoFocus />
      </TextField>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:text-field
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="text-field" />

## Props

### `TextField`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    hideCharacterCount: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    maxGraphemeCount: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    fieldRef: {
        "type": "React.Ref<HTMLDivElement> | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((values: { value: string; graphemes: string[]; slicedValue: string; slicedGraphemes: string[]; }) => void) | undefined",
        "default": undefined,
        "required": false
    },

    variant: {
        "type": "\"outline\" | \"underline\" | undefined",
        "default": "\"outline\"",
        "required": false
    },

    size: {
        "type": "\"medium\" | \"large\" | undefined",
        "default": "\"large\"",
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    required: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    readOnly: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `TextFieldTextarea`

<TypeTable
  type={{
    autoresize: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"If true, the textarea will automatically resize based on its content."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### State

#### Enabled

<ComponentExample name="react/text-field-textarea/enabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaEnabled() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요">
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Disabled

<ComponentExample name="react/text-field-textarea/disabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaDisabled() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" disabled>
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          disabled
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Read Only

<ComponentExample name="react/text-field-textarea/read-only">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaReadOnly() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" readOnly>
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          readOnly
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Sizing

`<TextFieldTextarea>`에 `height` 관련 스타일을 직접 지정하여 높이를 고정하거나 최소/최대 높이를 설정할 수 있습니다.

#### Fixed Height

<ComponentExample name="react/text-field-textarea/fixed-height">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaSpecifiedHeight() {
    return (
      <TextField label="라벨" description="설명을 써주세요">
        <TextFieldTextarea placeholder="플레이스홀더" style={{ height: "250px" }} />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Auto Height with Constraints

<ComponentExample name="react/text-field-textarea/constraints">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaConstraints() {
    return (
      <TextField label="라벨" description="설명을 써주세요">
        <TextFieldTextarea
          placeholder="플레이스홀더"
          style={{ minHeight: "200px", maxHeight: "300px" }}
        />
      </TextField>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Indicator

`indicator` 또는 `showRequiredIndicator` prop을 사용할 수 있습니다.

<ComponentExample name="react/text-field-textarea/indicator">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaIndicator() {
    return (
      <HStack gap="x3" width="full">
        <TextField
          label="선택 필드"
          labelWeight="bold"
          description="설명을 써주세요"
          indicator="선택"
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField label="필수 필드" description="설명을 써주세요" required>
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField label="필수 필드" description="설명을 써주세요" required showRequiredIndicator>
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Grapheme Count

<ComponentExample name="react/text-field-textarea/grapheme-count">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaGraphemeCount() {
    return (
      <TextField label="라벨" description="설명을 써주세요" maxGraphemeCount={8}>
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

자소 단위로 쪼개진 `value`에 관한 정보를 `onValueChange` 콜백에서 `graphemes`와 `slicedGraphemes`로 제공합니다.

자소 분리는 [unicode-segmenter](https://github.com/cometkim/unicode-segmenter)를 통해 이루어집니다.

<ComponentExample name="react/text-field-textarea/grapheme-count-controlled">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";
  import { useState } from "react";
  import { Text, VStack } from "@seed-design/react";

  export default function TextFieldTextareaGraphemeControlled() {
    const [value, setValue] = useState("");
    const [graphemes, setGraphemes] = useState<string[]>([]);

    return (
      <VStack gap="x4" width="full" align="center">
        <TextField
          label="라벨"
          description="국기 이모지 🇰🇷 를 추가해보세요."
          maxGraphemeCount={100}
          value={value}
          onValueChange={({ slicedValue, slicedGraphemes }) => {
            setValue(slicedValue);
            setGraphemes(slicedGraphemes);
          }}
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            rowGap: "16px",
            columnGap: "32px",
            padding: "16px",
          }}
        >
          <Text textStyle="t3Medium">
            <code>graphemes.length</code>: {graphemes.length}
          </Text>
          <Text textStyle="t3Medium">
            <code>value.length</code>: {value.length}
          </Text>
          <Text textStyle="t3Medium">
            <code>graphemes</code>: {JSON.stringify(graphemes)}
          </Text>
          <Text textStyle="t3Medium" style={{ whiteSpace: "pre-wrap" }}>
            <code>value</code>: {value}
          </Text>
        </div>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### Form (Uncontrolled)

<ComponentExample name="react/text-field-textarea/form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, useState, type FormEvent } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  type FieldErrors = {
    bio?: string;
    address?: string;
  };

  export default function TextFieldTextareaForm() {
    const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});

    const handleSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      const formData = new FormData(event.currentTarget);
      const bio = formData.get("bio")?.toString();
      const address = formData.get("address")?.toString();

      const newFieldErrors: FieldErrors = {};

      if (!bio) {
        newFieldErrors.bio = "필수 입력 항목입니다";
      }

      if (!address) {
        newFieldErrors.address = "필수 입력 항목입니다";
      }

      if (address && !address.startsWith("대한민국")) {
        newFieldErrors.address = "대한민국으로 시작해주세요";
      }

      setFieldErrors(newFieldErrors);

      if (Object.keys(newFieldErrors).length > 0) return;

      window.alert(JSON.stringify(Object.fromEntries(formData.entries()), null, 2));
    }, []);

    return (
      <VStack asChild gap="x3" width="full">
        <form onSubmit={handleSubmit}>
          <HStack gap="x2">
            <TextField
              label="자기소개"
              description="자기소개를 써주세요"
              name="bio"
              required
              showRequiredIndicator
              {...(fieldErrors.bio && { invalid: true, errorMessage: fieldErrors.bio })}
            >
              <TextFieldTextarea placeholder="저는…" />
            </TextField>
            <TextField
              label="주소"
              description="주소를 써주세요"
              name="address"
              maxGraphemeCount={30}
              required
              showRequiredIndicator
              {...(fieldErrors.address && { invalid: true, errorMessage: fieldErrors.address })}
            >
              <TextFieldTextarea placeholder="대한민국" />
            </TextField>
          </HStack>
          <ActionButton type="submit" variant="neutralSolid">
            제출
          </ActionButton>
        </form>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### React Hook Form

<ComponentExample name="react/text-field-textarea/react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent, type KeyboardEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  interface FormValues {
    bio: string;
    address: string;
  }

  export default function TextFieldTextareaReactHookForm() {
    const { handleSubmit, reset, control } = useForm<FormValues>({
      reValidateMode: "onSubmit",
      defaultValues: {
        bio: "",
        address: "",
      },
    });

    const {
      field: { onChange: bioOnChange, ...bioField },
      fieldState: bioFieldState,
    } = useController({
      name: "bio",
      control,
      rules: {
        required: "필수 입력 항목입니다",
      },
    });
    const {
      field: { onChange: addressOnChange, ...addressField },
      fieldState: addressFieldState,
    } = useController({
      name: "address",
      control,
      rules: {
        required: "필수 입력 항목입니다",
        pattern: { value: /^대한민국/, message: "대한민국으로 시작해주세요" },
      },
    });

    const onValid = useCallback(
      (data: FormValues) => window.alert(JSON.stringify(data, null, 2)),
      [],
    );

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();

        reset();
      },
      [reset],
    );

    const onMetaReturn = useCallback(
      (event: KeyboardEvent) => {
        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
          event.preventDefault();

          handleSubmit(onValid)();
        }
      },
      [handleSubmit, onValid],
    );

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <HStack gap="x2">
          <TextField
            label="자기소개"
            description="자기소개를 써주세요"
            invalid={bioFieldState.invalid}
            errorMessage={bioFieldState.error?.message}
            onValueChange={({ value }) => bioOnChange(value)}
            required
            showRequiredIndicator
            {...bioField}
          >
            <TextFieldTextarea placeholder="저는…" onKeyDown={onMetaReturn} />
          </TextField>
          <TextField
            label="주소"
            description="주소를 써주세요"
            invalid={addressFieldState.invalid}
            errorMessage={addressFieldState.error?.message}
            maxGraphemeCount={30}
            onValueChange={({ slicedValue }) => addressOnChange(slicedValue)}
            required
            showRequiredIndicator
            {...addressField}
          >
            <TextFieldTextarea placeholder="대한민국" onKeyDown={onMetaReturn} />
          </TextField>
        </HStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Formatting

<ComponentExample name="react/text-field-textarea/formatting">
  ```tsx
  import { useMemo, useState } from "react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaFormatting() {
    const [value, setValue] = useState("");

    const formattedValue = useMemo(
      () =>
        value
          .split("")
          .filter((char) => char !== " ")
          .join(""),
      [value],
    );

    return (
      <TextField
        label="레이블"
        description="공백을 입력할 수 없어요"
        value={formattedValue}
        onValueChange={({ value }) => setValue(value)}
      >
        <TextFieldTextarea placeholder="공백을 입력해보세요" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Slicing

<ComponentExample name="react/text-field-textarea/slicing">
  ```tsx
  import { useState } from "react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function TextFieldTextareaSlicing() {
    const [value, setValue] = useState("");

    return (
      <TextField
        label="라벨"
        description="6글자까지 입력 가능합니다"
        maxGraphemeCount={6}
        value={value}
        onValueChange={({ slicedValue }) => setValue(slicedValue)}
      >
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>


---

file: components/action-button.mdx

# Action Button

명확한 액션을 쉽게 수행할 수 있도록 돕는 기본 인터랙션 컴포넌트입니다.



<ComponentExample name="react/action-button/preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonPreview() {
    return <ActionButton>라벨</ActionButton>;
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:action-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:action-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:action-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:action-button
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="action-button" />

## Props

<TypeTable
  type={{
    color: {
        "type": "ScopedColorFg | ScopedColorPalette | undefined",
        "default": "\"fg.neutral\"",
        "required": false,
        description: <><p>{"Color of the label and icons inside the button.\nWorks only when "}<code>{"variant"}</code>{" is "}<code>{"ghost"}</code>{"."}</p></>
    },

    fontWeight: {
        "type": "\"regular\" | \"medium\" | \"bold\" | undefined",
        "default": "\"bold\"",
        "required": false,
        description: <><p>{"Weight of the label.\nWorks only when "}<code>{"variant"}</code>{" is "}<code>{"ghost"}</code>{"."}</p></>
    },

    variant: {
        "type": "\"brandSolid\" | \"neutralSolid\" | \"neutralWeak\" | \"criticalSolid\" | \"brandOutline\" | \"neutralOutline\" | \"ghost\" | undefined",
        "default": "\"brandSolid\"",
        "required": false
    },

    size: {
        "type": "\"medium\" | \"xsmall\" | \"small\" | \"large\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    loading: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | \"asPadding\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | \"asPadding\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    }
}}
/>

## Examples

### Brand Solid

<ComponentExample name="react/action-button/brand-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBrandSolid() {
    return <ActionButton variant="brandSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Solid

<ComponentExample name="react/action-button/neutral-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralSolid() {
    return <ActionButton variant="neutralSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Weak

<ComponentExample name="react/action-button/neutral-weak">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralWeak() {
    return <ActionButton variant="neutralWeak">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Critical Solid

<ComponentExample name="react/action-button/critical-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonCriticalSolid() {
    return <ActionButton variant="criticalSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Brand Outline

<ComponentExample name="react/action-button/brand-outline">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBrandOutline() {
    return <ActionButton variant="brandOutline">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Outline

<ComponentExample name="react/action-button/neutral-outline">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralOutline() {
    return <ActionButton variant="neutralOutline">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Ghost

Ghost variant는 `color` 속성을 사용해 레이블과 아이콘의 색상을, `fontWeight` 속성을 사용해 글꼴의 굵기를 변경할 수 있습니다.

<ComponentExample name="react/action-button/ghost">
  ```tsx
  import { HStack, PrefixIcon, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { IconTagLine } from "@karrotmarket/react-monochrome-icon";

  export default function ActionButtonGhost() {
    return (
      <VStack gap="spacingY.componentDefault" align="center">
        <HStack gap="x2">
          <ActionButton variant="ghost">
            <PrefixIcon svg={<IconTagLine />} />
            Default (fg.neutral)
          </ActionButton>
          <ActionButton variant="ghost" color="fg.neutralSubtle">
            <PrefixIcon svg={<IconTagLine />} />
            Neutral Subtle
          </ActionButton>
          <ActionButton variant="ghost" color="fg.brand">
            <PrefixIcon svg={<IconTagLine />} />
            Brand
          </ActionButton>
        </HStack>
        <HStack gap="x2">
          <ActionButton variant="ghost">Default (Bold)</ActionButton>
          <ActionButton variant="ghost" fontWeight="medium">
            Medium
          </ActionButton>
          <ActionButton variant="ghost" fontWeight="regular">
            Regular
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="react/action-button/icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonIconOnly() {
    return (
      <ActionButton layout="iconOnly" aria-label="추가">
        <Icon svg={<IconPlusFill />} />
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="react/action-button/prefix-icon">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonPrefixIcon() {
    return (
      <ActionButton>
        <PrefixIcon svg={<IconPlusFill />} />
        라벨
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="react/action-button/suffix-icon">
  ```tsx
  import { IconChevronRightFill } from "@karrotmarket/react-monochrome-icon";
  import { SuffixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonSuffixIcon() {
    return (
      <ActionButton>
        라벨
        <SuffixIcon svg={<IconChevronRightFill />} />
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/action-button/disabled">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonDisabled() {
    return <ActionButton disabled>라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="react/action-button/loading">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonLoading() {
    const [loading, setLoading] = useState(false);

    function handleClick() {
      setLoading(true);
      setTimeout(() => setLoading(false), 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ActionButton loading={loading} onClick={handleClick}>
        시간이 걸리는 액션
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Bleed

`bleedX`, `bleedY` 속성을 사용해 버튼이 레이아웃에서 "빠져나오게" 할 수 있습니다.

Ghost variant를 시각적으로 정렬해야 할 때 유용합니다.

<ComponentExample name="react/action-button/bleed">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBleed() {
    return (
      <VStack width="100%" gap="x4">
        <HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
          <Text fontSize="t6">Bleed Example</Text>
          <ActionButton bleedY="asPadding" variant="brandSolid">
            Bleed Y
          </ActionButton>
        </HStack>
        <HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
          <Text fontSize="t6">Bleed Example</Text>
          <ActionButton bleedX="asPadding" bleedY="asPadding" variant="ghost">
            Bleed X and Y
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/alert-dialog.mdx

# Alert Dialog

사용자의 확인이 반드시 필요한 경우 강력한 표현 및 경고 수단으로 활용하는 컴포넌트입니다.



<ComponentExample name="react/alert-dialog/preview">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogSingle = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>주의</AlertDialogTitle>
            <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogSingle;
  ```
</ComponentExample>

<Card title="Stackflow" href="/react/stackflow/alert-dialog" variant="example">
  Stackflow와 Alert Dialog를 함께 사용하는 방법에 대해 알아보세요.
</Card>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:alert-dialog
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:alert-dialog
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:alert-dialog
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:alert-dialog
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="alert-dialog" />

## Props

### `AlertDialogRoot`

<TypeTable
  type={{
    closeOnInteractOutside: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    lazyMount: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    skipAnimation: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\" | undefined",
        "default": "\"dialog\"",
        "required": false,
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnEscape: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onOpenChange: {
        "type": "((open: boolean, details?: DialogChangeDetails) => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `AlertDialogTrigger`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `AlertDialogContent`

<TypeTable
  type={{
    layerIndex: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `AlertDialogHeader`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `AlertDialogTitle`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `AlertDialogDescription`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `AlertDialogFooter`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Responsive Wrapping

`<ResponsivePair>` 컴포넌트를 사용해 버튼 컨텐츠가 길어지는 경우 레이아웃을 세로로 접을 수 있습니다.

<ComponentExample name="react/alert-dialog/wrap">
  ```tsx
  import { PrefixIcon, ResponsivePair } from "@seed-design/react";
  import { IconCheckFill } from "@seed-design/react-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogWrap = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>Wrapping</AlertDialogTitle>
            <AlertDialogDescription>
              ResponsivePair 컴포넌트를 사용해 버튼 컨텐츠가 길어지는 경우 레이아웃을 세로로 접을 수
              있습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">
                <PrefixIcon svg={<IconCheckFill />} />긴 레이블 예시
              </AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogWrap;
  ```
</ComponentExample>

### Single Action

<ComponentExample name="react/alert-dialog/single">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogSingle = () => {
    // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
    return (
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>단일 선택지를 제공합니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogSingle;
  ```
</ComponentExample>

### Neutral Secondary Action

<ComponentExample name="react/alert-dialog/neutral">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogNeutral = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>중립적인 선택지를 제공합니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            {/* ResponsivePair component wraps layout if button content is too long. */}
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogNeutral;
  ```
</ComponentExample>

### Nonpreferred

<ComponentExample name="react/alert-dialog/nonpreferred">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogNonpreferred = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>중립적인 선택지를 제공합니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <VStack gap="x4" alignSelf="stretch">
              <AlertDialogAction size="medium" variant="neutralSolid" layout="withText">
                라벨
              </AlertDialogAction>
              <AlertDialogAction
                size="medium"
                variant="ghost"
                layout="withText"
                color="fg.neutralMuted"
                fontWeight="bold"
                bleedY="asPadding"
              >
                라벨
              </AlertDialogAction>
            </VStack>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogNonpreferred;
  ```
</ComponentExample>

### Critical Action

<ComponentExample name="react/alert-dialog/critical">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogCritical = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>파괴적, 비가역적 작업을 경고합니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            {/* ResponsivePair component wraps layout if button content is too long. */}
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="criticalSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogCritical;
  ```
</ComponentExample>

### Controlled

Trigger 외의 방식으로 AlertDialog를 열고 닫을 수 있습니다. 이 경우 `open` prop을 사용하여 AlertDialog의 상태를 제어합니다.

<ComponentExample name="react/alert-dialog/controlled">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogControlled = () => {
    const [open, setOpen] = useState(false);

    return (
      <>
        <ActionButton variant="neutralSolid" onClick={() => setOpen(true)}>
          열기
        </ActionButton>
        <AlertDialogRoot open={open} onOpenChange={setOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>주의</AlertDialogTitle>
              <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <ResponsivePair gap="x2">
                <AlertDialogAction variant="neutralWeak" onClick={() => setOpen(false)}>
                  취소
                </AlertDialogAction>
                <AlertDialogAction variant="neutralSolid" onClick={() => setOpen(false)}>
                  확인
                </AlertDialogAction>
              </ResponsivePair>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogRoot>
      </>
    );
  };

  export default AlertDialogControlled;
  ```
</ComponentExample>

### Prevent Close

`AlertDialogAction`의 `onClick`에서 `e.preventDefault()`를 호출하면 다이얼로그가 닫히지 않습니다.

<ComponentExample name="react/alert-dialog/prevent-close">
  ```tsx
  import { Box, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";
  import { Switch } from "seed-design/ui/switch";

  export default function AlertDialogPreventClose() {
    const [preventClose, setPreventClose] = useState(true);

    return (
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>닫기 방지</AlertDialogTitle>
            <AlertDialogDescription>
              확인 버튼을 눌러도 다이얼로그가 닫히지 않도록 설정할 수 있습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter asChild>
            <VStack gap="x4">
              <Box alignSelf="flex-start">
                <Switch
                  size="16"
                  tone="neutral"
                  label="preventDefault 사용"
                  checked={preventClose}
                  onCheckedChange={setPreventClose}
                />
              </Box>
              <AlertDialogAction
                variant="neutralSolid"
                onClick={(e) => {
                  if (preventClose) {
                    e.preventDefault();
                  }
                }}
              >
                확인
              </AlertDialogAction>
            </VStack>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  }
  ```
</ComponentExample>

### `onOpenChange` Details

`onOpenChange` 두 번째 인자로 `details`가 제공됩니다.

#### `reason`

**열릴 때** (`open: true`)

* `"trigger"`: `AlertDialogTrigger` (`Dialog.Trigger`)로 열림

**닫힐 때** (`open: false`)

* `"closeButton"`: `AlertDialogAction`으로 닫힘
* `"escapeKeyDown"`: <kbd>ESC</kbd> 키 사용
* `"interactOutside"`: 외부 영역 클릭
  * `AlertDialogRoot`는 기본적으로 `closeOnInteractOutside={false}`입니다. `interactOutside`는 이 옵션을 `true`로 설정한 경우에만 발생할 수 있습니다.

<ComponentExample name="react/alert-dialog/open-change-reason">
  ```tsx
  import { HStack, ResponsivePair, Text, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  export default function AlertDialogOnOpenChangeReason() {
    const [open, setOpen] = useState(false);
    const [openReason, setOpenReason] = useState<string | null>(null);
    const [closeReason, setCloseReason] = useState<string | null>(null);

    return (
      <VStack gap="x4" align="center">
        <AlertDialogRoot
          open={open}
          onOpenChange={(open, meta) => {
            setOpen(open);

            (open ? setOpenReason : setCloseReason)(meta?.reason ?? null);
          }}
        >
          <AlertDialogTrigger asChild>
            <ActionButton variant="neutralSolid">열기</ActionButton>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>알림</AlertDialogTitle>
              <AlertDialogDescription>
                ESC 키를 누르거나 버튼을 클릭하여 닫아보세요.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <ResponsivePair gap="x2">
                <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
                <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
              </ResponsivePair>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogRoot>

        <HStack gap="x4">
          <Text fontSize="t3" color="fg.neutralMuted">
            마지막 열림 이유: {openReason ?? "-"}
          </Text>
          <Text fontSize="t3" color="fg.neutralMuted">
            마지막 닫힘 이유: {closeReason ?? "-"}
          </Text>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Portalled

Portal은 기본적으로 `document.body`에 렌더링됩니다.

<ComponentExample name="react/alert-dialog/portalled">
  ```tsx
  import { ResponsivePair, Portal } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogPortalled = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <Portal>
          <AlertDialogContent layerIndex={50}>
            <AlertDialogHeader>
              <AlertDialogTitle>주의</AlertDialogTitle>
              <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <ResponsivePair gap="x2">
                <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
                <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
              </ResponsivePair>
            </AlertDialogFooter>
          </AlertDialogContent>
        </Portal>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogPortalled;
  ```
</ComponentExample>

### Skip Animation

`skipAnimation` prop을 사용하여 AlertDialog의 enter/exit 애니메이션을 건너뛸 수 있습니다.

<ComponentExample name="react/alert-dialog/skip-animation">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogSkipAnimation = () => {
    return (
      <AlertDialogRoot skipAnimation>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>주의</AlertDialogTitle>
            <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogSkipAnimation;
  ```
</ComponentExample>

### Stackflow

<StackflowExample names={["react/alert-dialog/stackflow"]}>
  ```tsx
  import { useActivityZIndexBase } from "@seed-design/stackflow";
  import { ActivityComponentType, useFlow } from "@stackflow/react/future";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
  } from "seed-design/ui/alert-dialog";

  declare module "@stackflow/config" {
    interface Register {
      "react/alert-dialog/stackflow": {};
    }
  }

  const AlertDialogStackflow: ActivityComponentType<"react/alert-dialog/stackflow"> = () => {
    const { pop } = useFlow();

    return (
      <AlertDialogRoot defaultOpen onOpenChange={(open) => !open && pop()}>
        <AlertDialogContent layerIndex={useActivityZIndexBase()}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>Stackflow</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogStackflow;
  ```
</StackflowExample>


---

file: components/article.mdx

# Article

Article은 일관된 selection 및 줄바꿈 정책을 사용할 수 있게 돕는 유틸리티 컴포넌트입니다.



<ComponentExample name="react/article/preview">
  ```tsx
  import { Article, Text, VStack } from "@seed-design/react";

  export default function ArticlePreview() {
    return (
      <VStack asChild gap="x2" width="400px">
        <Article>
          <Text as="p" textStyle="articleBody">
            Article은 일관된 selection 및 줄바꿈 정책을 사용할 수 있게 돕는 유틸리티 컴포넌트입니다.
          </Text>
          <Text as="p" textStyle="articleBody">
            여기를 드래그해서 선택해보세요.
          </Text>
        </Article>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Article } from "@seed-design/react";
```

```tsx
<Article>Article</Article>
```

## Props

[BoxProps](/react/components/layout/box#props)와 동일합니다.

## Examples

### Word Break Behavior

[`lang` global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang)를 통해 추론된 언어에 따라 단어 내 줄바꿈(word-break) 동작을 설정합니다.

한국어 문서/요소에서는 한 어절 안에서 줄바꿈이 발생하지 않도록 하고, 그 외 언어는 표준 규칙을 따릅니다. 컨테이너를 벗어날 정도로 긴 단어 안에서는 줄바꿈이 발생합니다. 일본어에서 문장 부호 직전, [스테가나](https://ko.wikipedia.org/wiki/스테가나) 직전, [반복 부호](https://ko.wikipedia.org/wiki/반복_부호) 직전 등 어색한 위치에서 줄바꿈이 발생하지 않도록 조정됩니다.

<ComponentExample name="react/article/word-break">
  ```tsx
  import { Article, Text, VStack } from "@seed-design/react";

  export default function ArticleWordBreak() {
    return (
      <VStack gap="spacingY.componentDefault" align="center" width="full">
        <VStack
          gap="x3"
          width="600px"
          style={{ resize: "horizontal", overflow: "auto", maxWidth: "100%" }}
        >
          <VStack
            asChild
            borderColor="stroke.neutralMuted"
            borderWidth={1}
            borderRadius="r2"
            p="x4"
            gap="x1"
            bg="bg.neutralWeak"
          >
            <Article lang="ko-KR">
              <Text as="p" textStyle="t5Bold">
                ko-KR
              </Text>
              <Text as="p" textStyle="articleBody" lang="ko-KR">
                <span>
                  단어 내부 줄바꿈 처리를 적절하게 하여 가독성을 높입니다.
                  이렇게매우긴단어를줄바꿈하지않는경우레이아웃문제를일으킬가능성이있습니다.{" "}
                </span>
                <a
                  href="https://www.example.com/this-is-a-very-long-url-that-might-cause-layout-issues-if-the-word-break-is-not-handled-properly?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  https://www.example.com/this-is-a-very-long-url-that-might-cause-layout-issues-if-the-word-break-is-not-handled-properly?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale
                </a>
              </Text>
            </Article>
          </VStack>
          <VStack
            asChild
            borderColor="stroke.neutralMuted"
            borderWidth={1}
            borderRadius="r2"
            p="x4"
            gap="x1"
            bg="bg.neutralWeak"
          >
            <Article lang="en-US">
              <Text as="p" textStyle="t5Bold">
                en-US
              </Text>
              <Text as="p" textStyle="articleBody">
                <span>
                  There are some long words that need to be broken properly to improve readability.
                  SupercalifragilisticexpialidociousEvenThoughTheSoundOfItIsSomethingQuiteAtrocious{" "}
                </span>
                <a
                  href="https://www.example.com/this-is-a-very-long-url-that-might-cause-layout-issues-if-the-word-break-is-not-handled-properly?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  https://www.example.com/this-is-a-very-long-url-that-might-cause-layout-issues-if-the-word-break-is-not-handled-properly?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale
                </a>
              </Text>
            </Article>
          </VStack>
          <VStack
            asChild
            borderColor="stroke.neutralMuted"
            borderWidth={1}
            borderRadius="r2"
            p="x4"
            gap="x1"
            bg="bg.neutralWeak"
          >
            <Article lang="ja-JP">
              <Text as="p" textStyle="t5Bold">
                ja-JP
              </Text>
              <Text as="p" textStyle="articleBody" lang="ja-JP">
                <span>
                  日本語の禁則処理では、特定の文字の前後で改行を制御します。例えば人々々々と続く場合や、小さい文字ぁぁぁが連続する場合、そして句読点。。。が続く場合の改行位置を確認できます。
                  また長い文章では自動的に適切な位置で改行されますが々ぁ。などの文字の前では改行されないことを確認してください。{" "}
                </span>
                <a
                  href="https://www.example.com/this-is-a-very-long-url-that-might-cause-layout-issues-if-the-word-break-is-not-handled-properly?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  https://www.example.com/this-is-a-very-long-url-that-might-cause-layout-issues-if-the-word-break-is-not-handled-properly?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale
                </a>
              </Text>
            </Article>
          </VStack>
        </VStack>
        <Text textStyle="t3Medium">핸들을 잡고 너비를 조정해보세요.</Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### User Select Behavior

`<Article />` 내부 요소는 사용자가 선택(user-select)할 수 있습니다.

<ComponentExample name="react/article/selectable">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Article, Divider, Icon, Text, VStack } from "@seed-design/react";
  import { PageBanner } from "seed-design/ui/page-banner";

  export default function ArticleSelectable() {
    return (
      <VStack
        style={{ userSelect: "none" }}
        width="400px"
        borderColor="stroke.neutralWeak"
        borderWidth={1}
        borderRadius="r2"
        overflowX="hidden"
        overflowY="hidden"
      >
        <PageBanner
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="상위 요소에 `user-select: none;` 스타일 적용됨"
          tone="warning"
          variant="solid"
        />
        <VStack as="article" gap="x4" px="spacingX.globalGutter" py="x4">
          <Text as="h1" textStyle="t7Bold">
            Article 밖은 선택할 수 없습니다.
          </Text>
          <Text as="p" textStyle="articleBody">
            상위 요소에 `user-select: none;` 스타일이 적용되어 있어 이 영역의 텍스트는 선택할 수
            없습니다. 길게 탭하거나 더블 클릭해보세요.
          </Text>
        </VStack>
        <Divider color="stroke.neutralWeak" />
        <VStack asChild gap="x4" px="spacingX.globalGutter" py="x4">
          <Article>
            <Text as="h1" textStyle="t7Bold">
              Article 안
            </Text>
            <Text as="p" textStyle="articleBody">
              상위 요소에 `user-select: none;` 스타일이 적용되었지만 Article 내부는 선택할 수
              있습니다. 길게 탭하거나 더블 클릭해서 텍스트를 선택해보세요.
            </Text>
          </Article>
        </VStack>
        <Divider color="stroke.neutralWeak" />
        <VStack as="article" gap="x4" px="spacingX.globalGutter" py="x4">
          <Text as="h1" textStyle="t7Bold">
            Article 밖은 선택할 수 없습니다.
          </Text>
          <Text as="p" textStyle="articleBody">
            길게 탭하거나 더블 클릭해보세요.
          </Text>
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Disable User Selection

Text 컴포넌트의 [`userSelect="none"` prop](/react/components/typography/text#user-select)을 사용하여 `<Article />` 내부 요소를 선택 불가능하게 만들 수 있습니다.

<Card title="Text" href="/react/components/typography/text" icon={<IconComponent />}>
  Text 컴포넌트에 대해 자세히 알아봅니다.
</Card>

<ComponentExample name="react/article/override-user-select">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Article, Divider, Icon, Text, VStack } from "@seed-design/react";
  import { PageBanner } from "seed-design/ui/page-banner";

  export default function ArticleSelectable() {
    return (
      <VStack
        style={{ userSelect: "none" }}
        width="400px"
        borderColor="stroke.neutralWeak"
        borderWidth={1}
        borderRadius="r2"
        overflowX="hidden"
        overflowY="hidden"
      >
        <PageBanner
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="상위 요소에 `user-select: none;` 스타일 적용됨"
          tone="warning"
          variant="solid"
        />
        <VStack as="article" gap="x4" px="spacingX.globalGutter" py="x4">
          <Text as="h1" textStyle="t7Bold">
            Article 밖은 선택할 수 없습니다.
          </Text>
          <Text as="p" textStyle="articleBody">
            상위 요소에 `user-select: none;` 스타일이 적용되어 있어 이 영역의 텍스트는 선택할 수
            없습니다. 길게 탭하거나 더블 클릭해보세요.
          </Text>
        </VStack>
        <Divider color="stroke.neutralWeak" />
        <VStack asChild gap="x4" px="spacingX.globalGutter" py="x4">
          <Article>
            <Text as="h1" textStyle="t7Bold">
              Article 안
            </Text>
            <Text as="p" textStyle="articleBody">
              상위 요소에 `user-select: none;` 스타일이 적용되었지만 Article 내부는 선택할 수
              있습니다. 길게 탭하거나 더블 클릭해서 텍스트를 선택해보세요.
            </Text>
            <Text as="p" textStyle="articleBody" userSelect="none">
              이 요소는 Article 내부에 있지만 선택할 수 없습니다.
            </Text>
          </Article>
        </VStack>
        <Divider color="stroke.neutralWeak" />
        <VStack as="article" gap="x4" px="spacingX.globalGutter" py="x4">
          <Text as="h1" textStyle="t7Bold">
            Article 밖은 선택할 수 없습니다.
          </Text>
          <Text as="p" textStyle="articleBody">
            길게 탭하거나 더블 클릭해보세요.
          </Text>
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Prevent `PullToRefresh` or `TabsCarousel` Gestures

`<Article />` 내부 요소는 사용자 선택이 가능합니다. 따라서, 드래그 동작을 통해 내부 요소를 선택 시 의도하지 않은 PTR(당겨서 새로고침) 또는 탭 스와이프 제스처가 발생할 수 있습니다.

`PullToRefresh.preventPull` 또는 `Tabs.carouselPreventDrag`를 `<Article />`에 전달하여 Article에서 발생한 이벤트가 제스처를 트리거하지 않도록 할 수 있습니다.

<Cards>
  <Card href="/react/components/pull-to-refresh#prevent-pull" title="Prevent Pull">
    PullToRefresh 컴포넌트에서 제스처를 방지할 영역을 지정하는 방법에 대해 알아봅니다.
  </Card>

  <Card href="/react/components/tabs#carousel-prevent-drag" title="Carousel Prevent Drag">
    TabsCarousel 컴포넌트에서 제스처를 방지할 영역을 지정하는 방법에 대해 알아봅니다.
  </Card>
</Cards>

<StackflowExample names={["react/article/prevent-pull"]}>
  ```tsx
  import { VStack, Icon, Text, Article, Divider, PullToRefresh } from "@seed-design/react";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { PageBanner } from "seed-design/ui/page-banner";

  declare module "@stackflow/config" {
    interface Register {
      "react/article/prevent-pull": {};
    }
  }

  const ArticlePreventPull: ActivityComponentType<"react/article/prevent-pull"> = () => {
    return (
      <AppScreen>
        <AppBar>
          <AppBarMain>Pull To Refresh</AppBarMain>
        </AppBar>
        <AppScreenContent>
          <PullToRefreshRoot
            onPtrReady={() => {}}
            onPtrRefresh={async () => {
              await new Promise((resolve) => setTimeout(resolve, 1000));
            }}
          >
            <PullToRefreshIndicator />
            <PullToRefreshContent asChild>
              <VStack gap="x8" style={{ userSelect: "none" }}>
                <PageBanner
                  prefixIcon={<IconExclamationmarkCircleFill />}
                  description="상위 요소에 `user-select: none;` 스타일 적용됨"
                  tone="warning"
                  variant="solid"
                />
                <VStack asChild gap="spacingY.componentDefault" px="spacingX.globalGutter">
                  <Article {...PullToRefresh.preventPull}>
                    <Text textStyle="t6Bold" as="h1">
                      Article
                    </Text>
                    <Text textStyle="articleBody" as="p">
                      이 요소는 Article 내부에 있으므로 텍스트 선택이 가능합니다. 이 Article은 PTR
                      제스처를 호출하지 않도록 설정되어 있습니다. 여기를 아래로 끌어 당기면 PTR이
                      작동하는 대신 텍스트가 선택됩니다.
                    </Text>
                  </Article>
                </VStack>
                <Divider />
                <VStack gap="spacingY.componentDefault" px="spacingX.globalGutter">
                  <Text textStyle="t6Bold" as="h1">
                    Article 외부
                  </Text>
                  <Text textStyle="articleBody" as="p">
                    이 요소는 Article 외부에 있으므로 텍스트 선택이 불가능합니다. 이 요소는 PTR을
                    호출할 수 있습니다. 여기를 아래로 끌어 당겨보세요.
                  </Text>
                </VStack>
              </VStack>
            </PullToRefreshContent>
          </PullToRefreshRoot>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ArticlePreventPull;
  ```
</StackflowExample>

<StackflowExample names={["react/article/prevent-drag"]}>
  ```tsx
  import { VStack, Icon, Text, Article, Divider, Tabs } from "@seed-design/react";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { PageBanner } from "seed-design/ui/page-banner";

  declare module "@stackflow/config" {
    interface Register {
      "react/article/prevent-drag": {};
    }
  }

  const ArticlePreventDrag: ActivityComponentType<"react/article/prevent-drag"> = () => {
    return (
      <AppScreen>
        <AppBar>
          <AppBarMain>Tabs</AppBarMain>
        </AppBar>
        <AppScreenContent>
          <TabsRoot defaultValue="1" contentLayout="fill">
            <TabsList>
              <TabsTrigger value="1">Tab 1</TabsTrigger>
              <TabsTrigger value="2">Tab 2</TabsTrigger>
            </TabsList>
            <TabsCarousel swipeable>
              <TabsContent value="1">
                <VStack gap="x8" style={{ userSelect: "none" }}>
                  <PageBanner
                    prefixIcon={<IconExclamationmarkCircleFill />}
                    description="상위 요소에 `user-select: none;` 스타일 적용됨"
                    tone="warning"
                    variant="solid"
                  />
                  <VStack asChild gap="spacingY.componentDefault" px="spacingX.globalGutter">
                    <Article {...Tabs.carouselPreventDrag}>
                      <Text textStyle="t6Bold" as="h1">
                        Article
                      </Text>
                      <Text textStyle="articleBody" as="p">
                        이 요소는 Article 내부에 있으므로 텍스트 선택이 가능합니다. 이 Article은 Tabs
                        제스처를 호출하지 않도록 설정되어 있습니다. 여기를 왼쪽으로 스와이프하면 탭이
                        전환되는 대신 텍스트가 선택됩니다.
                      </Text>
                    </Article>
                  </VStack>
                  <Divider />
                  <VStack gap="spacingY.componentDefault" px="spacingX.globalGutter">
                    <Text textStyle="t6Bold" as="h1">
                      Article 외부
                    </Text>
                    <Text textStyle="articleBody" as="p">
                      이 요소는 Article 외부에 있으므로 텍스트 선택이 불가능합니다. 이 요소는 탭
                      스와이프를 호출할 수 있습니다. 여기를 왼쪽으로 스와이프해보세요.
                    </Text>
                  </VStack>
                </VStack>
              </TabsContent>
              <TabsContent value="2">
                <VStack px="spacingX.globalGutter" py="x4">
                  안녕하세요!
                </VStack>
              </TabsContent>
            </TabsCarousel>
          </TabsRoot>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ArticlePreventDrag;
  ```
</StackflowExample>

### Using `asChild` or `as` prop

`<Article />`은 기본적으로 `<article>`로 렌더링되지만, `asChild` 또는 `as` prop을 사용하여 다른 요소로 변경할 수 있습니다.

<Card title="Composition" href="/react/components/concepts/composition#aschild-prop" icon={<IconComponent />}>
  `asChild` prop에 대해 자세히 알아봅니다.
</Card>

<ComponentExample name="react/article/as">
  ```tsx
  import { Article, Divider, VStack, Text } from "@seed-design/react";

  export default function ArticleAs() {
    return (
      <VStack width="full" gap="x8">
        <Article
          as="section"
          display="flex"
          flexDirection="column"
          gap="spacingY.componentDefault"
          px="spacingX.globalGutter"
        >
          <Text as="h1" textStyle="t7Bold">
            `as` prop으로 Article을 section으로 변경
          </Text>
          <Text as="p" textStyle="articleBody">
            Nulla exercitation quis aliqua nostrud.
          </Text>
        </Article>
        <Divider />
        <Article
          asChild
          display="flex"
          flexDirection="column"
          gap="spacingY.componentDefault"
          px="spacingX.globalGutter"
        >
          <section>
            <Text as="h1" textStyle="t7Bold">
              `asChild` prop으로 Article을 section으로 변경
            </Text>
            <Text as="p" textStyle="articleBody">
              Elit fugiat elit exercitation laborum id veniam consequat ipsum sit voluptate velit.
            </Text>
          </section>
        </Article>
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/aspect-ratio.mdx

# Aspect Ratio

가로(width)가 정해지면 비율에 따라 세로(height)가 자동으로 결정되는 레이아웃 컨테이너입니다.



<ComponentExample name="react/aspect-ratio/preview">
  ```tsx
  import { AspectRatio, Text, VStack } from "@seed-design/react";

  export default function AspectRatioPreview() {
    return (
      <VStack gap="x4">
        <AspectRatio ratio={4 / 3} width="160px" bg="palette.gray100">
          <Text color="palette.gray700">4 / 3</Text>
        </AspectRatio>
        <AspectRatio ratio={1} width="160px" bg="palette.gray100">
          <Text color="palette.gray700">1:1</Text>
        </AspectRatio>
        <AspectRatio ratio={16 / 9} width="160px" bg="palette.gray100">
          <Text color="palette.gray700">16 / 9</Text>
        </AspectRatio>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { AspectRatio } from "@seed-design/react";
```

```tsx
<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." />
</AspectRatio>
```

## Props

<TypeTable
  type={{
    ratio: {
        "type": "number | undefined",
        "default": "4 / 3",
        "required": false,
        description: <><p>{"The aspect ratio of the aspect ratio container (width / height)."}</p></>
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    color: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorFg | undefined",
        "default": undefined,
        "required": false
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    display: {
        "type": "\"block\" | \"flex\" | \"inline-flex\" | \"inline\" | \"inline-block\" | \"none\" | \"inlineFlex\" | \"inlineBlock\" | undefined",
        "default": undefined,
        "required": false
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"visible\" | \"scroll\" | \"auto\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"visible\" | \"scroll\" | \"auto\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Ratio

다양한 비율을 지정할 수 있습니다. `1`은 정사각형, `4/3`은 일반적인 사진 비율, `16/9`는 와이드스크린 비율입니다.

<ComponentExample name="react/aspect-ratio/ratio">
  ```tsx
  import { AspectRatio, Box, HStack } from "@seed-design/react";

  export default function AspectRatioRatio() {
    return (
      <HStack gap="x4">
        <Box width="150px">
          <AspectRatio ratio={1}>
            <img src="https://picsum.photos/seed/square/400/400" alt="1:1 Square" />
          </AspectRatio>
        </Box>
        <Box width="150px">
          <AspectRatio ratio={4 / 3}>
            <img src="https://picsum.photos/seed/4-3/400/300" alt="4:3" />
          </AspectRatio>
        </Box>
        <Box width="150px">
          <AspectRatio ratio={16 / 9}>
            <img src="https://picsum.photos/seed/16-9/400/225" alt="16:9" />
          </AspectRatio>
        </Box>
      </HStack>
    );
  }
  ```
</ComponentExample>


---

file: components/avatar.mdx

# Avatar

사용자의 프로필 이미지를 표시하는 컴포넌트입니다.



<ComponentExample name="react/avatar/preview">
  ```tsx
  import { Box, Flex } from "@seed-design/react";
  import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function AvatarPreview() {
    return (
      <Flex gap="x4">
        <Avatar
          size="80"
          badgeMask="circle"
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        >
          <AvatarBadge>
            <Box borderRadius="full" bg="palette.green600" width="x6" height="x6" />
          </AvatarBadge>
        </Avatar>
        <Avatar size="80" src={undefined} fallback={<IdentityPlaceholder />} />
      </Flex>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:avatar
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:avatar
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:avatar
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:avatar
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="avatar" />

## Props

### `Avatar`

<TypeTable
  type={{
    src: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    alt: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    fallback: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    size: {
        "type": "\"20\" | \"24\" | \"36\" | \"42\" | \"48\" | \"64\" | \"80\" | \"96\" | \"108\" | undefined",
        "default": "48",
        "required": false
    },

    badgeMask: {
        "type": "\"none\" | \"circle\" | \"flower\" | \"shield\" | undefined",
        "default": "\"none\"",
        "required": false
    },

    onLoadingStatusChange: {
        "type": "((status: ImageLoadingStatus) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `AvatarBadge`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `AvatarStack`

<TypeTable
  type={{
    size: {
        "type": "\"20\" | \"24\" | \"36\" | \"42\" | \"48\" | \"64\" | \"80\" | \"96\" | \"108\" | undefined",
        "default": "48",
        "required": false
    }
}}
/>

## Examples

### Size

<ComponentExample name="react/avatar/size">
  ```tsx
  import { Flex } from "@seed-design/react";
  import { Avatar } from "seed-design/ui/avatar";

  export default function AvatarSize() {
    return (
      <Flex gap="x4">
        <Avatar size="20" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="24" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="36" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="48" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="64" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="80" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="96" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="108" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      </Flex>
    );
  }
  ```
</ComponentExample>

### Badge & Badge Mask

<ComponentExample name="react/avatar/badge">
  ```tsx
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
  import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
  import { Box, HStack } from "@seed-design/react";

  export default function () {
    return (
      <HStack gap="x4">
        <Avatar
          size="64"
          badgeMask="circle"
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        >
          <AvatarBadge asChild>
            <Box bg="palette.green600" borderRadius="full" />
          </AvatarBadge>
        </Avatar>
        <Avatar
          size="64"
          badgeMask="flower"
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        >
          <AvatarBadge asChild>
            <img
              src="/flower_green_checkmark.svg"
              alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
            />
          </AvatarBadge>
        </Avatar>
        <Avatar
          size="64"
          badgeMask="shield"
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        >
          <AvatarBadge asChild>
            <img
              src="/shield_blue_checkmark.svg"
              alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
            />
          </AvatarBadge>
        </Avatar>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Stack

<ComponentExample name="react/avatar/stack">
  ```tsx
  import { Avatar, AvatarStack } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function AvatarStackExample() {
    return (
      <AvatarStack size="64">
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
      </AvatarStack>
    );
  }
  ```
</ComponentExample>


---

file: components/badge.mdx

# Badge

객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.



<ComponentExample name="react/badge/preview">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgePreview() {
    return <Badge>라벨</Badge>;
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Badge } from "@seed-design/react";
```

```tsx
<Badge>Badge</Badge>
```

## Props

<TypeTable
  type={{
    size: {
        "type": "\"medium\" | \"large\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    variant: {
        "type": "\"weak\" | \"solid\" | \"outline\" | undefined",
        "default": "\"solid\"",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"brand\" | \"informative\" | \"positive\" | \"warning\" | \"critical\" | undefined",
        "default": "\"neutral\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Truncating Behavior

Badge는 긴 텍스트를 잘라내고 생략 부호를 표시합니다.

<ComponentExample name="react/badge/truncating">
  ```tsx
  import { Badge, VStack } from "@seed-design/react";

  export default function BadgeTruncating() {
    return (
      <VStack gap="x4">
        <Badge size="medium">
          In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
        </Badge>
        <Badge size="large">
          In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
        </Badge>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Tones and Variants

#### Neutral

<ComponentExample name="react/badge/neutral">
  ```tsx
  import { Badge, HStack, VStack } from "@seed-design/react";

  export default function BadgeNeutral() {
    return (
      <HStack gap="x4">
        <VStack gap="x4">
          <Badge tone="neutral" variant="solid" size="medium">
            라벨
          </Badge>
          <Badge tone="neutral" variant="weak" size="medium">
            라벨
          </Badge>
          <Badge tone="neutral" variant="outline" size="medium">
            라벨
          </Badge>
        </VStack>
        <VStack gap="x4">
          <Badge tone="neutral" variant="solid" size="large">
            라벨
          </Badge>
          <Badge tone="neutral" variant="weak" size="large">
            라벨
          </Badge>
          <Badge tone="neutral" variant="outline" size="large">
            라벨
          </Badge>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Brand

<ComponentExample name="react/badge/brand">
  ```tsx
  import { Badge, HStack, VStack } from "@seed-design/react";

  export default function BadgeBrand() {
    return (
      <HStack gap="x4">
        <VStack gap="x4">
          <Badge tone="brand" variant="solid" size="medium">
            라벨
          </Badge>
          <Badge tone="brand" variant="weak" size="medium">
            라벨
          </Badge>
          <Badge tone="brand" variant="outline" size="medium">
            라벨
          </Badge>
        </VStack>
        <VStack gap="x4">
          <Badge tone="brand" variant="solid" size="large">
            라벨
          </Badge>
          <Badge tone="brand" variant="weak" size="large">
            라벨
          </Badge>
          <Badge tone="brand" variant="outline" size="large">
            라벨
          </Badge>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Informative

<ComponentExample name="react/badge/informative">
  ```tsx
  import { Badge, HStack, VStack } from "@seed-design/react";

  export default function BadgeInformative() {
    return (
      <HStack gap="x4">
        <VStack gap="x4">
          <Badge tone="informative" variant="solid" size="medium">
            라벨
          </Badge>
          <Badge tone="informative" variant="weak" size="medium">
            라벨
          </Badge>
          <Badge tone="informative" variant="outline" size="medium">
            라벨
          </Badge>
        </VStack>
        <VStack gap="x4">
          <Badge tone="informative" variant="solid" size="large">
            라벨
          </Badge>
          <Badge tone="informative" variant="weak" size="large">
            라벨
          </Badge>
          <Badge tone="informative" variant="outline" size="large">
            라벨
          </Badge>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Positive

<ComponentExample name="react/badge/positive">
  ```tsx
  import { Badge, HStack, VStack } from "@seed-design/react";

  export default function BadgePositive() {
    return (
      <HStack gap="x4">
        <VStack gap="x4">
          <Badge tone="positive" variant="solid" size="medium">
            라벨
          </Badge>
          <Badge tone="positive" variant="weak" size="medium">
            라벨
          </Badge>
          <Badge tone="positive" variant="outline" size="medium">
            라벨
          </Badge>
        </VStack>
        <VStack gap="x4">
          <Badge tone="positive" variant="solid" size="large">
            라벨
          </Badge>
          <Badge tone="positive" variant="weak" size="large">
            라벨
          </Badge>
          <Badge tone="positive" variant="outline" size="large">
            라벨
          </Badge>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Warning

<ComponentExample name="react/badge/warning">
  ```tsx
  import { Badge, HStack, VStack } from "@seed-design/react";

  export default function BadgeWarning() {
    return (
      <HStack gap="x4">
        <VStack gap="x4">
          <Badge tone="warning" variant="solid" size="medium">
            라벨
          </Badge>
          <Badge tone="warning" variant="weak" size="medium">
            라벨
          </Badge>
          <Badge tone="warning" variant="outline" size="medium">
            라벨
          </Badge>
        </VStack>
        <VStack gap="x4">
          <Badge tone="warning" variant="solid" size="large">
            라벨
          </Badge>
          <Badge tone="warning" variant="weak" size="large">
            라벨
          </Badge>
          <Badge tone="warning" variant="outline" size="large">
            라벨
          </Badge>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Critical

<ComponentExample name="react/badge/critical">
  ```tsx
  import { Badge, HStack, VStack } from "@seed-design/react";

  export default function BadgeCritical() {
    return (
      <HStack gap="x4">
        <VStack gap="x4">
          <Badge tone="critical" variant="solid" size="medium">
            라벨
          </Badge>
          <Badge tone="critical" variant="weak" size="medium">
            라벨
          </Badge>
          <Badge tone="critical" variant="outline" size="medium">
            라벨
          </Badge>
        </VStack>
        <VStack gap="x4">
          <Badge tone="critical" variant="solid" size="large">
            라벨
          </Badge>
          <Badge tone="critical" variant="weak" size="large">
            라벨
          </Badge>
          <Badge tone="critical" variant="outline" size="large">
            라벨
          </Badge>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>


---

file: components/bottom-sheet.mdx

# Bottom Sheet

화면 하단에서 올라오는 모달 컴포넌트입니다. 추가 정보나 액션 목록을 제공하면서도 현재 컨텍스트를 유지할 때 사용됩니다.



<ComponentExample name="react/bottom-sheet/preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetPreview = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody>Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetPreview;
  ```
</ComponentExample>

<Card title="Stackflow" href="/react/stackflow/bottom-sheet" variant="example">
  Stackflow와 Bottom Sheet를 함께 사용하는 방법에 대해 알아보세요.
</Card>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:bottom-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:bottom-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:bottom-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:bottom-sheet
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="bottom-sheet" />

## Props

### `BottomSheetRoot`

<TypeTable
  type={{
    headerAlign: {
        "type": "\"left\" | \"center\" | undefined",
        "default": "\"left\"",
        "required": false
    },

    skipAnimation: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    activeSnapPoint: {
        "type": "string | number | null | undefined",
        "default": undefined,
        "required": false
    },

    setActiveSnapPoint: {
        "type": "((snapPoint: number | string | null) => void) | undefined",
        "default": undefined,
        "required": false
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    closeThreshold: {
        "type": "number | undefined",
        "default": "0.25",
        "required": false,
        description: <><p>{"Number between 0 and 1 that determines when the drawer should be closed.\nExample: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more."}</p></>
    },

    noBodyStyles: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"When "}<code>{"true"}</code>{" the "}<code>{"body"}</code>{" doesn't get any styles assigned from Drawer"}</p></>
    },

    onOpenChange: {
        "type": "((open: boolean, details?: DrawerChangeDetails) => void) | undefined",
        "default": undefined,
        "required": false
    },

    scrollLockTimeout: {
        "type": "number | undefined",
        "default": "500ms",
        "required": false,
        description: <><p>{"Duration for which the drawer is not draggable after scrolling content inside of the drawer."}</p></>
    },

    fixed: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"When "}<code>{"true"}</code>{", don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open"}</p></>
    },

    handleOnly: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"When "}<code>{"true"}</code>{" only allows the drawer to be dragged by the "}<code>{"<Drawer.Handle />"}</code>{" component."}</p></>
    },

    dismissible: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"When "}<code>{"false"}</code>{" dragging, clicking outside, pressing esc, etc. will not close the drawer.\nUse this in combination with the "}<code>{"open"}</code>{" prop, otherwise you won't be able to open/close the drawer."}</p></>
    },

    onDrag: {
        "type": "((event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void) | undefined",
        "default": undefined,
        "required": false
    },

    onRelease: {
        "type": "((event: React.PointerEvent<HTMLDivElement>, open: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    modal: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"When "}<code>{"false"}</code>{" it allows to interact with elements outside of the drawer without closing it."}</p></>
    },

    nested: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onClose: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    },

    direction: {
        "type": "\"left\" | \"top\" | \"bottom\" | \"right\" | undefined",
        "default": "'bottom'",
        "required": false,
        description: <><p>{"Direction of the drawer. Can be "}<code>{"top"}</code>{" or "}<code>{"bottom"}</code>{", "}<code>{"left"}</code>{", "}<code>{"right"}</code>{"."}</p></>
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Opened by default. Still reacts to "}<code>{"open"}</code>{" state changes"}</p></>
    },

    repositionInputs: {
        "type": "boolean | undefined",
        "default": "true when {@link snapPoints} is defined",
        "required": false,
        description: <><p>{"When "}<code>{"true"}</code>{" Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.\nSetting it to "}<code>{"false"}</code>{" will fall back to the default browser behavior."}</p></>
    },

    snapToSequentialPoint: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Disabled velocity based swiping for snap points.\nThis means that a snap point won't be skipped even if the velocity is high enough.\nUseful if each snap point in a drawer is equally important."}</p></>
    },

    container: {
        "type": "HTMLElement | null | undefined",
        "default": undefined,
        "required": false
    },

    onAnimationEnd: {
        "type": "((open: boolean) => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Gets triggered after the open or close animation ends, it receives an "}<code>{"open"}</code>{" argument with the "}<code>{"open"}</code>{" state of the drawer by the time the function was triggered.\nUseful to revert any state changes for example."}</p></>
    },

    preventScrollRestoration: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    autoFocus: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    snapPoints: {
        "type": "(string | number)[] | undefined",
        "default": "undefined",
        "required": false,
        description: <><p>{"Array of snap points to use.\nExample: snapPoints={[\"100px\", \"200px\", 1]} will use the snap points 100px, 200px and fully open (1 = 100% of the container)."}</p></>
    },

    fadeFromIndex: {
        "type": "number | undefined",
        "default": "snapPoints.length - 1",
        "required": false,
        description: <><p>{"Index of the snap point to start fading from.\nExample: fadeFromIndex={0} will start fading from the first snap point."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the drawer when interacting outside of the drawer."}</p></>
    },

    closeOnEscape: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the drawer when pressing the escape key."}</p></>
    }
}}
/>

### `BottomSheetTrigger`

<TypeTable type={{}} />

### `BottomSheetContent`

<TypeTable
  type={{
    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    layerIndex: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    showCloseButton: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false
    },

    showHandle: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    }
}}
/>

### `BottomSheetBody`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    paddingX: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    justifyContent: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    alignItems: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `BottomSheetFooter`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Trigger

`<BottomSheetTrigger>`는 `asChild` 패턴을 사용해 자식 요소가 BottomSheet를 열 수 있도록 합니다.

`<BottomSheetTrigger>`는 `aria-haspopup="dialog"` 속성을 설정하고, `BottomSheet`의 `open` 상태에 따라 `aria-expanded` 속성을 자동으로 설정합니다. 이 속성은 스크린 리더와 같은 보조 기술에 유용합니다.

<ComponentExample name="react/bottom-sheet/trigger">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetTriggerExample = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목">
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetTriggerExample;
  ```
</ComponentExample>

### Controlled

Trigger 외의 방식으로 BottomSheet를 열고 닫을 수 있습니다. 이 경우 `open` prop을 사용하여 BottomSheet의 상태를 제어합니다.

<ComponentExample name="react/bottom-sheet/controlled">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetControlled = () => {
    const [open, setOpen] = useState(false);

    const scheduleOpen = () => {
      setTimeout(() => {
        setOpen(true);
      }, 1000);
    };

    return (
      <>
        <ActionButton variant="neutralSolid" onClick={scheduleOpen}>
          1초 후 열기
        </ActionButton>
        <BottomSheetRoot open={open} onOpenChange={setOpen}>
          <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
            {/* If you need to omit padding, pass px={0}. */}
            <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
            <BottomSheetFooter>
              <ActionButton variant="neutralSolid">확인</ActionButton>
            </BottomSheetFooter>
          </BottomSheetContent>
        </BottomSheetRoot>
      </>
    );
  };

  export default BottomSheetControlled;
  ```
</ComponentExample>

### `onOpenChange` Details

`onOpenChange` 두 번째 인자로 `details`가 제공됩니다.

#### `reason`

**닫힐 때** (`open: false`)

* `"closeButton"`: `BottomSheet.CloseButton`으로 닫힘
* `"escapeKeyDown"`: <kbd>ESC</kbd> 키 사용
* `"interactOutside"`: 외부 영역 클릭
* `"drag"`: 드래그로 닫힘
* `"handleClickOnLastSnapPoint"`: 마지막 스냅 포인트에서 핸들 클릭으로 닫힘

<ComponentExample name="react/bottom-sheet/open-change-reason">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const snapPoints = ["200px", "400px", 1];

  export default function BottomSheetOnOpenChangeReason() {
    const [open, setOpen] = useState(false);
    const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);
    const [closeReason, setCloseReason] = useState<string | null>(null);

    return (
      <VStack gap="x4" align="center">
        <BottomSheetRoot
          open={open}
          onOpenChange={(open, details) => {
            setOpen(open);

            if (open) return;

            setCloseReason(details?.reason ?? null);
          }}
          snapPoints={snapPoints}
          activeSnapPoint={snap}
          setActiveSnapPoint={setSnap}
        >
          <BottomSheetTrigger asChild>
            <ActionButton variant="neutralSolid">열기</ActionButton>
          </BottomSheetTrigger>
          <BottomSheetContent title="알림" showHandle style={{ height: "100%", maxHeight: "97%" }}>
            <BottomSheetBody minHeight="x16">
              <Text textStyle="t4Medium" color="fg.neutralMuted">
                ESC 키를 누르거나, 외부 영역을 클릭하거나, 아래로 스와이프하거나, 핸들을 탭하여 snap
                point를 순환해보세요.
              </Text>
            </BottomSheetBody>
          </BottomSheetContent>
        </BottomSheetRoot>

        <HStack gap="x4">
          <Text fontSize="t3" color="fg.neutralMuted">
            마지막 닫힘 이유: {closeReason ?? "-"}
          </Text>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Header Align

`<BottomSheetRoot>`에 `headerAlign` prop을 설정하여 title과 description의 정렬을 설정할 수 있습니다.

<ComponentExample name="react/bottom-sheet/header-align">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetHeaderAlign = () => {
    return (
      <HStack gap="x4">
        <BottomSheetRoot headerAlign="left">
          <BottomSheetTrigger asChild>
            <ActionButton variant="neutralSolid">Left (기본값)</ActionButton>
          </BottomSheetTrigger>
          <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
            <BottomSheetBody>Content</BottomSheetBody>
            <BottomSheetFooter>
              <ActionButton variant="neutralSolid">확인</ActionButton>
            </BottomSheetFooter>
          </BottomSheetContent>
        </BottomSheetRoot>

        <BottomSheetRoot headerAlign="center">
          <BottomSheetTrigger asChild>
            <ActionButton variant="neutralSolid">Center</ActionButton>
          </BottomSheetTrigger>
          <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
            <BottomSheetBody>Content</BottomSheetBody>
            <BottomSheetFooter>
              <ActionButton variant="neutralSolid">확인</ActionButton>
            </BottomSheetFooter>
          </BottomSheetContent>
        </BottomSheetRoot>
      </HStack>
    );
  };

  export default BottomSheetHeaderAlign;
  ```
</ComponentExample>

### Max Height

`<BottomSheetBody>`에 `maxHeight` prop을 전달하여 BottomSheet의 최대 높이를 설정할 수 있습니다.

<ComponentExample name="react/bottom-sheet/max-height">
  ```tsx
  import { Box, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetMaxHeight = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody>
            <VStack maxHeight="300px" overflowY="auto">
              <VStack justifyContent="center" alignItems="center" gap="x4" height="100%">
                <Box width="100%" height="100px" bg="bg.layerBasement" />
                <Box width="100%" height="100px" bg="bg.layerBasement" />
                <Box width="100%" height="100px" bg="bg.layerBasement" />
                <Box width="100%" height="100px" bg="bg.layerBasement" />
              </VStack>
            </VStack>
          </BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetMaxHeight;
  ```
</ComponentExample>

### Snap Points

`snapPoints` prop을 사용하여 BottomSheet의 커스텀 스냅 포인트를 설정할 수 있습니다.

<ComponentExample name="react/bottom-sheet/snap-points">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const snapPoints = ["300px", "500px", 1];

  const BottomSheetSnapPoints = () => {
    const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);

    return (
      <BottomSheetRoot snapPoints={snapPoints} activeSnapPoint={snap} setActiveSnapPoint={setSnap}>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent
          title="제목"
          description="설명을 작성할 수 있어요"
          /**
           * snap points를 사용할 때는 handle을 표시해야 합니다.
           */
          showHandle
          /**
           * 높이를 100%로 설정해야 snap points가 제대로 작동합니다.
           */
          style={{ height: "100%", maxHeight: "97%" }}
        >
          <BottomSheetBody>Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetSnapPoints;
  ```
</ComponentExample>

### Fade From Index

`<BottomSheetRoot>`에 `fadeFromIndex` prop을 전달하여 뒷 배경이 어두워지는 시작 인덱스를 설정할 수 있습니다.

<ComponentExample name="react/bottom-sheet/fade-from-index">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const snapPoints = ["300px", "500px", 1];

  const BottomSheetFadeFromIndex = () => {
    const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);

    return (
      <BottomSheetRoot
        fadeFromIndex={0}
        snapPoints={snapPoints}
        activeSnapPoint={snap}
        setActiveSnapPoint={setSnap}
      >
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent
          title="제목"
          description="설명을 작성할 수 있어요"
          /**
           * snap points를 사용할 때는 handle을 표시해야 합니다.
           */
          showHandle
          /**
           * 높이를 100%로 설정해야 snap points가 제대로 작동합니다.
           */
          style={{ height: "100%", maxHeight: "97%" }}
        >
          <BottomSheetBody>Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetFadeFromIndex;
  ```
</ComponentExample>

### Show Handle

`<BottomSheetContent>`에 `showHandle` prop을 전달하여 Handle을 표시할 수 있습니다.
기본 값은 `false`입니다.

<ComponentExample name="react/bottom-sheet/show-handle">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetShowHandle = () => {
    const [isSheetOpen, setIsSheetOpen] = useState(false);

    return (
      <BottomSheetRoot open={isSheetOpen} onOpenChange={setIsSheetOpen}>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요" showHandle>
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid" onClick={() => setIsSheetOpen(false)}>
              닫기
            </ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetShowHandle;
  ```
</ComponentExample>

### Show Close Button

`<BottomSheetContent>`에 `showCloseButton` prop을 전달하여 닫기 버튼을 표시할 수 있습니다.
기본 값은 `true`입니다.

showCloseButton을 `false`로 설정하면 닫기 버튼이 표시되지 않습니다.
이 경우 유저가 BottomSheet를 닫을 수 있는 방법을 제공해야 합니다.

<ComponentExample name="react/bottom-sheet/show-close-button">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetShowCloseButton = () => {
    const [isSheetOpen, setIsSheetOpen] = useState(false);

    return (
      <BottomSheetRoot open={isSheetOpen} onOpenChange={setIsSheetOpen}>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent
          title="제목"
          description="설명을 작성할 수 있어요"
          showCloseButton={false}
        >
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid" onClick={() => setIsSheetOpen(false)}>
              닫기
            </ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetShowCloseButton;
  ```
</ComponentExample>

### Dismissible

`dismissible` prop을 `false`로 설정하면 closeOnEscape, closeOnInteractOutside, draggable 기능이 비활성화됩니다.
의도적으로 BottomSheet를 닫을 수 없게 하고 싶을 때 사용합니다. 이외에는 유저가 BottomSheet를 닫을 수 있는 방법을 제공해야 합니다.

<ComponentExample name="react/bottom-sheet/dismissible">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetDismissible = () => {
    const [open, setOpen] = useState(false);

    return (
      <BottomSheetRoot open={open} onOpenChange={setOpen} dismissible={false}>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody>Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid" onClick={() => setOpen(false)}>
              닫기
            </ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetDismissible;
  ```
</ComponentExample>

### With Scroll Fog

`<BottomSheetBody>`에 [Scroll Fog](/react/components/scroll-fog)를 사용하여 스크롤 힌트 효과를 적용할 수 있습니다.

ScrollFog는 항상 효과를 표시하므로, 충분한 padding을 제공해야 합니다.
권장 padding인 하단 `80px`, 상단 `20px`을 유지해야 합니다.

<ComponentExample name="react/bottom-sheet/with-scroll-fog">
  ```tsx
  import { Box, ScrollFog, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetMaxHeight = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody>
            <VStack maxHeight="300px" overflowY="auto">
              <ScrollFog placement={["top", "bottom"]}>
                <VStack
                  justifyContent="center"
                  alignItems="center"
                  gap="x4"
                  height="100%"
                  pb="80px"
                  pt="20px"
                >
                  <Box width="100%" height="100px" bg="bg.layerBasement" />
                  <Box width="100%" height="100px" bg="bg.layerBasement" />
                  <Box width="100%" height="100px" bg="bg.layerBasement" />
                  <Box width="100%" height="100px" bg="bg.layerBasement" />
                </VStack>
              </ScrollFog>
            </VStack>
          </BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetMaxHeight;
  ```
</ComponentExample>

### Bottom Inset

`<BottomSheetContent>`에 `style` prop을 전달하여 아래 여백을 주기 위해 사용합니다.

<ComponentExample name="react/bottom-sheet/bottom-inset">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetBottomInset = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent
          title="제목"
          description="설명을 작성할 수 있어요"
          // 모바일 브라우저에서 아래 여백을 주기 위해 사용
          style={{ paddingBottom: "var(--seed-safe-area-bottom)" }}
        >
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetBottomInset;
  ```
</ComponentExample>

### Handle Only

`<BottomSheetRoot>`에 `handleOnly` prop을 제공하는 경우 쓸어서(swipe) Bottom Sheet를 움직일 수 있는 영역이 핸들 부분으로 제한됩니다.

이 옵션은 `<BottomSheetContent showHandle={true}>`와 함께 사용할 때만 작동합니다.

<ComponentExample name="react/bottom-sheet/handle-only">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetHandleOnly = () => {
    return (
      <BottomSheetRoot handleOnly>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent showHandle title="제목" description="설명을 작성할 수 있어요">
          <BottomSheetBody>Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetHandleOnly;
  ```
</ComponentExample>

### Skip Animation

`skipAnimation` prop을 사용하여 BottomSheet의 enter/exit 애니메이션을 건너뛸 수 있습니다.

<ComponentExample name="react/bottom-sheet/skip-animation">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetSkipAnimation = () => {
    return (
      <BottomSheetRoot skipAnimation>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          <BottomSheetBody>Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetSkipAnimation;
  ```
</ComponentExample>


---

file: components/callout.mdx

# Callout

사용자에게 중요한 정보나 팁을 시각적으로 강조하여 전달하는 메시지 컴포넌트입니다.



<ComponentExample name="react/callout/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutPreview() {
    return (
      <VStack gap="x4" width="full">
        <Callout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
        <ActionableCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
        <DismissibleCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:callout
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:callout
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:callout
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:callout
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="callout" />

## Props

### `Callout`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    linkProps: {
        "type": "SeedCallout.LinkProps | undefined",
        "default": undefined,
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"positive\" | \"warning\" | \"critical\" | \"magic\" | undefined",
        "default": "\"neutral\"",
        "required": false
    }
}}
/>

### `ActionableCallout`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"positive\" | \"warning\" | \"critical\" | \"magic\" | undefined",
        "default": "\"neutral\"",
        "required": false
    }
}}
/>

### `DismissibleCallout`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    linkProps: {
        "type": "SeedCallout.LinkProps | undefined",
        "default": undefined,
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"positive\" | \"warning\" | \"critical\" | \"magic\" | undefined",
        "default": "\"neutral\"",
        "required": false
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onDismiss: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Content Layout

#### Text Only

<ComponentExample name="react/callout/text-only">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutTextOnly() {
    return (
      <VStack gap="x4" width="full">
        <Callout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
        <ActionableCallout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
        <DismissibleCallout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Icon

<ComponentExample name="react/callout/with-icon">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWithIcon() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Title Text

<ComponentExample name="react/callout/with-title-text">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWithTitleText() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          title="타이틀"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          title="타이틀"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          title="타이틀"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Link Label

<Callout type="warn">
  `ActionableCallout`에서는 `linkProps`를 제공하지 않아요.
</Callout>

<ComponentExample name="react/callout/with-link-label">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWithLinkLabel() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{ children: "시도해 보기" }}
        />
        <DismissibleCallout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{ children: "시도해 보기" }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With All

<ComponentExample name="react/callout/with-all">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWithAll() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          title="타이틀"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{ children: "시도해 보기" }}
        />
        <DismissibleCallout
          title="타이틀"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{ children: "시도해 보기" }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Rendering Link Label as Child

<ComponentExample name="react/callout/link-label-as-child">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutLinkLabelAsChild() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{
            asChild: true,
            children: (
              <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
                시도해 보기
              </a>
            ),
          }}
        />
        <DismissibleCallout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{
            asChild: true,
            children: (
              <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
                시도해 보기
              </a>
            ),
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Tones

#### Neutral (Default)

<ComponentExample name="react/callout/neutral">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutNeutral() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="neutral"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="neutral"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="neutral"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Informative

<ComponentExample name="react/callout/informative">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutInformative() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="informative"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="informative"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="informative"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Positive

<ComponentExample name="react/callout/positive">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutPositive() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="positive"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="positive"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="positive"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Warning

<ComponentExample name="react/callout/warning">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWarning() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="warning"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="warning"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="warning"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Critical

<ComponentExample name="react/callout/critical">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutCritical() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="critical"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="critical"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="critical"
          prefixIcon={<IconCalendarFill />}
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Magic

<ComponentExample name="react/callout/magic">
  ```tsx
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutMagic() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="magic"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          prefixIcon={<IconSparkle2 />}
        />
        <ActionableCallout
          tone="magic"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          prefixIcon={<IconSparkle2 />}
        />
        <DismissibleCallout
          tone="magic"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          prefixIcon={<IconSparkle2 />}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/checkbox.mdx

# Checkbox

사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다.



<ComponentExample name="react/checkbox/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxPreview() {
    return (
      <VStack p="x6">
        <CheckboxGroup
          label="관심 분야"
          description="관심 있는 분야를 모두 선택해 주세요."
          indicator="선택"
        >
          <Checkbox label="디자인" tone="neutral" size="large" />
          <Checkbox label="개발" tone="neutral" size="large" defaultChecked />
          <Checkbox label="마케팅" tone="neutral" size="large" />
        </CheckboxGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:checkbox
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:checkbox
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:checkbox
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:checkbox
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="checkbox" />

## Props

### `CheckboxGroup`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `Checkbox`

<TypeTable
  type={{
    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    weight: {
        "type": "\"regular\" | \"bold\" | CheckboxVariantDeprecatedWeightProps | undefined",
        "default": undefined,
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    variant: {
        "type": "\"square\" | \"ghost\" | undefined",
        "default": "\"square\"",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"brand\" | undefined",
        "default": "\"brand\"",
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    required: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    checked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultChecked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    indeterminate: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `Checkmark`

<TypeTable
  type={{
    variant: {
        "type": "\"square\" | \"ghost\" | undefined",
        "default": "\"square\"",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"brand\" | undefined",
        "default": "\"brand\"",
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Sizes

<ComponentExample name="react/checkbox/size">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxSize() {
    return (
      <HStack gap="x8" p="x6">
        <CheckboxGroup aria-label="Square size examples">
          <Checkbox label="Medium (default)" size="medium" defaultChecked tone="neutral" />
          <Checkbox label="Large" size="large" defaultChecked tone="neutral" />
        </CheckboxGroup>
        <CheckboxGroup aria-label="Ghost size examples">
          <Checkbox
            label="Medium (default)"
            size="medium"
            variant="ghost"
            defaultChecked
            tone="neutral"
          />
          <Checkbox label="Large" size="large" variant="ghost" defaultChecked tone="neutral" />
        </CheckboxGroup>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Tones and Variants

#### Brand

<ComponentExample name="react/checkbox/brand">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxBrand() {
    return (
      <VStack p="x6">
        <CheckboxGroup aria-label="Brand tone examples">
          <Checkbox
            label="Square (default)"
            variant="square"
            tone="brand"
            size="large"
            defaultChecked
          />
          <Checkbox label="Ghost" variant="ghost" tone="brand" size="large" defaultChecked />
        </CheckboxGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Neutral

<ComponentExample name="react/checkbox/neutral">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxNeutral() {
    return (
      <VStack p="x6">
        <CheckboxGroup aria-label="Neutral tone examples">
          <Checkbox
            label="Square (default)"
            variant="square"
            tone="neutral"
            size="large"
            defaultChecked
          />
          <Checkbox label="Ghost" variant="ghost" tone="neutral" size="large" defaultChecked />
        </CheckboxGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Indeterminate

<ComponentExample name="react/checkbox/indeterminate">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxIndeterminate() {
    return (
      <VStack p="x6">
        <Checkbox defaultChecked label="indeterminate" indeterminate tone="neutral" size="large" />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Weights

<Callout title="Deprecated Props" type="warning">
  `weight="default"`와 `weight="stronger"`는 더 이상 사용되지 않습니다. 대신
  `weight="regular"`와 `weight="bold"`를 사용하세요.
</Callout>

<ComponentExample name="react/checkbox/weights">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxWeights() {
    return (
      <VStack p="x6">
        <CheckboxGroup aria-label="Weight examples">
          <Checkbox label="Regular Label Text" weight="regular" tone="neutral" size="large" />
          <Checkbox label="Bold Label Text" weight="bold" tone="neutral" size="large" />
        </CheckboxGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Long Label

<ComponentExample name="react/checkbox/long-label">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxLongLabel() {
    return (
      <VStack p="x6">
        <CheckboxGroup aria-label="Long label examples">
          <Checkbox
            size="medium"
            tone="neutral"
            label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
          />
          <Checkbox
            size="large"
            tone="neutral"
            label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
          />
        </CheckboxGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/checkbox/disabled">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxDisabled() {
    return (
      <VStack p="x6">
        <CheckboxGroup aria-label="Disabled examples">
          <Checkbox
            defaultChecked
            label="Disabled Checked, Square"
            disabled
            tone="neutral"
            size="large"
          />
          <Checkbox
            checked={false}
            label="Disabled without Checked, Square"
            disabled
            tone="neutral"
            size="large"
          />
          <Checkbox
            variant="ghost"
            defaultChecked
            label="Disabled Checked, Ghost"
            disabled
            tone="neutral"
            size="large"
          />
          <Checkbox
            variant="ghost"
            checked={false}
            label="Disabled without Checked, Ghost"
            disabled
            tone="neutral"
            size="large"
          />
        </CheckboxGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Listening to Value Changes

`onCheckedChange`를 사용하여 체크박스의 선택 상태 변경을 감지할 수 있습니다.

이벤트를 활용해야 하는 경우 `inputProps`를 통해 내부 `<input>` 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.

<ComponentExample name="react/checkbox/value-changes">
  ```tsx
  import { VStack, Text } from "@seed-design/react";
  import { Checkbox } from "seed-design/ui/checkbox";
  import { useState } from "react";

  export default function CheckboxValueChanges() {
    const [count, setCount] = useState(0);
    const [lastValue, setLastValue] = useState<boolean | null>(null);

    return (
      <VStack gap="x4" align="center" p="x6">
        <Checkbox
          label="Click me"
          tone="neutral"
          size="large"
          onCheckedChange={(checked) => {
            setCount((prev) => prev + 1);
            setLastValue(checked);
          }}
        />
        <Text>
          onCheckedChange called: {count} times, last value: {`${lastValue ?? "-"}`}
        </Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### React Hook Form

<ComponentExample name="react/checkbox/react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm, type Control } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

  type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;

  export default function CheckboxReactHookForm() {
    const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
      defaultValues: {
        apple: false,
        melon: true,
        mango: false,
      },
    });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack gap="x3" p="x6" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <CheckboxGroup aria-label="Fruit selection">
          {POSSIBLE_FRUIT_VALUES.map((name) => (
            <CheckboxItem key={name} name={name} control={control} />
          ))}
        </CheckboxGroup>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton
            type="button"
            variant="neutralWeak"
            flexGrow={1}
            onClick={() => setValue("mango", true)}
          >
            mango 선택
          </ActionButton>
          <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }

  interface CheckboxItemProps {
    name: keyof FormValues;
    control: Control<FormValues>;
  }

  function CheckboxItem({ name, control }: CheckboxItemProps) {
    const {
      field: { value, ...restProps },
      fieldState: { invalid },
    } = useController({ name, control });

    return (
      <Checkbox
        key={name}
        label={name}
        checked={value}
        inputProps={restProps}
        invalid={invalid}
        tone="neutral"
        size="large"
      />
    );
  }
  ```
</ComponentExample>

#### Using `Checkmark`

`Checkmark`는 독립적인 체크 마크 컴포넌트로, Checkbox Primitive 컴포넌트와 조합하여 커스텀 레이아웃을 위해 사용할 수 있습니다.

<ComponentExample name="react/checkbox/checkmark">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { Checkbox } from "@seed-design/react/primitive";
  import { Checkmark } from "seed-design/ui/checkbox";

  function CustomCheckbox({ children, ...props }: Checkbox.RootProps) {
    return (
      <VStack asChild gap="x2" align="center">
        <Checkbox.Root {...props}>
          <Checkmark tone="neutral" />
          <Checkbox.HiddenInput />
          {children}
        </Checkbox.Root>
      </VStack>
    );
  }

  export default function CheckboxCheckmark() {
    return (
      <HStack gap="x6" p="x6">
        <CustomCheckbox>
          <Text textStyle="t7Regular">regular</Text>
        </CustomCheckbox>
        <CustomCheckbox defaultChecked>
          <Text textStyle="t7Medium">medium</Text>
        </CustomCheckbox>
        <CustomCheckbox>
          <Text textStyle="t7Bold">bold</Text>
        </CustomCheckbox>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Fieldset Integration

`CheckboxGroup`을 사용하여 여러 체크박스를 그룹화하고 `label`, `description`, `errorMessage` 등의 Fieldset 관련 prop을 사용할 수 있습니다.

<ComponentExample name="react/checkbox/fieldset">
  ```tsx
  import { ActionButton, HStack, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxFieldset() {
    const [firstErrors, setFirstErrors] = useState<Record<string, string | undefined>>({});
    const [secondErrors, setSecondErrors] = useState<Record<string, string | undefined>>({});

    const handleFirstSubmit = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();

      const formData = new FormData(e.currentTarget);
      const fruits = formData.getAll("fruit");

      if (fruits.includes("apple")) {
        setFirstErrors({ apple: "Apple은 선택할 수 없습니다." });

        return;
      }

      setFirstErrors({});

      alert(JSON.stringify(fruits, null, 2));
    };

    const handleSecondSubmit = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();

      const formData = new FormData(e.currentTarget);
      const agreements = formData.getAll("agreement");

      const hasTerms = agreements.includes("terms");
      const hasPrivacy = agreements.includes("privacy");

      if (!hasTerms || !hasPrivacy) {
        setSecondErrors({
          ...(!hasTerms && { terms: "필수 항목에 동의해 주세요." }),
          ...(!hasPrivacy && { privacy: "필수 항목에 동의해 주세요." }),
        });
        return;
      }

      setSecondErrors({});
      alert(JSON.stringify(agreements, null, 2));
    };

    return (
      <HStack width="full" gap="x8" align="flex-start" p="x6">
        <VStack asChild gap="spacingY.componentDefault" style={{ flex: 1 }}>
          <form onSubmit={handleFirstSubmit}>
            <CheckboxGroup
              label="좋아하는 과일"
              indicator="선택"
              description="Apple을 선택하고 제출해보세요."
              errorMessage={Object.values(firstErrors).filter(Boolean).join(", ")}
            >
              <Checkbox
                label="Apple"
                tone="neutral"
                size="large"
                defaultChecked
                invalid={!!firstErrors.apple}
                inputProps={{ name: "fruit", value: "apple" }}
              />
              <Checkbox
                label="Banana"
                tone="neutral"
                size="large"
                invalid={!!firstErrors.banana}
                inputProps={{ name: "fruit", value: "banana" }}
              />
              <Checkbox
                label="Orange"
                tone="neutral"
                size="large"
                invalid={!!firstErrors.orange}
                inputProps={{ name: "fruit", value: "orange" }}
              />
            </CheckboxGroup>
            <ActionButton type="submit" variant="neutralSolid">
              제출
            </ActionButton>
          </form>
        </VStack>

        <VStack asChild gap="spacingY.componentDefault" style={{ flex: 1 }}>
          <form onSubmit={handleSecondSubmit}>
            <CheckboxGroup
              label="약관 동의"
              labelWeight="bold"
              showRequiredIndicator
              description="이용약관을 선택하지 않고 제출해보세요."
              errorMessage={Object.values(secondErrors).filter(Boolean).join(", ")}
            >
              <Checkbox
                label="이용약관 동의 (필수)"
                tone="neutral"
                size="large"
                invalid={!!secondErrors.terms}
                inputProps={{ name: "agreement", value: "terms" }}
              />
              <Checkbox
                label="개인정보 처리방침 동의 (필수)"
                tone="neutral"
                size="large"
                defaultChecked
                invalid={!!secondErrors.privacy}
                inputProps={{ name: "agreement", value: "privacy" }}
              />
              <Checkbox
                label="마케팅 수신 동의 (선택)"
                tone="neutral"
                size="large"
                invalid={!!secondErrors.marketing}
                inputProps={{ name: "agreement", value: "marketing" }}
              />
            </CheckboxGroup>
            <ActionButton type="submit" variant="neutralSolid">
              제출
            </ActionButton>
          </form>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>


---

file: components/chip.mdx

# Chip

사용자가 선택하거나 입력하는 값을 표시하는 컴포넌트입니다.



<ComponentExample name="react/chip/preview">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipPreview() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button>
            <Chip.Label>Button Chip</Chip.Label>
          </Chip.Button>
          <Chip.Toggle>
            <Chip.Label>Toggle Chip</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1">
              <Chip.Label>Radio Chip 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2">
              <Chip.Label>Radio Chip 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:chip
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:chip
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:chip
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:chip
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="chip" />

## Props

### `Chip.Button`

<TypeTable
  type={{
    variant: {
        "type": "\"solid\" | \"outlineStrong\" | \"outlineWeak\" | undefined",
        "default": "\"solid\"",
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | \"small\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"iconOnly\" | \"withText\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `Chip.Toggle`

<TypeTable
  type={{
    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    variant: {
        "type": "\"solid\" | \"outlineStrong\" | \"outlineWeak\" | undefined",
        "default": "\"solid\"",
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | \"small\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"iconOnly\" | \"withText\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    required: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    checked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultChecked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    indeterminate: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `Chip.RadioRoot`

<TypeTable
  type={{
    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    form: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((value: string) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `Chip.RadioItem`

<TypeTable
  type={{
    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    variant: {
        "type": "\"solid\" | \"outlineStrong\" | \"outlineWeak\" | undefined",
        "default": "\"solid\"",
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | \"small\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    layout: {
        "type": "\"iconOnly\" | \"withText\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Sizes

#### Small

<ComponentExample name="react/chip/small">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipSmall() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button size="small">
            <Chip.Label>Small Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle size="small">
            <Chip.Label>Small Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1" size="small">
              <Chip.Label>Small Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2" size="small">
              <Chip.Label>Small Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Medium

<ComponentExample name="react/chip/medium">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipMedium() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button size="medium">
            <Chip.Label>Medium Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle size="medium">
            <Chip.Label>Medium Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1" size="medium">
              <Chip.Label>Medium Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2" size="medium">
              <Chip.Label>Medium Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Large

<ComponentExample name="react/chip/large">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipLarge() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button size="large">
            <Chip.Label>Large Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle size="large">
            <Chip.Label>Large Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1" size="large">
              <Chip.Label>Large Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2" size="large">
              <Chip.Label>Large Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Variants

#### Solid

<ComponentExample name="react/chip/solid">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipSolid() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button variant="solid">
            <Chip.Label>Solid Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle variant="solid">
            <Chip.Label>Solid Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1" variant="solid">
              <Chip.Label>Solid Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2" variant="solid">
              <Chip.Label>Solid Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Outline Strong

<ComponentExample name="react/chip/outline-strong">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipOutlineStrong() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button variant="outlineStrong">
            <Chip.Label>Outline Strong Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle variant="outlineStrong">
            <Chip.Label>Outline Strong Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1" variant="outlineStrong">
              <Chip.Label>Outline Strong Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2" variant="outlineStrong">
              <Chip.Label>Outline Strong Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Outline Weak

<ComponentExample name="react/chip/outline-weak">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipOutlineWeak() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button variant="outlineWeak">
            <Chip.Label>Outline Weak Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle variant="outlineWeak">
            <Chip.Label>Outline Weak Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1" variant="outlineWeak">
              <Chip.Label>Outline Weak Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2" variant="outlineWeak">
              <Chip.Label>Outline Weak Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="react/chip/prefix-icon">
  ```tsx
  import { HStack, VStack, Icon } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";
  import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";

  export default function ChipPrefixIcon() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button>
            <Chip.PrefixIcon>
              <Icon svg={<IconHeartFill />} />
            </Chip.PrefixIcon>
            <Chip.Label>With Icon Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle>
            <Chip.PrefixIcon>
              <Icon svg={<IconHeartFill />} />
            </Chip.PrefixIcon>
            <Chip.Label>With Icon Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1">
              <Chip.PrefixIcon>
                <Icon svg={<IconHeartFill />} />
              </Chip.PrefixIcon>
              <Chip.Label>With Icon Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2">
              <Chip.PrefixIcon>
                <Icon svg={<IconHeartFill />} />
              </Chip.PrefixIcon>
              <Chip.Label>With Icon Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="react/chip/suffix-icon">
  ```tsx
  import { HStack, VStack, Icon } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";
  import { IconChevronDownLine } from "@karrotmarket/react-monochrome-icon";

  export default function ChipSuffixIcon() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button>
            <Chip.Label>Button with Suffix</Chip.Label>
            <Chip.SuffixIcon>
              <Icon svg={<IconChevronDownLine />} />
            </Chip.SuffixIcon>
          </Chip.Button>
          <Chip.Toggle>
            <Chip.Label>Toggle with Suffix</Chip.Label>
            <Chip.SuffixIcon>
              <Icon svg={<IconChevronDownLine />} />
            </Chip.SuffixIcon>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1">
              <Chip.Label>Radio with Suffix 1</Chip.Label>
              <Chip.SuffixIcon>
                <Icon svg={<IconChevronDownLine />} />
              </Chip.SuffixIcon>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2">
              <Chip.Label>Radio with Suffix 2</Chip.Label>
              <Chip.SuffixIcon>
                <Icon svg={<IconChevronDownLine />} />
              </Chip.SuffixIcon>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="react/chip/icon-only">
  ```tsx
  import { HStack, VStack, Icon } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";
  import {
    IconArrowClockwiseCircularLine,
    IconBellLine,
    IconBellSlashLine,
    IconTimer_10Line,
    IconTimer_3Line,
  } from "@karrotmarket/react-monochrome-icon";
  import { useState } from "react";

  export default function ChipIconOnly() {
    const [checked, setChecked] = useState(false);

    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button layout="iconOnly" aria-label="Refresh">
            <Icon svg={<IconArrowClockwiseCircularLine />} />
          </Chip.Button>
          <Chip.Toggle
            layout="iconOnly"
            checked={checked}
            onCheckedChange={setChecked}
            inputProps={{ "aria-label": "Receive notifications" }}
          >
            <Icon svg={checked ? <IconBellLine /> : <IconBellSlashLine />} />
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="3" aria-label="Timer">
          <HStack gap="x2">
            <Chip.RadioItem value="3" layout="iconOnly" inputProps={{ "aria-label": "3 seconds" }}>
              <Icon svg={<IconTimer_3Line />} />
            </Chip.RadioItem>
            <Chip.RadioItem value="10" layout="iconOnly" inputProps={{ "aria-label": "10 seconds" }}>
              <Icon svg={<IconTimer_10Line />} />
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Prefix Avatar

[Avatar](/react/components/avatar)와 함께 사용할 수 있습니다.

<ComponentExample name="react/chip/prefix-avatar">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";
  import { Avatar } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function ChipPrefixAvatar() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button>
            <Chip.PrefixAvatar>
              <Avatar
                size="24"
                src="https://avatars.githubusercontent.com/u/54893898?v=4"
                fallback={<IdentityPlaceholder />}
              />
            </Chip.PrefixAvatar>
            <Chip.Label>With Avatar Button</Chip.Label>
          </Chip.Button>
          <Chip.Toggle>
            <Chip.PrefixAvatar>
              <Avatar
                size="24"
                src="https://avatars.githubusercontent.com/u/54893898?v=4"
                fallback={<IdentityPlaceholder />}
              />
            </Chip.PrefixAvatar>
            <Chip.Label>With Avatar Toggle</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1">
              <Chip.PrefixAvatar>
                <Avatar
                  size="24"
                  src="https://avatars.githubusercontent.com/u/54893898?v=4"
                  fallback={<IdentityPlaceholder />}
                />
              </Chip.PrefixAvatar>
              <Chip.Label>With Avatar Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2">
              <Chip.PrefixAvatar>
                <Avatar
                  size="24"
                  src="https://avatars.githubusercontent.com/u/54893898?v=4"
                  fallback={<IdentityPlaceholder />}
                />
              </Chip.PrefixAvatar>
              <Chip.Label>With Avatar Radio 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Listening to Value Changes

* `Chip.Toggle`
  * `onCheckedChange`를 사용하여 토글 상태 변경을 감지할 수 있습니다.
  * 이벤트를 활용해야 하는 경우 `inputProps`를 통해 내부 `<input>` 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.
* `Chip.RadioRoot` / `Chip.RadioItem`
  * `Chip.RadioRoot`의 `onValueChange`를 사용하여 라디오 버튼의 선택 값 변경을 감지할 수 있습니다.
  * 이벤트를 활용해야 하는 경우 `Chip.RadioItem`의 `inputProps`를 통해 내부 `<input>` 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.

<ComponentExample name="react/chip/value-changes">
  ```tsx
  import { HStack, VStack, Text } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";
  import { useState } from "react";

  export default function ChipValueChanges() {
    const [toggleCount, setToggleCount] = useState(0);
    const [toggleLastValue, setToggleLastValue] = useState<boolean | null>(null);
    const [radioCount, setRadioCount] = useState(0);
    const [radioLastValue, setRadioLastValue] = useState<string | null>(null);

    return (
      <VStack gap="x4" align="center">
        <VStack gap="x2" align="center">
          <Chip.Toggle
            onCheckedChange={(checked) => {
              setToggleCount((prev) => prev + 1);
              setToggleLastValue(checked);
            }}
          >
            <Chip.Label>Toggle Chip</Chip.Label>
          </Chip.Toggle>
          <Text>
            onCheckedChange called: {toggleCount} times, last value: {`${toggleLastValue ?? "-"}`}
          </Text>
        </VStack>
        <VStack gap="x2" align="center">
          <Chip.RadioRoot
            defaultValue="option1"
            aria-label="Options"
            onValueChange={(value) => {
              setRadioCount((prev) => prev + 1);
              setRadioLastValue(value);
            }}
          >
            <HStack gap="x2">
              <Chip.RadioItem value="option1">
                <Chip.Label>Radio 1</Chip.Label>
              </Chip.RadioItem>
              <Chip.RadioItem value="option2">
                <Chip.Label>Radio 2</Chip.Label>
              </Chip.RadioItem>
            </HStack>
          </Chip.RadioRoot>
          <Text>
            onValueChange called: {radioCount} times, last value: {radioLastValue ?? "-"}
          </Text>
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Migrating from ActionChip/ControlChip

[Action Chip](/react/components/action-chip)과 [Control Chip](/react/components/control-chip)을 대체합니다.

### ActionChip → Chip.Button

```tsx
// Before
import { ActionChip } from "@seed-design/react";

<ActionChip size="medium">Label</ActionChip>

// After
import { Chip } from "@seed-design/react";

<Chip.Button size="medium" variant="solid">
  <Chip.Label>Label</Chip.Label>
</Chip.Button>
```

### ControlChip → Chip.Toggle

```tsx
// Before
import { ControlChip } from "@seed-design/react";

<ControlChip size="medium">Label</ControlChip>

// After
import { Chip } from "@seed-design/react";

<Chip.Toggle size="medium" variant="outlineStrong">
  <Chip.Label>Label</Chip.Label>
</Chip.Toggle>
```


---

file: components/concepts/composition.mdx

# Composition

컴포넌트를 조합하여 복잡한 UI를 구성하는 방법과 원칙을 설명합니다.



## `as` Prop

`as` prop은 React 컴포넌트가 렌더링하는 기본 HTML 요소를 변경하는 데 사용됩니다. 컴포넌트의 기능은 유지하면서 기본 요소를 변경할 수 있는 간단한 방법을 제공합니다.

```jsx
<Text as="p">단락 텍스트</Text>
<Text as="span">인라인 텍스트</Text>
<Text as="h3">제목 텍스트</Text>
```

## `asChild` Prop

`asChild` prop은 컴포넌트의 기능을 자식 요소에 합성하는 데 사용됩니다. 이를 활용해 HTML 태그를 변경하거나, 다른 컴포넌트에 기능을 주입할 수 있습니다.
[Radix UI](https://www.radix-ui.com/primitives/docs/utilities/slot)에서 제공하는 asChild 패턴과 동일한 기능을 제공합니다.

### 요소 타입 변경하기

```jsx
// FAB는 기본적으로 button 태그를 사용하지만, asChild를 사용해 링크로 변경할 수 있습니다.
<FAB asChild>
  <a href="/create">
    <Icon svg={<IconPlusLine />} />
  </a>
</FAB>
```

> 기본 요소 타입을 변경하는 경우, 해당 요소가 접근성을 유지하고 올바르게 작동하는지 확인하는 것은 개발자의 책임입니다. 예를 들어, 버튼을 `div`로 변경하면 더 이상 키보드로 접근할 수 없게 될 수 있습니다.

### React 컴포넌트와 조합하기

```jsx
// 라우터 라이브러리에서 제공하는 Link 컴포넌트에 기능을 합성할 수 있습니다.
<Button asChild>
  <Link to="/create">
    <Icon svg={<IconPlusLine />} />
  </Link>
</Button>
```

`asChild`를 사용하여 컴포넌트를 조합할 때는 두 가지 원칙을 따라야 합니다.

#### 1. 컴포넌트는 props를 전개해야 합니다

asChild는 기능을 제공하고 접근성을 유지하기 위한 고유의 props와 이벤트 핸들러를 전달합니다. 컴포넌트가 이러한 props를 지원하지 않으면 제대로 작동하지 않습니다.

```jsx
// 잘못된 방법
const MyButton = () => <button />;

// 올바른 방법
const MyButton = (props) => <button {...props} />;
```

asChild의 자식 컴포넌트에 대해서는 항상 모든 props를 전개(spread)하는 것이 좋은 방법입니다.

#### 2. 컴포넌트는 ref를 전달해야 합니다

컴포넌트에 `ref`를 전달해야 할 수 있습니다(예: 요소 크기 측정). 컴포넌트가 `ref`를 받지 않으면 제대로 작동하지 않을 수 있습니다.

```jsx
// 잘못된 방법
const MyButton = (props) => <button {...props} />;

// 올바른 방법
const MyButton = React.forwardRef((props, forwardedRef) => (
  <button {...props} ref={forwardedRef} />
));
```

모든 경우에 필수는 아니지만, 항상 `React.forwardRef`를 사용하는 것이 가장 안전합니다.


---

file: components/concepts/snippet.mdx

# Snippet

자주 사용되는 UI 패턴을 스니펫으로 제공하여 개발 효율성을 높이는 방법을 안내합니다.



## 개요

Snippet은 **Compound Components**를 기본으로 채택하면서도 개발자 경험(DX)을 최적화하기 위한 해결책입니다. 복잡한 compound components를 간단하게 사용할 수 있도록 도와주는 패턴입니다.

## Compound Components

기존의 닫힌 컴포넌트 방식에서는 컴포넌트의 커스터마이징이 제한적이었습니다. 예를 들어, 다음과 같은 닫힌 컴포넌트는:

```tsx
<Checkbox>Click me</Checkbox>
```

내부 구현이 숨겨져 있어 다음과 같은 커스터마이징 요구사항을 해결하기 어려웠습니다:

* label에 스타일을 추가하는 방법
* 체크박스의 아이콘을 변경하는 방법
* ref를 div와 input에 각각 전달하는 방법

이러한 문제를 해결하기 위해 compound components 패턴을 도입했습니다:

```tsx
<Checkbox.Root>
  <Checkbox.Control>
    <Checkbox.Indicator />
  </Checkbox.Control>
  <Checkbox.Label>Click me</Checkbox.Label>
  <Checkbox.HiddenInput />
</Checkbox.Root>
```

## Snippet의 필요성

Compound components는 뛰어난 유연성을 제공하지만, 매번 이렇게 자세한 구현을 작성하는 것은 번거로울 수 있습니다. 이러한 유연성과 DX간의 trade-off를 해결하기 위해 Snippet 개념이 도입되었습니다.

## Snippet 사용하기

<Steps>
  <Step>
    ### CLI 실행

    다음 명령어를 통해 필요한 컴포넌트의 snippet을 프로젝트에 추가할 수 있습니다:

    ```bash
    npx @seed-design/cli add
    ```

    <Card title="CLI Commands" href="/react/getting-started/cli/commands" icon={<IconTerminal/>}>
      CLI 명령어에 대해 더 알아봅니다.
    </Card>
  </Step>

  <Step>
    ### 생성된 Snippet 활용

    CLI 실행 후, `seed-design/ui/*` 디렉토리에 snippet이 생성됩니다. 예를 들어:

    ```tsx
    // seed-design/ui/checkbox.tsx

    export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
      ({ inputProps, rootRef, label, variant = "square", ...otherProps }, ref) => {
        return (
          <SeedCheckbox.Root ref={rootRef} variant={variant} {...otherProps}>
            <SeedCheckbox.Control>
              <SeedCheckbox.Indicator
                unchecked={variant === "ghost" ? <IconCheckmarkFatFill /> : null}
                checked={<IconCheckmarkFatFill />}
                indeterminate={<IconMinusFatFill />}
              />
            </SeedCheckbox.Control>
            <SeedCheckbox.Label>{label}</SeedCheckbox.Label>
            <SeedCheckbox.HiddenInput ref={ref} {...inputProps} />
          </SeedCheckbox.Root>
        );
      }
    );
    ```
  </Step>

  <Step>
    ### 사용

    Snippet을 통해 복잡한 compound components를 간단하게 사용할 수 있습니다:

    ```tsx
    import { Checkbox } from "@/seed-design/ui/checkbox";

    const Demo = () => <Checkbox>Click me</Checkbox>;
    ```
  </Step>
</Steps>


---

file: components/contextual-floating-button.mdx

# Contextual Floating Button

화면 위에 떠 있으며 특정 상황에서만 나타나는 보조적인 동작을 위한 버튼입니다.



<ComponentExample name="react/contextual-floating-button/preview">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonPreview() {
    return (
      <ContextualFloatingButton>
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:contextual-floating-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:contextual-floating-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:contextual-floating-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:contextual-floating-button
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="contextual-floating-button" />

## Props

<TypeTable
  type={{
    variant: {
        "type": "\"solid\" | \"layer\" | undefined",
        "default": "\"solid\"",
        "required": false
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\" | undefined",
        "default": "\"withText\"",
        "required": false
    },

    loading: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Float Composition

Contextual Floating Button은 `<Float>` 컴포넌트와 함께 사용하면 편리합니다.

<ComponentExample name="react/contextual-floating-button/float-composition">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { Box, Float, PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonFloatComposition() {
    return (
      <Box
        position="relative"
        width="300px"
        height="500px"
        borderWidth={1}
        borderColor="stroke.neutralMuted"
      >
        <Float placement="bottom-center" offsetY="x4">
          <ContextualFloatingButton>
            <PrefixIcon svg={<IconBellFill />} />
            알림 설정
          </ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>

### Solid Variant

<ComponentExample name="react/contextual-floating-button/solid">
  ```tsx
  import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonSolid() {
    return (
      <ContextualFloatingButton variant="solid">
        <PrefixIcon svg={<IconPlusLine />} />
        Solid Variant
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

### Layer Variant

<ComponentExample name="react/contextual-floating-button/layer">
  ```tsx
  import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonLayer() {
    return (
      <ContextualFloatingButton variant="layer">
        <PrefixIcon svg={<IconPlusLine />} />
        Layer Variant
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="react/contextual-floating-button/icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonIconOnly() {
    return (
      <ContextualFloatingButton layout="iconOnly" aria-label="추가">
        <Icon svg={<IconPlusFill />} />
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="react/contextual-floating-button/loading">
  ```tsx
  import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { useState } from "react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonLoading() {
    const [loading, setLoading] = useState(false);

    function handleClick() {
      setLoading(true);
      setTimeout(() => setLoading(false), 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ContextualFloatingButton loading={loading} onClick={handleClick}>
        <PrefixIcon svg={<IconPlusLine />} />
        시간이 걸리는 액션
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>


---

file: components/divider.mdx

# Divider

시각적 구분자로써 역할을 하며, 콘텐츠 간의 구획을 명확히 나누는 데 사용하는 컴포넌트입니다.



<ComponentExample name="react/divider/preview">
  ```tsx
  import { Box, Divider, VStack } from "@seed-design/react";

  export default function DividerPreview() {
    return (
      <VStack width="full" bg="bg.layerDefault" p="x4">
        <Box p="x4">
          Nisi elit pariatur incididunt quis fugiat mollit ipsum fugiat duis culpa esse incididunt
          cupidatat.
        </Box>
        <Divider />
        <Box p="x4">Consectetur voluptate quis do culpa et culpa.</Box>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Props

<TypeTable
  type={{
    as: {
        "type": "\"hr\" | \"div\" | \"li\" | undefined",
        "default": "\"hr\"",
        "required": false,
        description: <><p>{"The HTML element to use for the divider.\nKeep in mind that \"hr\" elements are read by screen readers as a semantic break with an implicit role=\"separator\"\nIf the element should be read by screen readers but be rendered as an element other than \"hr\", give an explicit role=\"separator\""}</p></>
    },

    color: {
        "type": "ScopedColorStroke | ScopedColorPalette | (string & {}) | undefined",
        "default": "\"stroke.neutralMuted\"",
        "required": false
    },

    thickness: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": "1",
        "required": false
    },

    orientation: {
        "type": "\"horizontal\" | \"vertical\" | undefined",
        "default": "\"horizontal\"",
        "required": false
    },

    inset: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    }
}}
/>

## Usage

```tsx
import { Divider } from "@seed-design/react";
```

```
<Divider />
```

## Screen Reader Behavior

Divider는 기본적으로 `<hr />`을 렌더링합니다. **`<hr />`은 의미를 가진(semantic) 구분선이며, 스크린 리더 역시 해당 요소를 "수평(수직) 분할선"으로 읽습니다.**

Divider가 의미를 가지지 않은 장식적 요소라면, `as` prop을 활용해 `<div>` 등으로 렌더링하여 스크린 리더가 해당 요소를 읽지 않도록 해야 합니다.

반대로, Divider를 `<li>` 등 `<hr />`이 아닌 요소로 렌더링해야 하는 상황에서, 스크린 리더가 해당 요소를 읽어야 한다면, `role="separator"`를 명시적으로 지정해야 합니다.

## Examples

### Orientation

<ComponentExample name="react/divider/orientation">
  ```tsx
  import { Box, Divider, HStack, VStack } from "@seed-design/react";

  export default function DividerOrientation() {
    return (
      <VStack width="full" gap="x4">
        <VStack flexGrow bg="bg.layerDefault" gap="x4">
          <Box bg="palette.blue400" height="x8" />
          <Divider />
          <Box bg="palette.blue400" height="x8" />
        </VStack>
        <HStack flexGrow bg="bg.layerDefault" gap="x4" height="x16">
          <Box bg="palette.blue400" flexGrow />
          <Divider orientation="vertical" />
          <Box bg="palette.blue400" flexGrow />
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Inset

<ComponentExample name="react/divider/inset">
  ```tsx
  import { Box, Divider, HStack, VStack } from "@seed-design/react";

  export default function DividerInset() {
    return (
      <VStack width="full" gap="x4">
        <VStack flexGrow bg="bg.layerDefault" gap="x4">
          <Box bg="palette.blue400" height="x8" />
          <Divider inset />
          <Box bg="palette.blue400" height="x8" />
        </VStack>
        <HStack flexGrow bg="bg.layerDefault" gap="x4" height="x16">
          <Box bg="palette.blue400" flexGrow />
          <Divider orientation="vertical" inset />
          <Box bg="palette.blue400" flexGrow />
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/field-button.mdx

# Field Button

입력 필드 형태의 버튼으로, 선택창이나 피커를 열 때 사용합니다. 선택이 완료되면 버튼 라벨에 선택된 값이 표시됩니다.



<ComponentExample name="react/field-button/preview">
  ```tsx
  import { FieldButton } from "seed-design/ui/field-button";

  export default function FieldButtonPreview() {
    return (
      <FieldButton
        label="레이블"
        description="버튼에 대한 설명을 작성해주세요"
        buttonProps={{
          onClick: () => window.alert("버튼 클릭됨"),
          "aria-label": "알림 표시",
        }}
      />
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:field-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:field-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:field-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:field-button
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="field-button" />

## Props

### `FieldButton`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    showClearButton: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    buttonProps: {
        "type": "SeedFieldButton.ButtonProps | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLDivElement> | undefined",
        "default": undefined,
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    readOnly: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    values: {
        "type": "string[] | undefined",
        "default": undefined,
        "required": false
    },

    onValuesChange: {
        "type": "((values: string[]) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `FieldButtonValue`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `FieldButtonPlaceholder`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Basic Usage

`FieldButton`은 `TextField`와 유사한 외관을 갖지만, 근본적으로 내부에 `<button>` 요소를 포함하는 컴포넌트입니다. 사용자는 `buttonProps` prop을 통해 버튼의 속성을 제어할 수 있습니다.

* **`buttonProps`**
  * **`onClick`**: 버튼 클릭 핸들러
  * **`aria-label`**: 버튼의 접근성 레이블
* **`children`**
  * `FieldButtonValue` 또는 `FieldButtonPlaceholder` 등을 사용하여 구성
  * `FieldButtonValue`와 `FieldButtonPlaceholder`는 스타일 차이만 있을 뿐 기능적으로 동일합니다. 스크린 리더는 두 요소를 읽거나 구분하지 않습니다. **접근성을 위해 `buttonProps["aria-label"]`에 적절한 값을 제공하세요.** 자세한 내용은 [Accessibility](#accessibility) 섹션을 참고하세요.

<ComponentExample name="react/field-button/basic-usage">
  ```tsx
  import { FieldButton, FieldButtonPlaceholder, FieldButtonValue } from "seed-design/ui/field-button";
  import { useState } from "react";

  export default function FieldButtonBasicUsage() {
    const [selectedCity, setSelectedCity] = useState<string>("");

    return (
      <FieldButton
        label="도시"
        showClearButton={!!selectedCity}
        values={[selectedCity]}
        onValuesChange={([value]) => setSelectedCity(value)}
        buttonProps={{
          onClick: () => {
            // Open your picker dialog/sheet here
            setSelectedCity("서울");
          },
          "aria-label": selectedCity ? `도시 변경. 현재: ${selectedCity}` : "도시 선택",
        }}
      >
        {selectedCity ? (
          <FieldButtonValue>{selectedCity}</FieldButtonValue>
        ) : (
          <FieldButtonPlaceholder>도시를 선택해주세요</FieldButtonPlaceholder>
        )}
      </FieldButton>
    );
  }
  ```
</ComponentExample>

### Clear Button

`showClearButton` prop을 `true`로 설정하면 Clear Button이 표시됩니다. `showClearButton`을 `true`로 설정하는 경우 `onValuesChange` prop을 제공해야 합니다.

`FieldButton`이 `disabled` 또는 `readOnly` 상태인 경우 Clear Button은 표시되지 않습니다.

<ComponentExample name="react/field-button/clear-button">
  ```tsx
  import { FieldButton, FieldButtonValue, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { useState } from "react";

  export default function FieldButtonFormControl() {
    const [value, setValue] = useState(
      "Do nostrud duis deserunt occaecat sit ex veniam fugiat commodo voluptate voluptate.",
    );

    return (
      <FieldButton
        values={[value]}
        onValuesChange={([value]) => setValue(value ?? "")}
        showClearButton={value !== ""}
        buttonProps={{
          onClick: () => setValue(window.prompt("값을 입력해주세요") || value),
          "aria-label": `값 입력.${value ? ` 현재 값은 ${value}입니다.` : ""}`,
        }}
      >
        {value ? (
          <FieldButtonValue>입력한 값: {value}</FieldButtonValue>
        ) : (
          <FieldButtonPlaceholder>값을 입력하려면 클릭하세요</FieldButtonPlaceholder>
        )}
      </FieldButton>
    );
  }
  ```
</ComponentExample>

### `FieldButtonValue` & `FieldButtonPlaceholder`

`<FieldButton>` 내부에 `children`으로 넣어 사용할 수 있는 단순한 `<div>` 요소입니다.

스크린 리더는 `FieldButtonValue`와 `FieldButtonPlaceholder`를 읽지 않습니다. `buttonProps["aria-label"]`에 적절한 값을 제공하여 접근성을 확보하세요. 자세한 내용은 [Accessibility](#accessibility) 섹션을 참고하세요.

<ComponentExample name="react/field-button/value-placeholder">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonValue, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { useCallback, useState } from "react";

  export default function FieldButtonValuePlaceholder() {
    const [value, setValue] = useState<string>("");

    const toggleValue = useCallback(() => {
      setValue((prev) => (prev ? "" : "값 설정됨"));
    }, []);

    return (
      <HStack width="full" gap="x3">
        <FieldButton
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "알림 표시",
          }}
        >
          <FieldButtonValue>FieldButtonValue</FieldButtonValue>
        </FieldButton>
        <FieldButton
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "알림 표시",
          }}
        >
          <FieldButtonPlaceholder>FieldButtonPlaceholder</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          buttonProps={{
            onClick: toggleValue,
            "aria-label": "값 설정",
          }}
        >
          {value ? (
            <FieldButtonValue>{value}</FieldButtonValue>
          ) : (
            <FieldButtonPlaceholder>클릭하여 값 설정</FieldButtonPlaceholder>
          )}
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Accessibility

**Field Button 내부 `button`에 `aria-label` 속성을 제공하세요.** 스크린 리더 사용자가 Field Button을 클릭했을 때 어떤 일이 일어날지 예상할 수 있도록 해야 하며, 현재 선택된 값이 있는 경우 그 값이 무엇인지도 알려야 합니다.

```tsx
<FieldButton
  label="사용자 이름" // 스크린 리더는 label을 읽습니다.
  description="본명을 사용하지 않아도 괜찮습니다." // 스크린 리더는 description을 버튼과 함께 읽습니다.
  buttonProps={{
    // [!code highlight]
    // 버튼을 클릭했을 때 어떤 일이 일어날지, 현재 선택된 값이 무엇인지 알려야 합니다.
    "aria-label": `사용자 이름 선택 화면 열기. 현재 선택된 이름: ${username || "없음"}`, // [!code highlight]
    "aria-haspopup": "dialog",
    onClick: () => setIsUsernamePickerOpen(true),
  }}
>
  {username ? (
    <FieldButtonValue>{username}</FieldButtonValue> // 스크린 리더는 FieldButtonValue를 읽지 않습니다.
  ) : (
    <FieldButtonPlaceholder>김하늘</FieldButtonPlaceholder> // 스크린 리더는 FieldButtonPlaceholder를 읽지 않습니다.
  )}
</FieldButton>
```

화면을 볼 수 있는 사용자는 Field Button이 클릭할 수 있는 요소라는 점과, Field Button을 클릭했을 때 일어날 동작을 쉽게 예측할 수 있지만, 스크린 리더 사용자는 `button`에 `aria-label` 속성이 없는 경우 Field Button을 클릭했을 때 어떤 일이 일어날지 파악하기 어렵습니다.

### Use Cases

#### Form

`FieldButton`에 `values` prop을 제공하는 경우 폼 제출에 활용할 수 있도록 `<input type="hidden" />`을 함께 렌더링합니다.

<ComponentExample name="react/field-button/form">
  ```tsx
  import { VStack, HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonValue } from "seed-design/ui/field-button";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { useState, type FormEvent } from "react";

  export default function FieldButtonForm() {
    const [count, setCount] = useState(0);

    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      const formData = new FormData(event.currentTarget);

      window.alert(JSON.stringify(Object.fromEntries(formData.entries()), null, 2));
    };

    return (
      <VStack asChild width="full" gap="spacingY.componentDefault">
        <form onSubmit={handleSubmit}>
          <HStack gap="x3">
            <TextField
              label="TextField"
              description="이것은 TextField입니다. FieldButton과 어떻게 다른지 비교해보세요."
              name="text-field-text"
            >
              <TextFieldInput placeholder="TextFieldInput" />
            </TextField>
            <FieldButton
              label="input을 포함한 FieldButton"
              description={`이 FieldButton은 <input type="hidden" /> 요소를 한 개 포함하고 있습니다. 자세한 내용은 예시 코드를 참고하세요.`}
              name="field-button-count"
              values={[`${count}`]}
              buttonProps={{
                onClick: () => setCount((prev) => prev + 1),
                "aria-label": "카운트 증가",
              }}
            >
              <FieldButtonValue>현재 카운트: {count}</FieldButtonValue>
            </FieldButton>
          </HStack>
          <ActionButton type="submit" variant="neutralSolid">
            제출
          </ActionButton>
        </form>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Form and Bottom Sheet

<ComponentExample name="react/field-button/form-bottom-sheet">
  ```tsx
  import { useState } from "react";
  import { HStack, VStack } from "@seed-design/react";
  import { FieldButton, FieldButtonValue, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetRoot,
    BottomSheetContent,
    BottomSheetBody,
    BottomSheetFooter,
  } from "seed-design/ui/bottom-sheet";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { Portal } from "@seed-design/react";

  interface ProductFormData {
    category: string;
    name: string;
  }

  export default function FieldButtonFormBottomSheet() {
    const [formData, setFormData] = useState<ProductFormData>({
      category: "",
      name: "",
    });
    const [isCategorySheetOpen, setIsCategorySheetOpen] = useState(false);

    const handleSubmit = (event: React.FormEvent) => {
      event.preventDefault();
      window.alert(JSON.stringify(formData));
    };

    const updateFormData = (field: keyof ProductFormData) => (value: string) => {
      setFormData((prev) => ({ ...prev, [field]: value }));
    };

    const handleNameClick = () => {
      const inputName = window.prompt("상품명을 입력해주세요");

      if (inputName === null) return;

      updateFormData("name")(inputName);
    };

    return (
      <VStack gap="spacingY.componentDefault" width="full" as="form" onSubmit={handleSubmit}>
        <HStack gap="x2">
          <BottomSheetRoot open={isCategorySheetOpen} onOpenChange={setIsCategorySheetOpen}>
            <FieldButton
              label="카테고리"
              values={[formData.category]}
              onValuesChange={([value]) => updateFormData("category")(value ?? "")}
              showClearButton={formData.category !== ""}
              buttonProps={{
                onClick: () => setIsCategorySheetOpen(true),
                "aria-label": "카테고리 선택",
                "aria-haspopup": "dialog",
              }}
            >
              {formData.category ? (
                <FieldButtonValue>{formData.category}</FieldButtonValue>
              ) : (
                <FieldButtonPlaceholder>카테고리를 선택해주세요</FieldButtonPlaceholder>
              )}
            </FieldButton>
            <Portal>
              <CategoryInputSheet
                value={formData.category}
                onSubmit={(value) => {
                  updateFormData("category")(value);
                  setIsCategorySheetOpen(false);
                }}
              />
            </Portal>
          </BottomSheetRoot>
          <FieldButton
            label="상품명"
            showClearButton={formData.name !== ""}
            values={[formData.name]}
            onValuesChange={([value]) => updateFormData("name")(value)}
            buttonProps={{
              onClick: handleNameClick,
              "aria-label": "상품명 입력",
            }}
          >
            {formData.name ? (
              <FieldButtonValue>{formData.name}</FieldButtonValue>
            ) : (
              <FieldButtonPlaceholder>상품명을 입력해주세요</FieldButtonPlaceholder>
            )}
          </FieldButton>
        </HStack>
        <ActionButton type="submit" variant="neutralSolid">
          제출
        </ActionButton>
      </VStack>
    );
  }

  interface CategoryInputSheetProps {
    value: string;
    onSubmit: (value: string) => void;
  }

  function CategoryInputSheet({ value, onSubmit }: CategoryInputSheetProps) {
    const [draft, setDraft] = useState(value);

    const handleSubmit = (event: React.FormEvent) => {
      event.preventDefault();

      onSubmit(draft);

      event.stopPropagation();
    };

    return (
      <BottomSheetContent title="카테고리 선택">
        <form onSubmit={handleSubmit}>
          <BottomSheetBody minHeight="x16">
            <TextField
              label="카테고리를 입력해 주세요"
              value={draft}
              onValueChange={({ value }) => setDraft(value)}
            >
              <TextFieldInput type="text" placeholder="예: 전자기기" />
            </TextField>
          </BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton type="submit" variant="neutralSolid">
              확인
            </ActionButton>
          </BottomSheetFooter>
        </form>
      </BottomSheetContent>
    );
  }
  ```
</ComponentExample>

#### React Hook Form

<ComponentExample name="react/field-button/react-hook-form-simple">
  ```tsx
  import { VStack, HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonValue } from "seed-design/ui/field-button";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";

  interface FormValues {
    text: string;
    count: number;
  }

  export default function FieldButtonReactHookFormSimple() {
    const { handleSubmit, reset, control } = useForm<FormValues>({
      defaultValues: {
        text: "",
        count: 0,
      },
    });

    const {
      field: { onChange: textOnChange, ...textField },
      fieldState: textFieldState,
    } = useController({
      name: "text",
      control,
      rules: {
        required: "필수 입력 항목입니다",
      },
    });

    const {
      field: { value: countValue, onChange: countOnChange, ...countField },
      fieldState: countFieldState,
    } = useController({
      name: "count",
      control,
      rules: {
        validate: (value) => value >= 3 || "최소 3회 이상 클릭해야 합니다",
      },
    });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack asChild width="full" gap="spacingY.componentDefault">
        <form onSubmit={handleSubmit(onValid)} onReset={onReset}>
          <HStack gap="x3">
            <TextField
              label="TextField"
              description="이것은 TextField입니다. FieldButton과 어떻게 다른지 비교해보세요."
              invalid={textFieldState.invalid}
              errorMessage={textFieldState.error?.message}
              onValueChange={({ value }) => textOnChange(value)}
              showRequiredIndicator
              {...textField}
            >
              <TextFieldInput placeholder="TextFieldInput" />
            </TextField>
            <FieldButton
              label="input을 포함한 FieldButton"
              description={`이 FieldButton은 <input type="hidden" /> 요소를 한 개 포함하고 있습니다. 자세한 내용은 예시 코드를 참고하세요.`}
              invalid={countFieldState.invalid}
              errorMessage={countFieldState.error?.message}
              values={[`${countValue}`]}
              onValuesChange={([value]) => countOnChange(Number(value))}
              buttonProps={{
                onClick: () => countOnChange(countValue + 1),
                "aria-label": "카운트 증가",
              }}
              showRequiredIndicator
              {...countField}
            >
              <FieldButtonValue>현재 카운트: {countValue}</FieldButtonValue>
            </FieldButton>
          </HStack>
          <HStack gap="x2">
            <ActionButton type="reset" variant="neutralWeak">
              초기화
            </ActionButton>
            <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
              제출
            </ActionButton>
          </HStack>
        </form>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Multiple Values (React Hook Form (Field Array))

<ComponentExample name="react/field-button/field-array">
  ```tsx
  import React, { useState, useCallback } from "react";
  import { Box, HStack, VStack } from "@seed-design/react";
  import { useFieldArray, useForm } from "react-hook-form";
  import { FieldButton, FieldButtonValue, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetRoot,
    BottomSheetContent,
    BottomSheetBody,
    BottomSheetFooter,
  } from "seed-design/ui/bottom-sheet";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { Portal } from "@seed-design/react";

  interface ProductFormData {
    tags: { value: string }[];
  }

  export default function FieldButtonFieldArray() {
    const { control, handleSubmit, reset, setValue } = useForm<ProductFormData>({
      defaultValues: { tags: [] },
    });

    const [isTagSheetOpen, setIsTagSheetOpen] = useState(false);

    const { fields, append } = useFieldArray({ control, name: "tags" });

    const onValid = useCallback((data: ProductFormData) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: React.FormEvent) => {
        event.preventDefault();

        reset();
      },
      [reset],
    );

    const handleAddTag = (tag: string) => {
      if (tag && !fields.some((field) => field.value === tag)) {
        append({ value: tag });
      }

      setIsTagSheetOpen(false);
    };

    return (
      <VStack
        gap="spacingY.componentDefault"
        width="full"
        as="form"
        onSubmit={handleSubmit(onValid)}
        onReset={onReset}
      >
        <BottomSheetRoot open={isTagSheetOpen} onOpenChange={setIsTagSheetOpen}>
          <FieldButton
            label="태그"
            values={fields.map((field) => field.value)}
            onValuesChange={(values) =>
              setValue(
                "tags",
                values.map((value) => ({ value })),
              )
            }
            showClearButton={fields.length > 0}
            buttonProps={{
              onClick: () => setIsTagSheetOpen(true),
              "aria-label": fields.length > 0 ? `태그 ${fields.length}개 편집` : "태그 선택",
              "aria-haspopup": "dialog",
            }}
          >
            {fields.length > 0 ? (
              <FieldButtonValue>{fields.map((field) => field.value).join(", ")}</FieldButtonValue>
            ) : (
              <FieldButtonPlaceholder>태그를 추가해주세요</FieldButtonPlaceholder>
            )}
          </FieldButton>
          <Portal>
            <TagInputSheet onSubmit={handleAddTag} existingTags={fields.map((f) => f.value)} />
          </Portal>
        </BottomSheetRoot>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }

  interface TagInputSheetProps {
    onSubmit: (tag: string) => void;
    existingTags: string[];
  }

  function TagInputSheet({ onSubmit, existingTags }: TagInputSheetProps) {
    const [addDraft, setAddDraft] = useState("");

    const handleAddSubmit = (event: React.FormEvent) => {
      event.preventDefault();

      if (!addDraft) return;

      if (existingTags.includes(addDraft)) {
        window.alert("이미 추가된 태그입니다");

        event.stopPropagation();

        return;
      }

      setAddDraft("");
      onSubmit(addDraft);

      event.stopPropagation();
    };

    return (
      <BottomSheetContent title="태그 입력">
        <Box onSubmit={handleAddSubmit} as="form" width="full">
          <BottomSheetBody minHeight="x16">
            <TextField
              label="태그를 입력해주세요"
              value={addDraft}
              onValueChange={({ value }) => setAddDraft(value)}
            >
              <TextFieldInput type="text" placeholder="예: 전자기기, 신상품" />
            </TextField>
          </BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton type="submit" variant="neutralSolid" disabled={!addDraft}>
              추가
            </ActionButton>
          </BottomSheetFooter>
        </Box>
      </BottomSheetContent>
    );
  }
  ```
</ComponentExample>

#### Multiple Values (Native `form`)

<ComponentExample name="react/field-button/multiple-values">
  ```tsx
  import React, { useState, useCallback } from "react";
  import { Box, HStack, VStack } from "@seed-design/react";
  import { FieldButton, FieldButtonValue, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetRoot,
    BottomSheetContent,
    BottomSheetBody,
    BottomSheetFooter,
  } from "seed-design/ui/bottom-sheet";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { Portal } from "@seed-design/react";

  export default function FieldButtonMultipleValues() {
    const [tags, setTags] = useState<string[]>([]);
    const [isTagSheetOpen, setIsTagSheetOpen] = useState(false);

    const handleSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      const formData = new FormData(event.currentTarget);
      const formValues = { tags: formData.getAll("tags") };

      window.alert(JSON.stringify(formValues, null, 2));
    }, []);

    const handleReset = useCallback((event: React.FormEvent) => {
      event.preventDefault();

      setTags([]);
    }, []);

    const handleAddTag = (tag: string) => {
      if (tag && !tags.includes(tag)) {
        setTags((prev) => [...prev, tag]);
      }

      setIsTagSheetOpen(false);
    };

    return (
      <VStack gap="spacingY.componentDefault" width="full" asChild>
        <form onSubmit={handleSubmit} onReset={handleReset}>
          <BottomSheetRoot open={isTagSheetOpen} onOpenChange={setIsTagSheetOpen}>
            <FieldButton
              label="태그"
              description="여러 태그를 추가할 수 있습니다"
              name="tags"
              values={tags}
              onValuesChange={setTags}
              showClearButton={tags.length > 0}
              buttonProps={{
                onClick: () => setIsTagSheetOpen(true),
                "aria-label": tags.length > 0 ? `태그 ${tags.length}개 편집` : "태그 선택",
                "aria-haspopup": "dialog",
              }}
            >
              {tags.length > 0 ? (
                <FieldButtonValue>{tags.join(", ")}</FieldButtonValue>
              ) : (
                <FieldButtonPlaceholder>태그를 추가해주세요</FieldButtonPlaceholder>
              )}
            </FieldButton>
            <Portal>
              <TagInputSheet onSubmit={handleAddTag} existingTags={tags} />
            </Portal>
          </BottomSheetRoot>
          <HStack gap="x2">
            <ActionButton type="reset" variant="neutralWeak">
              초기화
            </ActionButton>
            <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
              제출
            </ActionButton>
          </HStack>
        </form>
      </VStack>
    );
  }

  interface TagInputSheetProps {
    onSubmit: (tag: string) => void;
    existingTags: string[];
  }

  function TagInputSheet({ onSubmit, existingTags }: TagInputSheetProps) {
    const [addDraft, setAddDraft] = useState("");

    const handleAddSubmit = (event: React.FormEvent) => {
      event.preventDefault();

      if (!addDraft) return;

      if (existingTags.includes(addDraft)) {
        window.alert("이미 추가된 태그입니다");

        event.stopPropagation();

        return;
      }

      onSubmit(addDraft);
      setAddDraft("");

      event.stopPropagation();
    };

    return (
      <BottomSheetContent title="태그 입력">
        <Box onSubmit={handleAddSubmit} as="form" width="full">
          <BottomSheetBody minHeight="x16">
            <TextField
              label="태그를 입력해주세요"
              value={addDraft}
              onValueChange={({ value }) => setAddDraft(value)}
            >
              <TextFieldInput type="text" placeholder="예: 전자기기, 신상품" />
            </TextField>
          </BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton type="submit" variant="neutralSolid" disabled={!addDraft}>
              추가
            </ActionButton>
          </BottomSheetFooter>
        </Box>
      </BottomSheetContent>
    );
  }
  ```
</ComponentExample>

### State

#### Enabled

<ComponentExample name="react/field-button/enabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonPlaceholder } from "seed-design/ui/field-button";

  export default function FieldButtonEnabled() {
    return (
      <HStack width="full" gap="x3">
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "알림 표시",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "알림 표시",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Disabled

* `values`를 제공할 때 렌더링되는 `<input type="hidden" />`도 함께 `disabled` 처리되어 폼 제출 시 값이 전송되지 않습니다.
* `<button>` 요소도 `disabled` 처리되어 클릭할 수 없게 됩니다.

<ComponentExample name="react/field-button/disabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonPlaceholder } from "seed-design/ui/field-button";

  export default function FieldButtonDisabled() {
    return (
      <HStack width="full" gap="x3">
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          disabled
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "값 선택",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          disabled
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "값 선택",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Read Only

* `values`를 제공할 때 렌더링되는 `<input type="hidden" />`은 영향을 받지 않습니다.
* `<button>` 요소는 `disabled` 처리되어 클릭할 수 없게 됩니다.

<ComponentExample name="react/field-button/read-only">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonPlaceholder } from "seed-design/ui/field-button";

  export default function FieldButtonReadOnly() {
    return (
      <HStack width="full" gap="x3">
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          readOnly
          buttonProps={{
            "aria-label": "값 선택",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          readOnly
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
          buttonProps={{
            "aria-label": "값 선택",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Prefix

<ComponentExample name="react/field-button/prefix">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { IconMagnifyingglassLine } from "@karrotmarket/react-monochrome-icon";

  export default function FieldButtonPrefix() {
    return (
      <HStack width="full" gap="x3">
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          prefix="https://"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "URL 입력",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          prefixIcon={<IconMagnifyingglassLine />}
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "검색",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Suffix

<ComponentExample name="react/field-button/suffix">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { IconWonLine } from "@karrotmarket/react-monochrome-icon";

  export default function FieldButtonSuffix() {
    return (
      <HStack width="full" gap="x3">
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          suffix="cm"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "키 입력",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          suffixIcon={<IconWonLine />}
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "금액 입력",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Both Affixes

<ComponentExample name="react/field-button/both-affixes">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonPlaceholder } from "seed-design/ui/field-button";
  import { IconPlusCircleLine, IconWonLine } from "@karrotmarket/react-monochrome-icon";

  export default function FieldButtonBothAffixes() {
    return (
      <HStack width="full" gap="x3">
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          prefix="만"
          suffix="세"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "나이 선택",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          label="라벨"
          description="설명을 써주세요"
          prefixIcon={<IconPlusCircleLine />}
          suffixIcon={<IconWonLine />}
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "금액 선택",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Indicator

<ComponentExample name="react/field-button/indicator">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { FieldButton, FieldButtonPlaceholder } from "seed-design/ui/field-button";

  export default function FieldButtonIndicator() {
    return (
      <HStack gap="x3" width="full">
        <FieldButton
          label="선택 필드"
          labelWeight="bold"
          indicator="선택"
          description="이 필드는 선택사항입니다"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "선택 값 입력",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
        <FieldButton
          label="필수 필드"
          showRequiredIndicator
          description="이 필드는 필수사항입니다"
          buttonProps={{
            onClick: () => window.alert("버튼 클릭됨"),
            "aria-label": "필수 값 입력",
          }}
        >
          <FieldButtonPlaceholder>플레이스홀더</FieldButtonPlaceholder>
        </FieldButton>
      </HStack>
    );
  }
  ```
</ComponentExample>


---

file: components/floating-action-button.mdx

# Floating Action Button

화면 상에 떠 있으며 주요 액션을 실행하는 버튼입니다.



<ComponentExample name="react/floating-action-button/preview">
  ```tsx
  import { FloatingActionButton } from "seed-design/ui/floating-action-button";
  import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";

  export default function FloatingActionButtonPreview() {
    return <FloatingActionButton icon={<IconPlusLine />} label="Example FAB" />;
  }
  ```
</ComponentExample>

## Props

<TypeTable
  type={{
    icon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    extended: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Extended

`extended` prop을 사용하여 label 표시 여부 및 레이아웃을 제어할 수 있습니다.

`extended` 사용 유무에 관계없이 `label`은 접근성을 위해 필수 prop으로 지정되어 있습니다.

<ComponentExample name="react/floating-action-button/extended">
  ```tsx
  import { FloatingActionButton } from "seed-design/ui/floating-action-button";
  import { Switch } from "seed-design/ui/switch";
  import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
  import { Flex, VStack } from "@seed-design/react";
  import { useState } from "react";

  export default function FloatingActionButtonExtended() {
    const [extended, setExtended] = useState(true);

    return (
      <VStack align="center" justify="space-between">
        <Flex height="100px" align="center" justify="center">
          <FloatingActionButton icon={<IconPlusLine />} label="Extended" extended={extended} />
        </Flex>
        <Switch
          size="16"
          tone="neutral"
          label="Extended"
          checked={extended}
          onCheckedChange={setExtended}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Float Composition

Floating Action Button은 `<Float>` 컴포넌트와 함께 사용하면 편리합니다.

<ComponentExample name="react/floating-action-button/float-composition">
  ```tsx
  import { FloatingActionButton } from "seed-design/ui/floating-action-button";
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { Box, Float } from "@seed-design/react";

  export default function FloatingActionButtonFloatComposition() {
    return (
      <Box
        position="relative"
        width="300px"
        height="500px"
        borderWidth={1}
        borderColor="stroke.neutralMuted"
      >
        <Float placement="bottom-end" offsetX="x4" offsetY="x4">
          <FloatingActionButton icon={<IconBellFill />} label="알림 설정" />
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>


---

file: components/help-bubble.mdx

# Help Bubble

사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 컴포넌트입니다.



<ComponentExample name="react/help-bubble/preview">
  ```tsx
  import { IconILowercaseSerifCircleLine } from "@karrotmarket/react-monochrome-icon";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Icon } from "@seed-design/react";

  export default function HelpBubblePreview() {
    return (
      <HelpBubbleTrigger defaultOpen title="아래 버튼이나 바깥 영역을 클릭해서 닫아보세요.">
        <ActionButton variant="ghost" size="small" layout="iconOnly" aria-label="도움말">
          <Icon svg={<IconILowercaseSerifCircleLine />} />
        </ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:help-bubble
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:help-bubble
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:help-bubble
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:help-bubble
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="help-bubble" />

## Props

### `HelpBubbleTrigger`

<TypeTable
  type={{
    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showCloseButton: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    contentProps: {
        "type": "SeedHelpBubble.ContentProps | undefined",
        "default": undefined,
        "required": false
    },

    zIndexOffset: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    placement: {
        "type": "Placement | undefined",
        "default": "\"top\"",
        "required": false,
        description: <><p>{"The initial placement of the floating element"}</p></>
    },

    gutter: {
        "type": "number | undefined",
        "default": "4",
        "required": false,
        description: <><p>{"The gutter between the floating element and the reference element"}</p></>
    },

    overflowPadding: {
        "type": "number | undefined",
        "default": "16",
        "required": false,
        description: <><p>{"The virtual padding around the viewport edges to check for overflow"}</p></>
    },

    arrowPadding: {
        "type": "number | undefined",
        "default": "14",
        "required": false,
        description: <><p>{"The minimum padding between the arrow and the floating element's corner."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the popover when clicking outside of it."}</p></>
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Whether the floating element is initially open"}</p></>
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Whether the floating element is open"}</p></>
    },

    onOpenChange: {
        "type": "((open: boolean) => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Callback when the floating element is opened or closed"}</p></>
    },

    strategy: {
        "type": "\"absolute\" | \"fixed\" | undefined",
        "default": "\"absolute\"",
        "required": false,
        description: <><p>{"The strategy to use for positioning"}</p></>
    },

    flip: {
        "type": "boolean | Placement[] | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to flip the placement"}</p></>
    },

    slide: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether the popover should slide when it overflows."}</p></>
    }
}}
/>

### `HelpBubbleAnchor`

<TypeTable
  type={{
    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showCloseButton: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    contentProps: {
        "type": "SeedHelpBubble.ContentProps | undefined",
        "default": undefined,
        "required": false
    },

    zIndexOffset: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    placement: {
        "type": "Placement | undefined",
        "default": "\"top\"",
        "required": false,
        description: <><p>{"The initial placement of the floating element"}</p></>
    },

    gutter: {
        "type": "number | undefined",
        "default": "4",
        "required": false,
        description: <><p>{"The gutter between the floating element and the reference element"}</p></>
    },

    overflowPadding: {
        "type": "number | undefined",
        "default": "16",
        "required": false,
        description: <><p>{"The virtual padding around the viewport edges to check for overflow"}</p></>
    },

    arrowPadding: {
        "type": "number | undefined",
        "default": "14",
        "required": false,
        description: <><p>{"The minimum padding between the arrow and the floating element's corner."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the popover when clicking outside of it."}</p></>
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Whether the floating element is initially open"}</p></>
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Whether the floating element is open"}</p></>
    },

    onOpenChange: {
        "type": "((open: boolean) => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Callback when the floating element is opened or closed"}</p></>
    },

    strategy: {
        "type": "\"absolute\" | \"fixed\" | undefined",
        "default": "\"absolute\"",
        "required": false,
        description: <><p>{"The strategy to use for positioning"}</p></>
    },

    flip: {
        "type": "boolean | Placement[] | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to flip the placement"}</p></>
    },

    slide: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether the popover should slide when it overflows."}</p></>
    }
}}
/>

## Examples

<Callout title="Help Bubble은 기본적으로 Help Bubble 밖 영역에서 pointerdown이 발생할 때 닫힙니다.">
  아래 예시들은 대부분 `closeOnInteractOutside={false}`가 설정되어 `pointerdown`이 발생해도 닫히지 않도록 되어 있습니다.
</Callout>

### Trigger

`HelpBubbleTrigger`의 `children`을 클릭하면 Help Bubble이 열리고 닫힙니다.

`children`으로는 `button` 등 포커스 가능한 요소를 넣어야 합니다.

<ComponentExample name="react/help-bubble/trigger">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { useState } from "react";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";
  import { Switch } from "seed-design/ui/switch";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function () {
    const [isControlledHelpBubbleOpen, setIsControlledHelpBubbleOpen] = useState(true);

    return (
      <VStack gap="x16" align="center">
        <HelpBubbleTrigger
          defaultOpen
          title="Trigger, uncontrolled"
          description="클릭으로 열고 닫는 동작이 있는 트리거입니다."
          placement="right"
          showCloseButton
          closeOnInteractOutside={false}
        >
          <ActionButton variant="neutralSolid">토글</ActionButton>
        </HelpBubbleTrigger>
        <VStack gap="spacingY.componentDefault" align="center">
          <HelpBubbleTrigger
            open={isControlledHelpBubbleOpen}
            onOpenChange={setIsControlledHelpBubbleOpen}
            title="Trigger, controlled"
            description="클릭으로 열고 닫는 동작이 있는 트리거입니다."
            placement="right"
            showCloseButton
            closeOnInteractOutside={false}
          >
            <ActionButton variant="neutralSolid">토글</ActionButton>
          </HelpBubbleTrigger>
          <Switch
            size="24"
            tone="neutral"
            label="열림"
            checked={isControlledHelpBubbleOpen}
            onCheckedChange={setIsControlledHelpBubbleOpen}
          />
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Anchor

`HelpBubbleAnchor`의 `children`은 Help Bubble이 위치를 잡는 데에만 사용되며 클릭으로 열고 닫는 동작은 없습니다.

`defaultOpen`과 `showCloseButton`을 사용하여 적절하게 열리고 닫히도록 하거나, `open` prop을 controlled하게 사용하여 열리고 닫힌 상태를 직접 관리할 수 있습니다.

<ComponentExample name="react/help-bubble/anchor">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { useState } from "react";
  import { Avatar } from "seed-design/ui/avatar";
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";
  import { Switch } from "seed-design/ui/switch";

  export default function () {
    const [isControlledHelpBubbleOpen, setIsControlledHelpBubbleOpen] = useState(true);

    return (
      <VStack gap="x16" align="center">
        <HelpBubbleAnchor
          defaultOpen
          title="Anchor, uncontrolled"
          description="클릭으로 열고 닫는 동작 없이 위치만 지정합니다."
          placement="right"
          showCloseButton
          closeOnInteractOutside={false}
        >
          <Avatar size="64" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        </HelpBubbleAnchor>
        <VStack gap="spacingY.componentDefault" align="center">
          <HelpBubbleAnchor
            open={isControlledHelpBubbleOpen}
            onOpenChange={setIsControlledHelpBubbleOpen}
            title="Anchor, controlled"
            description="클릭으로 열고 닫는 동작 없이 위치만 지정합니다."
            placement="right"
            showCloseButton
            closeOnInteractOutside={false}
          >
            <Avatar
              size="64"
              src="https://avatars.githubusercontent.com/u/54893898?v=4"
              fallback="L"
            />
          </HelpBubbleAnchor>
          <Switch
            size="24"
            tone="neutral"
            label="열림"
            checked={isControlledHelpBubbleOpen}
            onCheckedChange={setIsControlledHelpBubbleOpen}
          />
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Close On Interact Outside

`closeOnInteractOutside` prop을 `false`로 설정하면 Help Bubble 및 `HelpBubbleTrigger`, `HelpBubbleAnchor` 외부를 클릭해도 Help Bubble이 닫히지 않습니다. 기본값은 `true`입니다.

<ComponentExample name="react/help-bubble/close-on-interact-outside">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function () {
    return (
      <VStack gap="x16" align="center">
        <HelpBubbleTrigger
          defaultOpen
          title="This closes on interactions outside"
          placement="right"
          closeOnInteractOutside
        >
          <ActionButton variant="neutralSolid">토글</ActionButton>
        </HelpBubbleTrigger>
        <HelpBubbleTrigger
          defaultOpen
          title="This does not close on interactions outside"
          placement="right"
          closeOnInteractOutside={false}
        >
          <ActionButton variant="neutralSolid">토글</ActionButton>
        </HelpBubbleTrigger>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Placement

<ComponentExample name="react/help-bubble/placement">
  ```tsx
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { Box, Icon } from "@seed-design/react";
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";

  export default function HelpBubblePreview() {
    return (
      <div
        style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "80px", padding: "80px" }}
      >
        <HelpBubbleAnchor
          open
          flip={false}
          placement="top-end"
          title="top-end"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor open flip={false} placement="top" title="top" description="est tempor aute">
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor
          open
          flip={false}
          placement="top-start"
          title="top-start"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor
          open
          flip={false}
          placement="left-end"
          title="left-end"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <Box />
        <HelpBubbleAnchor
          open
          flip={false}
          placement="right-end"
          title="right-end"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor
          open
          flip={false}
          placement="left"
          title="left"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <Box />
        <HelpBubbleAnchor
          open
          flip={false}
          placement="right"
          title="right"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor
          open
          flip={false}
          placement="left-start"
          title="left-start"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <Box />
        <HelpBubbleAnchor
          open
          flip={false}
          placement="right-start"
          title="right-start"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor
          open
          flip={false}
          placement="bottom-end"
          title="bottom-end"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor
          open
          flip={false}
          placement="bottom"
          title="bottom"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor
          open
          flip={false}
          placement="bottom-start"
          title="bottom-start"
          description="est tempor aute"
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
      </div>
    );
  }
  ```
</ComponentExample>

### Flip

<ComponentExample name="react/help-bubble/flip">
  ```tsx
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { Icon } from "@seed-design/react";
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";

  export default function HelpBubbleFlip() {
    return (
      <HelpBubbleAnchor
        open
        flip={false}
        title="Flip"
        description="Flip을 끄면 화면 경계에서 방향이 바뀌지 않아요."
      >
        <Icon svg={<IconSparkle2 />} />
      </HelpBubbleAnchor>
    );
  }
  ```
</ComponentExample>

### Close Button

<ComponentExample name="react/help-bubble/close-button">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

  export default function HelpBubbleCloseButton() {
    return (
      <HelpBubbleTrigger
        defaultOpen
        showCloseButton
        title="Close Button"
        description="showCloseButton으로 닫기 버튼을 추가할 수 있어요."
      >
        <ActionButton variant="neutralSolid">토글</ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>

### Title Only

<ComponentExample name="react/help-bubble/title-only">
  ```tsx
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { Icon } from "@seed-design/react";
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";

  export default function HelpBubbleTitleOnly() {
    return (
      <HelpBubbleAnchor open title="Title Only">
        <Icon svg={<IconSparkle2 />} />
      </HelpBubbleAnchor>
    );
  }
  ```
</ComponentExample>

### Setting Width Manually

`contentProps`에 인라인 스타일로 `maxWidth`나 `width`를 설정하여 너비를 조절할 수 있습니다.

<ComponentExample name="react/help-bubble/width">
  ```tsx
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
  import { VStack } from "@seed-design/react";
  import { useState } from "react";

  const WIDTH_OPTIONS = ["200px", "300px", "unset"] as const;

  export default function HelpBubbleWidth() {
    const [width, setWidth] = useState<(typeof WIDTH_OPTIONS)[number]>("300px");

    return (
      <VStack gap="spacingY.componentDefault" align="center" p="x10">
        <HelpBubbleAnchor
          open
          title="Pariatur aliqua commodo eu Lorem minim anim. Lorem ipsum voluptate eu duis eiusmod consequat."
          contentProps={{ style: { width } }}
        >
          <SegmentedControl
            aria-label="너비"
            value={width}
            onValueChange={(value) => setWidth(value as (typeof WIDTH_OPTIONS)[number])}
          >
            {WIDTH_OPTIONS.map((option) => (
              <SegmentedControlItem key={option} value={option}>
                {option}
              </SegmentedControlItem>
            ))}
          </SegmentedControl>
        </HelpBubbleAnchor>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Line Breaks

<ComponentExample name="react/help-bubble/line-breaks">
  ```tsx
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { Icon } from "@seed-design/react";
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";
  import { HStack } from "@seed-design/react";

  export default function HelpBubbleLineBreaks() {
    return (
      <HStack gap="x16">
        <HelpBubbleAnchor
          open
          title={
            <>
              Breaking
              <br />
              lines
              <br />
              using
              <br />
              `&lt;br /&gt;`s
            </>
          }
        >
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
        <HelpBubbleAnchor open title={"Breaking\nlines\nusing\nnewlines"}>
          <Icon svg={<IconSparkle2 />} />
        </HelpBubbleAnchor>
      </HStack>
    );
  }
  ```
</ComponentExample>

### `z-index` Offset

<ComponentExample name="react/help-bubble/z-index-offset">
  ```tsx
  import { Flex, HStack, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";
  import { Slider } from "seed-design/ui/slider";
  import { Avatar } from "seed-design/ui/avatar";

  export default function HelpBubbleZIndexOffset() {
    const [zIndexOffset, setZIndexOffset] = useState(5);

    return (
      <VStack align="center" gap="x8">
        <HStack gap="x2">
          {Array.from({ length: 5 }, (_, i) => (
            <Flex
              key={i}
              width="x16"
              height="x16"
              borderRadius="r2"
              align="center"
              justify="center"
              bg="bg.neutralWeak"
              borderColor="stroke.neutralWeak"
              borderWidth={1}
              style={{ zIndex: i + 100 }}
            >
              {i + 100}
            </Flex>
          ))}
        </HStack>
        <HelpBubbleAnchor
          defaultOpen
          title={`default: 99, current: ${99 + zIndexOffset}`}
          description="Et ullamco laborum voluptate ipsum labore ea nostrud sunt ipsum."
          zIndexOffset={zIndexOffset}
          closeOnInteractOutside={false}
        >
          <Avatar size="64" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        </HelpBubbleAnchor>
        <Slider
          min={0}
          max={5}
          values={[zIndexOffset]}
          onValuesChange={([value]) => setZIndexOffset(value)}
          markers={[0, 5]}
          getAriaLabel={() => "zIndexOffset"}
          hideValueIndicator
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/identity-placeholder.mdx

# Identity Placeholder

사용자 정보가 없거나 로딩 중일 때 표시되는 플레이스홀더 컴포넌트입니다. 프로필 이미지와 이름 영역을 일관되게 표현할 때 사용됩니다.



<ComponentExample name="react/identity-placeholder/preview">
  ```tsx
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function IdentityPlaceholderPreview() {
    return <IdentityPlaceholder />;
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:identity-placeholder
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:identity-placeholder
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:identity-placeholder
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:identity-placeholder
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="identity-placeholder" />

## Props

<TypeTable
  type={{
    identity: {
        "type": "\"person\" | undefined",
        "default": "\"person\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>


---

file: components/image-frame.mdx

# Image Frame

사용자가 업로드한 이미지를 표시하기 위한 컴포넌트입니다.



<ComponentExample name="react/image-frame/preview">
  ```tsx
  import { ImageFrame } from "@seed-design/react";

  export default function ImageFramePreview() {
    return (
      <ImageFrame
        ratio={4 / 3}
        rounded
        stroke
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
        alt="Landscape photograph by Tobias Tullius"
        width="300px"
      />
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { ImageFrame } from "@seed-design/react";
```

```tsx
<ImageFrame
  ratio={4 / 3}
  rounded
  stroke
  src="..."
  alt="..."
  fallback={<Skeleton />}
/>
```

## Props

<TypeTable
  type={{
    src: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    alt: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    fallback: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    loading: {
        "type": "\"eager\" | \"lazy\" | undefined",
        "default": undefined,
        "required": false
    },

    decoding: {
        "type": "\"async\" | \"auto\" | \"sync\" | undefined",
        "default": undefined,
        "required": false
    },

    crossOrigin: {
        "type": "\"\" | \"anonymous\" | \"use-credentials\" | undefined",
        "default": undefined,
        "required": false
    },

    referrerPolicy: {
        "type": "React.HTMLAttributeReferrerPolicy | undefined",
        "default": undefined,
        "required": false
    },

    sizes: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    srcSet: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onLoad: {
        "type": "React.ReactEventHandler<HTMLImageElement> | undefined",
        "default": undefined,
        "required": false
    },

    onError: {
        "type": "React.ReactEventHandler<HTMLImageElement> | undefined",
        "default": undefined,
        "required": false
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false,
        description: <><p>{"Overlay elements to be rendered on top of the image.\nUse ImageFrameFloater to position them."}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    ratio: {
        "type": "number | undefined",
        "default": "4 / 3",
        "required": false,
        description: <><p>{"The aspect ratio of the aspect ratio container (width / height)."}</p></>
    },

    as: {
        "type": "React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg | ScopedColorBanner | undefined",
        "default": undefined,
        "required": false
    },

    bgGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"fadeLayerFloating\" | \"fadeLayerDefault\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\" | \"highlightMagicPressed\" | \"shimmerMagic\" | \"shimmerNeutral\" | undefined",
        "default": undefined,
        "required": false
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined",
        "default": undefined,
        "required": false
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1 | undefined",
        "default": undefined,
        "required": false
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\" | undefined",
        "default": undefined,
        "required": false
    },

    boxShadow: {
        "type": "(string & {}) | \"s1\" | \"s2\" | \"s3\" | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    top: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    left: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    right: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    bottom: {
        "type": "0 | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"safeArea\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    display: {
        "type": "\"none\" | \"inline\" | \"block\" | \"flex\" | \"inline-flex\" | \"inline-block\" | \"inlineFlex\" | \"inlineBlock\" | undefined",
        "default": undefined,
        "required": false
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\" | undefined",
        "default": undefined,
        "required": false
    },

    zIndex: {
        "type": "number | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    flexGrow: {
        "type": "true | 0 | 1 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\" | undefined",
        "default": undefined,
        "required": false
    },

    flexWrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\" | undefined",
        "default": undefined,
        "required": false
    },

    justifySelf: {
        "type": "\"center\" | \"start\" | \"end\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"In flexbox layout, this property is ignored."}</p></>
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\" | undefined",
        "default": undefined,
        "required": false
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | undefined",
        "default": undefined,
        "required": false
    },

    gridColumn: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    gridRow: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    unstable_transform: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}); background?: ScopedColorBg | ScopedColorPalette | (string & {}); } | undefined",
        "default": undefined,
        "required": false
    },

    rounded: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    stroke: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    }
}}
/>

## Examples

### Ratio

다양한 비율을 지정할 수 있습니다. `1`은 정사각형, `4/3`은 일반적인 사진 비율, `16/9`는 와이드스크린 비율입니다.

<ComponentExample name="react/image-frame/ratio">
  ```tsx
  import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";

  export default function ImageFrameRatio() {
    return (
      <Flex gap="x2" wrap="wrap" align="flex-end">
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={1}
            rounded
            stroke
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="1:1"
            style={{ width: 120 }}
          />
          <Text color="palette.gray700" textStyle="t1Regular">
            1:1
          </Text>
        </VStack>
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={4 / 3}
            rounded
            stroke
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="4:3"
            style={{ width: 160 }}
          />
          <Text color="palette.gray700" textStyle="t1Regular">
            4:3
          </Text>
        </VStack>
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={16 / 9}
            rounded
            stroke
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="16:9"
            style={{ width: 200 }}
          />
          <Text color="palette.gray700" textStyle="t1Regular">
            16:9
          </Text>
        </VStack>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Rounded

`rounded` prop으로 모서리 라운드 스타일을 적용할 수 있습니다.

<ComponentExample name="react/image-frame/rounded">
  ```tsx
  import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";

  export default function ImageFrameRounded() {
    return (
      <Flex gap="x4" wrap="wrap" align="flex-end">
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={4 / 3}
            rounded={false}
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="rounded=false"
            style={{ width: 150 }}
          />
          <Text color="palette.gray700" textStyle="t1Regular">
            rounded=false
          </Text>
        </VStack>
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={4 / 3}
            rounded={true}
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="rounded=true"
            style={{ width: 150 }}
          />
          <Text color="palette.gray700" textStyle="t1Regular">
            rounded=true
          </Text>
        </VStack>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Stroke

`stroke` prop으로 테두리 스타일을 적용할 수 있습니다.

<ComponentExample name="react/image-frame/stroke">
  ```tsx
  import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";

  export default function ImageFrameStroke() {
    return (
      <Flex gap="x4" wrap="wrap" align="flex-end">
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={4 / 3}
            stroke={false}
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="stroke=false"
            style={{ width: 150 }}
          />
          <Text color="palette.gray700" textStyle="t1Regular">
            stroke=false
          </Text>
        </VStack>
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={4 / 3}
            stroke={true}
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="stroke=true"
            style={{ width: 150 }}
          />
          <Text color="palette.gray700" textStyle="t1Regular">
            stroke=true
          </Text>
        </VStack>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Overlay

`ImageFrameFloater`를 사용하여 이미지 위에 오버레이 요소를 배치할 수 있습니다. `ImageFrameBadge`, `ImageFrameIcon`, `ImageFrameIndicator`, `ImageFrameReactionButton` 등 다양한 오버레이 컴포넌트를 제공합니다.

<ComponentExample name="react/image-frame/overlay">
  ```tsx
  import { IconCarrotFill } from "@karrotmarket/react-monochrome-icon";
  import {
    ImageFrame,
    ImageFrameFloater,
    ImageFrameBadge,
    ImageFrameIcon,
    ImageFrameIndicator,
    ImageFrameReactionButton,
    Flex,
    VStack,
    Text,
  } from "@seed-design/react";
  import { useState } from "react";

  export default function ImageFrameOverlayExample() {
    const [liked, setLiked] = useState(false);

    return (
      <Flex gap="x3" wrap="wrap" align="flex-end">
        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={1}
            rounded
            stroke
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="Landscape with badge overlay"
            style={{ width: 120 }}
          >
            <ImageFrameFloater placement="bottom-end">
              <ImageFrameBadge tone="brand" variant="solid">
                NEW
              </ImageFrameBadge>
            </ImageFrameFloater>
          </ImageFrame>
          <Text color="palette.gray700" textStyle="t1Regular">
            ImageFrameBadge
          </Text>
        </VStack>

        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={1}
            rounded
            stroke
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="Landscape with icon overlay"
            style={{ width: 120 }}
          >
            <ImageFrameFloater placement="bottom-end">
              <ImageFrameIcon svg={<IconCarrotFill />} />
            </ImageFrameFloater>
          </ImageFrame>
          <Text color="palette.gray700" textStyle="t1Regular">
            ImageFrameIcon
          </Text>
        </VStack>

        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={1}
            rounded
            stroke
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="Landscape with indicator overlay"
            style={{ width: 120 }}
          >
            <ImageFrameFloater placement="bottom-end">
              <ImageFrameIndicator>+9</ImageFrameIndicator>
            </ImageFrameFloater>
          </ImageFrame>
          <Text color="palette.gray700" textStyle="t1Regular">
            ImageFrameIndicator
          </Text>
        </VStack>

        <VStack gap="x2" alignItems="center">
          <ImageFrame
            ratio={1}
            rounded
            stroke
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="Landscape with reaction button overlay"
            style={{ width: 120 }}
          >
            <ImageFrameFloater placement="bottom-end">
              <ImageFrameReactionButton
                pressed={liked}
                onPressedChange={setLiked}
                aria-label="좋아요"
              />
            </ImageFrameFloater>
          </ImageFrame>
          <Text color="palette.gray700" textStyle="t1Regular">
            ImageFrameReactionButton
          </Text>
        </VStack>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Multiple Overlays

여러 위치에 오버레이를 동시에 배치할 수 있습니다.

<ComponentExample name="react/image-frame/overlay-multiple">
  ```tsx
  import {
    ImageFrame,
    ImageFrameFloater,
    ImageFrameBadge,
    ImageFrameReactionButton,
  } from "@seed-design/react";
  import { useState } from "react";

  export default function ImageFrameOverlayMultipleExample() {
    const [liked, setLiked] = useState(false);

    return (
      <ImageFrame
        ratio={1}
        rounded
        stroke
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
        alt="Landscape with multiple overlays"
        style={{ width: 200 }}
      >
        <ImageFrameFloater placement="top-start">
          <ImageFrameBadge tone="brand" variant="solid">
            NEW
          </ImageFrameBadge>
        </ImageFrameFloater>
        <ImageFrameFloater placement="bottom-end">
          <ImageFrameReactionButton pressed={liked} onPressedChange={setLiked} aria-label="좋아요" />
        </ImageFrameFloater>
      </ImageFrame>
    );
  }
  ```
</ComponentExample>

### Custom Overlay

`ImageFrameFloater`는 모든 React 요소를 children으로 받을 수 있습니다. 미리 정의된 오버레이 컴포넌트 외에도 커스텀 UI를 배치할 수 있습니다.

<ComponentExample name="react/image-frame/overlay-custom">
  ```tsx
  import { ImageFrame, ImageFrameFloater } from "@seed-design/react";

  export default function ImageFrameOverlayCustomExample() {
    return (
      <ImageFrame
        ratio={1}
        rounded
        stroke
        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
        alt="Landscape with custom overlay"
        style={{ width: 200 }}
      >
        <ImageFrameFloater placement="bottom-end">
          <div
            style={{
              padding: "4px 8px",
              backgroundColor: "rgba(0, 0, 0, 0.6)",
              borderRadius: 4,
              color: "white",
              fontSize: 12,
            }}
          >
            Custom Element
          </div>
        </ImageFrameFloater>
      </ImageFrame>
    );
  }
  ```
</ComponentExample>

### Offset

`offsetX`, `offsetY` prop으로 오버레이의 여백을 조절할 수 있습니다. 기본값은 `6px`입니다.

<ComponentExample name="react/image-frame/overlay-inset">
  ```tsx
  import { ImageFrame, ImageFrameFloater, ImageFrameIndicator } from "@seed-design/react";

  export default function ImageFrameOverlayInsetExample() {
    return (
      <div style={{ display: "flex", gap: 12 }}>
        <ImageFrame
          ratio={1}
          rounded
          stroke
          src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
          alt="Landscape with default offset"
          style={{ width: 150 }}
        >
          <ImageFrameFloater placement="bottom-end">
            <ImageFrameIndicator>default</ImageFrameIndicator>
          </ImageFrameFloater>
        </ImageFrame>

        <ImageFrame
          ratio={1}
          rounded
          stroke
          src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
          alt="Landscape with 0 offset"
          style={{ width: 150 }}
        >
          <ImageFrameFloater placement="bottom-end" offsetX={0} offsetY={0}>
            <ImageFrameIndicator>offset=0</ImageFrameIndicator>
          </ImageFrameFloater>
        </ImageFrame>

        <ImageFrame
          ratio={1}
          rounded
          stroke
          src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
          alt="Landscape with 12 offset"
          style={{ width: 150 }}
        >
          <ImageFrameFloater placement="bottom-end" offsetX="12px" offsetY="12px">
            <ImageFrameIndicator>offset=12</ImageFrameIndicator>
          </ImageFrameFloater>
        </ImageFrame>
      </div>
    );
  }
  ```
</ComponentExample>


---

file: components/list.mdx

# List

가로 행으로 구성된 콘텐츠를 표현하는 컴포넌트입니다.



<ComponentExample name="react/list/preview">
  ```tsx
  import { List, ListDivider, ListItem } from "seed-design/ui/list";
  import { ListHeader } from "seed-design/ui/list-header";
  import {
    IconILowercaseSerifCircleLine,
    IconPersonCircleLine,
  } from "@karrotmarket/react-monochrome-icon";
  import { Icon, VStack } from "@seed-design/react";

  export default function ListPreview() {
    return (
      <VStack width="360px">
        <ListHeader as="h2">리스트 헤더</ListHeader>
        <List width="full">
          <ListItem title="기본 리스트 아이템" />
          <ListDivider />
          <ListItem
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="아이콘이 있는 리스트 아이템"
            detail="부가 정보가 포함된 설명"
            suffix={<Icon svg={<IconILowercaseSerifCircleLine />} />}
          />
        </List>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:list
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:list
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:list
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:list
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="list" />

## Usage

```tsx
import { ListHeader } from "seed-design/ui/list-header";
import { List, ListItem } from "seed-design/ui/list";

<VStack>
  <ListHeader as="h2">리스트 헤더</ListHeader>
  <List>
    <ListItem title="리스트 아이템 1" />
    <ListDivider />
    <ListItem title="리스트 아이템 2" />
  </List>
</VStack>
```

## Props

### `ListHeader`

<TypeTable
  type={{
    as: {
        "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | undefined",
        "default": "\"div\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    variant: {
        "type": "\"mediumWeak\" | \"boldSolid\" | undefined",
        "default": "\"mediumWeak\"",
        "required": false
    }
}}
/>

### `List`

[`VStackProps`](/react/components/layout/v-stack#props)와 동일합니다.

### List Items

<Accordions>
  <Accordion title="ListItem">
        <TypeTable
          type={{
        title: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": true
        },

        detail: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        prefix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        suffix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        alignItems: {
            "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
            "default": undefined,
            "required": false
        },

        highlighted: {
            "type": "boolean | undefined",
            "default": "false",
            "required": false
        }
    }}
        />
  </Accordion>

  <Accordion title="ListButtonItem">
        <TypeTable
          type={{
        title: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": true
        },

        detail: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        prefix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        suffix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        rootRef: {
            "type": "React.Ref<HTMLLIElement> | undefined",
            "default": undefined,
            "required": false
        },

        rootProps: {
            "type": "React.HTMLAttributes<HTMLLIElement> | undefined",
            "default": undefined,
            "required": false
        },

        alignItems: {
            "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
            "default": undefined,
            "required": false
        },

        highlighted: {
            "type": "boolean | undefined",
            "default": "false",
            "required": false
        }
    }}
        />
  </Accordion>

  <Accordion title="ListLinkItem">
        <TypeTable
          type={{
        title: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": true
        },

        detail: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        prefix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        suffix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        rootRef: {
            "type": "React.Ref<HTMLLIElement> | undefined",
            "default": undefined,
            "required": false
        },

        rootProps: {
            "type": "React.HTMLAttributes<HTMLLIElement> | undefined",
            "default": undefined,
            "required": false
        },

        alignItems: {
            "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
            "default": undefined,
            "required": false
        },

        highlighted: {
            "type": "boolean | undefined",
            "default": "false",
            "required": false
        }
    }}
        />
  </Accordion>

  <Accordion title="ListSwitchItem">
        <TypeTable
          type={{
        title: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": true
        },

        detail: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        prefix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        suffix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        inputProps: {
            "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
            "default": undefined,
            "required": false
        },

        rootRef: {
            "type": "React.Ref<HTMLLabelElement> | undefined",
            "default": undefined,
            "required": false
        },

        defaultChecked: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        alignItems: {
            "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
            "default": undefined,
            "required": false
        },

        highlighted: {
            "type": "boolean | undefined",
            "default": "false",
            "required": false
        },

        disabled: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        invalid: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        required: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        checked: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        onCheckedChange: {
            "type": "((checked: boolean) => void) | undefined",
            "default": undefined,
            "required": false
        }
    }}
        />
  </Accordion>

  <Accordion title="ListCheckItem">
        <TypeTable
          type={{
        title: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": true
        },

        detail: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        prefix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        suffix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        inputProps: {
            "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
            "default": undefined,
            "required": false
        },

        rootRef: {
            "type": "React.Ref<HTMLLabelElement> | undefined",
            "default": undefined,
            "required": false
        },

        defaultChecked: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        alignItems: {
            "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
            "default": undefined,
            "required": false
        },

        highlighted: {
            "type": "boolean | undefined",
            "default": "false",
            "required": false
        },

        disabled: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        invalid: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        required: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        checked: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        },

        onCheckedChange: {
            "type": "((checked: boolean) => void) | undefined",
            "default": undefined,
            "required": false
        },

        indeterminate: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        }
    }}
        />
  </Accordion>

  <Accordion title="ListRadioItem">
        <TypeTable
          type={{
        title: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": true
        },

        detail: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        prefix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        suffix: {
            "type": "React.ReactNode",
            "default": undefined,
            "required": false
        },

        inputProps: {
            "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
            "default": undefined,
            "required": false
        },

        rootRef: {
            "type": "React.Ref<HTMLLabelElement> | undefined",
            "default": undefined,
            "required": false
        },

        alignItems: {
            "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\" | undefined",
            "default": undefined,
            "required": false
        },

        highlighted: {
            "type": "boolean | undefined",
            "default": "false",
            "required": false
        },

        value: {
            "type": "string",
            "default": undefined,
            "required": true
        },

        disabled: {
            "type": "boolean | undefined",
            "default": undefined,
            "required": false
        }
    }}
        />
  </Accordion>

  <Accordion title="ListDivider">
    [`DividerProps`](/react/components/divider#props)와 동일하나, 기본적으로 `<li aria-hidden></li>`로 렌더링됩니다. `List`를 `fieldset` 등으로 바꿔 사용하는 경우 `ListDivider` 역시 적절한 태그로 교체해주세요.

        <TypeTable
          type={{
        as: {
            "type": "\"hr\" | \"div\" | \"li\" | undefined",
            "default": "\"li\"",
            "required": false,
            description: <><p>{"The HTML element to use for the divider.\nKeep in mind that \"hr\" elements are read by screen readers as a semantic break with an implicit role=\"separator\"\nIf the element should be read by screen readers but be rendered as an element other than \"hr\", give an explicit role=\"separator\""}</p></>
        },

        "aria-hidden": {
            "type": "Booleanish | undefined",
            "default": "true",
            "required": false,
            description: <><p>{"Indicates whether the element is exposed to an accessibility API."}</p></>
        },

        color: {
            "type": "ScopedColorStroke | ScopedColorPalette | (string & {}) | undefined",
            "default": "\"stroke.neutralMuted\"",
            "required": false
        },

        thickness: {
            "type": "0 | (string & {}) | 1 | undefined",
            "default": "1",
            "required": false
        },

        orientation: {
            "type": "\"horizontal\" | \"vertical\" | undefined",
            "default": "\"horizontal\"",
            "required": false
        },

        inset: {
            "type": "boolean | undefined",
            "default": "false",
            "required": false
        }
    }}
        />
  </Accordion>
</Accordions>

## Examples

### Using `ListHeader`

`ListHeader`는 `List` 밖에 위치합니다.

<ComponentExample name="react/list/header">
  ```tsx
  import { List, ListButtonItem } from "seed-design/ui/list";
  import { ListHeader } from "seed-design/ui/list-header";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    IconChevronRightLine,
    IconLockLine,
    IconPersonCircleLine,
    IconQuestionmarkCircleFill,
  } from "@karrotmarket/react-monochrome-icon";
  import { Divider, Icon, PrefixIcon, VStack } from "@seed-design/react";

  export default function () {
    return (
      <VStack gap="x6" py="x6" width="360px">
        <VStack>
          <ListHeader as="h2" variant="mediumWeak">
            variant="mediumWeak"
          </ListHeader>
          <List>
            <ListButtonItem
              title="내 계정"
              detail="이메일과 연락처, 본인 인증 관리"
              prefix={<Icon svg={<IconPersonCircleLine />} />}
              suffix={<Icon svg={<IconChevronRightLine />} size="18px" />}
            />
            <ListButtonItem
              title="보안 · 인증 관리"
              detail="비밀번호, 생체 인증 사용을 관리해요"
              prefix={<Icon svg={<IconLockLine />} />}
              suffix={<Icon svg={<IconChevronRightLine />} size="x4_5" />}
            />
          </List>
        </VStack>
        <Divider />
        <VStack>
          <ListHeader as="h2" variant="boldSolid">
            variant="boldSolid"
          </ListHeader>
          <List>
            <ListButtonItem
              title="내 계정"
              detail="이메일과 연락처, 본인 인증 관리"
              prefix={<Icon svg={<IconPersonCircleLine />} />}
              suffix={<Icon svg={<IconChevronRightLine />} size="18px" />}
            />
            <ListButtonItem
              title="보안 · 인증 관리"
              detail="비밀번호, 생체 인증 사용을 관리해요"
              prefix={<Icon svg={<IconLockLine />} />}
              suffix={<Icon svg={<IconChevronRightLine />} size="x4_5" />}
            />
          </List>
        </VStack>
        <Divider />
        <VStack>
          <ListHeader>
            <h2>List Header with Action Button</h2>
            <ActionButton
              variant="ghost"
              size="small"
              color="fg.neutralSubtle"
              fontWeight="medium"
              bleedX="asPadding"
              bleedY="asPadding"
            >
              <PrefixIcon svg={<IconQuestionmarkCircleFill />} />
              도움말
            </ActionButton>
          </ListHeader>
          <List>
            <ListButtonItem
              title="내 계정"
              detail="이메일과 연락처, 본인 인증 관리"
              prefix={<Icon svg={<IconPersonCircleLine />} />}
              suffix={<Icon svg={<IconChevronRightLine />} size="18px" />}
            />
            <ListButtonItem
              title="보안 · 인증 관리"
              detail="비밀번호, 생체 인증 사용을 관리해요"
              prefix={<Icon svg={<IconLockLine />} />}
              suffix={<Icon svg={<IconChevronRightLine />} size="x4_5" />}
            />
          </List>
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Affixes (Prefix/Suffix)

<ComponentExample name="react/list/affixes">
  ```tsx
  import {
    IconArrowUpBracketDownLine,
    IconILowercaseSerifCircleLine,
  } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Avatar } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
  import { List, ListDivider, ListItem } from "seed-design/ui/list";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ListAffixes() {
    const [isToggleButtonPressed, setIsToggleButtonPressed] = useState(false);

    return (
      <List width="360px">
        <ListItem
          prefix={
            <Avatar
              size="48"
              src="https://avatars.githubusercontent.com/u/54893898?v=4"
              fallback={<IdentityPlaceholder />}
            />
          }
          title="Prefix에 Avatar 넣기"
          detail="Amet elit ullamco magna."
        />
        <ListDivider />
        <ListItem
          title="Prefix에 아이콘 넣기"
          detail="Deserunt nulla elit est."
          prefix={<Icon svg={<IconILowercaseSerifCircleLine />} />}
        />
        <ListDivider />
        <ListItem
          title="Suffix에 Action Button 넣기"
          detail="Veniam non est non ut consequat."
          suffix={
            <ActionButton variant="neutralWeak" size="xsmall">
              액션 버튼
            </ActionButton>
          }
        />
        <ListDivider />
        <ListItem
          title="Suffix에 Action Button (Ghost) 넣기"
          detail="Deserunt nulla elit est."
          suffix={
            <ActionButton size="small" variant="ghost" layout="iconOnly" aria-label="공유">
              <Icon svg={<IconArrowUpBracketDownLine />} />
            </ActionButton>
          }
        />
        <ListDivider />
        <ListItem
          title="Suffix에 Toggle Button 넣기"
          detail="Sit eu incididunt aute ea elit ex."
          suffix={
            <ToggleButton
              size="xsmall"
              pressed={isToggleButtonPressed}
              onPressedChange={setIsToggleButtonPressed}
            >
              {isToggleButtonPressed ? "선택됨" : "토글 버튼"}
            </ToggleButton>
          }
        />
      </List>
    );
  }
  ```
</ComponentExample>

### Clickable List Items

`ListButtonItem` 또는 `ListLinkItem`를 사용해서 리스트 항목 전체를 클릭 가능하도록 만들 수 있습니다.

`prefix` 또는 `suffix`에 클릭할 수 있는 요소를 포함하는 경우 `z-index: 1`, `position: relative`, `isolation: isolate` 등의 스타일을 적용하여 클릭 이벤트가 리스트 항목과 별개로 동작하도록 하세요. `ActionButton`, `ToggleButton` 등 SEED React 컴포넌트는 추가적으로 스타일을 적용하지 않아도 됩니다.

<ComponentExample name="react/list/clickable">
  ```tsx
  import {
    IconArrowUpRightLine,
    IconCheckmarkFill,
    IconChevronRightLine,
    IconPenHorizlineFill,
    IconPlusFill,
    IconSquare2StackedFill,
  } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon, Icon, Box } from "@seed-design/react";
  import { useCallback, useState } from "react";
  import { List, ListDivider, ListItem, ListButtonItem, ListLinkItem } from "seed-design/ui/list";
  import { ActionButton } from "seed-design/ui/action-button";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  const href = "https://www.daangn.com";

  export default function ListClickable() {
    const [isSubscribed, setIsSubscribed] = useState(false);
    const [isCopied, setIsCopied] = useState(false);

    const onCopyClick = useCallback(() => {
      navigator.clipboard.writeText(href);
      setIsCopied(true);

      setTimeout(() => setIsCopied(false), 2000);
    }, []);

    return (
      <List width="full">
        <ListItem
          title="ListItem은 클릭할 수 없어요. 눌러보세요."
          detail="우측의 Action Button만 클릭할 수 있어요"
          suffix={
            <ActionButton
              variant="ghost"
              size="xsmall"
              color="fg.neutralMuted"
              onClick={() => alert("편집 클릭됨")}
            >
              <PrefixIcon svg={<IconPenHorizlineFill />} />
              편집
            </ActionButton>
          }
        />
        <ListDivider />
        <ListButtonItem
          title="ListButtonItem은 클릭할 수 있어요. 눌러보세요."
          detail="리스트 항목 전체와 우측의 Toggle Button 각각을 클릭할 수 있어요"
          onClick={() => alert("리스트 아이템 클릭됨")}
          suffix={
            <>
              <ToggleButton size="xsmall" pressed={isSubscribed} onPressedChange={setIsSubscribed}>
                <PrefixIcon svg={isSubscribed ? <IconCheckmarkFill /> : <IconPlusFill />} />
                {isSubscribed ? "모아보는 중" : "모아보기"}
              </ToggleButton>
              <Icon svg={<IconChevronRightLine />} />
            </>
          }
        />
        <ListDivider />
        <ListButtonItem
          title="ListButtonItem은 클릭할 수 있어요. 눌러보세요."
          detail="리스트 항목 전체와 우측의 커스텀 버튼 각각을 클릭할 수 있어요"
          onClick={() => alert("리스트 아이템 클릭됨")}
          suffix={
            <>
              <Box asChild bg="bg.brandSolid" color="palette.staticWhite" p="x1" borderRadius="r1_5">
                <button
                  type="button"
                  onClick={() => alert("커스텀 버튼 클릭됨")}
                  style={{ zIndex: 1 }}
                >
                  커스텀 버튼
                </button>
              </Box>
              <Icon svg={<IconChevronRightLine />} />
            </>
          }
        />
        <ListDivider />
        <ListLinkItem
          title="ListLinkItem도 클릭할 수 있어요. 눌러보세요."
          detail="리스트 항목 전체와 우측의 Action Button 각각을 클릭할 수 있어요"
          suffix={
            <>
              <ActionButton variant="neutralWeak" size="xsmall" onClick={onCopyClick}>
                <PrefixIcon svg={isCopied ? <IconCheckmarkFill /> : <IconSquare2StackedFill />} />
                {isCopied ? "복사됨" : "URL 복사"}
              </ActionButton>
              <Icon svg={<IconArrowUpRightLine />} />
            </>
          }
          href={href}
          target="_blank"
          rel="noreferrer"
        />
      </List>
    );
  }
  ```
</ComponentExample>

### `input`s in List Items

`ListSwitchItem`, `ListCheckItem`, `ListRadioItem`을 사용해서 리스트 항목에 `input` 요소를 포함할 수 있습니다. 이때, [Switchmark](/react/components/switch#using-switchmark), [Checkmark](/react/components/checkbox#using-checkmark) 또는 [Radiomark](/react/components/radio-group#using-radiomark)와 같은 컨트롤 요소를 `prefix`나 `suffix` 영역에 넣어 사용합니다.

<ComponentExample name="react/list/switch">
  ```tsx
  import { IconTrashcanLine } from "@karrotmarket/react-monochrome-icon";
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { Icon } from "@seed-design/react";
  import { List, ListDivider, ListSwitchItem } from "seed-design/ui/list";
  import { Switchmark } from "seed-design/ui/switch";

  export default function ListSwitch() {
    return (
      <List width="360px">
        <ListSwitchItem
          title="삭제하기 전에 확인"
          prefix={<Icon svg={<IconTrashcanLine />} />}
          suffix={<Switchmark tone="neutral" />}
        />
        <ListDivider />
        <ListSwitchItem
          title="메시지 요약"
          detail="핵심 내용만 빠르게 확인해보세요."
          prefix={<Icon svg={<IconSparkle2 />} />}
          suffix={<Switchmark tone="neutral" />}
          defaultChecked
        />
      </List>
    );
  }
  ```
</ComponentExample>

<ComponentExample name="react/list/check">
  ```tsx
  import { Badge, HStack } from "@seed-design/react";
  import { List, ListDivider, ListCheckItem } from "seed-design/ui/list";
  import { Checkmark } from "seed-design/ui/checkbox";

  export default function ListCheckbox() {
    return (
      <List as="fieldset" width="360px">
        <ListCheckItem
          title={
            <HStack gap="x1_5">
              <span>알림 수신 동의</span>
              <Badge variant="weak">권장</Badge>
            </HStack>
          }
          detail="푸시 알림을 받으시겠습니까?"
          suffix={<Checkmark tone="neutral" size="large" />}
          defaultChecked
        />
        <ListDivider as="div" />
        <ListCheckItem
          prefix={<Checkmark tone="neutral" size="large" />}
          title="마케팅 정보 수신 동의"
          detail="마케팅 정보를 받으시겠습니까?"
          defaultChecked
        />
        <ListDivider as="div" />
        <ListCheckItem
          prefix={<Checkmark tone="neutral" size="large" variant="ghost" />}
          title="Ghost Variant"
        />
      </List>
    );
  }
  ```
</ComponentExample>

<ComponentExample name="react/list/radio">
  ```tsx
  import { RadioGroup } from "@seed-design/react/primitive";
  import { List, ListDivider, ListRadioItem } from "seed-design/ui/list";
  import { Radiomark } from "seed-design/ui/radio-group";

  export default function ListRadio() {
    return (
      <List width="360px" asChild>
        <RadioGroup.Root defaultValue="option1" aria-label="옵션 선택">
          <ListRadioItem
            value="option1"
            title="옵션 1"
            detail="첫 번째 선택지"
            suffix={<Radiomark tone="neutral" size="large" />}
          />
          <ListDivider as="div" />
          <ListRadioItem
            prefix={<Radiomark tone="neutral" size="large" />}
            value="option2"
            title="옵션 2"
            detail="두 번째 선택지"
          />
          <ListDivider as="div" />
          <ListRadioItem
            prefix={<Radiomark tone="neutral" size="large" />}
            value="option3"
            title="옵션 3"
            detail="세 번째 선택지"
          />
        </RadioGroup.Root>
      </List>
    );
  }
  ```
</ComponentExample>

### Accessibility

`List`는 기본적으로 `<ul>`입니다. `ListCheckItem`와 `ListRadioItem`를 사용하는 경우 `List`에 적절한 role을 부여해야 합니다.

```tsx
{/* [!code highlight] */}
<List as="fieldset">
  <ListCheckItem
    suffix={<Checkmark size="large" />}
    title="알림 수신 동의"
    detail="푸시 알림을 받으시겠습니까?"
  />
  <ListCheckItem
    suffix={<Checkmark size="large" />}
    title="마케팅 정보 수신 동의"
    detail="마케팅 정보를 받으시겠습니까?"
  />
</List>
```

```tsx
{/* [!code highlight] */}
<List asChild>
  <RadioGroup.Root defaultValue="짜장" aria-label="점심 메뉴"> {/* <div role="radiogroup"> */}
    <ListRadioItem
      suffix={<Radiomark size="large" />}
      value="짜장"
      title="짜장"
    />
    <ListRadioItem
      suffix={<Radiomark size="large" />}
      value="짬뽕"
      title="짬뽕"
    />
  </RadioGroup.Root>
</List>
```

### Disabled

<ComponentExample name="react/list/disabled">
  ```tsx
  import {
    IconChevronRightLine,
    IconPersonCircleLine,
    IconSlashCircleLine,
  } from "@karrotmarket/react-monochrome-icon";
  import { Divider, Icon, VStack } from "@seed-design/react";
  import { RadioGroup } from "@seed-design/react/primitive";
  import { List, ListButtonItem, ListCheckItem, ListRadioItem } from "seed-design/ui/list";
  import { Checkmark } from "seed-design/ui/checkbox";
  import { Radiomark } from "seed-design/ui/radio-group";

  export default function ListDisabled() {
    return (
      <VStack width="360px">
        <List>
          <ListButtonItem
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="활성화된 ListButtonItem"
            detail="Cupidatat et pariatur amet."
            suffix={<Icon svg={<IconChevronRightLine />} />}
          />
        </List>
        <List as="fieldset">
          <ListCheckItem
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="활성화된 ListCheckItem"
            suffix={<Checkmark tone="neutral" size="large" />}
          />
        </List>
        <List asChild>
          <RadioGroup.Root defaultValue="foo" aria-label="옵션 선택">
            <ListRadioItem
              prefix={<Icon svg={<IconPersonCircleLine />} />}
              title="활성화된 ListRadioItem"
              suffix={<Radiomark tone="neutral" size="large" />}
              value="foo"
            />
          </RadioGroup.Root>
        </List>
        <Divider />
        <List>
          <ListButtonItem
            disabled
            prefix={<Icon svg={<IconSlashCircleLine />} />}
            title="비활성화된 ListButtonItem"
            detail="Cupidatat et pariatur amet."
            suffix={<Icon svg={<IconChevronRightLine />} />}
          />
        </List>
        <List as="fieldset">
          <ListCheckItem
            disabled
            prefix={<Icon svg={<IconSlashCircleLine />} />}
            title="비활성화된 ListCheckItem"
            suffix={<Checkmark tone="neutral" size="large" />}
          />
        </List>
        <List asChild>
          <RadioGroup.Root defaultValue="foo" aria-label="옵션 선택">
            <ListRadioItem
              disabled
              prefix={<Icon svg={<IconSlashCircleLine />} />}
              title="비활성화된 ListRadioItem"
              suffix={<Radiomark tone="neutral" size="large" />}
              value="foo"
            />
          </RadioGroup.Root>
        </List>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Variants

#### Highlighted

<ComponentExample name="react/list/highlighted">
  ```tsx
  import { IconPersonCircleLine } from "@karrotmarket/react-monochrome-icon";
  import { Box, Icon, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { List, ListDivider, ListItem, ListButtonItem } from "seed-design/ui/list";
  import { Switch } from "seed-design/ui/switch";

  export default function ListHighlighted() {
    const [highlighted, setHighlighted] = useState(true);

    return (
      <VStack width="360px" gap="x4">
        <List>
          <ListButtonItem
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="버튼"
            detail="Enim aute duis magna mollit aute sit aliquip duis ut tempor sunt."
            onClick={() => {}}
          />
          <ListDivider />
          <ListButtonItem
            highlighted
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="하이라이트된 버튼"
            detail="Enim aute duis magna mollit aute sit aliquip duis ut tempor sunt."
            onClick={() => {}}
          />
          <ListDivider />
          <ListButtonItem
            highlighted
            disabled
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="하이라이트 및 비활성화된 버튼"
            detail="Enim aute duis magna mollit aute sit aliquip duis ut tempor sunt."
            onClick={() => {}}
          />
        </List>
        <List>
          <ListItem
            prefix={<Icon svg={<IconPersonCircleLine />} />}
            title="하이라이트"
            highlighted={highlighted}
          />
        </List>
        <Box alignSelf="center">
          <Switch
            size="24"
            tone="neutral"
            label="highlight"
            checked={highlighted}
            onCheckedChange={setHighlighted}
          />
        </Box>
      </VStack>
    );
  }
  ```
</ComponentExample>

### With Bottom Sheet

<ComponentExample name="react/list/bottom-sheet">
  ```tsx
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Checkmark } from "seed-design/ui/checkbox";
  import { List, ListCheckItem } from "seed-design/ui/list";
  import { PrefixIcon, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { IconArrowClockwiseCircularFill } from "@karrotmarket/react-monochrome-icon";

  const TYPES = ["버스", "지하철", "택시", "자전거", "도보"] as const;

  export default function ListBottomSheet() {
    const [isOpen, setIsOpen] = useState(false);
    const [selectedTypes, setSelectedTypes] = useState<(typeof TYPES)[number][]>([]);

    return (
      <BottomSheetRoot open={isOpen} onOpenChange={setIsOpen}>
        <BottomSheetTrigger asChild>
          <ActionButton variant="neutralSolid">BottomSheet 열기</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="교통수단" description="이동할 교통수단을 선택해주세요.">
          <VStack asChild>
            <form
              onReset={(e) => {
                e.preventDefault();
                setSelectedTypes([]);
              }}
              onSubmit={(e) => {
                e.preventDefault();
                setIsOpen(false);
              }}
            >
              <BottomSheetBody paddingX="0" asChild>
                <List as="fieldset">
                  {TYPES.map((type) => (
                    <ListCheckItem
                      key={type}
                      title={type}
                      checked={selectedTypes.includes(type)}
                      prefix={<Checkmark tone="neutral" size="large" />}
                      onCheckedChange={() => {
                        setSelectedTypes((prev) =>
                          prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type],
                        );
                      }}
                    />
                  ))}
                </List>
              </BottomSheetBody>
              <BottomSheetFooter>
                <VStack gap="x2">
                  <ActionButton
                    size="large"
                    variant="neutralSolid"
                    disabled={selectedTypes.length === 0}
                    type="submit"
                  >
                    경로 찾기
                  </ActionButton>
                  <ActionButton
                    size="small"
                    variant="ghost"
                    disabled={selectedTypes.length === 0}
                    type="reset"
                  >
                    <PrefixIcon svg={<IconArrowClockwiseCircularFill />} />
                    초기화
                  </ActionButton>
                </VStack>
              </BottomSheetFooter>
            </form>
          </VStack>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  }
  ```
</ComponentExample>

### Alignment

`alignItems` prop으로 `prefix`와 `suffix`의 정렬 방식을 조정할 수 있습니다.

<ComponentExample name="react/list/alignment">
  ```tsx
  import { List, ListItem } from "seed-design/ui/list";
  import { HStack } from "@seed-design/react";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
  import { Avatar } from "seed-design/ui/avatar";

  export default function ListAlignment() {
    return (
      <HStack width="full" align="flex-start" gap="x4">
        <List>
          <ListItem
            prefix={<Avatar size="48" fallback={<IdentityPlaceholder />} />}
            title="Prefix에 Avatar 넣기. Veniam elit velit esse ea incididunt sunt sit aute."
            detail="Et proident sit ullamco ut voluptate. Voluptate eiusmod occaecat adipisicing quis qui esse."
          />
        </List>
        <List>
          <ListItem
            alignItems="flex-start"
            prefix={<Avatar size="48" fallback={<IdentityPlaceholder />} />}
            title="Prefix에 Avatar 넣고 상단으로 정렬하기. Veniam elit velit esse ea incididunt sunt sit aute."
            detail="일반적으로 `title`이 길어질 때 `alignItems`를 `flex-start`로 설정합니다."
          />
        </List>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Border Radius

`List`에 `itemBorderRadius` prop을 설정하여 active 상태에서 적용되는 리스트 항목의 radius를 조정할 수 있습니다. 리스트가 카드 등 모서리가 둥근 컨테이너 안에 포함되는 경우 유용합니다.

<ComponentExample name="react/list/border-radius">
  ```tsx
  import { List, ListCheckItem, ListRadioItem } from "seed-design/ui/list";
  import { ListHeader } from "seed-design/ui/list-header";
  import { Checkmark } from "seed-design/ui/checkbox";
  import { Radiomark } from "seed-design/ui/radio-group";
  import { HStack, VStack } from "@seed-design/react";
  import { RadioGroup } from "@seed-design/react/primitive";

  export default function ListBorderRadius() {
    return (
      <HStack
        gap="x4"
        bg="bg.layerBasement"
        width="full"
        grow
        wrap
        align="center"
        justify="center"
        p="x4"
      >
        <VStack
          width="300px"
          py="x1_5"
          borderRadius="r3_5"
          bg="bg.layerDefault"
          borderWidth={1}
          borderColor="stroke.neutralWeak"
        >
          <ListHeader as="h2">카드 borderRadius: r3_5</ListHeader>
          <List as="fieldset" itemBorderRadius="r2">
            <ListCheckItem
              defaultChecked
              title="borderRadius: r2"
              suffix={<Checkmark size="large" tone="neutral" />}
            />
            <ListCheckItem
              title="borderRadius: r2"
              suffix={<Checkmark size="large" tone="neutral" />}
            />
          </List>
        </VStack>
        <VStack
          width="300px"
          px="x1"
          py="x2_5"
          borderRadius="22px"
          bg="bg.layerDefault"
          borderWidth={1}
          borderColor="stroke.neutralWeak"
        >
          <ListHeader as="h2">카드 borderRadius: 22px</ListHeader>
          <List asChild itemBorderRadius="r3">
            <RadioGroup.Root defaultValue="0" aria-label="Border radius options">
              <ListRadioItem
                value="0"
                title="borderRadius: r3"
                suffix={<Radiomark size="large" tone="neutral" />}
              />
              <ListRadioItem
                value="1"
                title="borderRadius: r3"
                suffix={<Radiomark size="large" tone="neutral" />}
              />
            </RadioGroup.Root>
          </List>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

## Customization and Composition

### Usage

@seed-design/react 패키지에서 제공하는 `List`와 `ListHeader` 컴포넌트는 다음과 같은 구조로 사용됩니다.

```
ListHeader
List.Root
└── List.Item
    ├── List.Prefix (선택사항)
    ├── List.Content
    │   ├── List.Title
    │   └── List.Detail (선택사항)
    └── List.Suffix (선택사항)
└── List.Item
    ├── ...
```

```tsx
import { ListHeader, List, Icon } from "@seed-design/react";

<ListHeader>
  내 정보
</ListHeader>
<List.Root>
  <List.Item>
    <List.Prefix>
      <Icon svg={<IconPersonCircleLine />} />
    </List.Prefix>
    <List.Content>
      <List.Title>내 프로필</List.Title>
      <List.Detail>다른 사람들에게 보이는 내 정보를 관리합니다.</List.Detail>
    </List.Content>
    <List.Suffix>
      <Icon svg={<IconArrowRightLine />} />
    </List.Suffix>
  </List.Item>
  <List.Item>
    {/* ... */}
  </List.Item>
</List.Root>
```

* `ListHeader`: 리스트의 제목이나 설명을 표시하는 헤더 역할
* `List.Root`: 모든 리스트 항목을 감싸는 컨테이너 역할
  * `List.Item`: 개별 리스트 항목. 클릭 가능한 영역을 정의
  * `List.Prefix`: 아이콘, [Avatar](/react/components/avatar), [Checkmark](/react/components/checkbox#using-checkmark) 등을 표시할 수 있는 시작 영역
  * `List.Content`: 주요 콘텐츠가 들어가는 중앙 영역
    * `List.Title`: 리스트 항목의 제목
    * `List.Detail`: 부가 설명이나 세부 정보
  * `List.Suffix`: 아이콘, [Action Button](/react/components/action-button), [Toggle Button](/react/components/toggle-button) 등을 표시할 수 있는 끝 영역

### `asChild` prop으로 적절한 시맨틱 요소와 조합하기

<Card title="Composition" href="/react/components/concepts/composition#aschild-prop" icon={<IconComponent />}>
  `asChild` prop에 대해 자세히 알아봅니다.
</Card>

#### Using `asChild` prop in `List.Content`

리스트 항목 전체 영역을 클릭 가능한 버튼으로 만드는 경우 활용할 수 있는 패턴입니다. 이 경우 `List.Item`에 `asChild` prop을 사용하지 않도록 유의하세요. `List.Prefix` 또는 `List.Suffix`에 버튼을 넣는 경우 `button`이 중첩되는 등 유효하지 않은 HTML이 생성됩니다.

```tsx
import { List as SeedList } from "@seed-design/react";

<SeedList.Item>
  {/* [!code highlight] */}
  <SeedList.Content asChild>
    {/* [!code highlight] */}
    <button type="button" onClick={() => alert("사용자 클릭됨")}>
      <SeedList.Title>사용자</SeedList.Title>
      {/* [!code highlight] */}
    </button>
    {/* [!code highlight] */}
  </SeedList.Content>
  <SeedList.Suffix>
    <ActionButton
      size="xsmall"
      variant="brandSolid"
      onClick={() => alert("보기 클릭됨")}
    >
      보기
    </ActionButton>
  </SeedList.Suffix>
</SeedList.Item>
```

[Snippet](/react/components/concepts/snippet)으로 제공되는 `ListButtonItem` 및 `ListLinkItem`는 이 패턴을 쉽게 구현할 수 있도록 돕습니다.

```tsx
import { ListButtonItem } from "seed-design/ui/list";

<ListButtonItem
  onClick={() => alert("사용자 클릭됨")}
  title="사용자"
  detail="항목 6개"
  suffix={
    <ActionButton
      size="xsmall"
      variant="brandSolid"
      onClick={() => alert("보기 클릭됨")}
    >
      보기
    </ActionButton>
  }
/>
```

#### Using `asChild` prop in `List.Item`

리스트 항목 전체 영역을 `label`로 만들고, `List.Prefix` 또는 `List.Suffix`에 [Switchmark](/react/components/switch#using-switchmark), [Checkmark](/react/components/checkbox#using-checkmark) 또는 [Radiomark](/react/components/radio-group#using-radiomark)를 넣는 경우 활용할 수 있는 패턴입니다.

```tsx
import { List as SeedList } from "@seed-design/react";
import { Checkbox } from "@seed-design/react/primitive";

{/* [!code highlight] */}
<SeedList.Item asChild> {/* <label> */}
  {/* [!code highlight] */}
  <Checkbox.Root defaultChecked>
    <SeedList.Content>
      <SeedList.Title>동의</SeedList.Title>
    </SeedList.Content>
    <SeedList.Suffix>
      <Checkmark />
    </SeedList.Suffix>
    <Checkbox.HiddenInput />
    {/* [!code highlight] */}
  </Checkbox.Root>
  {/* [!code highlight] */}
</SeedList.Item>
```

[Snippet](/react/components/concepts/snippet)으로 제공되는 `ListSwitchItem`, `ListCheckItem` 및 `ListRadioItem`는 이 패턴을 쉽게 구현할 수 있도록 돕습니다.

```tsx
import { ListCheckItem } from "seed-design/ui/list";

<ListCheckItem
  defaultChecked
  title="동의"
  suffix={<Checkmark size="large" />}
/>
```


---

file: components/manner-temp-badge.mdx

# Manner Temp Badge

매너 온도를 배지 형태로 표현하는 컴포넌트입니다. 콤팩트한 공간에서 사용자의 매너 온도 레벨을 간단히 표시할 때 사용됩니다.



<ComponentExample name="react/manner-temp-badge/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { MannerTempBadge } from "seed-design/ui/manner-temp-badge";

  export default function BadgePreview() {
    return (
      <VStack gap="x1" align="flex-start">
        <MannerTempBadge temperature={12.5} />
        <MannerTempBadge temperature={30} />
        <MannerTempBadge temperature={36} />
        <MannerTempBadge temperature={36.5} />
        <MannerTempBadge temperature={37} />
        <MannerTempBadge temperature={40} />
        <MannerTempBadge temperature={45} />
        <MannerTempBadge temperature={55} />
        <MannerTempBadge temperature={65} />
        <MannerTempBadge temperature={80} />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:manner-temp-badge
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:manner-temp-badge
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:manner-temp-badge
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:manner-temp-badge
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="manner-temp-badge" />

## Props

<TypeTable
  type={{
    temperature: {
        "type": "number",
        "default": undefined,
        "required": true,
        description: <><p>{"The manner temperature of the badge.\nLevel will be calculated based on this value.\nIf level is provided, this will be ignored."}</p></>
    },

    level: {
        "type": "\"l1\" | \"l2\" | \"l3\" | \"l4\" | \"l5\" | \"l6\" | \"l7\" | \"l8\" | \"l9\" | \"l10\" | undefined",
        "default": "\"l1\"",
        "required": false
    }
}}
/>


---

file: components/manner-temp.mdx

# Manner Temp

사용자의 매너온도를 시각적으로 표현하는 컴포넌트입니다. 신뢰도/매너 정도를 직관적으로 보여주는 데에 사용합니다.



<ComponentExample name="react/manner-temp/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { MannerTemp } from "seed-design/ui/manner-temp";

  export default function MannerTempPreview() {
    return (
      <VStack gap="x1" align="flex-end">
        <MannerTemp temperature={12.5} />
        <MannerTemp temperature={30} />
        <MannerTemp temperature={36} />
        <MannerTemp temperature={36.5} />
        <MannerTemp temperature={37} />
        <MannerTemp temperature={40} />
        <MannerTemp temperature={45} />
        <MannerTemp temperature={55} />
        <MannerTemp temperature={65} />
        <MannerTemp temperature={80} />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:manner-temp
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:manner-temp
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:manner-temp
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:manner-temp
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="manner-temp" />

## Props

<TypeTable
  type={{
    temperature: {
        "type": "number",
        "default": undefined,
        "required": true,
        description: <><p>{"The manner temperature of the MannerTemp component.\nLevel will be calculated based on this value.\nIf level is provided, this will be ignored."}</p></>
    },

    level: {
        "type": "\"l1\" | \"l2\" | \"l3\" | \"l4\" | \"l5\" | \"l6\" | \"l7\" | \"l8\" | \"l9\" | \"l10\" | undefined",
        "default": "\"l1\"",
        "required": false
    }
}}
/>


---

file: components/menu-sheet.mdx

# Menu Sheet

사용자의 작업과 관련된 선택지를 제공하는 시트 형태의 컴포넌트입니다.



<ComponentExample name="react/menu-sheet/preview">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  const MenuSheetPreview = () => {
    return (
      <MenuSheetRoot>
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent
          title="proident irure"
          description="Aliqua fugiat adipisicing magna dolor laborum."
          aria-label="Menu Sheet"
        >
          <MenuSheetGroup>
            <MenuSheetItem
              label="Action 1"
              description="Est commodo veniam magna officia ad dolor esse aliquip laboris nisi do."
              prefixIcon={<IconEyeSlashLine />}
            />
            <MenuSheetItem label="Action 2" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 3" prefixIcon={<IconEyeSlashLine />} />
          </MenuSheetGroup>
          <MenuSheetGroup>
            <MenuSheetItem label="Action 4" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 5" prefixIcon={<IconEyeSlashLine />} tone="critical" />
          </MenuSheetGroup>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  };

  export default MenuSheetPreview;
  ```
</ComponentExample>

<Card title="Stackflow" href="/react/stackflow/menu-sheet" variant="example">
  Stackflow와 Menu Sheet를 함께 사용하는 방법에 대해 알아보세요.
</Card>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:menu-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:menu-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:menu-sheet
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:menu-sheet
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="menu-sheet" />

## Props

### `MenuSheetRoot`

<TypeTable
  type={{
    lazyMount: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    skipAnimation: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\" | undefined",
        "default": "\"dialog\"",
        "required": false,
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    closeOnEscape: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onOpenChange: {
        "type": "((open: boolean, details?: DialogChangeDetails) => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

### `MenuSheetTrigger`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `MenuSheetContent`

<TypeTable
  type={{
    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    layerIndex: {
        "type": "number | undefined",
        "default": undefined,
        "required": false
    },

    labelAlign: {
        "type": "\"left\" | \"center\" | undefined",
        "default": "\"left\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `MenuSheetGroup`

<TypeTable
  type={{
    labelAlign: {
        "type": "\"left\" | \"center\" | undefined",
        "default": "\"left\"",
        "required": false
    }
}}
/>

### `MenuSheetItem`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"critical\" | undefined",
        "default": "\"neutral\"",
        "required": false
    },

    labelAlign: {
        "type": "\"left\" | \"center\" | undefined",
        "default": "\"left\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### With Title

`MenuSheetContent`의 `title` prop을 사용하여 시트 헤더에 제목을 표시합니다.

<ComponentExample name="react/menu-sheet/with-title">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  const MenuSheetWithTitle = () => {
    return (
      <MenuSheetRoot>
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent title="Menu Sheet">
          <MenuSheetGroup>
            <MenuSheetItem label="Action 1" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem
              label="Action 2"
              prefixIcon={<IconEyeSlashLine />}
              description="Ut nulla et id dolor labore ullamco irure est id occaecat."
            />
            <MenuSheetItem
              label="Action 3"
              prefixIcon={<IconEyeSlashLine />}
              description="Ut nulla et id dolor labore ullamco irure est id occaecat."
            />
          </MenuSheetGroup>
          <MenuSheetGroup>
            <MenuSheetItem label="Action 4" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 5" prefixIcon={<IconEyeSlashLine />} tone="critical" />
          </MenuSheetGroup>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  };

  export default MenuSheetWithTitle;
  ```
</ComponentExample>

### With Title and Description

`MenuSheetContent`의 `description` prop을 사용하여 제목 아래에 부가 설명을 추가합니다.

<ComponentExample name="react/menu-sheet/with-title-and-description">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  export default function MenuSheetWithTitleAndDescription() {
    return (
      <MenuSheetRoot>
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent title="Menu Sheet" description="부가적인 설명이 여기에 표시됩니다.">
          <MenuSheetGroup>
            <MenuSheetItem label="Action 1" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem
              label="Action 2"
              prefixIcon={<IconEyeSlashLine />}
              description="Ut nulla et id dolor labore ullamco irure est id occaecat."
            />
            <MenuSheetItem
              label="Action 3"
              prefixIcon={<IconEyeSlashLine />}
              description="Ut nulla et id dolor labore ullamco irure est id occaecat."
            />
          </MenuSheetGroup>
          <MenuSheetGroup>
            <MenuSheetItem label="Action 4" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 5" prefixIcon={<IconEyeSlashLine />} tone="critical" />
          </MenuSheetGroup>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  }
  ```
</ComponentExample>

### Label Align

`MenuSheetContent`의 `labelAlign` prop으로 메뉴 항목의 레이블 정렬을 설정합니다.

#### `labelAlign="left"` (with `PrefixIcon`)

레이블을 왼쪽 정렬합니다.

<ComponentExample name="react/menu-sheet/with-prefix-icon">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  const MenuSheetWithPrefixIcon = () => {
    return (
      <MenuSheetRoot>
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent aria-label="Menu Sheet">
          <MenuSheetGroup>
            <MenuSheetItem label="Action 1" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 2" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 3" prefixIcon={<IconEyeSlashLine />} />
          </MenuSheetGroup>
          <MenuSheetGroup>
            <MenuSheetItem label="Action 4" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 5" prefixIcon={<IconEyeSlashLine />} tone="critical" />
          </MenuSheetGroup>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  };

  export default MenuSheetWithPrefixIcon;
  ```
</ComponentExample>

#### `labelAlign="center"` (without `PrefixIcon`)

레이블을 중앙 정렬합니다. (일반적으로, `prefixIcon` 없는 경우)

<ComponentExample name="react/menu-sheet/without-prefix-icon">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  const MenuSheetWithoutPrefixIcon = () => {
    return (
      <MenuSheetRoot>
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent aria-label="Menu Sheet" labelAlign="center">
          <MenuSheetGroup>
            <MenuSheetItem label="Action 1" />
            <MenuSheetItem label="Action 2" />
            <MenuSheetItem label="Action 3" />
          </MenuSheetGroup>
          <MenuSheetGroup>
            <MenuSheetItem label="Action 4" />
            <MenuSheetItem label="Action 5" tone="critical" />
          </MenuSheetGroup>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  };

  export default MenuSheetWithoutPrefixIcon;
  ```
</ComponentExample>

#### Overriding `labelAlign`

필요한 경우 `MenuSheetContent`에 지정한 `labelAlign`을 `MenuSheetGroup` 또는 `MenuSheetItem`에 지정한 `labelAlign`으로 덮어쓸 수 있습니다.

<ComponentExample name="react/menu-sheet/overriding-label-align">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  const MenuSheetOverridingLabelAlign = () => {
    return (
      <MenuSheetRoot>
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent aria-label="Menu Sheet" labelAlign="center">
          <MenuSheetGroup labelAlign="left">
            <MenuSheetItem label="Action 1" />
            <MenuSheetItem label="Action 2" labelAlign="center" />
            <MenuSheetItem label="Action 3" />
          </MenuSheetGroup>
          <MenuSheetGroup>
            <MenuSheetItem label="Action 4" />
            <MenuSheetItem label="Action 5" tone="critical" labelAlign="left" />
          </MenuSheetGroup>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  };

  export default MenuSheetOverridingLabelAlign;
  ```
</ComponentExample>

### `onOpenChange` Details

`onOpenChange` 두 번째 인자로 `details`가 제공됩니다.

#### `reason`

**열릴 때** (`open: true`)

* `"trigger"`: `MenuSheetTrigger` (`MenuSheet.Trigger`)로 열림

**닫힐 때** (`open: false`)

* `"closeButton"`: `MenuSheet.CloseButton`으로 닫힘
* `"escapeKeyDown"`: <kbd>ESC</kbd> 키 사용
* `"interactOutside"`: 외부 영역 클릭

<ComponentExample name="react/menu-sheet/open-change-reason">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { HStack, Text, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  export default function MenuSheetOnOpenChangeReason() {
    const [open, setOpen] = useState(false);
    const [openReason, setOpenReason] = useState<string | null>(null);
    const [closeReason, setCloseReason] = useState<string | null>(null);

    return (
      <VStack gap="x4" align="center">
        <MenuSheetRoot
          open={open}
          onOpenChange={(open, meta) => {
            setOpen(open);

            (open ? setOpenReason : setCloseReason)(meta?.reason ?? null);
          }}
        >
          <MenuSheetTrigger asChild>
            <ActionButton variant="neutralSolid">열기</ActionButton>
          </MenuSheetTrigger>
          <MenuSheetContent title="메뉴" aria-label="Menu Sheet">
            <MenuSheetGroup>
              <MenuSheetItem label="Action 1" prefixIcon={<IconEyeSlashLine />} />
              <MenuSheetItem label="Action 2" prefixIcon={<IconEyeSlashLine />} />
              <MenuSheetItem label="Action 3" prefixIcon={<IconEyeSlashLine />} />
            </MenuSheetGroup>
          </MenuSheetContent>
        </MenuSheetRoot>

        <HStack gap="x4">
          <Text fontSize="t3" color="fg.neutralMuted">
            마지막 열림 이유: {openReason ?? "-"}
          </Text>
          <Text fontSize="t3" color="fg.neutralMuted">
            마지막 닫힘 이유: {closeReason ?? "-"}
          </Text>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Skip Animation

`skipAnimation` prop을 사용하여 MenuSheet의 enter/exit 애니메이션을 건너뛸 수 있습니다.

<ComponentExample name="react/menu-sheet/skip-animation">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";

  const MenuSheetSkipAnimation = () => {
    return (
      <MenuSheetRoot skipAnimation>
        <MenuSheetTrigger asChild>
          <ActionButton variant="neutralSolid">Open</ActionButton>
        </MenuSheetTrigger>
        <MenuSheetContent aria-label="Menu Sheet">
          <MenuSheetGroup>
            <MenuSheetItem label="Action 1" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 2" prefixIcon={<IconEyeSlashLine />} />
            <MenuSheetItem label="Action 3" prefixIcon={<IconEyeSlashLine />} />
          </MenuSheetGroup>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  };

  export default MenuSheetSkipAnimation;
  ```
</ComponentExample>


---

file: components/page-banner.mdx

# Page Banner

페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.



<ComponentExample name="react/page-banner/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
  } from "seed-design/ui/page-banner";

  export default function PageBannerPreview() {
    return (
      <VStack gap="x4" width="full">
        <PageBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <ActionablePageBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <DismissiblePageBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:page-banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:page-banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:page-banner
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:page-banner
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="page-banner" />

## Props

### `PageBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    suffix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    variant: {
        "type": "\"weak\" | \"solid\" | undefined",
        "default": "\"weak\"",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"positive\" | \"warning\" | \"critical\" | \"magic\" | undefined",
        "default": "\"neutral\"",
        "required": false
    }
}}
/>

### `PageBannerButton`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ActionablePageBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    variant: {
        "type": "\"weak\" | \"solid\" | undefined",
        "default": "\"weak\"",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"positive\" | \"warning\" | \"critical\" | \"magic\" | undefined",
        "default": "\"neutral\"",
        "required": false
    }
}}
/>

### `DismissiblePageBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    variant: {
        "type": "\"weak\" | \"solid\" | undefined",
        "default": "\"weak\"",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"positive\" | \"warning\" | \"critical\" | \"magic\" | undefined",
        "default": "\"neutral\"",
        "required": false
    },

    defaultOpen: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    open: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onDismiss: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### With Button

`PageBanner`의 `suffix` prop에 `PageBannerButton`을 전달하여 버튼을 추가할 수 있습니다.

<ComponentExample name="react/page-banner/with-button">
  ```tsx
  import { PageBanner, PageBannerButton } from "seed-design/ui/page-banner";

  export default function PageBannerWithButton() {
    return (
      <PageBanner
        description="사업자 정보를 등록해주세요."
        suffix={<PageBannerButton>자세히 보기</PageBannerButton>}
      />
    );
  }
  ```
</ComponentExample>

### Rendering `PageBannerButton` as a Child

<ComponentExample name="react/page-banner/button-as-child">
  ```tsx
  import { PageBanner, PageBannerButton } from "seed-design/ui/page-banner";

  export default function PageBannerButtonAsChild() {
    return (
      <PageBanner
        description="사업자 정보를 등록해주세요."
        suffix={
          <PageBannerButton asChild>
            <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
              새 탭에서 열기
            </a>
          </PageBannerButton>
        }
      />
    );
  }
  ```
</ComponentExample>

### Tones and Variants

#### Neutral

<ComponentExample name="react/page-banner/neutral">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
    PageBannerButton,
  } from "seed-design/ui/page-banner";

  export default function PageBannerNeutral() {
    return (
      <div className="w-full grid grid-cols-2 items-start gap-4">
        <PageBanner
          tone="neutral"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <PageBanner
          tone="neutral"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <ActionablePageBanner
          tone="neutral"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <ActionablePageBanner
          tone="neutral"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="neutral"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="neutral"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
      </div>
    );
  }
  ```
</ComponentExample>

#### Positive

<ComponentExample name="react/page-banner/positive">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
    PageBannerButton,
  } from "seed-design/ui/page-banner";

  export default function PageBannerPositive() {
    return (
      <div className="w-full grid grid-cols-2 items-start gap-4">
        <PageBanner
          tone="positive"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <PageBanner
          tone="positive"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <ActionablePageBanner
          tone="positive"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <ActionablePageBanner
          tone="positive"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="positive"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="positive"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
      </div>
    );
  }
  ```
</ComponentExample>

#### Informative

<ComponentExample name="react/page-banner/informative">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
    PageBannerButton,
  } from "seed-design/ui/page-banner";

  export default function PageBannerInformative() {
    return (
      <div className="w-full grid grid-cols-2 items-start gap-4">
        <PageBanner
          tone="informative"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <PageBanner
          tone="informative"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <ActionablePageBanner
          tone="informative"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <ActionablePageBanner
          tone="informative"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="informative"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="informative"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
      </div>
    );
  }
  ```
</ComponentExample>

#### Warning

<ComponentExample name="react/page-banner/warning">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
    PageBannerButton,
  } from "seed-design/ui/page-banner";

  export default function PageBannerWarning() {
    return (
      <div className="w-full grid grid-cols-2 items-start gap-4">
        <PageBanner
          tone="warning"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <PageBanner
          tone="warning"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <ActionablePageBanner
          tone="warning"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <ActionablePageBanner
          tone="warning"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="warning"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="warning"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
      </div>
    );
  }
  ```
</ComponentExample>

#### Critical

<ComponentExample name="react/page-banner/critical">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
    PageBannerButton,
  } from "seed-design/ui/page-banner";

  export default function PageBannerCritical() {
    return (
      <div className="w-full grid grid-cols-2 items-start gap-4">
        <PageBanner
          tone="critical"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <PageBanner
          tone="critical"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
          suffix={<PageBannerButton>등록하기</PageBannerButton>}
        />
        <ActionablePageBanner
          tone="critical"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <ActionablePageBanner
          tone="critical"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="critical"
          variant="weak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
        <DismissiblePageBanner
          tone="critical"
          variant="solid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          title="미노출"
          description="사업자 정보를 등록해주세요."
        />
      </div>
    );
  }
  ```
</ComponentExample>

#### Magic

<Callout type="warning">
  `tone="magic"`은 `variant="weak"` 조합으로만 사용할 수 있습니다.
</Callout>

<ComponentExample name="react/page-banner/magic">
  ```tsx
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
    PageBannerButton,
  } from "seed-design/ui/page-banner";

  export default function PageBannerMagic() {
    return (
      <VStack gap="x4" width="full">
        <PageBanner
          tone="magic"
          variant="weak"
          prefixIcon={<IconSparkle2 />}
          title="새로운 기능"
          description="마법 같은 소식이 도착했어요!"
          suffix={<PageBannerButton>둘러보기</PageBannerButton>}
        />
        <ActionablePageBanner
          tone="magic"
          variant="weak"
          prefixIcon={<IconSparkle2 />}
          title="새로운 기능"
          description="마법 같은 소식이 도착했어요!"
        />
        <DismissiblePageBanner
          tone="magic"
          variant="weak"
          prefixIcon={<IconSparkle2 />}
          title="새로운 기능"
          description="마법 같은 소식이 도착했어요!"
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/progress-circle.mdx

# Progress Circle

작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.



<ComponentExample name="react/progress-circle/preview">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCirclePreview() {
    return <ProgressCircle tone="neutral" size="40" />;
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:progress-circle
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:progress-circle
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:progress-circle
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:progress-circle
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="progress-circle" />

## Props

<TypeTable
  type={{
    value: {
        "type": "number | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The current value of the progress. if undefined, it will be indeterminate."}</p></>
    },

    minValue: {
        "type": "number | undefined",
        "default": "0",
        "required": false,
        description: <><p>{"The minimum value allowed of the progress."}</p></>
    },

    maxValue: {
        "type": "number | undefined",
        "default": "100",
        "required": false,
        description: <><p>{"The maximum value allowed of the progress."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    tone: {
        "type": "\"inherit\" | \"neutral\" | \"brand\" | \"staticWhite\" | undefined",
        "default": "\"neutral\"",
        "required": false
    },

    size: {
        "type": "\"inherit\" | \"24\" | \"40\" | undefined",
        "default": "40",
        "required": false
    }
}}
/>

## Examples

### Neutral

<ComponentExample name="react/progress-circle/neutral">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleNeutral() {
    return <ProgressCircle tone="neutral" />;
  }
  ```
</ComponentExample>

### Brand

<ComponentExample name="react/progress-circle/brand">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleBrand() {
    return <ProgressCircle tone="brand" />;
  }
  ```
</ComponentExample>

### Static White

<ComponentExample name="react/progress-circle/static-white">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleStaticWhite() {
    return (
      <div
        style={{
          display: "flex",
          flex: 1,
          width: "100vw",
          height: "300px",
          alignItems: "center",
          justifyContent: "center",
          background: "black",
        }}
      >
        <ProgressCircle tone="staticWhite" />
      </div>
    );
  }
  ```
</ComponentExample>

### Size=40

<ComponentExample name="react/progress-circle/40">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircle40() {
    return <ProgressCircle size="40" />;
  }
  ```
</ComponentExample>

### Size=24

<ComponentExample name="react/progress-circle/24">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircle24() {
    return <ProgressCircle size="24" />;
  }
  ```
</ComponentExample>

### Determinate

<ComponentExample name="react/progress-circle/determinate">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleDeterminate() {
    return <ProgressCircle minValue={0} maxValue={100} value={40} />;
  }
  ```
</ComponentExample>

### Indeterminate

<ComponentExample name="react/progress-circle/indeterminate">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCirclePreview() {
    // if you want to show an indeterminate progress circle, you can pass `undefined` or omit the `value` prop
    return <ProgressCircle value={undefined} />;
  }
  ```
</ComponentExample>


---

file: components/pull-to-refresh.mdx

# Pull To Refresh

사용자가 화면을 아래로 당겨 콘텐츠를 새로고침할 수 있게 해주는 컴포넌트입니다. 모바일 환경에서 최신 콘텐츠를 불러올 때 사용됩니다.



<StackflowExample names={["react/pull-to-refresh/preview"]}>
  ```tsx
  import { AppBar, AppScreen } from "@seed-design/stackflow";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { VStack } from "@seed-design/react";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";

  declare module "@stackflow/config" {
    interface Register {
      "react/pull-to-refresh/preview": {};
    }
  }

  const PullToRefreshPreview: ActivityComponentType<"react/pull-to-refresh/preview"> = () => {
    // AppScreen is imported from @seed-design/stackflow instead of snippet for demo purpose.
    // AppScreen snippet is integrating PullToRefresh, so it's not necessary to use it here.
    return (
      <AppScreen.Root>
        <AppBar.Root divider>
          <AppBar.Main>
            <AppBar.Title>Pull To Refresh</AppBar.Title>
          </AppBar.Main>
        </AppBar.Root>
        <PullToRefreshRoot
          asChild
          onPtrReady={() => {}}
          onPtrRefresh={async () => {
            await new Promise((resolve) => setTimeout(resolve, 1000));
          }}
        >
          <AppScreen.Layer>
            <PullToRefreshIndicator />
            <PullToRefreshContent asChild>
              <VStack px="spacingX.globalGutter">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
                reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
                accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
              </VStack>
            </PullToRefreshContent>
          </AppScreen.Layer>
        </PullToRefreshRoot>
      </AppScreen.Root>
    );
  };

  export default PullToRefreshPreview;
  ```
</StackflowExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:pull-to-refresh
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:pull-to-refresh
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:pull-to-refresh
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:pull-to-refresh
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="pull-to-refresh" />

## Props

### `PullToRefreshRoot`

<TypeTable
  type={{
    threshold: {
        "type": "number | undefined",
        "default": "44",
        "required": false,
        description: <><p>{"The threshold value to trigger the refresh. (px)"}</p></>
    },

    displacementMultiplier: {
        "type": "number | undefined",
        "default": "0.5",
        "required": false,
        description: <><p>{"The multiplier to calculate displacement from the touch movement."}</p></>
    },

    onPtrPullStart: {
        "type": "((ctx: PullToRefreshContext) => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Callback when the pull-to-refresh has started to pull."}</p></>
    },

    onPtrPullMove: {
        "type": "((ctx: PullToRefreshContext) => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Callback when the pull-to-refresh is moving during the pull."}</p></>
    },

    onPtrPullEnd: {
        "type": "((ctx: PullToRefreshContext) => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Callback when the pull-to-refresh is released.\nIt does not matter if it is ready or not. If you want to handle the refresh, use "}<code>{"onPtrRefresh"}</code>{"."}</p></>
    },

    onPtrReady: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Callback when the pull-to-refresh is pulled over the threshold."}</p></>
    },

    onPtrRefresh: {
        "type": "(() => Promise<void>) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Callback when the pull-to-refresh is released after ready."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether to disable the pull-to-refresh."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `PullToRefreshIndicator`

<TypeTable type={{}} />

### `PullToRefreshContent`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### PTR in Tabs

<StackflowExample names={["react/pull-to-refresh/tabs"]}>
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  declare module "@stackflow/config" {
    interface Register {
      "react/pull-to-refresh/tabs": {};
    }
  }

  const PullToRefreshTabs: ActivityComponentType<"react/pull-to-refresh/tabs"> = () => {
    return (
      <AppScreen>
        <AppBar>
          <AppBarMain>Pull To Refresh</AppBarMain>
        </AppBar>
        <AppScreenContent>
          <TabsRoot defaultValue="1" contentLayout="fill">
            <TabsList>
              <TabsTrigger value="1">Tab 1</TabsTrigger>
              <TabsTrigger value="2">Tab 2</TabsTrigger>
            </TabsList>
            <TabsContent value="1">
              <PullToRefreshRoot
                onPtrReady={() => {}}
                onPtrRefresh={async () => {
                  await new Promise((resolve) => setTimeout(resolve, 1000));
                }}
              >
                <PullToRefreshIndicator />
                <PullToRefreshContent asChild>
                  <VStack px="spacingX.globalGutter">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
                    reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
                    accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
                  </VStack>
                </PullToRefreshContent>
              </PullToRefreshRoot>
            </TabsContent>
            <TabsContent value="2">
              <VStack px="spacingX.globalGutter">PTR is not available in this tab.</VStack>
            </TabsContent>
          </TabsRoot>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default PullToRefreshTabs;
  ```
</StackflowExample>

### Disabled

`disabled` 속성을 사용하여 PTR를 비활성화할 수 있습니다.

<ComponentExample name="react/pull-to-refresh/disabled">
  ```tsx
  import { Box, HStack, Text } from "@seed-design/react";
  import { useState } from "react";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";
  import { Switch } from "seed-design/ui/switch";

  const PullToRefreshDisabled = () => {
    const [disabled, setDisabled] = useState(false);

    return (
      <Box width="300px" height="500px" borderColor="stroke.neutralMuted" borderWidth={1}>
        <PullToRefreshRoot
          onPtrReady={() => {}}
          onPtrRefresh={async () => {
            await new Promise((resolve) => setTimeout(resolve, 1000));
          }}
          disabled={disabled}
        >
          <PullToRefreshIndicator />
          <PullToRefreshContent asChild>
            <HStack px="spacingX.globalGutter" py="x4" align="center" justify="space-between">
              <Text>Disabled</Text>
              <Switch checked={disabled} onCheckedChange={setDisabled} />
            </HStack>
          </PullToRefreshContent>
        </PullToRefreshRoot>
      </Box>
    );
  };

  export default PullToRefreshDisabled;
  ```
</ComponentExample>

### Prevent Pull

`PullToRefresh.preventPull` 속성을 사용하여 특정 영역에서 PTR 동작을 방지할 수 있습니다. `user-select: auto;`등을 통해 텍스트 선택이 가능한 영역에서 주로 사용됩니다.

<StackflowExample names={["react/pull-to-refresh/prevent-pull"]}>
  ```tsx
  import { AppBar, AppScreen } from "@seed-design/stackflow";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { VStack, PullToRefresh, Box } from "@seed-design/react";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";

  declare module "@stackflow/config" {
    interface Register {
      "react/pull-to-refresh/prevent-pull": {};
    }
  }

  const PullToRefreshPreventPull: ActivityComponentType<
    "react/pull-to-refresh/prevent-pull"
  > = () => {
    // AppScreen is imported from @seed-design/stackflow instead of snippet for demo purpose.
    // AppScreen snippet is integrating PullToRefresh, so it's not necessary to use it here.
    return (
      <AppScreen.Root>
        <AppBar.Root divider>
          <AppBar.Main>
            <AppBar.Title>Pull To Refresh</AppBar.Title>
          </AppBar.Main>
        </AppBar.Root>
        <PullToRefreshRoot
          asChild
          onPtrReady={() => {}}
          onPtrRefresh={async () => {
            await new Promise((resolve) => setTimeout(resolve, 1000));
          }}
        >
          <AppScreen.Layer>
            <PullToRefreshIndicator />
            <PullToRefreshContent asChild>
              <VStack px="spacingX.globalGutter" gap="x4">
                <Box p="x4" bg="bg.neutralWeak" color="fg.neutral" borderRadius="r2">
                  이 영역은 당겨서 새로고침이 가능합니다. Amet in laborum proident fugiat mollit quis
                  aute mollit esse nostrud. Excepteur ea proident ipsum duis. Nulla Lorem pariatur
                  exercitation velit anim.
                </Box>
                <Box
                  p="x4"
                  bg="bg.criticalWeak"
                  color="fg.criticalContrast"
                  borderRadius="r2"
                  {...PullToRefresh.preventPull}
                >
                  이 영역은 당겨서 새로고침이 불가능합니다. Aliquip ad amet eu dolore id enim
                  excepteur laboris officia anim in. Irure irure nulla sit eiusmod aliqua sint
                  excepteur amet laboris.
                </Box>
                <Box p="x4" bg="bg.neutralWeak" color="fg.neutral" borderRadius="r2">
                  이 영역은 당겨서 새로고침이 가능합니다. Amet in laborum proident fugiat mollit quis
                  aute mollit esse nostrud. Excepteur ea proident ipsum duis. Nulla Lorem pariatur
                  exercitation velit anim.
                </Box>
                <Box
                  p="x4"
                  bg="bg.criticalWeak"
                  color="fg.criticalContrast"
                  borderRadius="r2"
                  {...PullToRefresh.preventPull}
                >
                  이 영역은 당겨서 새로고침이 불가능합니다. Aliquip ad amet eu dolore id enim
                  excepteur laboris officia anim in. Irure irure nulla sit eiusmod aliqua sint
                  excepteur amet laboris.
                </Box>
              </VStack>
            </PullToRefreshContent>
          </AppScreen.Layer>
        </PullToRefreshRoot>
      </AppScreen.Root>
    );
  };

  export default PullToRefreshPreventPull;
  ```
</StackflowExample>


---

file: components/radio-group.mdx

# Radio Group

여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트입니다.



<ComponentExample name="react/radio-group/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  export default function RadioGroupPreview() {
    return (
      <VStack p="x6">
        <RadioGroup
          defaultValue="apple"
          label="좋아하는 과일"
          description="좋아하는 과일을 선택해 주세요."
          indicator="선택"
        >
          <RadioGroupItem value="apple" label="Apple" tone="neutral" size="large" />
          <RadioGroupItem value="banana" label="Banana" tone="neutral" size="large" />
          <RadioGroupItem value="orange" label="Orange" tone="neutral" size="large" />
        </RadioGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:radio-group
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:radio-group
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:radio-group
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:radio-group
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="radio-group" />

## Props

### `RadioGroup`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    form: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((value: string) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `RadioGroupItem`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    weight: {
        "type": "\"regular\" | \"bold\" | undefined",
        "default": "\"regular\"",
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"brand\" | undefined",
        "default": "\"brand\"",
        "required": false
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `Radiomark`

<TypeTable
  type={{
    tone: {
        "type": "\"neutral\" | \"brand\" | undefined",
        "default": "\"brand\"",
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Sizes

<ComponentExample name="react/radio-group/size">
  ```tsx
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";
  import { VStack } from "@seed-design/react";

  export default function RadioGroupSize() {
    return (
      <VStack gap="x5" p="x6">
        <RadioGroup defaultValue="apple" aria-label="과일 선택">
          <RadioGroupItem value="apple" label="사과" size="medium" tone="neutral" />
          <RadioGroupItem value="banana" label="바나나" size="medium" tone="neutral" />
          <RadioGroupItem value="orange" label="오렌지" size="medium" tone="neutral" />
        </RadioGroup>
        <RadioGroup defaultValue="red" aria-label="색상 선택">
          <RadioGroupItem value="red" label="빨간색" size="large" tone="neutral" />
          <RadioGroupItem value="blue" label="파란색" size="large" tone="neutral" />
          <RadioGroupItem value="green" label="초록색" size="large" tone="neutral" />
        </RadioGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Tones

#### Brand

<ComponentExample name="react/radio-group/brand">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  export default function RadioGroupBrand() {
    return (
      <VStack p="x6">
        <RadioGroup defaultValue="apple" aria-label="과일 선택">
          <RadioGroupItem value="apple" label="사과" tone="brand" size="large" />
          <RadioGroupItem value="banana" label="바나나" tone="brand" size="large" />
          <RadioGroupItem value="orange" label="오렌지" tone="brand" size="large" />
        </RadioGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Neutral

<ComponentExample name="react/radio-group/neutral">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  export default function RadioGroupNeutral() {
    return (
      <VStack p="x6">
        <RadioGroup defaultValue="apple" aria-label="과일 선택">
          <RadioGroupItem value="apple" label="사과" tone="neutral" size="large" />
          <RadioGroupItem value="banana" label="바나나" tone="neutral" size="large" />
          <RadioGroupItem value="orange" label="오렌지" tone="neutral" size="large" />
        </RadioGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Weights

<ComponentExample name="react/radio-group/weights">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  export default function RadioGroupWeights() {
    return (
      <VStack p="x6">
        <RadioGroup defaultValue="regular" aria-label="글꼴 굵기 선택">
          <RadioGroupItem
            value="regular"
            label="Regular"
            weight="regular"
            tone="neutral"
            size="large"
          />
          <RadioGroupItem value="bold" label="Bold" weight="bold" tone="neutral" size="large" />
        </RadioGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Long Label

<ComponentExample name="react/radio-group/long-label">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  export default function RadioGroupLongLabel() {
    return (
      <VStack p="x6">
        <RadioGroup defaultValue="medium" aria-label="Long label options">
          <RadioGroupItem
            value="medium"
            size="medium"
            tone="neutral"
            label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
          />
          <RadioGroupItem
            value="large"
            size="large"
            tone="neutral"
            label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
          />
        </RadioGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/radio-group/disabled">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  export default function RadioGroupDisabled() {
    return (
      <VStack p="x6">
        <RadioGroup defaultValue="option1" aria-label="Options with disabled">
          <RadioGroupItem value="option1" label="Active option" tone="neutral" size="large" />
          <RadioGroupItem
            value="option2"
            label="Disabled option"
            tone="neutral"
            size="large"
            disabled
          />
          <RadioGroupItem value="option3" label="Another active option" tone="neutral" size="large" />
        </RadioGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Listening to Value Changes

`RadioGroup`의 `onValueChange`를 사용하여 라디오 버튼의 선택 값 변경을 감지할 수 있습니다.

이벤트를 활용해야 하는 경우 `RadioGroupItem`의 `inputProps`를 통해 내부 `<input>` 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.

<ComponentExample name="react/radio-group/value-changes">
  ```tsx
  import { VStack, Text } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";
  import { useState } from "react";

  export default function RadioGroupValueChanges() {
    const [count, setCount] = useState(0);
    const [lastValue, setLastValue] = useState<string | null>(null);

    return (
      <VStack gap="x4" align="center" width="full" p="x6">
        <RadioGroup
          defaultValue="apple"
          aria-label="Fruit selection"
          onValueChange={(value) => {
            setCount((prev) => prev + 1);
            setLastValue(value);
          }}
        >
          <RadioGroupItem value="apple" label="Apple" tone="neutral" size="large" />
          <RadioGroupItem value="banana" label="Banana" tone="neutral" size="large" />
          <RadioGroupItem value="orange" label="Orange" tone="neutral" size="large" />
        </RadioGroup>
        <Text>
          onValueChange called: {count} times, last value: {lastValue ?? "-"}
        </Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### React Hook Form

<ComponentExample name="react/radio-group/react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  const POSSIBLE_COLORS = ["red", "blue", "green"] as const;

  interface FormValues {
    color: (typeof POSSIBLE_COLORS)[number];
  }

  export default function RadioGroupReactHookForm() {
    const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
      defaultValues: {
        color: "blue",
      },
    });
    const { field } = useController({ name: "color", control });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack p="x6" as="form" onSubmit={handleSubmit(onValid)}>
        <VStack gap="x3">
          <RadioGroup
            value={field.value}
            onValueChange={(value) => setValue("color", value as FormValues["color"])}
            aria-label="Color selection"
          >
            {POSSIBLE_COLORS.map((color) => (
              <RadioGroupItem
                key={color}
                value={color}
                label={color.charAt(0).toUpperCase() + color.slice(1)}
                tone="neutral"
                size="large"
              />
            ))}
          </RadioGroup>

          <HStack gap="x3">
            <ActionButton type="submit" variant="neutralSolid">
              Submit
            </ActionButton>
            <ActionButton variant="neutralWeak" onClick={onReset}>
              Reset
            </ActionButton>
          </HStack>
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Using `Radiomark`

`Radiomark`는 독립적인 라디오 마크 컴포넌트로, Radio Group Primitive 컴포넌트와 조합하여 커스텀 레이아웃을 위해 사용할 수 있습니다.

<ComponentExample name="react/radio-group/radiomark">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { Radiomark } from "seed-design/ui/radio-group";
  import { RadioGroup } from "@seed-design/react/primitive";

  function CustomRadioGroupItem({ children, ...props }: RadioGroup.ItemProps) {
    return (
      <VStack asChild gap="x2" align="center">
        <RadioGroup.Item {...props}>
          <Radiomark tone="neutral" />
          <RadioGroup.ItemHiddenInput />
          {children}
        </RadioGroup.Item>
      </VStack>
    );
  }

  export default function RadioGroupRadiomark() {
    return (
      <VStack p="x6">
        <RadioGroup.Root defaultValue="medium" aria-label="Weight selection">
          <HStack gap="x6">
            <CustomRadioGroupItem value="regular">
              <Text textStyle="t7Regular">regular</Text>
            </CustomRadioGroupItem>
            <CustomRadioGroupItem value="medium">
              <Text textStyle="t7Medium">medium</Text>
            </CustomRadioGroupItem>
            <CustomRadioGroupItem value="bold">
              <Text textStyle="t7Bold">bold</Text>
            </CustomRadioGroupItem>
          </HStack>
        </RadioGroup.Root>
      </VStack>
    );
  }
  ```
</ComponentExample>

### RadioGroupField Integration

`label`, `description`, `errorMessage` 등의 RadioGroupField 관련 prop을 사용할 수 있습니다.

<ComponentExample name="react/radio-group/radio-group-field">
  ```tsx
  import { ActionButton, HStack, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  export default function RadioGroupRadioGroupField() {
    const [firstErrorMessage, setFirstErrorMessage] = useState<string | undefined>();
    const [secondErrorMessage, setSecondErrorMessage] = useState<string | undefined>();

    const handleFirstSubmit = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();

      const formData = new FormData(e.currentTarget);
      const contact = formData.get("contact");

      if (contact === "email") {
        setFirstErrorMessage("이메일은 선택할 수 없습니다.");

        return;
      }

      setFirstErrorMessage(undefined);

      alert(JSON.stringify({ contact }, null, 2));
    };

    const handleSecondSubmit = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();

      const formData = new FormData(e.currentTarget);
      const option = formData.get("option");

      if (option === "option1") {
        setSecondErrorMessage("옵션 1은 선택할 수 없습니다.");

        return;
      }

      setSecondErrorMessage(undefined);

      alert(JSON.stringify({ option }, null, 2));
    };

    return (
      <HStack width="full" gap="x8" align="flex-start" p="x6">
        <VStack asChild gap="spacingY.componentDefault" style={{ flex: 1 }}>
          <form onSubmit={handleFirstSubmit}>
            <RadioGroup
              label="선호하는 연락 방법"
              indicator="필수"
              description="이메일을 선택하고 제출해보세요."
              name="contact"
              defaultValue="email"
              invalid={!!firstErrorMessage}
              errorMessage={firstErrorMessage}
            >
              <RadioGroupItem value="email" label="이메일" tone="neutral" size="large" />
              <RadioGroupItem value="phone" label="전화" tone="neutral" size="large" />
              <RadioGroupItem value="sms" label="문자" tone="neutral" size="large" />
            </RadioGroup>
            <ActionButton type="submit" variant="neutralSolid">
              제출
            </ActionButton>
          </form>
        </VStack>

        <VStack asChild gap="spacingY.componentDefault" style={{ flex: 1 }}>
          <form onSubmit={handleSecondSubmit}>
            <RadioGroup
              label="필수 선택"
              labelWeight="bold"
              showRequiredIndicator
              description="옵션 1을 선택하고 제출해보세요."
              name="option"
              defaultValue="option1"
              invalid={!!secondErrorMessage}
              errorMessage={secondErrorMessage}
            >
              <RadioGroupItem value="option1" label="옵션 1" tone="neutral" size="large" />
              <RadioGroupItem value="option2" label="옵션 2" tone="neutral" size="large" disabled />
              <RadioGroupItem value="option3" label="옵션 3" tone="neutral" size="large" />
            </RadioGroup>
            <ActionButton type="submit" variant="neutralSolid">
              제출
            </ActionButton>
          </form>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>


---

file: components/reaction-button.mdx

# Reaction Button

사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트입니다. 좋아요, 관심있어요 등의 감정적 피드백을 간편하게 제공할 때 사용됩니다.



<ComponentExample name="react/reaction-button/preview">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Count, PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonPreview() {
    return (
      <ReactionButton>
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        도움돼요
        <Count>1</Count>
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:reaction-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:reaction-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:reaction-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:reaction-button
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="reaction-button" />

## Props

<TypeTable
  type={{
    size: {
        "type": "\"xsmall\" | \"small\" | undefined",
        "default": "\"small\"",
        "required": false
    },

    loading: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    pressed: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultPressed: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onPressedChange: {
        "type": "((pressed: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Small

<ComponentExample name="react/reaction-button/small">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Count, PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonSmall() {
    return (
      <ReactionButton size="small">
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        도움돼요
        <Count>1</Count>
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

### Xsmall

<ComponentExample name="react/reaction-button/xsmall">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Count, PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonXsmall() {
    return (
      <ReactionButton size="xsmall">
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        도움돼요
        <Count>1</Count>
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/reaction-button/disabled">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonDisabled() {
    return (
      <ReactionButton disabled>
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        비활성
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="react/reaction-button/loading">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { useState } from "react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonLoading() {
    const [pressed, setPressed] = useState(false);
    const [loading, setLoading] = useState(false);

    function handleToggle() {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
        setPressed((prev) => !prev);
      }, 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ReactionButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        시간이 걸리는 토글
      </ReactionButton>
    );
  }
  ```
</ComponentExample>


---

file: components/result-section.mdx

# Result Section

데이터 로딩 결과, 사용자의 액션 완료 여부 등 사용자에 액션에 대한 결과를 제공하는 템플릿입니다. 주로 전체 화면이나 특정 영역을 차지하여 다음 액션을 유도하거나 현재 상황을 안내하는 역할을 합니다.



<ComponentExample name="react/result-section/preview">
  ```tsx
  import { IconDiamond } from "@karrotmarket/react-multicolor-icon";
  import { VStack, Icon, Box } from "@seed-design/react";
  import { ResultSection } from "seed-design/ui/result-section";

  export default function ResultSectionPreview() {
    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
        <ResultSection
          asset={
            <Box pb="x4">
              <Icon svg={<IconDiamond />} size="x10" />
            </Box>
          }
          title="결과 타이틀"
          description="부가 설명을 적어주세요"
          primaryActionProps={{
            children: "Primary Action",
            onClick: () => window.alert("Primary Action Clicked"),
          }}
          secondaryActionProps={{
            children: "Secondary Action",
            onClick: () => window.alert("Secondary Action Clicked"),
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:result-section
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:result-section
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:result-section
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:result-section
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="result-section" />

## Props

<TypeTable
  type={{
    size: {
        "type": "\"large\" | \"medium\" | undefined",
        "default": "\"large\"",
        "required": false
    },

    asset: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    title: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    primaryActionProps: {
        "type": "ActionButtonProps | undefined",
        "default": undefined,
        "required": false
    },

    secondaryActionProps: {
        "type": "ActionButtonProps | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Sizes

#### Large

<ComponentExample name="react/result-section/large">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ResultSection } from "seed-design/ui/result-section";

  export default function ResultSectionLarge() {
    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
        <ResultSection
          size="large"
          title="cupidatat ad consequat"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          primaryActionProps={{
            children: "Primary Action",
          }}
          secondaryActionProps={{
            children: "Secondary Action",
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Medium

<ComponentExample name="react/result-section/medium">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ResultSection } from "seed-design/ui/result-section";

  export default function ResultSectionMedium() {
    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
        <ResultSection
          size="medium"
          title="cupidatat ad consequat"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          primaryActionProps={{
            children: "Primary Action",
          }}
          secondaryActionProps={{
            children: "Secondary Action",
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### With CTA & Progress Circle

<StackflowExample names={["react/result-section/cta-progress-circle"]}>
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { ProgressCircle } from "seed-design/ui/progress-circle";
  import { ResultSection } from "seed-design/ui/result-section";
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Box, Flex, Icon, VStack } from "@seed-design/react";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { useEffect, useState, type ComponentProps } from "react";

  declare module "@stackflow/config" {
    interface Register {
      "react/result-section/cta-progress-circle": {};
    }
  }

  type RefundStatus = "in-progress" | "failed";

  const resultSectionProperties = {
    "in-progress": {
      title: "환불을 요청하고 있어요",
      description: "잠시만 기다려주세요",
      asset: (
        <Box pb="x4">
          <ProgressCircle size="40" />
        </Box>
      ),
    },
    failed: {
      title: "다시 시도해주세요",
      description: "환불 요청에 실패했어요",
      asset: (
        <Box pb="x4">
          <Icon svg={<IconExclamationmarkCircleFill />} size="x10" color="fg.critical" />
        </Box>
      ),
    },
  } satisfies Record<RefundStatus, ComponentProps<typeof ResultSection>>;

  const ResultSectionStackflow: ActivityComponentType<
    "react/result-section/cta-progress-circle"
  > = () => {
    const [refundStatus, setRefundStatus] = useState<RefundStatus>("in-progress");

    useEffect(() => {
      const timer = setTimeout(() => setRefundStatus("failed"), 3000);

      return () => clearTimeout(timer);
    }, []);

    return (
      <AppScreen>
        <AppBar>
          <AppBarMain title="환불 요청" />
        </AppBar>
        <AppScreenContent>
          <VStack grow gap="x4" height="full" pb="safeArea">
            <ResultSection {...resultSectionProperties[refundStatus]} />
            <Flex p="x4" width="full" px="spacingX.globalGutter" pt="x3" pb="x2">
              <ActionButton
                flexGrow
                size="large"
                variant="neutralSolid"
                disabled={refundStatus === "in-progress"}
                loading={refundStatus === "in-progress"}
                onClick={() => {
                  setRefundStatus("in-progress");

                  setTimeout(() => setRefundStatus("failed"), 3000);
                }}
              >
                다시 시도
              </ActionButton>
            </Flex>
          </VStack>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ResultSectionStackflow;
  ```
</StackflowExample>

### Success Example

Result Section에서 Lottie 애니메이션을 사용하여 성공 상태를 표현하는 예시입니다.
다크모드와 라이트모드에서의 Lottie가 다르게 제공됩니다.

테스트 해보기 <ThemeToggle />

useTheme 훅의 코드는 [클라이언트에서 현재 테마 정보를 감지](/react/getting-started/styling/theming#클라이언트에서-현재-테마-정보-감지하기) 문서를 참고해주세요.

<ComponentExample name="react/result-section/success-with-lottie">
  ```tsx
  import dynamic from "next/dynamic";
  import { VStack, Box } from "@seed-design/react";
  import { ResultSection } from "seed-design/ui/result-section";
  import { useTheme } from "@/hooks/useTheme";

  const Player = dynamic(() => import("@lottiefiles/react-lottie-player").then((mod) => mod.Player), {
    ssr: false,
  });

  const LOTTIE_URLS = {
    light:
      "https://asset-town.krrt.io/production/motion/bd9f3c71-5b81-40b0-8eea-eeebd668edae/c17fa891bb007b9e4e6b281e483b5491cb905703.json",
    dark: "https://asset-town.krrt.io/production/motion/19bf4654-5286-4def-a651-c674a20ce1ee/89c9e404edc356cf143dab80b627fde01ed8a8fb.json",
  };

  export default function ResultSectionSuccessWithLottie() {
    const { userColorScheme } = useTheme();
    const lottieUrl = LOTTIE_URLS[userColorScheme];

    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
        <ResultSection
          asset={
            <Box pb="x4">
              <Player
                src={lottieUrl}
                autoplay
                loop={false}
                keepLastFrame
                style={{ width: 70, height: 70 }}
              />
            </Box>
          }
          title="성공했어요"
          description="요청이 성공적으로 완료되었습니다"
          primaryActionProps={{
            children: "확인",
            onClick: () => window.alert("확인 클릭"),
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/scroll-fog.mdx

# Scroll Fog

스크롤 가능한 영역에서 사용자에게 추가 콘텐츠가 있음을 시각적으로 알려주는 힌트 역할을 합니다.



<ComponentExample name="react/scroll-fog/preview">
  ```tsx
  import { Box, ScrollFog, VStack } from "@seed-design/react";

  export default function ScrollFogPreview() {
    return (
      <div
        style={{
          maxHeight: "200px",
          width: "300px",
          border: "1px solid var(--seed-color-stroke-neutral-weak)",
          borderRadius: "8px",
        }}
      >
        <ScrollFog placement={["top", "bottom"]}>
          <VStack gap="x4" px="x4" py="20px" width="full">
            {Array.from({ length: 20 }, (_, i) => (
              <Box key={i} bg="gray" px="x4" py="x3" borderRadius="r2">
                {i + 1}
              </Box>
            ))}
          </VStack>
        </ScrollFog>
      </div>
    );
  }
  ```
</ComponentExample>

해당 Scroll Fog 컴포넌트는 [Chakra ScrollArea](https://chakra-ui.com/docs/components/scroll-area),
[Radix ScrollArea](https://www.radix-ui.com/primitives/docs/components/scroll-area),
[Base UI ScrollArea](https://base-ui.com/react/components/scroll-area) 보다는 더 간단한 스크롤 힌트만을 위한 컴포넌트입니다.
이후 스크롤바에 대한 기능이 추가적으로 필요하다면 확장될 수 있습니다.

## Usage

```tsx
import { ScrollFog } from "@seed-design/react";
```

```tsx
<div style={{ maxHeight: "300px" }}>
  <ScrollFog>
    {/* 스크롤 가능한 콘텐츠 */}
    <div style={{ padding: "20px 0" }}>Content</div>
  </ScrollFog>
</div>
```

## Props

### Scroll Fog

<TypeTable
  type={{
    placement: {
        "type": "ScrollPlacement[] | undefined",
        "default": "[\"top\", \"bottom\"]",
        "required": false,
        description: <><p>{"Placement of fog effect"}</p></>
    },

    size: {
        "type": "number | undefined",
        "default": "20",
        "required": false,
        description: <><p>{"Size of the fog effect in pixels"}</p></>
    },

    sizes: {
        "type": "SizesConfig | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Size of the fog effect for each direction in pixels"}</p></>
    },

    hideScrollBar: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    }
}}
/>

## Examples

### Padding

ScrollFog는 항상 fog 효과를 표시하므로, 지정된 방향에 충분한 padding이 필요합니다.

* **최소 padding**: 20px을 유지해야 합니다.
* **화면 전체 차지하는 세로 스크롤**: 하단 80px, 상단 20px padding 권장
* **가로 스크롤**: 20px 좌우 padding 권장

```tsx
// 상하 스크롤 - 상하 padding 필요
<ScrollFog placement={["top", "bottom"]}>
  <div style={{ padding: "20px 0 80px 0" }}>Content</div>
</ScrollFog>

// 좌우 스크롤 - 좌우 padding 필요
<ScrollFog placement={["left", "right"]}>
  <div style={{ padding: "0 20px" }}>Content</div>
</ScrollFog>
```

* [Bottom Sheet - 하단 80px, 상단 20px padding](/react/components/bottom-sheet#with-scroll-fog)
* [Chip Tabs - 20px 좌우 padding](/react/components/chip-tabs#with-scroll-fog)

### Horizontal Scroll

가로 스크롤이 필요한 경우 `placement={["left", "right"]}`를 사용하여 좌우 fog 효과를 적용할 수 있습니다.
좌우 20px의 padding을 제공하여 컨텐츠가 잘리지 않도록 해야 합니다.

<ComponentExample name="react/scroll-fog/horizontal">
  ```tsx
  import { HStack, ScrollFog } from "@seed-design/react";

  export default function ScrollFogHorizontal() {
    return (
      <div
        style={{
          border: "1px solid var(--seed-color-stroke-neutral-weak)",
          borderRadius: "8px",
          width: "300px",
        }}
      >
        <ScrollFog placement={["left", "right"]}>
          <HStack gap="x3" px="20px" py="x4" style={{ width: "max-content" }}>
            {Array.from({ length: 15 }, (_, i) => (
              <div
                key={i}
                style={{
                  minWidth: "120px",
                  padding: "20px",
                  backgroundColor: "gray",
                  borderRadius: "4px",
                  textAlign: "center",
                }}
              >
                {i + 1}
              </div>
            ))}
          </HStack>
        </ScrollFog>
      </div>
    );
  }
  ```
</ComponentExample>

### Size

`size` 속성을 이용해 스크롤 효과의 크기를 조절할 수 있습니다. `sizes` 속성을 이용해 각 방향별 크기를 조절할 수 있습니다.

<ComponentExample name="react/scroll-fog/size">
  ```tsx
  import { ScrollFog } from "@seed-design/react";

  export default function ScrollFogSize() {
    return (
      <div
        style={{
          maxWidth: "400px",
          maxHeight: "300px",
          border: "1px solid var(--seed-color-stroke-neutral-weak)",
          borderRadius: "8px",
        }}
      >
        <ScrollFog size={40} placement={["top", "bottom", "left", "right"]}>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(10, 100px)",
              gap: "12px",
              padding: "16px",
            }}
          >
            {Array.from({ length: 100 }, (_, i) => (
              <div
                key={i}
                style={{
                  width: "100px",
                  height: "100px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "gray",
                  borderRadius: "4px",
                  fontSize: "14px",
                }}
              >
                {i + 1}
              </div>
            ))}
          </div>
        </ScrollFog>
      </div>
    );
  }
  ```
</ComponentExample>

<ComponentExample name="react/scroll-fog/sizes">
  ```tsx
  import { ScrollFog } from "@seed-design/react";

  export default function ScrollFogSize() {
    return (
      <div
        style={{
          maxWidth: "400px",
          maxHeight: "300px",
          border: "1px solid var(--seed-color-stroke-neutral-weak)",
          borderRadius: "8px",
        }}
      >
        <ScrollFog
          sizes={{
            top: 100,
            bottom: 10,
            left: 50,
            right: 50,
          }}
          placement={["top", "bottom", "left", "right"]}
        >
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(10, 100px)",
              gap: "12px",
              padding: "16px",
            }}
          >
            {Array.from({ length: 100 }, (_, i) => (
              <div
                key={i}
                style={{
                  width: "100px",
                  height: "100px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "gray",
                  borderRadius: "4px",
                  fontSize: "14px",
                }}
              >
                {i + 1}
              </div>
            ))}
          </div>
        </ScrollFog>
      </div>
    );
  }
  ```
</ComponentExample>

### All Directions

2D 스크롤이 필요한 경우 `placement={["top", "bottom", "left", "right"]}`를 사용하여 모든 방향에 fog 효과를 적용할 수 있습니다.

<ComponentExample name="react/scroll-fog/all-directions">
  ```tsx
  import { ScrollFog } from "@seed-design/react";

  export default function ScrollFogAllDirections() {
    return (
      <div
        style={{
          maxWidth: "400px",
          maxHeight: "300px",
          border: "1px solid var(--seed-color-stroke-neutral-weak)",
          borderRadius: "8px",
        }}
      >
        <ScrollFog placement={["top", "bottom", "left", "right"]}>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(10, 100px)",
              gap: "12px",
              padding: "20px",
            }}
          >
            {Array.from({ length: 100 }, (_, i) => (
              <div
                key={i}
                style={{
                  width: "100px",
                  height: "100px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "gray",
                  borderRadius: "4px",
                  fontSize: "14px",
                }}
              >
                {i + 1}
              </div>
            ))}
          </div>
        </ScrollFog>
      </div>
    );
  }
  ```
</ComponentExample>

### Hide Scrollbar

`hideScrollBar` 속성을 이용해 스크롤바를 숨길 수 있습니다.

<ComponentExample name="react/scroll-fog/hide-scrollbar">
  ```tsx
  import { ScrollFog } from "@seed-design/react";

  export default function ScrollFogHideScrollbar() {
    return (
      <div
        style={{
          maxWidth: "400px",
          maxHeight: "300px",
          border: "1px solid var(--seed-color-stroke-neutral-weak)",
          borderRadius: "8px",
        }}
      >
        <ScrollFog hideScrollBar placement={["top", "bottom", "left", "right"]}>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(10, 100px)",
              gap: "12px",
              padding: "20px",
            }}
          >
            {Array.from({ length: 100 }, (_, i) => (
              <div
                key={i}
                style={{
                  width: "100px",
                  height: "100px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "gray",
                  borderRadius: "4px",
                  fontSize: "14px",
                }}
              >
                {i + 1}
              </div>
            ))}
          </div>
        </ScrollFog>
      </div>
    );
  }
  ```
</ComponentExample>


---

file: components/segmented-control.mdx

# Segmented Control

여러 옵션 중 하나를 선택하여 관련 콘텐츠를 즉시 필터링하거나 전환할 때 사용하는 컴포넌트입니다.



<ComponentExample name="react/segmented-control/preview">
  ```tsx
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlPreview() {
    return (
      <SegmentedControl defaultValue="Hot" aria-label="Sort by">
        <SegmentedControlItem value="Hot">Hot</SegmentedControlItem>
        <SegmentedControlItem value="New">New</SegmentedControlItem>
      </SegmentedControl>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:segmented-control
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:segmented-control
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:segmented-control
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:segmented-control
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="segmented-control" />

## Props

### `SegmentedControl`

<Callout type="info">
  `value`와 `defaultValue` 중 적어도 하나를 제공해야 합니다.
</Callout>

<TypeTable
  type={{
    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    form: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((value: string) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `SegmentedControlItem`

<TypeTable
  type={{
    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    notification: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Disabled

<ComponentExample name="react/segmented-control/disabled">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlPreview() {
    return (
      <VStack align="center" gap="spacingY.componentDefault">
        <SegmentedControl defaultValue="Hot" disabled aria-label="Sort by">
          <SegmentedControlItem value="Hot">Hot</SegmentedControlItem>
          <SegmentedControlItem value="New">New</SegmentedControlItem>
        </SegmentedControl>
        <SegmentedControl defaultValue="Marinara" aria-label="Pasta">
          <SegmentedControlItem value="Marinara">Marinara</SegmentedControlItem>
          <SegmentedControlItem value="Alfredo" disabled>
            Alfredo
          </SegmentedControlItem>
          <SegmentedControlItem value="Pesto" disabled>
            Pesto
          </SegmentedControlItem>
          <SegmentedControlItem value="Carbonara">Carbonara</SegmentedControlItem>
          <SegmentedControlItem value="Bolognese">Bolognese</SegmentedControlItem>
        </SegmentedControl>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Notification

<ComponentExample name="react/segmented-control/notification">
  ```tsx
  import { ActionButton, VStack } from "@seed-design/react";
  import { useState } from "react";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlNotification() {
    const [sortBy, setSortBy] = useState("monthly");
    const [hasSeenAnnual, setHasSeenAnnual] = useState(false);

    return (
      <VStack align="center" gap="spacingY.componentDefault">
        <SegmentedControl
          aria-label="Billing Method"
          value={sortBy}
          onValueChange={(value) => {
            setSortBy(value);

            if (value === "annual") setHasSeenAnnual(true);
          }}
        >
          <SegmentedControlItem value="monthly">Monthly</SegmentedControlItem>
          <SegmentedControlItem value="annual" notification={!hasSeenAnnual}>
            Annual
          </SegmentedControlItem>
          <SegmentedControlItem value="enterprise">Enterprise Custom</SegmentedControlItem>
        </SegmentedControl>
        <ActionButton
          size="xsmall"
          variant="neutralSolid"
          disabled={!hasSeenAnnual}
          onClick={() => setHasSeenAnnual(false)}
        >
          Reset Notification
        </ActionButton>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Long Label

<ComponentExample name="react/segmented-control/long-label">
  ```tsx
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlLongLabel() {
    return (
      <SegmentedControl defaultValue="price" aria-label="정렬 기준">
        <SegmentedControlItem value="price">가격 높은 순</SegmentedControlItem>
        <SegmentedControlItem value="discount">할인율 높은 순</SegmentedControlItem>
        <SegmentedControlItem value="popularity">인기 많은 순</SegmentedControlItem>
      </SegmentedControl>
    );
  }
  ```
</ComponentExample>

### Fixed Width

`SegmentedControl`의 `style` prop에 `width`를 제공해서 직접 너비를 설정할 수 있습니다.

<ComponentExample name="react/segmented-control/fixed-width">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlFixedWidth() {
    return (
      <VStack align="center" gap="spacingY.componentDefault">
        <SegmentedControl defaultValue="new" style={{ width: "500px" }} aria-label="Sort by">
          <SegmentedControlItem value="new">New</SegmentedControlItem>
          <SegmentedControlItem value="hot">Hot</SegmentedControlItem>
        </SegmentedControl>
        <SegmentedControl defaultValue="oneway" style={{ width: "400px" }} aria-label="Trip Type">
          <SegmentedControlItem value="oneway">One Way Trip</SegmentedControlItem>
          <SegmentedControlItem notification value="round">
            Round Trip
          </SegmentedControlItem>
          <SegmentedControlItem notification value="multi">
            Multi-City Journey
          </SegmentedControlItem>
        </SegmentedControl>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Listening to Value Changes

`SegmentedControl`의 `onValueChange` prop을 사용하여 선택 값 변경을 감지할 수 있습니다.

이벤트를 활용해야 하는 경우 `SegmentedControlItem`의 `inputProps`를 통해 내부 `<input>` 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.

<ComponentExample name="react/segmented-control/value-changes">
  ```tsx
  import { VStack, Text } from "@seed-design/react";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
  import { useState } from "react";

  export default function SegmentedControlValueChanges() {
    const [count, setCount] = useState(0);
    const [lastValue, setLastValue] = useState<string | null>(null);

    return (
      <VStack gap="x4" align="center">
        <SegmentedControl
          defaultValue="hot"
          aria-label="Sort by"
          onValueChange={(value) => {
            setCount((prev) => prev + 1);
            setLastValue(value);
          }}
        >
          <SegmentedControlItem value="hot">Hot</SegmentedControlItem>
          <SegmentedControlItem value="new">New</SegmentedControlItem>
        </SegmentedControl>
        <Text>
          onValueChange called: {count} times, last value: {lastValue ?? "-"}
        </Text>
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/select-box.mdx

# Select Box

명확한 테두리를 가진 컨테이너를 활용하여, 정의된 목록 중 하나 이상의 옵션을 선택하는 UI 요소입니다.



<ComponentExample name="react/select-box/preview">
  ```tsx
  import { HStack } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxPreview() {
    return (
      <HStack gap="x6" align="flex-start">
        <CheckSelectBoxGroup aria-label="Fruit">
          <CheckSelectBox label="Apple" defaultChecked suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox label="Mango" suffix={<CheckSelectBoxCheckmark />} />
        </CheckSelectBoxGroup>

        <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
          <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
          <RadioSelectBoxItem
            value="melon"
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem value="mango" label="Mango" suffix={<RadioSelectBoxRadiomark />} />
        </RadioSelectBoxRoot>
      </HStack>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:select-box
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:select-box
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:select-box
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:select-box
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="select-box" />

## Props

### Check Select Box

#### `CheckSelectBoxGroup`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    columns: {
        "type": "number | undefined",
        "default": "1",
        "required": false,
        description: <><p>{"Number of columns in the grid layout."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

#### `CheckSelectBox`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    footer: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    layout: {
        "type": "\"horizontal\" | \"vertical\" | undefined",
        "default": "\"horizontal\"",
        "required": false
    },

    footerVisibility: {
        "type": "\"when-selected\" | \"when-not-selected\" | \"always\" | undefined",
        "default": "\"when-selected\"",
        "required": false,
        description: <><p>{"Controls when the footer is visible."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    required: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    checked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultChecked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    indeterminate: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

#### `CheckSelectBoxCheckmark`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### Radio Select Box

#### `RadioSelectBoxRoot`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    columns: {
        "type": "number | undefined",
        "default": "1",
        "required": false,
        description: <><p>{"Number of columns in the grid layout."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    form: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    value: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    defaultValue: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    onValueChange: {
        "type": "((value: string) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

#### `RadioSelectBoxItem`

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    prefixIcon: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    suffix: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    footer: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    layout: {
        "type": "\"horizontal\" | \"vertical\" | undefined",
        "default": "\"horizontal\"",
        "required": false
    },

    value: {
        "type": "string",
        "default": undefined,
        "required": true
    },

    footerVisibility: {
        "type": "\"when-selected\" | \"when-not-selected\" | \"always\" | undefined",
        "default": "\"when-selected\"",
        "required": false,
        description: <><p>{"Controls when the footer is visible."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

#### `RadioSelectBoxRadiomark`

<TypeTable
  type={{
    tone: {
        "type": "\"neutral\" | \"brand\" | undefined",
        "default": "\"brand\"",
        "required": false
    },

    size: {
        "type": "\"large\" | \"medium\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### React Hook Form

<ComponentExample name="react/select-box/react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm, type Control } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

  type CheckFormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;

  interface RadioFormValues {
    fruit: (typeof POSSIBLE_FRUIT_VALUES)[number];
  }

  export default function SelectBoxReactHookForm() {
    // CheckSelectBox Form
    const checkForm = useForm<CheckFormValues>({
      defaultValues: { apple: false, melon: true, mango: false },
    });

    // RadioSelectBox Form
    const radioForm = useForm<RadioFormValues>({
      defaultValues: { fruit: "melon" },
    });
    const { field: radioField } = useController({ name: "fruit", control: radioForm.control });

    const onCheckValid = useCallback((data: CheckFormValues) => {
      window.alert(`CheckSelectBox:\n${JSON.stringify(data, null, 2)}`);
    }, []);

    const onRadioValid = useCallback((data: RadioFormValues) => {
      window.alert(`RadioSelectBox:\n${JSON.stringify(data, null, 2)}`);
    }, []);

    const onCheckReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        checkForm.reset();
      },
      [checkForm],
    );

    const onRadioReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        radioForm.reset();
      },
      [radioForm],
    );

    return (
      <HStack gap="x8" p="x4" width="full" align="flex-start">
        <VStack
          grow
          gap="x3"
          as="form"
          onSubmit={checkForm.handleSubmit(onCheckValid)}
          onReset={onCheckReset}
        >
          <CheckSelectBoxGroup aria-label="Fruit">
            {POSSIBLE_FRUIT_VALUES.map((name) => (
              <CheckSelectBoxItem key={name} name={name} control={checkForm.control} />
            ))}
          </CheckSelectBoxGroup>
          <HStack gap="x2">
            <ActionButton type="reset" variant="neutralWeak">
              초기화
            </ActionButton>
            <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
              제출
            </ActionButton>
          </HStack>
        </VStack>

        <VStack
          grow
          gap="x3"
          as="form"
          onSubmit={radioForm.handleSubmit(onRadioValid)}
          onReset={onRadioReset}
        >
          <RadioSelectBoxRoot aria-label="Fruit" {...radioField}>
            {POSSIBLE_FRUIT_VALUES.map((value) => (
              <RadioSelectBoxItem
                key={value}
                value={value}
                label={value}
                suffix={<RadioSelectBoxRadiomark />}
              />
            ))}
          </RadioSelectBoxRoot>
          <HStack gap="x2">
            <ActionButton type="reset" variant="neutralWeak">
              초기화
            </ActionButton>
            <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
              제출
            </ActionButton>
          </HStack>
        </VStack>
      </HStack>
    );
  }

  interface CheckSelectBoxItemProps {
    name: keyof CheckFormValues;
    control: Control<CheckFormValues>;
  }

  function CheckSelectBoxItem({ name, control }: CheckSelectBoxItemProps) {
    const {
      field: { value, ...restProps },
      fieldState: { invalid },
    } = useController({ name, control });

    return (
      <CheckSelectBox
        key={name}
        label={name}
        checked={value}
        inputProps={restProps}
        invalid={invalid}
        suffix={<CheckSelectBoxCheckmark />}
      />
    );
  }
  ```
</ComponentExample>

### Customizing Label

<ComponentExample name="react/select-box/customizing-label">
  ```tsx
  import { Badge, HStack } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxCustomizingLabel() {
    return (
      <HStack gap="x8" align="flex-start" p="x4">
        <CheckSelectBoxGroup aria-label="Fruit">
          <CheckSelectBox label="Apple" defaultChecked suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            label={
              <>
                Melon
                <Badge tone="brand" variant="solid">
                  New
                </Badge>
              </>
            }
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox
            label="Mango"
            description="Aliqua ad aute eiusmod eiusmod nulla adipisicing proident ullamco in."
            suffix={<CheckSelectBoxCheckmark />}
          />
        </CheckSelectBoxGroup>

        <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
          <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
          <RadioSelectBoxItem
            value="melon"
            label={
              <>
                Melon
                <Badge tone="brand" variant="solid">
                  New
                </Badge>
              </>
            }
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="mango"
            label="Mango"
            description="Aliqua ad aute eiusmod eiusmod nulla adipisicing proident ullamco in."
            suffix={<RadioSelectBoxRadiomark />}
          />
        </RadioSelectBoxRoot>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Listening to Value Changes

`CheckSelectBox`는 `onCheckedChange`를 사용하여 체크박스의 선택 상태 변경을 감지할 수 있습니다.

`RadioSelectBoxRoot`는 `onValueChange`를 사용하여 라디오 버튼의 선택 값 변경을 감지할 수 있습니다.

<ComponentExample name="react/select-box/value-changes">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";
  import { useState } from "react";

  export default function SelectBoxValueChanges() {
    const [checkCount, setCheckCount] = useState(0);
    const [checkLastValue, setCheckLastValue] = useState<boolean | null>(null);

    const [radioCount, setRadioCount] = useState(0);
    const [radioLastValue, setRadioLastValue] = useState<string | null>(null);

    return (
      <HStack gap="x8" align="center" width="full" p="x4">
        <VStack gap="x4" align="center" style={{ flex: 1 }}>
          <CheckSelectBoxGroup aria-label="Fruit">
            <CheckSelectBox
              label="Apple"
              suffix={<CheckSelectBoxCheckmark />}
              onCheckedChange={(checked) => {
                setCheckCount((prev) => prev + 1);
                setCheckLastValue(checked);
              }}
            />
          </CheckSelectBoxGroup>
          <Text align="center">
            onCheckedChange called: {checkCount} times, last value: {`${checkLastValue ?? "-"}`}
          </Text>
        </VStack>

        <VStack gap="x4" align="center" style={{ flex: 1 }}>
          <RadioSelectBoxRoot
            defaultValue="apple"
            aria-label="Fruit"
            onValueChange={(value) => {
              setRadioCount((prev) => prev + 1);
              setRadioLastValue(value);
            }}
          >
            <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
            <RadioSelectBoxItem value="banana" label="Banana" suffix={<RadioSelectBoxRadiomark />} />
          </RadioSelectBoxRoot>
          <Text align="center">
            onValueChange called: {radioCount} times, last value: {radioLastValue ?? "-"}
          </Text>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Grid Layout (Columns)

`columns` prop을 사용하여 여러 열로 배치할 수 있습니다. `columns`가 1보다 크면 하위 요소의 `layout`이 자동으로 `"vertical"`로 설정됩니다.

필요한 경우 `layout` prop을 직접 설정하여 개별 항목의 레이아웃을 오버라이드할 수 있습니다.

<ComponentExample name="react/select-box/columns">
  ```tsx
  import { IconDiamond, IconIcecreamcone } from "@karrotmarket/react-multicolor-icon";
  import { VStack } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxColumns() {
    return (
      <VStack gap="x8" p="x4">
        <CheckSelectBoxGroup columns={2} aria-label="Grid 레이아웃 예제">
          <CheckSelectBox
            prefixIcon={<IconIcecreamcone />}
            label="옵션 1"
            description="layout=vertical"
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox
            prefixIcon={<IconIcecreamcone />}
            label="옵션 2"
            description="layout=vertical"
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox
            prefixIcon={<IconIcecreamcone />}
            defaultChecked
            layout="horizontal"
            label="layout=horizontal"
            description="layout을 horizontal로 오버라이드"
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox
            prefixIcon={<IconIcecreamcone />}
            label="옵션 4"
            description="layout=vertical"
            suffix={<CheckSelectBoxCheckmark />}
          />
        </CheckSelectBoxGroup>

        <RadioSelectBoxRoot columns={3} defaultValue="option3" aria-label="Grid 레이아웃 예제">
          <RadioSelectBoxItem
            value="option1"
            prefixIcon={<IconDiamond />}
            label="옵션 1"
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="option2"
            prefixIcon={<IconDiamond />}
            label="옵션 2"
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="option3"
            prefixIcon={<IconDiamond />}
            label="layout=horizontal"
            description="layout을 horizontal로 오버라이드"
            layout="horizontal"
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="option4"
            prefixIcon={<IconDiamond />}
            label="옵션 4"
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="option5"
            prefixIcon={<IconDiamond />}
            label="옵션 5"
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="option6"
            prefixIcon={<IconDiamond />}
            label="옵션 6"
            suffix={<RadioSelectBoxRadiomark />}
          />
        </RadioSelectBoxRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### With Suffix

`suffix` prop을 사용하여 체크마크, 라디오 마크, 또는 커스텀 요소를 표시할 수 있습니다. `CheckSelectBoxCheckmark`와 `RadioSelectBoxRadiomark`를 사용하거나, 아이콘이나 텍스트 등 자유로운 요소를 전달할 수 있습니다.

<ComponentExample name="react/select-box/with-suffix">
  ```tsx
  import { IconPersonCircleLine } from "@karrotmarket/react-monochrome-icon";
  import { Text, HStack, Box } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxWithSuffix() {
    return (
      <HStack gap="x8">
        <CheckSelectBoxGroup aria-label="Suffix 예제">
          <CheckSelectBox label="체크마크" suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            label="텍스트 suffix"
            suffix={
              <Box flexShrink={0}>
                <Text textStyle="t4Medium" color="fg.neutral">
                  +1,000원
                </Text>
              </Box>
            }
          />
          <CheckSelectBox
            label="suffix 없음"
            description="Commodo aliquip fugiat aute irure."
            prefixIcon={<IconPersonCircleLine />}
          />
        </CheckSelectBoxGroup>
        <RadioSelectBoxRoot defaultValue="radiomark" aria-label="Radiomark 예제">
          <RadioSelectBoxItem
            value="radiomark"
            label="라디오 마크"
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem
            value="text"
            label="텍스트 suffix"
            description="Commodo aliquip fugiat aute irure."
            suffix={
              <Box flexShrink={0}>
                <Text textStyle="t4Medium" color="fg.neutral">
                  +1,000원
                </Text>
              </Box>
            }
          />
          <RadioSelectBoxItem
            value="none"
            label="suffix 없음"
            suffix={undefined}
            prefixIcon={<IconPersonCircleLine />}
          />
        </RadioSelectBoxRoot>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Collapsible Footer

`footer` prop으로 추가 콘텐츠를 표시할 수 있습니다. `footerVisibility` prop으로 footer의 표시 조건을 제어할 수 있습니다.

* `"when-selected"` (기본값): 항목이 선택되었을 때만 표시
* `"when-not-selected"`: 항목이 선택되지 않았을 때만 표시
* `"always"`: 항상 표시

<ComponentExample name="react/select-box/collapsible-footer">
  ```tsx
  import { Box, HStack, Text } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxCollapsibleFooter() {
    return (
      <HStack gap="x8" p="x4" align="flex-start" height="400px">
        <CheckSelectBoxGroup aria-label="Footer 예제">
          <CheckSelectBox
            label="선택 시에만 표시 (기본값)"
            description="footerVisibility='when-selected'"
            suffix={<CheckSelectBoxCheckmark />}
            footer={
              <Box px="x5" pb="x5">
                <Text textStyle="t3Medium">선택되었을 때만 보입니다.</Text>
              </Box>
            }
          />
          <CheckSelectBox
            label="항상 표시"
            description="footerVisibility='always'"
            suffix={<CheckSelectBoxCheckmark />}
            footerVisibility="always"
            footer={
              <Box px="x5" pb="x5">
                <Text textStyle="t3Medium">항상 보입니다.</Text>
              </Box>
            }
          />
          <CheckSelectBox
            label="미선택 시에만 표시"
            description="footerVisibility='when-not-selected'"
            suffix={<CheckSelectBoxCheckmark />}
            footerVisibility="when-not-selected"
            footer={
              <Box px="x5" pb="x5">
                <Text textStyle="t3Medium">선택되지 않았을 때만 보입니다.</Text>
              </Box>
            }
          />
        </CheckSelectBoxGroup>

        <RadioSelectBoxRoot defaultValue="when-selected" aria-label="Footer 예제">
          <RadioSelectBoxItem
            value="when-selected"
            label="선택 시에만 표시 (기본값)"
            description="footerVisibility='when-selected'"
            suffix={<RadioSelectBoxRadiomark />}
            footer={
              <Box px="x5" pb="x5">
                <Text textStyle="t3Medium">선택되었을 때만 보입니다.</Text>
              </Box>
            }
          />
          <RadioSelectBoxItem
            value="always"
            label="항상 표시"
            description="footerVisibility='always'"
            suffix={<RadioSelectBoxRadiomark />}
            footerVisibility="always"
            footer={
              <Box px="x5" pb="x5">
                <Text textStyle="t3Medium">항상 보입니다.</Text>
              </Box>
            }
          />
          <RadioSelectBoxItem
            value="when-not-selected"
            label="미선택 시에만 표시"
            description="footerVisibility='when-not-selected'"
            suffix={<RadioSelectBoxRadiomark />}
            footerVisibility="when-not-selected"
            footer={
              <Box px="x5" pb="x5">
                <Text textStyle="t3Medium">선택되지 않았을 때만 보입니다.</Text>
              </Box>
            }
          />
        </RadioSelectBoxRoot>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Fieldset/RadioGroupField Integration

Fieldset/RadioGroupField 관련 prop을 사용할 수 있습니다.

* `label` 및 `labelWeight`
* `indicator` 및 `showRequiredIndicator`
* `description` 및 `errorMessage`
* `disabled`, `invalid`, `name`, `form`: `RadioSelectBoxRoot`에만 지원됩니다.

<ComponentExample name="react/select-box/fieldset">
  ```tsx
  import { ActionButton, HStack, VStack, Box, Text } from "@seed-design/react";
  import { useState } from "react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxFieldset() {
    const [checkErrors, setCheckErrors] = useState<Record<string, string | undefined>>({});
    const [radioErrorMessage, setRadioErrorMessage] = useState<string | undefined>();

    const handleCheckSubmit = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();

      const formData = new FormData(e.currentTarget);
      const fruits = formData.getAll("fruit");

      if (fruits.includes("apple")) {
        setCheckErrors({ apple: "Apple은 선택할 수 없습니다." });

        return;
      }

      setCheckErrors({});

      alert(JSON.stringify(fruits, null, 2));
    };

    const handleRadioSubmit = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();

      const formData = new FormData(e.currentTarget);
      const color = formData.get("color");

      if (color === "red") {
        setRadioErrorMessage("Red는 선택할 수 없습니다.");

        return;
      }

      setRadioErrorMessage(undefined);

      alert(JSON.stringify({ color }, null, 2));
    };

    return (
      <HStack width="full" gap="x8" p="x4" align="flex-start" height="400px">
        <VStack asChild gap="spacingY.componentDefault" style={{ flex: 1 }}>
          <form onSubmit={handleCheckSubmit}>
            <CheckSelectBoxGroup
              label="선호하는 과일을 선택하세요"
              indicator="선택"
              description="Apple을 선택하고 제출해보세요."
              errorMessage={Object.values(checkErrors).filter(Boolean).join(", ")}
            >
              <CheckSelectBox
                defaultChecked
                label="Apple"
                // formData를 위해 설정. controlled 사용 시 불필요
                inputProps={{ name: "fruit", value: "apple" }}
                invalid={!!checkErrors.apple}
                suffix={<CheckSelectBoxCheckmark />}
                footer={
                  <Box px="x5" pb="x4">
                    <Text textStyle="t4Medium">
                      Apple을 선택하고 제출하면 에러 메시지가 표시됩니다.
                    </Text>
                  </Box>
                }
              />
              <CheckSelectBox
                label="Melon"
                inputProps={{ name: "fruit", value: "melon" }}
                invalid={!!checkErrors.melon}
                suffix={<CheckSelectBoxCheckmark />}
              />
              <CheckSelectBox
                label="Mango"
                inputProps={{ name: "fruit", value: "mango" }}
                invalid={!!checkErrors.mango}
                suffix={<CheckSelectBoxCheckmark />}
              />
            </CheckSelectBoxGroup>
            <ActionButton type="submit" variant="neutralSolid">
              제출
            </ActionButton>
          </form>
        </VStack>

        <VStack asChild gap="spacingY.componentDefault" style={{ flex: 1 }}>
          <form onSubmit={handleRadioSubmit}>
            <RadioSelectBoxRoot
              label="선호하는 색상을 선택하세요"
              labelWeight="bold"
              showRequiredIndicator
              description="Red를 선택하고 제출해보세요."
              name="color"
              defaultValue="red"
              invalid={!!radioErrorMessage}
              errorMessage={radioErrorMessage}
            >
              <RadioSelectBoxItem
                value="red"
                label="Red"
                suffix={<RadioSelectBoxRadiomark />}
                footer={
                  <Box px="x5" pb="x4">
                    <Text textStyle="t4Medium">
                      Red를 선택하고 제출하면 에러 메시지가 표시됩니다.
                    </Text>
                  </Box>
                }
              />
              <RadioSelectBoxItem
                value="blue"
                label="Blue"
                suffix={<RadioSelectBoxRadiomark />}
                disabled
              />
              <RadioSelectBoxItem value="green" label="Green" suffix={<RadioSelectBoxRadiomark />} />
            </RadioSelectBoxRoot>
            <ActionButton type="submit" variant="neutralSolid">
              제출
            </ActionButton>
          </form>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>


---

file: components/skeleton.mdx

# Skeleton

콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.



<ComponentExample name="react/skeleton/preview">
  ```tsx
  import { Skeleton, VStack } from "@seed-design/react";

  export default function SkeletonPreview() {
    return (
      <VStack gap="x4" align="center">
        <Skeleton radius="full" width="x12" height="x12" />
        <VStack direction="column" gap="x2">
          <Skeleton radius="8" height="x4" width="250px" />
          <Skeleton radius="8" height="x4" width="250px" />
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Skeleton } from "@seed-design/react";
```

```tsx
<Skeleton />
```

## Props

<TypeTable
  type={{
    radius: {
        "type": "\"0\" | \"8\" | \"16\" | \"full\" | undefined",
        "default": "8",
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"magic\" | undefined",
        "default": "\"neutral\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    height: {
        "type": "\"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    },

    width: {
        "type": "\"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

## Examples

### Radius

<ComponentExample name="react/skeleton/radius">
  ```tsx
  import { Flex, Skeleton } from "@seed-design/react";

  export default function SkeletonRadius() {
    return (
      <Flex gap="x4" align="center">
        <Skeleton radius="0" width="x12" height="x12" />
        <Skeleton radius="8" width="x12" height="x12" />
        <Skeleton radius="16" width="x12" height="x12" />
        <Skeleton radius="full" width="x12" height="x12" />
      </Flex>
    );
  }
  ```
</ComponentExample>

### Tone

<ComponentExample name="react/skeleton/tone">
  ```tsx
  import { Box, Skeleton, VStack } from "@seed-design/react";

  export default function SkeletonTone() {
    return (
      <VStack gap="x4" alignItems="flex-start" width="full">
        <Skeleton tone="neutral" radius="16" width="full" height="x12" />
        <Skeleton tone="magic" radius="16" width="full" height="x12" />
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/slider.mdx

# Slider

지정된 범위 내에서 하나 또는 두 개의 값을 선택해 입력할 수 있는 컴포넌트입니다.



<ComponentExample name="react/slider/preview">
  ```tsx
  import { Slider } from "seed-design/ui/slider";

  export default function SliderPreview() {
    return <Slider min={0} max={100} defaultValues={[50]} getAriaLabel={() => "값"} />;
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:slider
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:slider
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:slider
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:slider
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="slider" />

## Props

<TypeTable
  type={{
    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    labelWeight: {
        "type": "\"medium\" | \"bold\" | undefined",
        "default": "\"medium\"",
        "required": false
    },

    indicator: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    description: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    errorMessage: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    showRequiredIndicator: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    markers: {
        "type": "(number | { value: number; label?: React.ReactNode; align?: SliderMarkerVariantProps[\"align\"]; })[] | undefined",
        "default": "[]",
        "required": false
    },

    ticks: {
        "type": "number[] | undefined",
        "default": "[]",
        "required": false
    },

    tickWeight: {
        "type": "\"thin\" | \"thick\" | undefined",
        "default": "\"thin\"",
        "required": false
    },

    hideRange: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    hideValueIndicator: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    fieldRef: {
        "type": "React.Ref<HTMLDivElement> | undefined",
        "default": undefined,
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    readOnly: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    name: {
        "type": "string | undefined",
        "default": undefined,
        "required": false
    },

    jumpMultiplier: {
        "type": "number | undefined",
        "default": "10",
        "required": false
    },

    getAriaValuetext: {
        "type": "((value: number) => string) | undefined",
        "default": undefined,
        "required": false
    },

    getAriaLabel: {
        "type": "((thumbIndex: number) => string) | undefined",
        "default": undefined,
        "required": false
    },

    getAriaLabelledby: {
        "type": "((thumbIndex: number) => string) | undefined",
        "default": undefined,
        "required": false
    },

    getValueIndicatorLabel: {
        "type": "((params: { value: number; thumbIndex: number; }) => React.ReactNode) | undefined",
        "default": "(params) => params.value",
        "required": false
    },

    valueIndicatorTrigger: {
        "type": "\"active\" | \"hover\" | undefined",
        "default": "\"active\"",
        "required": false
    },

    dragStartDelayInMilliseconds: {
        "type": "number | undefined",
        "default": "150",
        "required": false
    },

    min: {
        "type": "number",
        "default": undefined,
        "required": true
    },

    max: {
        "type": "number",
        "default": undefined,
        "required": true
    },

    step: {
        "type": "number | undefined",
        "default": "1",
        "required": false
    },

    allowedValues: {
        "type": "number[] | undefined",
        "default": "[]",
        "required": false,
        description: <><p>{"Values that the slider thumbs can snap to. If not provided, the slider will snap to every step."}</p></>
    },

    minStepsBetweenThumbs: {
        "type": "number | undefined",
        "default": "0",
        "required": false
    },

    values: {
        "type": "number[] | undefined",
        "default": undefined,
        "required": false
    },

    defaultValues: {
        "type": "number[] | undefined",
        "default": "[(min + max) / 2]",
        "required": false
    },

    onValuesChange: {
        "type": "((value: number[]) => void) | undefined",
        "default": undefined,
        "required": false
    },

    onValuesCommit: {
        "type": "((value: number[]) => void) | undefined",
        "default": undefined,
        "required": false
    },

    dir: {
        "type": "\"ltr\" | \"rtl\" | undefined",
        "default": "\"ltr\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Basic

`min`과 `max`를 설정하여 슬라이더의 값 범위를 지정합니다.

<ComponentExample name="react/slider/basic">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";

  export default function SliderBasic() {
    return (
      <VStack gap="spacingY.componentDefault" width="full">
        <Slider min={0} max={10} defaultValues={[5]} getAriaLabel={() => "값"} />
        <Slider min={0} max={1000} defaultValues={[600]} getAriaLabel={() => "값"} />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Steps

특정 간격으로만 값을 선택할 수 있도록 설정할 수 있습니다.

<ComponentExample name="react/slider/steps">
  ```tsx
  import { Slider } from "seed-design/ui/slider";
  import { useState } from "react";
  import { VStack, Text } from "@seed-design/react";

  export default function SliderSteps() {
    const [value, setValue] = useState([50]);

    return (
      <VStack gap="spacingY.componentDefault" width="full" align="center">
        <Slider
          min={0}
          max={100}
          step={10}
          values={value}
          onValuesChange={setValue}
          getAriaLabel={() => "값"}
        />
        <Text>{JSON.stringify(value)}</Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Allowed Values

`allowedValues` prop을 사용하여 슬라이더에서 선택할 수 있는 값을 제한할 수 있습니다. `allowedValues`가 지정된 경우 `step`과 `minStepsBetweenThumbs`은 무시됩니다.

<ComponentExample name="react/slider/allowed-values">
  ```tsx
  import { VStack, Text } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";
  import { useState } from "react";

  const ALLOWED_VALUES = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];

  export default function SliderAllowedValues() {
    const [values, setValues] = useState([ALLOWED_VALUES[0], ALLOWED_VALUES[2]]);

    return (
      <VStack gap="spacingY.componentDefault" width="full" align="center">
        <Slider
          min={0}
          max={30}
          values={values}
          onValuesChange={setValues}
          allowedValues={ALLOWED_VALUES}
          markers={ALLOWED_VALUES.map((value) => ({ label: value, value }))}
          getAriaLabel={() => "값"}
        />
        <Text>{JSON.stringify(values)}</Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### With Ticks

슬라이더 트랙에 눈금을 표시할 수 있습니다.

#### Thin

continuous하다고 느껴질 만큼 step이 충분히 작을 때 주로 사용합니다.

<ComponentExample name="react/slider/ticks-thin">
  ```tsx
  import { Slider } from "seed-design/ui/slider";

  export default function SliderTicksThin() {
    return (
      <Slider
        min={0}
        max={100}
        step={0.1}
        defaultValues={[50]}
        ticks={[10, 20, 30, 40, 50, 60, 70, 80, 90]}
        tickWeight="thin"
        getAriaLabel={() => "값"}
      />
    );
  }
  ```
</ComponentExample>

#### Thick

discrete하다고 느껴질 만큼 step이 충분히 클 때 또는 tick에만 thumb이 위치할 수 있을 때 주로 사용합니다.

<ComponentExample name="react/slider/ticks-thick">
  ```tsx
  import { Slider } from "seed-design/ui/slider";

  export default function SliderTicksThick() {
    return (
      <Slider
        min={0}
        max={100}
        step={10}
        defaultValues={[50]}
        ticks={[10, 20, 30, 40, 50, 60, 70, 80, 90]}
        tickWeight="thick"
        getAriaLabel={() => "값"}
      />
    );
  }
  ```
</ComponentExample>

### With Markers

슬라이더 아래에 마커를 표시할 수 있습니다.

<Callout type="warning" title="주의">
  스크린 리더는 marker를 읽지 않습니다. 특정 값을 선택했을 때 사용자에게 알려야 하는 경우 [`getAriaValuetext` prop](#getariavaluetext)을 사용하여 현재 선택된 값을 설명하는 문구를 함께 제공하세요.
</Callout>

<ComponentExample name="react/slider/markers">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";

  export default function SliderMarkers() {
    return (
      <VStack gap="spacingY.componentDefault" width="full">
        <Slider
          min={0}
          max={100}
          defaultValues={[50]}
          markers={[
            { value: 0, label: "0°C" },
            { value: 25, label: "25°C" },
            { value: 50, label: "50°C" },
            { value: 75, label: "75°C" },
            { value: 100, label: "100°C" },
          ]}
          getAriaValuetext={(value) => `${value}°C`}
          getValueIndicatorLabel={({ value }) => `${value}°C`}
          getAriaLabel={() => "온도"}
        />
        <Slider
          min={0}
          max={100}
          defaultValues={[30]}
          markers={[0, 20, 40, 60, 80, 100]}
          getAriaLabel={() => "값"}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Controlled

`values`와 `onValuesChange` props를 사용하여 슬라이더의 상태를 외부에서 제어합니다.

<ComponentExample name="react/slider/controlled">
  ```tsx
  import { VStack, HStack, Text } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";
  import { ActionButton } from "seed-design/ui/action-button";
  import { useState } from "react";

  const DEFAULT_VALUE = [50];

  export default function SliderControlled() {
    const [value, setValue] = useState(DEFAULT_VALUE);

    return (
      <VStack gap="spacingY.componentDefault" width="full" align="center">
        <Slider
          min={0}
          max={100}
          values={value}
          onValuesChange={setValue}
          getAriaLabel={() => "값"}
        />
        <Text>{JSON.stringify(value)}</Text>
        <HStack gap="spacingY.componentDefault">
          <ActionButton type="button" onClick={() => setValue([0])} variant="neutralWeak">
            Set Min
          </ActionButton>
          <ActionButton type="button" onClick={() => setValue(DEFAULT_VALUE)} variant="neutralWeak">
            Reset
          </ActionButton>
          <ActionButton type="button" onClick={() => setValue([100])} variant="neutralWeak">
            Set Max
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Listening to Value Changes

* `onValuesChange`
  * 슬라이더의 값이 변경될 때마다 호출됩니다. 이 prop을 사용하여 슬라이더의 값을 실시간으로 추적할 수 있습니다.
* `onValuesCommit`
  * 슬라이더의 값 변경이 완료되었을 때 호출됩니다. 사용자가 슬라이더 조작을 마치고 손을 뗄 때 값을 확정하는 데 유용합니다.

<ComponentExample name="react/slider/value-changes">
  ```tsx
  import { VStack, Text, HStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";
  import { useState } from "react";

  export default function SliderOnValuesCommit() {
    const [value, setValue] = useState([20]);
    const [committedValue, setCommittedValue] = useState([20]);

    return (
      <VStack gap="x4" width="full" align="center">
        <Slider
          min={0}
          max={100}
          values={value}
          onValuesChange={setValue}
          onValuesCommit={setCommittedValue}
          getAriaLabel={() => "값"}
        />
        <HStack gap="x4">
          <Text>Current value: {JSON.stringify(value)}</Text>
          <Text>Committed value: {JSON.stringify(committedValue)}</Text>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/slider/disabled">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";

  export default function SliderDisabled() {
    return (
      <VStack width="full" gap="spacingY.componentDefault">
        <Slider min={0} max={100} defaultValues={[50]} disabled getAriaLabel={() => "값"} />
        <Slider
          min={0}
          max={100}
          defaultValues={[25, 75]}
          disabled
          getAriaLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Hide Range

`hideRange` prop을 사용하여 기본 range 색상을 숨기고 커스텀 스타일을 적용할 수 있습니다.

<ComponentExample name="react/slider/hide-range">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";

  export default function SliderHideRange() {
    return (
      <VStack gap="spacingY.componentDefault" width="full">
        <Slider min={0} max={100} defaultValues={[60]} hideRange getAriaLabel={() => "값"} />
        <Slider
          min={0}
          max={100}
          defaultValues={[20, 80]}
          hideRange
          getAriaLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Customizing Value Indicator

#### Value Indicator Label

`getValueIndicatorLabel` prop을 사용하여 thumb 위에 표시되는 툴팁의 내용을 커스텀할 수 있습니다.

<Callout type="warning" title="주의">
  Value Indicator는 thumb을 누르고 있을 때만 표시되며 스크린 리더는 Value Indicator의 내용을 읽지 않습니다. Value Indicator에 의미가 있는 내용을 포함하는 경우, [`getAriaValuetext` prop](#getariavaluetext)을 함께 사용하는 것을 권장합니다.
</Callout>

<ComponentExample name="react/slider/custom-value-indicator-label">
  ```tsx
  import { Slider } from "seed-design/ui/slider";

  const formatter = new Intl.NumberFormat("ko-KR", { style: "decimal" });

  export default function SliderCustomValueIndicatorLabel() {
    return (
      <Slider
        min={0}
        max={1_000_000}
        defaultValues={[20_000, 500_000]}
        getValueIndicatorLabel={({ value, thumbIndex }) => (
          <>
            thumb {thumbIndex}
            <br />
            {formatter.format(value)}
          </>
        )}
        getAriaValuetext={formatter.format}
        getAriaLabel={() => "값"}
      />
    );
  }
  ```
</ComponentExample>

#### Hide Value Indicator

`hideValueIndicator` prop을 사용하여 thumb 위에 표시되는 Value Indicator 툴팁을 숨길 수 있습니다.

<ComponentExample name="react/slider/hide-value-indicator">
  ```tsx
  import { Slider } from "seed-design/ui/slider";

  export default function SliderHideValueIndicator() {
    return (
      <Slider min={0} max={100} defaultValues={[50]} hideValueIndicator getAriaLabel={() => "값"} />
    );
  }
  ```
</ComponentExample>

### Range Slider

두 개의 thumb를 사용하여 범위를 선택할 수 있습니다.

<ComponentExample name="react/slider/range">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";
  import { useState } from "react";

  export default function SliderRange() {
    const [priceRange, setPriceRange] = useState([20, 80]);

    return (
      <VStack gap="spacingY.componentDefault" width="full">
        <Slider
          min={0}
          max={100}
          values={priceRange}
          onValuesChange={setPriceRange}
          getAriaLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Minimum Steps Between Thumbs

두 thumb 사이의 최소 간격을 설정할 수 있습니다.

<ComponentExample name="react/slider/range-min-steps">
  ```tsx
  import { VStack, Text } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";
  import { useState } from "react";

  export default function SliderRangeMinSteps() {
    const [values, setValues] = useState([20, 80]);

    return (
      <VStack gap="spacingY.componentDefault" width="full" align="center">
        <Slider
          min={0}
          max={100}
          values={values}
          onValuesChange={setValues}
          step={5}
          minStepsBetweenThumbs={6} // step이 5이므로, value의 최소 간격은 30이 됩니다.
          getAriaLabel={(thumbIndex) => (thumbIndex === 0 ? "최소값" : "최대값")}
        />
        <Text>{JSON.stringify(values)}</Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Accessibility

#### `getAriaValuetext`

스크린 리더는 기본적으로 각 thumb이 가리키는 숫자 값(value)을 읽습니다. **숫자 값만으로 정보를 충분히 전달할 수 없는 경우 `getAriaValuetext` prop을 사용하여 인간 친화적인 설명을 제공하세요.** 단위를 추가하거나, 값의 의미를 설명하는 문구를 포함할 수 있습니다.

<ComponentExample name="react/slider/get-aria-value-text">
  ```tsx
  import { VStack, Text } from "@seed-design/react";
  import { useState } from "react";
  import { Slider } from "seed-design/ui/slider";

  const days = ["일", "월", "화", "수", "목", "금", "토"];

  function getHumanReadableDayOfWeek(value: number) {
    if (days[value] === undefined) throw new Error("Invalid day value");

    return `${days[value]}요일`;
  }

  export default function SliderGetAriaValuetext() {
    const [values, setValues] = useState([1, 3]);

    return (
      <VStack gap="spacingY.componentDefault" width="full" align="center">
        <Slider
          min={0}
          max={days.length - 1}
          minStepsBetweenThumbs={1}
          markers={days.map((label, value) => ({ label, value }))}
          ticks={days.slice(1, -1).map((_, index) => index + 1)}
          tickWeight="thick"
          values={values}
          onValuesChange={setValues}
          getAriaLabel={(thumbIndex) => (thumbIndex === 0 ? "시작" : "종료")}
          getAriaValuetext={getHumanReadableDayOfWeek}
          getValueIndicatorLabel={({ value }) => getHumanReadableDayOfWeek(value)}
        />
        <Text>values: {JSON.stringify(values)}</Text>
        <Text>aria-valuetext: {JSON.stringify(values.map(getHumanReadableDayOfWeek))}</Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### `getAriaLabel` and `getAriaLabelledby`

`getAriaLabel` 또는 `getAriaLabelledby` prop을 사용하여 각 thumb에 대한 설명을 제공하세요. 스크린 리더 사용자가 각 thumb의 용도를 이해하는 데 도움을 줍니다.

**특히, 범위를 선택하는 슬라이더의 경우 각 thumb이 범위에서 어떤 역할을 하는지 설명해야 합니다. (최소-최대, 시작-종료 등)**

<ComponentExample name="react/slider/get-aria-label">
  ```tsx
  import { VStack, Text, type SliderRootProps } from "@seed-design/react";
  import { useState } from "react";
  import { Slider } from "seed-design/ui/slider";

  const getAriaLabel: NonNullable<SliderRootProps["getAriaLabel"]> = (thumbIndex) =>
    thumbIndex === 0 ? "최소값" : "최대값";

  export default function SliderGetAriaLabel() {
    const [values, setValues] = useState([10, 30]);

    return (
      <VStack gap="spacingY.componentDefault" width="full" align="center">
        <Slider
          min={0}
          max={100}
          values={values}
          onValuesChange={setValues}
          getAriaLabel={getAriaLabel}
        />
        <Text>values: {JSON.stringify(values)}</Text>
        <Text>aria-label: {JSON.stringify(values.map((_, index) => getAriaLabel(index)))}</Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Field Integration

`label`, `description`, `errorMessage` 등의 Field 관련 prop을 사용할 수 있습니다.

<ComponentExample name="react/slider/field">
  ```tsx
  import { Divider, VStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";

  const markers = [
    { value: 0, label: "매우 동의하지 않음" },
    { value: 14, label: "매우 동의함" },
  ];

  export default function SliderField() {
    return (
      <VStack gap="x8" width="full">
        <Slider
          label="내일 날씨가 좋을 것 같다고 생각한다."
          min={0}
          max={14}
          defaultValues={[7]}
          ticks={[2, 4, 6, 8, 10, 12]}
          markers={markers}
          hideRange
          description="내일 날씨에 대한 당신의 기대감을 0~14 사이 숫자로 나타내 주세요."
          getAriaValuetext={(value) =>
            `${value} ${markers.find((marker) => marker.value === value)?.label ?? ""}`.trim()
          }
        />
        <Divider />
        <Slider
          label="Invalid Slider"
          labelWeight="bold"
          min={0}
          max={1000}
          defaultValues={[500]}
          invalid
          errorMessage="올바르지 않은 값입니다."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### Form (Uncontrolled)

<ComponentExample name="react/slider/form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, useState, type FormEvent } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Slider } from "seed-design/ui/slider";

  type FieldErrors = {
    rating?: string;
    priceRange?: string;
  };

  export default function SliderForm() {
    const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});

    const handleSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      const formData = new FormData(event.currentTarget);

      const rating = Number(formData.get("rating"));
      const priceRangeValues = formData.getAll("price-range").map(Number);

      const newFieldErrors: FieldErrors = {};

      if (rating < 3) {
        newFieldErrors.rating = "평점은 최소 3점 이상이어야 합니다";
      }

      const [min, max] = priceRangeValues;

      if (max - min < 20) {
        newFieldErrors["priceRange"] = "가격 범위는 최소 20만원 이상 차이가 나야 합니다";
      }

      setFieldErrors(newFieldErrors);

      if (Object.keys(newFieldErrors).length > 0) return;

      window.alert(JSON.stringify({ rating, "price-range": priceRangeValues }, null, 2));
    }, []);

    return (
      <VStack asChild gap="x3" width="full">
        <form onSubmit={handleSubmit}>
          <HStack gap="x3">
            <Slider
              label="최소 평점"
              description="원하는 최소 평점을 선택하세요"
              name="rating"
              min={0}
              max={5}
              step={0.5}
              defaultValues={[2.5]}
              markers={[
                { value: 0, label: "0점" },
                { value: 5, label: "5점" },
              ]}
              getValueIndicatorLabel={({ value }) => `${value}점`}
              getAriaValuetext={(value) => `${value}점`}
              showRequiredIndicator
              {...(fieldErrors.rating && {
                invalid: true,
                errorMessage: fieldErrors.rating,
              })}
            />
            <Slider
              label="가격 범위"
              description="원하는 가격 범위를 선택하세요"
              name="price-range"
              min={0}
              max={100}
              defaultValues={[20, 80]}
              markers={[
                { value: 0, label: "0만원" },
                { value: 100, label: "100만원" },
              ]}
              getValueIndicatorLabel={({ value }) => `${value}만원`}
              getAriaValuetext={(value) => `${value}만원`}
              getAriaLabel={(index) => (index === 0 ? "최소 가격" : "최대 가격")}
              showRequiredIndicator
              {...(fieldErrors["priceRange"] && {
                invalid: true,
                errorMessage: fieldErrors["priceRange"],
              })}
            />
          </HStack>
          <ActionButton type="submit" variant="neutralSolid">
            제출
          </ActionButton>
        </form>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### React Hook Form

<ComponentExample name="react/slider/react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Slider } from "seed-design/ui/slider";

  interface FormValues {
    rating: number;
    priceRange: [number, number];
  }

  export default function SliderReactHookForm() {
    const { handleSubmit, reset, control } = useForm<FormValues>({
      reValidateMode: "onSubmit",
      defaultValues: {
        rating: 2.5,
        priceRange: [20, 80],
      },
    });

    const {
      field: { value: ratingValue, onChange: ratingOnChange, onBlur: __ratingOnBlur, ...ratingField },
      fieldState: ratingFieldState,
    } = useController({
      name: "rating",
      control,
      rules: {
        validate: (value) => value >= 3 || "평점은 최소 3점 이상이어야 합니다",
      },
    });

    const {
      field: {
        value: priceRangeValue,
        onChange: priceRangeOnChange,
        onBlur: __priceRangeOnBlur,
        ...priceRangeField
      },
      fieldState: priceRangeFieldState,
    } = useController({
      name: "priceRange",
      control,
      rules: {
        validate: (value) => {
          const [min, max] = value;

          return max - min >= 20 || "가격 범위는 최소 20만원 이상 차이가 나야 합니다";
        },
      },
    });

    const onValid = useCallback(
      (data: FormValues) => window.alert(JSON.stringify(data, null, 2)),
      [],
    );

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();

        reset();
      },
      [reset],
    );

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <HStack gap="x3">
          <Slider
            label="최소 평점"
            description="원하는 최소 평점을 선택하세요"
            min={0}
            max={5}
            step={0.5}
            invalid={ratingFieldState.invalid}
            errorMessage={ratingFieldState.error?.message}
            values={[ratingValue]}
            onValuesChange={([values]) => ratingOnChange(values)}
            markers={[
              { value: 0, label: "0점" },
              { value: 5, label: "5점" },
            ]}
            getValueIndicatorLabel={({ value }) => `${value}점`}
            getAriaValuetext={(value) => `${value}점`}
            showRequiredIndicator
            {...ratingField}
          />
          <Slider
            label="가격 범위"
            description="원하는 가격 범위를 선택하세요"
            min={0}
            max={100}
            markers={[
              { value: 0, label: "0만원" },
              { value: 100, label: "100만원" },
            ]}
            invalid={priceRangeFieldState.invalid}
            errorMessage={priceRangeFieldState.error?.message}
            values={priceRangeValue}
            onValuesChange={priceRangeOnChange}
            getValueIndicatorLabel={({ value }) => `${value}만원`}
            getAriaValuetext={(value) => `${value}만원`}
            getAriaLabel={(index) => (index === 0 ? "최소 가격" : "최대 가격")}
            minStepsBetweenThumbs={2}
            showRequiredIndicator
            {...priceRangeField}
          />
        </HStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" variant="neutralSolid" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### RTL Support

<ComponentExample name="react/slider/rtl">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Slider } from "seed-design/ui/slider";

  export default function SliderRtl() {
    return (
      <VStack gap="spacingY.componentDefault" width="full">
        <Slider
          dir="rtl"
          min={0}
          max={100}
          step={0.5}
          defaultValues={[36.5]}
          ticks={[36.5]}
          tickWeight="thick"
          markers={[
            { value: 0, label: "0°C" },
            { value: 36.5, label: "36.5°C" },
            { value: 100, label: "100°C" },
          ]}
          getAriaValuetext={(value) => `${value}°C`}
          getValueIndicatorLabel={({ value }) => `${value}°C`}
          getAriaLabel={() => "온도"}
        />
        <Slider
          dir="rtl"
          min={0}
          max={100}
          defaultValues={[30, 50]}
          ticks={[20, 40, 60, 80]}
          markers={[0, 20, 40, 60, 80, 100]}
          getAriaLabel={() => "값"}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/snackbar.mdx

# Snackbar

화면 하단에 일시적으로 나타나 상태나 결과를 안내하는 컴포넌트입니다.



<ComponentExample name="react/snackbar/preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarPreview() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:snackbar
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:snackbar
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:snackbar
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:snackbar
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="snackbar" />

## Props

### `Snackbar`

<TypeTable
  type={{
    message: {
        "type": "string",
        "default": undefined,
        "required": true,
        description: <><p>{"스낵바에 표시할 메시지"}</p></>
    },

    actionLabel: {
        "type": "string | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"스낵바에 표시할 액션 버튼의 라벨"}</p></>
    },

    onAction: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"액션 버튼 클릭 시 호출되는 콜백"}</p></>
    },

    shouldCloseOnAction: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"액션 버튼 클릭 시 스낵바를 닫을지 여부"}</p></>
    },

    variant: {
        "type": "\"default\" | \"positive\" | \"critical\" | undefined",
        "default": "\"default\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `SnackbarAdapter.create` Parameters (`CreateSnackbarOptions`)

<TypeTable
  type={{
    timeout: {
        "type": "number | undefined",
        "default": "5000",
        "required": false,
        description: <><p>{"The duration the snackbar will be visible"}</p></>
    },

    removeDelay: {
        "type": "number | undefined",
        "default": "200",
        "required": false,
        description: <><p>{"The duration for the snackbar to kept alive before it is removed.\nUseful for exit transitions."}</p></>
    },

    onClose: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"Function called when the snackbar has been closed and removed"}</p></>
    },

    render: {
        "type": "() => React.ReactNode",
        "default": undefined,
        "required": true,
        description: <><p>{"The content to render in the snackbar region"}</p></>
    }
}}
/>

### `SnackbarProvider`

<TypeTable
  type={{
    children: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": true
    },

    pauseOnInteraction: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false,
        description: <><p>{"Whether to pause the toast when interacted with"}</p></>
    }
}}
/>

## Examples

### Variants

#### Positive

<ComponentExample name="react/snackbar/positive">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => (
              <Snackbar
                variant="positive"
                message="알림 메세지"
                actionLabel="확인"
                onAction={() => {}}
              />
            ),
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarPositive() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>

#### Critical

<ComponentExample name="react/snackbar/critical">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 50000000,
            onClose: () => {},
            render: () => (
              <Snackbar
                variant="critical"
                message="알림 메세지"
                actionLabel="확인"
                onAction={() => {}}
              />
            ),
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarNegative() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>

### Pause on Interaction

사용자가 Snackbar와 상호작용(hover 및 active) 하는 동안 Snackbar가 timeout으로 인해 dismiss되지 않도록 하려면 `SnackbarProvider`의 `pauseOnInteraction`을 `true`로 설정합니다.

<Callout type="warning" title="기본값">
  * `@seed-design/react@0.1.14`까지: `false`: 명시하지 않는 경우, 상호작용 여부와 관계없이 timeout이 지나면 dismiss됩니다.
  * 이후 버전: `true`: 명시하지 않는 경우, 사용자가 상호작용하는 동안 timeout이 멈춥니다.
</Callout>

<ComponentExample name="react/snackbar/pause-on-interaction">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
  import { useState } from "react";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarPauseOnInteraction() {
    const [pauseOnInteraction, setPauseOnInteraction] = useState(true);

    return (
      <VStack gap="spacingY.componentDefault" alignItems="center">
        <SnackbarProvider pauseOnInteraction={pauseOnInteraction}>
          <Component />
        </SnackbarProvider>
        <SegmentedControl
          aria-label="Pause on interaction"
          value={`${pauseOnInteraction}`}
          onValueChange={(value) => setPauseOnInteraction(value === "true")}
        >
          <SegmentedControlItem value="false">false</SegmentedControlItem>
          <SegmentedControlItem value="true">true</SegmentedControlItem>
        </SegmentedControl>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Avoid Overlap

`<SnackbarAvoidOverlap />` 컴포넌트를 사용하여 스낵바가 겹치지 않아야 하는 영역을 지정할 수 있습니다.
`<SnackbarAvoidOverlap />`의 자식 컴포넌트는 forwardRef(\~React 18) 혹은 ref prop(React 19\~)으로 ref를 전달받아야 합니다.
offset은 다음 상황에서 갱신됩니다.

* SnackbarAvoidOverlap의 자식 컴포넌트가 mount될 때
* SnackbarAvoidOverlap의 자식 컴포넌트가 unmount될 때
* SnackbarAvoidOverlap의 자식 컴포넌트의 높이가 변경될 때
* SnackbarRegion의 높이가 변경될 때

<ComponentExample name="react/snackbar/avoid-overlap">
  ```tsx
  import { Flex, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    Snackbar,
    SnackbarAvoidOverlap,
    SnackbarProvider,
    useSnackbarAdapter,
  } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <VStack gap="x4">
        <ActionButton
          onClick={() =>
            adapter.create({
              timeout: 5000,
              onClose: () => {},
              render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
            })
          }
        >
          실행
        </ActionButton>
        <SnackbarAvoidOverlap>
          <Flex width="full" height="x16" bg="bg.criticalWeak" justify="center" align="center">
            Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.
          </Flex>
        </SnackbarAvoidOverlap>
      </VStack>
    );
  }

  export default function SnackbarPreview() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>


---

file: components/switch.mdx

# Switch

특정 설정 및 상태를 즉시 켜거나 끌 수 있도록 하는 컴포넌트입니다.



<ComponentExample name="react/switch/preview">
  ```tsx
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchPreview() {
    return <Switch defaultChecked />;
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:switch
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:switch
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:switch
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:switch
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="switch" />

## Props

### `Switch`

<TypeTable
  type={{
    inputProps: {
        "type": "React.InputHTMLAttributes<HTMLInputElement> | undefined",
        "default": undefined,
        "required": false
    },

    rootRef: {
        "type": "React.Ref<HTMLLabelElement> | undefined",
        "default": undefined,
        "required": false
    },

    label: {
        "type": "React.ReactNode",
        "default": undefined,
        "required": false
    },

    size: {
        "type": "\"16\" | \"24\" | \"32\" | SwitchVariantDeprecatedSizeProps | undefined",
        "default": undefined,
        "required": false
    },

    tone: {
        "type": "\"neutral\" | \"brand\" | undefined",
        "default": "\"brand\"",
        "required": false
    },

    disabled: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    invalid: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    required: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    checked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultChecked: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `Switchmark`

<TypeTable
  type={{
    tone: {
        "type": "\"neutral\" | \"brand\" | undefined",
        "default": "\"brand\"",
        "required": false
    },

    size: {
        "type": "\"16\" | \"24\" | \"32\" | undefined",
        "default": "32",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Sizes

<Callout title="Deprecated Props" type="warning">
  `size="medium"`과 `size="small"`은 더 이상 사용되지 않습니다. 대신 `size="32"`와 `size="16"`을 사용하세요.
</Callout>

<ComponentExample name="react/switch/sizes">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchSizes() {
    return (
      <VStack align="center" gap="spacingY.componentDefault">
        <Switch size="32" label="32 (default)" defaultChecked />
        <Switch size="24" label="24" defaultChecked />
        <Switch size="16" label="16" defaultChecked />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Tones

#### Brand

<ComponentExample name="react/switch/brand">
  ```tsx
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchBrand() {
    return <Switch tone="brand" label="Brand" defaultChecked />;
  }
  ```
</ComponentExample>

#### Neutral

<ComponentExample name="react/switch/neutral">
  ```tsx
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchNeutral() {
    return <Switch tone="neutral" label="Neutral" defaultChecked />;
  }
  ```
</ComponentExample>

### Long Label

<ComponentExample name="react/switch/long-label">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchLongLabel() {
    return (
      <VStack gap="spacingY.componentDefault">
        <Switch
          size="32"
          label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
        />
        <Switch
          size="24"
          label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
        />
        <Switch
          size="16"
          label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/switch/disabled">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { useState } from "react";
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchDisabled() {
    const [disabled, setDisabled] = useState(true);

    return (
      <VStack gap="x8" align="center">
        <VStack align="flex-start" gap="spacingY.componentDefault">
          <Switch disabled={disabled} label="Not Checked (Brand)" />
          <Switch disabled={disabled} defaultChecked label="Checked (Brand)" />
          <Switch disabled={disabled} label="Not Checked (Neutral)" tone="neutral" />
          <Switch disabled={disabled} defaultChecked label="Checked (Neutral)" tone="neutral" />
        </VStack>
        <Switch
          size="16"
          checked={disabled}
          onCheckedChange={setDisabled}
          label="Disable switches"
          tone="neutral"
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Listening to Value Changes

`onCheckedChange`를 사용하여 스위치의 선택 상태 변경을 감지할 수 있습니다.

이벤트를 활용해야 하는 경우 `inputProps`를 통해 내부 `<input>` 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.

<ComponentExample name="react/switch/value-changes">
  ```tsx
  import { VStack, Text } from "@seed-design/react";
  import { Switch } from "seed-design/ui/switch";
  import { useState } from "react";

  export default function SwitchValueChanges() {
    const [count, setCount] = useState(0);
    const [lastValue, setLastValue] = useState<boolean | null>(null);

    return (
      <VStack gap="x4" align="center">
        <Switch
          label="Click me"
          onCheckedChange={(checked) => {
            setCount((prev) => prev + 1);
            setLastValue(checked);
          }}
        />
        <Text>
          onCheckedChange called: {count} times, last value: {`${lastValue ?? "-"}`}
        </Text>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### Using `Switchmark`

`Switchmark`는 레이블을 제외한 스위치 컴포넌트로, 커스텀 레이아웃을 위해 사용할 수 있습니다.

<ComponentExample name="react/switch/switchmark">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { Switch } from "@seed-design/react/primitive";
  import { Switchmark } from "seed-design/ui/switch";

  function CustomSwitch({ children, ...props }: Switch.RootProps) {
    return (
      <VStack asChild gap="x2" align="center">
        <Switch.Root {...props}>
          <Switchmark />
          <Switch.HiddenInput />
          {children}
        </Switch.Root>
      </VStack>
    );
  }

  export default function () {
    return (
      <HStack gap="x6">
        <CustomSwitch>
          <Text textStyle="t7Regular">regular</Text>
        </CustomSwitch>
        <CustomSwitch defaultChecked>
          <Text textStyle="t7Medium">medium</Text>
        </CustomSwitch>
        <CustomSwitch>
          <Text textStyle="t7Bold">bold</Text>
        </CustomSwitch>
      </HStack>
    );
  }
  ```
</ComponentExample>


---

file: components/tag-group.mdx

# Tag Group

아이콘과 텍스트 태그를 수평으로 나열해 여러 속성·상태·메타데이터를 한눈에 보여주는 정보 요약 컴포넌트입니다.



<ComponentExample name="react/tag-group/preview">
  ```tsx
  import { IconLocationpinFill } from "@karrotmarket/react-monochrome-icon";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

  export default function TagGroupPreview() {
    return (
      <TagGroupRoot>
        <TagGroupItem prefixIcon={<IconLocationpinFill />} label="500m" />
        <TagGroupItem label="서초4동" />
        <TagGroupItem label="3분 전" />
      </TagGroupRoot>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:tag-group
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:tag-group
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:tag-group
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:tag-group
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="tag-group" />

## Props

### `TagGroupRoot`

<TypeTable
  type={{
    separator: {
        "type": "ReactNode",
        "default": undefined,
        "required": false
    },

    size: {
        "type": "\"t2\" | \"t3\" | \"t4\" | undefined",
        "default": "\"t2\"",
        "required": false
    },

    truncate: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    weight: {
        "type": "\"regular\" | \"bold\" | undefined",
        "default": "\"regular\"",
        "required": false
    },

    tone: {
        "type": "\"neutralSubtle\" | \"neutral\" | \"brand\" | undefined",
        "default": "\"neutralSubtle\"",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `TagGroupItem`

<TypeTable
  type={{
    size: {
        "type": "\"t2\" | \"t3\" | \"t4\" | undefined",
        "default": "\"t2\"",
        "required": false
    },

    weight: {
        "type": "\"regular\" | \"bold\" | undefined",
        "default": "\"regular\"",
        "required": false
    },

    tone: {
        "type": "\"neutralSubtle\" | \"neutral\" | \"brand\" | undefined",
        "default": "\"neutralSubtle\"",
        "required": false
    },

    flexShrink: {
        "type": "true | 0 | (number & {}) | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"If true, flex-shrink will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Sizes

<ComponentExample name="react/tag-group/sizes">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

  export default function TagGroupSizes() {
    return (
      <VStack gap="spacingY.componentDefault" align="center">
        <TagGroupRoot size="t2">
          <TagGroupItem label="t2" />
          <TagGroupItem label="t2" />
          <TagGroupItem label="t2" />
        </TagGroupRoot>
        <TagGroupRoot size="t3">
          <TagGroupItem label="t3" />
          <TagGroupItem label="t3" />
          <TagGroupItem label="t3" />
        </TagGroupRoot>
        <TagGroupRoot size="t4">
          <TagGroupItem label="t4" />
          <TagGroupItem label="t4" />
          <TagGroupItem label="t4" />
        </TagGroupRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Weights

<ComponentExample name="react/tag-group/weights">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

  export default function TagGroupWeights() {
    return (
      <VStack gap="spacingY.componentDefault" align="center">
        <TagGroupRoot weight="regular">
          <TagGroupItem label="regular" />
          <TagGroupItem label="regular" />
          <TagGroupItem label="regular" />
        </TagGroupRoot>
        <TagGroupRoot weight="bold">
          <TagGroupItem label="bold" />
          <TagGroupItem label="bold" />
          <TagGroupItem label="bold" />
        </TagGroupRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Tones

<ComponentExample name="react/tag-group/tones">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

  export default function TagGroupTones() {
    return (
      <VStack gap="spacingY.componentDefault" align="center">
        <TagGroupRoot tone="neutralSubtle">
          <TagGroupItem label="neutralSubtle" />
          <TagGroupItem label="neutralSubtle" />
          <TagGroupItem label="neutralSubtle" />
        </TagGroupRoot>
        <TagGroupRoot tone="neutral">
          <TagGroupItem label="neutral" />
          <TagGroupItem label="neutral" />
          <TagGroupItem label="neutral" />
        </TagGroupRoot>
        <TagGroupRoot tone="brand">
          <TagGroupItem label="brand" />
          <TagGroupItem label="brand" />
          <TagGroupItem label="brand" />
        </TagGroupRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### With Icons

<ComponentExample name="react/tag-group/with-icons">
  ```tsx
  import { IconLocationpinFill, IconMegaphoneFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

  export default function TagGroupWithIcons() {
    return (
      <VStack gap="spacingY.componentDefault" align="center">
        <TagGroupRoot>
          <TagGroupItem label="광고" suffixIcon={<IconMegaphoneFill />} />
          <TagGroupItem label="끌올 3시간 전" />
          <TagGroupItem label="서초4동" />
        </TagGroupRoot>
        <TagGroupRoot>
          <TagGroupItem prefixIcon={<IconLocationpinFill />} label="서초4동" />
          <TagGroupItem label="인증 5회" />
          <TagGroupItem label="3분 전" />
        </TagGroupRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Customizing `TagGroupItem`

`TagGroupRoot`에 지정한 `size`, `tone`, `weight`은 `TagGroupItem`에서 덮어씌울 수 있습니다.

필요한 경우 [컴파운드 컴포넌트](/react/components/concepts/snippet#compound-components)를 직접 사용하여 `TagGroupItem` 내부 요소를 커스터마이징할 수 있습니다.

<ComponentExample name="react/tag-group/customizing-item">
  ```tsx
  import {
    IconCheckmarkCircleFill,
    IconHeartFill,
    IconHorizline2VerticalChatbubbleRectangularRightFill,
    IconStarFill,
  } from "@karrotmarket/react-monochrome-icon";
  import { Icon, VStack } from "@seed-design/react";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";
  import { TagGroup as SeedTagGroup } from "@seed-design/react";

  export default function TagGroupCustomizingItem() {
    return (
      <VStack gap="spacingY.componentDefault" align="center">
        <TagGroupRoot>
          {/* You can use the compound components to customize the items */}
          <SeedTagGroup.Item weight="bold" tone="neutral" aria-label="평점 4.5">
            <Icon svg={<IconStarFill />} color="fg.brand" />
            <SeedTagGroup.ItemLabel>4.5</SeedTagGroup.ItemLabel>
          </SeedTagGroup.Item>
          <TagGroupItem label="후기 37" />
          <TagGroupItem label="단골 12" />
        </TagGroupRoot>
        <TagGroupRoot tone="neutral">
          <TagGroupItem tone="brand" suffixIcon={<IconCheckmarkCircleFill />} label="인증됨" />
          <TagGroupItem aria-label="관심 10개" prefixIcon={<IconHeartFill />} label="10" />
          <TagGroupItem
            aria-label="댓글 3개"
            prefixIcon={<IconHorizline2VerticalChatbubbleRectangularRightFill />}
            label="3"
          />
        </TagGroupRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Customizing Separators

`TagGroupRoot`에 `separator`를 지정하여 구분 기호를 변경할 수 있습니다.

스크린 리더는 각 태그 항목 사이에 지정된 구분 기호를 읽지 않습니다. 의미가 있는(semantic) 정보를 Separator로 사용하는 것을 피하세요.

<ComponentExample name="react/tag-group/customizing-separators">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";

  export default function TagGroupCustomizingSeparators() {
    return (
      <VStack gap="spacingY.componentDefault" align="center">
        <TagGroupRoot separator=" | " size="t4">
          <TagGroupItem label="가" />
          <TagGroupItem label="나" />
          <TagGroupItem label="다" />
          <TagGroupItem label="라" />
        </TagGroupRoot>
        <TagGroupRoot separator=" " size="t4">
          <TagGroupItem label="가" />
          <TagGroupItem label="나" />
          <TagGroupItem label="다" />
          <TagGroupItem label="라" />
        </TagGroupRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Wrapping Behavior

기본적으로 `TagGroupRoot`는 컨테이너 너비를 초과하면 줄바꿈이 발생합니다.

`TagGroupRoot`에 `truncate` prop을 지정하면 `TagGroupRoot`가 한 줄로 유지되고, 컨테이너 너비를 초과하는 경우 기본적으로 모든 `TagGroupItem`의 레이블에서 말줄임이 발생할 수 있습니다.

`truncate` prop을 사용하면서 특정 아이템이 축소되지 않도록 하려면 해당 `TagGroupItem`에 `flexShrink={0}`을 지정하세요. `TagGroupItem`에 `flexShrink={number}`를 지정하여 컨테이너 너비를 초과할 때 축소되는 우선순위를 조정할 수 있습니다.

<ComponentExample name="react/tag-group/wrapping-behavior">
  ```tsx
  import { IconBellFill, IconLocationpinFill } from "@karrotmarket/react-monochrome-icon";
  import { Flex, Text, VStack } from "@seed-design/react";
  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";
  import type { PropsWithChildren, ReactNode } from "react";

  export default function TagGroupWrappingBehavior() {
    return (
      <Flex
        align="center"
        justify="center"
        grow
        width="full"
        bg="bg.layerBasement"
        borderRadius="r2"
        p="x4"
      >
        <VStack
          gap="x2"
          width="350px"
          maxWidth="max-content"
          overflowX="auto"
          style={{ resize: "horizontal" }}
        >
          <Wrapper title="default (wrap)">
            <TagGroupRoot>
              <TagGroupItem prefixIcon={<IconLocationpinFill />} label="부산광역시 해운대구" />
              <TagGroupItem prefixIcon={<IconBellFill />} label="123 456 789 012 345" />
              <TagGroupItem label="Ut minim laboris enim" />
            </TagGroupRoot>
          </Wrapper>
          <Wrapper title="truncate">
            <TagGroupRoot truncate>
              <TagGroupItem prefixIcon={<IconLocationpinFill />} label="부산광역시 해운대구" />
              <TagGroupItem prefixIcon={<IconBellFill />} label="123 456 789 012 345" />
              <TagGroupItem label="Ut minim laboris enim" />
            </TagGroupRoot>
          </Wrapper>
          <Wrapper title="truncate, keep one fixed">
            <TagGroupRoot truncate>
              <TagGroupItem prefixIcon={<IconLocationpinFill />} label="부산광역시 해운대구" />
              <TagGroupItem
                flexShrink={0}
                prefixIcon={<IconBellFill />}
                label="123 456 789 012 345"
              />
              <TagGroupItem label="Ut minim laboris enim" />
            </TagGroupRoot>
          </Wrapper>
          <Wrapper title="truncate, mixed shrink ratios">
            <TagGroupRoot truncate>
              <TagGroupItem
                prefixIcon={<IconLocationpinFill />}
                flexShrink={1}
                label="부산광역시 해운대구"
              />
              <TagGroupItem
                flexShrink={100}
                prefixIcon={<IconBellFill />}
                label="123 456 789 012 345"
              />
              <TagGroupItem flexShrink={100} label="Ut minim laboris enim" />
            </TagGroupRoot>
          </Wrapper>
        </VStack>
      </Flex>
    );
  }

  function Wrapper({ title, children }: PropsWithChildren<{ title: ReactNode }>) {
    return (
      <VStack
        align="flex-start"
        justify="center"
        padding="x3"
        bg="bg.layerDefault"
        borderRadius="r2"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        gap="x1"
        overflowX="hidden"
      >
        <Text textStyle="t2Medium">{title}</Text>
        {children}
      </VStack>
    );
  }
  ```
</ComponentExample>


---

file: components/toggle-button.mdx

# Toggle Button

사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트입니다. 필터링이나 뷰 전환과 같은 즉각적인 상태 변경에 사용됩니다.



<ComponentExample name="react/toggle-button/preview">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonPreview() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:toggle-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:toggle-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:toggle-button
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:toggle-button
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="toggle-button" />

## Props

<TypeTable
  type={{
    variant: {
        "type": "\"brandSolid\" | \"neutralWeak\" | undefined",
        "default": "\"brandSolid\"",
        "required": false
    },

    size: {
        "type": "\"xsmall\" | \"small\" | undefined",
        "default": "\"small\"",
        "required": false
    },

    loading: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    pressed: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    defaultPressed: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onPressedChange: {
        "type": "((pressed: boolean) => void) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Brand Solid

<ComponentExample name="react/toggle-button/brand-solid">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonBrandSolid() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton variant="brandSolid" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Neutral Weak

<ComponentExample name="react/toggle-button/neutral-weak">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonBrandSolid() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton variant="neutralWeak" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="react/toggle-button/small">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonSmall() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton size="small" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Xsmall

<ComponentExample name="react/toggle-button/xsmall">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonXsmall() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton size="xsmall" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="react/toggle-button/prefix-icon">
  ```tsx
  import { IconCheckmarkLine, IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonPrefixIcon() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton pressed={pressed} onPressedChange={setPressed}>
        <PrefixIcon svg={pressed ? <IconPlusLine /> : <IconCheckmarkLine />} />
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="react/toggle-button/disabled">
  ```tsx
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonDisabled() {
    return <ToggleButton disabled>비활성</ToggleButton>;
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="react/toggle-button/loading">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonLoading() {
    const [pressed, setPressed] = useState(false);
    const [loading, setLoading] = useState(false);

    function handleToggle() {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
        setPressed((prev) => !prev);
      }, 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ToggleButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
        시간이 걸리는 토글
      </ToggleButton>
    );
  }
  ```
</ComponentExample>


---

file: developer-tools/codemods/available-transforms.mdx

# Available Transforms

codemod를 통해 실행 가능한 변환 목록입니다.



{/* Auto-generated from `scripts/generate-codemod-docs.ts` */}

## replace-custom-seed-design-typography

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-custom-seed-design-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-custom-seed-design-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-custom-seed-design-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-custom-seed-design-typography <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```ts title="basic.input.ts"
    // @ts-nocheck
    import { style } from "@vanilla-extract/css";
    import { vars } from "@seed-design/css";
    import { f, reset } from "@/shared/styles";
    import { typography, text } from '@/src/styles/tokens';

    export const title = style([
      typography.h4,
      {
        textAlign: "center",
        color: vars.$scale.color.gray900,
        margin: 0,
      },
    ]);

    export const subtitle = style([
      f.typography.title2Bold,
      {
        marginBottom: "0.375rem",
        color: vars.$scale.color.gray900,
      },
    ]);

    export const smallText = style([
      typo.caption2Regular,
      {
        color: vars.$scale.color.gray700,
      },
    ]);

    export const largeTitle = style([
      typo.bodyL1Regular,
      {
        color: vars.$scale.color.gray900,
      },
    ]);

    export const button = style([
      typography['$semantic.label2Regular'],
      {
        width: '100%',
        paddingTop: rem(14),
        paddingRight: rem(16),
        paddingBottom: rem(14),
        paddingLeft: rem(16),
      },
    ]);

    export const day = style([
      {
        display: 'flex',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: rem(30),
      },
      typography['$semantic.caption1Regular'],
    ]);

    // Additional test cases for various mappings
    export const titleBold = style([
      typography.title3Bold,
      {
        fontWeight: 'bold',
      },
    ]);

    export const subtitleRegular = style([
      f.typography.subtitle2Regular,
      {
        color: vars.$scale.color.gray800,
      },
    ]);

    export const bodyText = style([
      typo.bodyM1Regular,
      {
        lineHeight: 1.5,
      },
    ]);

    export const labelText = style([
      typography['$semantic.label1Bold'],
      {
        textTransform: 'uppercase',
      },
    ]);

    export const captionBold = style([
      typography['$semantic.caption2Bold'],
      {
        fontSize: '12px',
      },
    ]);

    // Test deprecated tokens with alternative
    export const deprecatedBody = style([
      typo.bodyL2Regular,
      {
        margin: '8px 0',
      },
    ]);

    export const deprecatedLabel = style([
      typography['$semantic.label6Regular'],
      {
        opacity: 0.8,
      },
    ]);

    // Test multiple token choices (should use first one)
    export const headerText = style([
      typography.h4,
      {
        textAlign: 'center',
      },
    ]);

    export const text = style([
      text['$semantic.bodyL2Bold'],
    ]);
    ```

    ```ts title="basic.output.ts"
    // @ts-nocheck
    import { style } from "@vanilla-extract/css";
    import { vars } from "@seed-design/css";
    import { f, reset } from "@/shared/styles";
    import { typography, text } from '@/src/styles/tokens';

    export const title = style([
      typography.t10Bold,
      {
        textAlign: "center",
        color: vars.$scale.color.gray900,
        margin: 0,
      },
    ]);

    export const subtitle = style([
      f.typography.t7Bold,
      {
        marginBottom: "0.375rem",
        color: vars.$scale.color.gray900,
      },
    ]);

    export const smallText = style([
      typo.t2Regular,
      {
        color: vars.$scale.color.gray700,
      },
    ]);

    export const largeTitle = style([
      typo.articleBody,
      {
        color: vars.$scale.color.gray900,
      },
    ]);

    export const button = style([
      typography.t5Regular,
      {
        width: '100%',
        paddingTop: rem(14),
        paddingRight: rem(16),
        paddingBottom: rem(14),
        paddingLeft: rem(16),
      },
    ]);

    export const day = style([
      {
        display: 'flex',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: rem(30),
      },
      typography.t3Regular,
    ]);

    // Additional test cases for various mappings
    export const titleBold = style([
      typography.t6Bold,
      {
        fontWeight: 'bold',
      },
    ]);

    export const subtitleRegular = style([
      f.typography.t4Regular,
      {
        color: vars.$scale.color.gray800,
      },
    ]);

    export const bodyText = style([
      typo.t5Regular,
      {
        lineHeight: 1.5,
      },
    ]);

    export const labelText = style([
      typography.t6Bold,
      {
        textTransform: 'uppercase',
      },
    ]);

    export const captionBold = style([
      typography.t2Bold,
      {
        fontSize: '12px',
      },
    ]);

    // Test deprecated tokens with alternative
    export const deprecatedBody = style([
      typo.t4Regular,
      {
        margin: '8px 0',
      },
    ]);

    export const deprecatedLabel = style([
      typography.t1Regular,
      {
        opacity: 0.8,
      },
    ]);

    // Test multiple token choices (should use first one)
    export const headerText = style([
      typography.t10Bold,
      {
        textAlign: 'center',
      },
    ]);

    export const text = style([
      text.t4Bold,
    ]);
    ```
  </Accordion>
</Accordions>

## replace-tailwind-typography

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-tailwind-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-tailwind-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-tailwind-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-tailwind-typography <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    export function BasicExample() {
      return (
        <div>
          <div className="caption1Bold whitespace-pre-wrap text-center text-[--tick-color]">Primary Background</div>
          <p className="bodyL2Regular text-palette-gray-800">{formState.content}</p>
          <div className="title3Bold">Hover Primary Low Background</div>
          <div className="caption2Regular">Focus Primary Low Background</div>
          <div className="[&>section_h2]:subtitle1Bold">Focus Primary Low Background</div>
          <h3 className={cn('subtitle1Bold', className)} {...props} />
          <h3 className={isDisabled ? 'subtitle1Regular' : 'subtitle1Bold'} {...props} />
          <p className="caption2Regular text-palette-gray-800">{description}</p>
          <div className="text-caption1Bold">Text with prefix</div>
          <span className="text-bodyL2Regular">Another text with prefix</span>
          <h2 className="text-title3Bold">Title with prefix</h2>
        </div>
      );
    }
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    export function BasicExample() {
      return (
        <div>
          <div className="t3-bold whitespace-pre-wrap text-center text-[--tick-color]">Primary Background</div>
          <p className="t4-regular text-palette-gray-800">{formState.content}</p>
          <div className="t6-bold">Hover Primary Low Background</div>
          <div className="t2-regular">Focus Primary Low Background</div>
          <div className="[&>section_h2]:t5-bold">Focus Primary Low Background</div>
          <h3 className={cn("t5-bold", className)} {...props} />
          <h3 className={isDisabled ? "t5-regular" : "t5-bold"} {...props} />
          <p className="t2-regular text-palette-gray-800">{description}</p>
          <div className="t3-bold">Text with prefix</div>
          <span className="t4-regular">Another text with prefix</span>
          <h2 className="t6-bold">Title with prefix</h2>
        </div>
      );
    }
    ```
  </Accordion>
</Accordions>

## replace-custom-imported-typography-variable

Seed Design V2에서 V3로 마이그레이션 시 import된 타이포그래피 변수를 변환합니다.

### 기능

* 타이포그래피 관련 import 문을 찾아 변수명을 변환합니다.
* 변수가 사용된 모든 위치(템플릿 리터럴, 객체 속성 등)를 찾아 업데이트합니다.
* typography.mjs의 매핑 정보에 따라 V2 타이포그래피 변수를 V3로 변환합니다.
* 같은 V3 토큰으로 변환되는 중복 import를 제거합니다 (예: subtitle1Regular, bodyM1Regular가 모두 t5Regular로 변환되면 t5Regular는 한 번만 import).
* 별칭(alias)으로 import된 변수명은 유지합니다 (예: `bodyM1Regular as customTypo`에서 `t5Regular as customTypo`로 변환).

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-custom-imported-typography-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-custom-imported-typography-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-custom-imported-typography-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-custom-imported-typography-variable <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```ts title="basic.input.ts"
    // @ts-nocheck
    import {
      subtitle1Regular,
      subtitle2Regular,
      h4,
      title1Bold,
      title2Bold,
      bodyL1Regular,
      bodyL2Regular,
      caption1Regular,
      caption2Regular,
      label5Regular,
    } from '@src/constants/typography'
    import { bodyM1Regular as customTypo } from '@karrot/typography'

    const S_StoreRequestTitle = styled.h1`
      ${subtitle1Regular};
      margin: 0 0 0.25rem;
      color: ${vars.$scale.color.gray900};
      text-align: center;
    `
    const S_StoreRequestText = styled.p`
      ${subtitle2Regular};
      margin: 0;
      color: ${vars.$scale.color.gray600};
      text-align: center;
    `

    // 추가 테스트 케이스
    // screenTitle 매핑 테스트
    const S_ScreenHeader = styled.h1`
      ${h4};
      margin-bottom: 1rem;
    `

    // 일반 매핑 테스트
    const S_Title = styled.h2`
      ${title1Bold};
      color: ${vars.$scale.color.gray900};
    `

    // 여러 테스트 케이스를 담은 컴포넌트
    const Card = styled.div`
      // title2Bold 매핑 테스트
      h3 {
        ${title2Bold};
        margin-bottom: 8px;
      }
      
      // bodyL1Regular 매핑 테스트
      p.description {
        ${bodyL1Regular};
        color: ${vars.$scale.color.gray800};
      }
      
      // 대체 토큰으로 매핑되는 케이스
      p.content {
        ${bodyL2Regular};
        margin: 0;
      }
      
      // 캡션 스타일
      p.caption {
        ${caption1Regular};
        color: ${vars.$scale.color.gray600};
      }
      
      // 작은 텍스트
      small {
        ${caption2Regular};
        color: ${vars.$scale.color.gray500};
      }
      
      // 라벨 스타일
      label {
        ${label5Regular};
        margin-right: 4px;
      }
    `

    // 다른 모듈에서 가져온 타이포그래피 처리 (별칭 유지해야 함)
    const S_CustomContent = styled.div`
      ${customTypo};
      color: ${vars.$scale.color.gray700};
    `

    // 변수로 사용하는 경우
    const titleStyle = title1Bold;
    const textStyle = subtitle1Regular;
    ```

    ```ts title="basic.output.ts"
    // @ts-nocheck
    import {
      t5Regular,
      t4Regular,
      t10Bold,
      t9Bold,
      t7Bold,
      articleBody,
      t3Regular,
      t2Regular,
      t1Regular,
    } from '@src/constants/typography';
    import { t5Regular as customTypo } from '@karrot/typography'

    const S_StoreRequestTitle = styled.h1`
      ${t5Regular};
      margin: 0 0 0.25rem;
      color: ${vars.$scale.color.gray900};
      text-align: center;
    `
    const S_StoreRequestText = styled.p`
      ${t4Regular};
      margin: 0;
      color: ${vars.$scale.color.gray600};
      text-align: center;
    `

    // 추가 테스트 케이스
    // screenTitle 매핑 테스트
    const S_ScreenHeader = styled.h1`
      ${t10Bold};
      margin-bottom: 1rem;
    `

    // 일반 매핑 테스트
    const S_Title = styled.h2`
      ${t9Bold};
      color: ${vars.$scale.color.gray900};
    `

    // 여러 테스트 케이스를 담은 컴포넌트
    const Card = styled.div`
      // title2Bold 매핑 테스트
      h3 {
        ${t7Bold};
        margin-bottom: 8px;
      }
      
      // bodyL1Regular 매핑 테스트
      p.description {
        ${articleBody};
        color: ${vars.$scale.color.gray800};
      }
      
      // 대체 토큰으로 매핑되는 케이스
      p.content {
        ${t4Regular};
        margin: 0;
      }
      
      // 캡션 스타일
      p.caption {
        ${t3Regular};
        color: ${vars.$scale.color.gray600};
      }
      
      // 작은 텍스트
      small {
        ${t2Regular};
        color: ${vars.$scale.color.gray500};
      }
      
      // 라벨 스타일
      label {
        ${t1Regular};
        margin-right: 4px;
      }
    `

    // 다른 모듈에서 가져온 타이포그래피 처리 (별칭 유지해야 함)
    const S_CustomContent = styled.div`
      ${customTypo};
      color: ${vars.$scale.color.gray700};
    `

    // 변수로 사용하는 경우
    const titleStyle = t9Bold;
    const textStyle = t5Regular;
    ```
  </Accordion>
</Accordions>

## replace-custom-seed-design-vars

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-custom-seed-design-vars <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-custom-seed-design-vars <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-custom-seed-design-vars <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-custom-seed-design-vars <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```ts title="basic.input.ts"
    // @ts-nocheck
    import { vars } from '@/shared/style/vars';

    export const date = style({
      ...vars.typography.caption1Regular,
      color: vars.color.gray600,
    });

    export const color1 = style({
      color: vars.color.yellow500,
    });

    export const color2 = style({
      color: vars.color.blue500,
    });

    export const color3 = style({
      color: vars.color.red500,
    });

    export const title = style({
      ...vars.typography.bodyM1Bold,
      color: vars.color.primary,
    });

    export const subtitle = style({
      ...vars.typography.bodyM2Regular,
      color: vars.color.secondary,
    });

    // 배경색 케이스
    export const cardBackground = style({
      backgroundColor: vars.color.paperSheet,
      padding: '16px',
    });

    // 테두리 케이스
    export const divider = style({
      borderTop: `1px solid ${vars.color.divider1}`,
      marginTop: '8px',
      marginBottom: '8px',
    });

    // 상태 색상 케이스
    export const successMessage = style({
      ...vars.typography.bodyM1Bold,
      color: vars.color.success,
      backgroundColor: vars.color.successLow,
      padding: '12px',
      borderRadius: '4px',
    });

    export const warningMessage = style({
      ...vars.typography.bodyM1Bold,
      color: vars.color.warning,
      backgroundColor: vars.color.warningLow,
      padding: '12px',
      borderRadius: '4px',
    });

    export const errorMessage = style({
      ...vars.typography.bodyM1Bold,
      color: vars.color.danger,
      backgroundColor: vars.color.dangerLow,
      padding: '12px',
      borderRadius: '4px',
    });

    // 다양한 타이포그래피 케이스
    export const heading = style({
      ...vars.typography.h4,
      color: vars.color.inkText,
    });

    export const body = style({
      ...vars.typography.bodyL1Regular,
      color: vars.color.inkTextLow,
    });

    export const label = style({
      ...vars.typography.label3Bold,
      color: vars.color.grayActive,
    });

    // 알파 색상 케이스
    export const overlay = style({
      backgroundColor: vars.color.overlayDim,
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    });

    // 복합 케이스와 상호작용 상태
    export const button = style({
      ...vars.typography.label2Bold,
      backgroundColor: vars.color.primary,
      color: vars.color.onPrimary,
      borderRadius: '4px',
      padding: '8px 16px',
      border: 'none',
      cursor: 'pointer',
      ':hover': {
        backgroundColor: vars.color.primaryHover,
      },
      ':active': {
        backgroundColor: vars.color.primaryPressed,
      },
    });

    export const secondaryButton = style({
      ...vars.typography.label2Bold,
      backgroundColor: vars.color.secondaryLow,
      color: vars.color.secondary,
      borderRadius: '4px',
      padding: '8px 16px',
      border: 'none',
      cursor: 'pointer',
      ':hover': {
        backgroundColor: vars.color.grayHover,
      },
      ':active': {
        backgroundColor: vars.color.grayPressed,
      },
    });

    // 중첩 경로 케이스
    export const floatingPanel = style({
      backgroundColor: vars.color.paperFloating,
      boxShadow: `0 2px 8px ${vars.color.overlayLow}`,
      padding: '20px',
      borderRadius: '8px',
    });

    export const dialogPanel = style({
      backgroundColor: vars.color.paperDialog,
      padding: '24px',
      boxShadow: `0 4px 16px ${vars.color.overlayDim}`,
      borderRadius: '12px',
    });

    // 정적 색상 케이스
    export const staticColors = style({
      color: vars.color.staticBlack,
      backgroundColor: vars.color.staticWhite,
      border: `1px solid ${vars.color.staticBlackAlpha200}`,
    });

    // 정적 색상 케이스 (명시적으로 static 프리픽스 테스트)
    export const staticExplicitColors = style({
      color: vars.color.staticBlack,
      backgroundColor: vars.color.staticWhite,
      boxShadow: `0 2px 4px ${vars.color.staticBlackAlpha500}`,
      outline: `1px solid ${vars.color.staticBlackAlpha200}`,
    });

    export const specialBackground = style({
      background: `linear-gradient(to bottom, ${vars.color.staticWhiteAlpha50}, ${vars.color.staticWhiteAlpha200})`,
      backdropFilter: 'blur(8px)',
    });

    // 복합 스타일 및 다중 속성 케이스
    export const multiProperty = style({
      ...vars.typography.title2Bold,
      color: vars.color.accent,
      borderLeft: `4px solid ${vars.color.accent}`,
      borderRight: `4px solid ${vars.color.accent}`,
      boxShadow: `inset 0 0 0 1px ${vars.color.divider2}, 0 2px 4px ${vars.color.overlayLow}`,
      padding: '16px',
      backgroundColor: vars.color.paperDefault,
    });

    // 믹스인 스타일 케이스
    export const mixinStyle = {
      primary: {
        background: vars.color.primary,
        color: vars.color.onPrimary,
      },
      secondary: {
        background: vars.color.secondary,
      },
      accent: {
        background: vars.color.accent,
        color: vars.color.onGrayOverlay50,
      },
    };

    // 특수 속성 및 스케일 색상 케이스
    export const scaleColors = style({
      fill: vars.color.carrot500,
      stroke: vars.color.gray400,
      stopColor: vars.color.blue400,
      floodColor: vars.color.red400,
      lightingColor: vars.color.green400,
    });

    // 특수 타이포그래피 케이스
    export const specialTypographies = {
      title: vars.typography.title1Bold,
      subtitle: vars.typography.subtitle1Regular,
      label: vars.typography.label5Regular,
      caption: vars.typography.caption2Bold,
    };

    // 다양한 경로를 가진 컬러 토큰
    export const colorContexts = style({
      // 일반 색상
      color: vars.color.primaryLow,
      // 배경 색상
      backgroundColor: vars.color.paperBackground,
      // 테두리 색상
      borderColor: vars.color.divider3,
      // 호버 색상
      ':hover': {
        backgroundColor: vars.color.primaryLowHover,
        borderColor: vars.color.primaryLowActive,
      },
    });

    // 복잡한 다중 경로와 중첩된 객체
    export const nestedStyleObject = {
      button: {
        default: {
          backgroundColor: vars.color.paperAccent,
          color: vars.color.inkText,
          border: `1px solid ${vars.color.carrot300}`,
        },
        hover: {
          backgroundColor: vars.color.carrot100,
          borderColor: vars.color.carrot400,
        },
        active: {
          backgroundColor: vars.color.carrot200,
          color: vars.color.inkTextLow,
        },
      },
      panel: {
        header: {
          ...vars.typography.subtitle2Bold,
          color: vars.color.blue600,
          borderBottom: `1px solid ${vars.color.blue200}`,
        },
        body: {
          ...vars.typography.bodyM2Regular,
          color: vars.color.inkTextLow,
          backgroundColor: vars.color.blue50,
        },
        footer: {
          backgroundColor: vars.color.blue100,
          borderTop: `1px solid ${vars.color.blue200}`,
        },
      },
    };

    // 테두리 속성 매핑 테스트
    export const borderMapping = style({
      // stroke 토큰으로 매핑될 속성
      borderColor: vars.color.divider2,
      // stroke 토큰이 없어서 fg 토큰으로 대체되는 케이스
      borderTopColor: vars.color.primary,
      borderBottomColor: vars.color.accent,
      // stroke 또는 fg 토큰으로 대체
      boxShadow: `0 0 0 1px ${vars.color.primary}, 0 2px 4px ${vars.color.overlayLow}`,
      // 복합 속성
      border: `1px solid ${vars.color.secondary}`,
    });
    ```

    ```ts title="basic.output.ts"
    // @ts-nocheck
    import { vars } from "@/shared/style/vars";

    export const date = style({
      ...vars.typography.t3Regular,
      color: vars.color.palette.gray700,
    });

    export const color1 = style({
      color: vars.color.palette.yellow700,
    });

    export const color2 = style({
      color: vars.color.palette.blue600,
    });

    export const color3 = style({
      color: vars.color.palette.red700,
    });

    export const title = style({
      ...vars.typography.t5Bold,
      color: vars.color.fg.brand,
    });

    export const subtitle = style({
      ...vars.typography.t4Regular,
      color: vars.color.palette.gray900,
    });

    // 배경색 케이스
    export const cardBackground = style({
      backgroundColor: vars.color.bg.layerFloating,
      padding: "16px",
    });

    // 테두리 케이스
    export const divider = style({
      borderTop: `1px solid ${vars.color.stroke.neutralSubtle}`,
      marginTop: "8px",
      marginBottom: "8px",
    });

    // 상태 색상 케이스
    export const successMessage = style({
      ...vars.typography.t5Bold,
      color: vars.color.fg.positive,
      backgroundColor: vars.color.bg.positiveWeak,
      padding: "12px",
      borderRadius: "4px",
    });

    export const warningMessage = style({
      ...vars.typography.t5Bold,
      color: vars.color.bg.warningSolid,
      backgroundColor: vars.color.bg.warningWeak,
      padding: "12px",
      borderRadius: "4px",
    });

    export const errorMessage = style({
      ...vars.typography.t5Bold,
      color: vars.color.fg.critical,
      backgroundColor: vars.color.bg.criticalWeak,
      padding: "12px",
      borderRadius: "4px",
    });

    // 다양한 타이포그래피 케이스
    export const heading = style({
      ...vars.typography.t10Bold,
      color: vars.color.fg.neutral,
    });

    export const body = style({
      ...vars.typography.articleBody,
      color: vars.color.fg.neutralSubtle,
    });

    export const label = style({
      ...vars.typography.t4Bold,
      color: vars.color.fg.neutralMuted,
    });

    // 알파 색상 케이스
    export const overlay = style({
      backgroundColor: vars.color.bg.overlay,
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    });

    // 복합 케이스와 상호작용 상태
    export const button = style({
      ...vars.typography.t5Bold,
      backgroundColor: vars.color.bg.brandSolid,
      color: vars.color.palette.staticWhite,
      borderRadius: "4px",
      padding: "8px 16px",
      border: "none",
      cursor: "pointer",
      ":hover": {
        backgroundColor: vars.color.bg.brandSolidPressed,
      },
      ":active": {
        backgroundColor: vars.color.bg.brandSolidPressed,
      },
    });

    export const secondaryButton = style({
      ...vars.typography.t5Bold,
      backgroundColor: vars.color.bg.neutralWeak,
      color: vars.color.palette.gray900,
      borderRadius: "4px",
      padding: "8px 16px",
      border: "none",
      cursor: "pointer",
      ":hover": {
        backgroundColor: vars.color.bg.neutralWeakPressed,
      },
      ":active": {
        backgroundColor: vars.color.bg.neutralWeakPressed,
      },
    });

    // 중첩 경로 케이스
    export const floatingPanel = style({
      backgroundColor: vars.color.bg.layerFloating,
      boxShadow: `0 2px 8px ${vars.color.bg.overlayMuted}`,
      padding: "20px",
      borderRadius: "8px",
    });

    export const dialogPanel = style({
      backgroundColor: vars.color.bg.layerFloating,
      padding: "24px",
      boxShadow: `0 4px 16px ${vars.color.bg.overlay}`,
      borderRadius: "12px",
    });

    // 정적 색상 케이스
    export const staticColors = style({
      color: vars.color.palette.staticBlack,
      backgroundColor: vars.color.palette.staticWhite,
      border: `1px solid ${vars.color.palette.staticBlackAlpha200}`,
    });

    // 정적 색상 케이스 (명시적으로 static 프리픽스 테스트)
    export const staticExplicitColors = style({
      color: vars.color.palette.staticBlack,
      backgroundColor: vars.color.palette.staticWhite,
      boxShadow: `0 2px 4px ${vars.color.palette.staticBlackAlpha500}`,
      outline: `1px solid ${vars.color.palette.staticBlackAlpha200}`,
    });

    export const specialBackground = style({
      background: `linear-gradient(to bottom, ${vars.color.palette.staticWhiteAlpha50}, ${vars.color.palette.staticWhiteAlpha200})`,
      backdropFilter: "blur(8px)",
    });

    // 복합 스타일 및 다중 속성 케이스
    export const multiProperty = style({
      ...vars.typography.t7Bold,
      color: vars.color.fg.informative,
      borderLeft: `4px solid ${vars.color.fg.informative}`,
      borderRight: `4px solid ${vars.color.fg.informative}`,
      boxShadow: `inset 0 0 0 1px ${vars.color.stroke.neutral}, 0 2px 4px ${vars.color.bg.overlayMuted}`,
      padding: "16px",
      backgroundColor: vars.color.bg.layerDefault,
    });

    // 믹스인 스타일 케이스
    export const mixinStyle = {
      primary: {
        background: vars.color.bg.brandSolid,
        color: vars.color.palette.staticWhite,
      },
      secondary: {
        background: vars.color.palette.gray900,
      },
      accent: {
        background: vars.color.bg.informativeSolid,
        color: vars.color.stroke.onImage,
      },
    };

    // 특수 속성 및 스케일 색상 케이스
    export const scaleColors = style({
      fill: vars.color.palette.carrot600,
      stroke: vars.color.palette.gray500,
      stopColor: vars.color.palette.blue400,
      floodColor: vars.color.palette.red600,
      lightingColor: vars.color.palette.green500,
    });

    // 특수 타이포그래피 케이스
    export const specialTypographies = {
      title: vars.typography.t9Bold,
      subtitle: vars.typography.t5Regular,
      label: vars.typography.t1Regular,
      caption: vars.typography.t2Bold,
    };

    // 다양한 경로를 가진 컬러 토큰
    export const colorContexts = style({
      // 일반 색상
      color: vars.color.palette.carrot100,
      // 배경 색상
      backgroundColor: vars.color.bg.layerBasement,
      // 테두리 색상
      borderColor: vars.color.palette.gray400,
      // 호버 색상
      ":hover": {
        backgroundColor: vars.color.palette.carrot200,
        borderColor: vars.color.palette.carrot100,
      },
    });

    // 복잡한 다중 경로와 중첩된 객체
    export const nestedStyleObject = {
      button: {
        default: {
          backgroundColor: vars.color.palette.carrot100,
          color: vars.color.fg.neutral,
          border: `1px solid ${vars.color.palette.carrot400}`,
        },
        hover: {
          backgroundColor: vars.color.palette.carrot200,
          borderColor: vars.color.palette.carrot500,
        },
        active: {
          backgroundColor: vars.color.palette.carrot300,
          color: vars.color.fg.neutralSubtle,
        },
      },
      panel: {
        header: {
          ...vars.typography.t4Bold,
          color: vars.color.palette.blue600,
          borderBottom: `1px solid ${vars.color.palette.blue300}`,
        },
        body: {
          ...vars.typography.t4Regular,
          color: vars.color.fg.neutralSubtle,
          backgroundColor: vars.color.palette.blue100,
        },
        footer: {
          backgroundColor: vars.color.palette.blue200,
          borderTop: `1px solid ${vars.color.palette.blue300}`,
        },
      },
    };

    // 테두리 속성 매핑 테스트
    export const borderMapping = style({
      // stroke 토큰으로 매핑될 속성
      borderColor: vars.color.stroke.neutral,
      // stroke 토큰이 없어서 fg 토큰으로 대체되는 케이스
      borderTopColor: vars.color.fg.brand,
      borderBottomColor: vars.color.fg.informative,
      // stroke 또는 fg 토큰으로 대체
      boxShadow: `0 0 0 1px ${vars.color.bg.brandSolid}, 0 2px 4px ${vars.color.bg.overlayMuted}`,
      // 복합 속성
      border: `1px solid ${vars.color.palette.gray900}`,
    });
    ```
  </Accordion>
</Accordions>

## replace-stitches-styled-typography

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-stitches-styled-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-stitches-styled-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-stitches-styled-typography <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-stitches-styled-typography <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    const ContentText = styled('p', {
      ...userSelectText,
      overflow: 'hidden',
      whiteSpace: 'pre-wrap',
      wordBreak: 'break-word',
      color: '$gray900',
      variants: {
        size: {
          medium: {
            $text: 'bodyM1Regular',
          },
          large: {
            $text: 'bodyL1Regular',
          },
          xlarge: {
            $text: "h4",
          },
        },
      },
    });

    const ContentText2 = styled('p', {
      ...userSelectText,
      overflow: 'hidden',
      whiteSpace: 'pre-wrap',
      wordBreak: 'break-word',
      color: '$gray900',
      variants: {
        size: {
          medium: {
            $typography: 'bodyM1Regular',
          },
          large: {
            $typography: 'bodyL1Regular',
          },
          xlarge: {
            $typography: "h4",
          },
        },
      },
    });
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    const ContentText = styled('p', {
      ...userSelectText,
      overflow: 'hidden',
      whiteSpace: 'pre-wrap',
      wordBreak: 'break-word',
      color: '$gray900',
      variants: {
        size: {
          medium: {
            $text: "t5Regular",
          },
          large: {
            $text: "articleBody",
          },
          xlarge: {
            $text: "t10Bold",
          },
        },
      },
    });

    const ContentText2 = styled('p', {
      ...userSelectText,
      overflow: 'hidden',
      whiteSpace: 'pre-wrap',
      wordBreak: 'break-word',
      color: '$gray900',
      variants: {
        size: {
          medium: {
            $typography: "t5Regular",
          },
          large: {
            $typography: "articleBody",
          },
          xlarge: {
            $typography: "t10Bold",
          },
        },
      },
    });
    ```
  </Accordion>
</Accordions>

## replace-stitches-theme-color

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-stitches-theme-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-stitches-theme-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-stitches-theme-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-stitches-theme-color <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    import { theme } from "@src/stitches/stitches.config";

    const semanticColors = {
      primary: theme.colors["primary-semantic"].computedValue,
      onPrimary: theme.colors["onPrimary-semantic"].computedValue,
      primaryLow: theme.colors["primaryLow-semantic"].computedValue,
      success: theme.colors["success-semantic"].computedValue,
      warning: theme.colors["warning-semantic"].computedValue,
      danger: theme.colors["danger-semantic"].computedValue,
      paperDefault: theme.colors["paperDefault-semantic"].computedValue,
      paperContents: theme.colors["paperContents-semantic"].computedValue,
      paperDialog: theme.colors["paperDialog-semantic"].computedValue,
      inkText: theme.colors["inkText-semantic"].computedValue,
      inkTextLow: theme.colors["inkTextLow-semantic"].computedValue,
      divider1: theme.colors["divider1-semantic"].computedValue,
      divider2: theme.colors["divider2-semantic"].computedValue,
      overlayDim: theme.colors["overlayDim-semantic"].computedValue,
      accent: theme.colors["accent-semantic"].computedValue,
    };

    const scaleColors = {
      gray00: theme.colors.gray00.computedValue,
      gray100: theme.colors.gray100.computedValue,
      gray200: theme.colors.gray200.computedValue,
      gray300: theme.colors.gray300.computedValue,
      gray400: theme.colors.gray400.computedValue,
      gray500: theme.colors.gray500.computedValue,
      gray600: theme.colors.gray600.computedValue,
      gray700: theme.colors.gray700.computedValue,
      gray800: theme.colors.gray800.computedValue,
      gray900: theme.colors.gray900.computedValue,
      carrot100: theme.colors.carrot100.computedValue,
      carrot500: theme.colors.carrot500.computedValue,
      carrot900: theme.colors.carrot900.computedValue,
      carrotAlpha50: theme.colors.carrotAlpha50.computedValue,
      carrotAlpha100: theme.colors.carrotAlpha100.computedValue,
      carrotAlpha200: theme.colors.carrotAlpha200.computedValue,
      blue300: theme.colors.blue300.computedValue,
      blue600: theme.colors.blue600.computedValue,
      red500: theme.colors.red500.computedValue,
    };

    const staticColors = {
      white: theme.colors["white-static"].computedValue,
      black: theme.colors["black-static"].computedValue,
      blackAlpha200: theme.colors["blackAlpha200-static"].computedValue,
      whiteAlpha200: theme.colors["whiteAlpha200-static"].computedValue,
      gray900: theme.colors["gray900-static"].computedValue,
      carrot50: theme.colors["carrot50-static"].computedValue,
      carrot800: theme.colors["carrot800-static"].computedValue,
      blue50: theme.colors["blue50-static"].computedValue,
      blue800: theme.colors["blue800-static"].computedValue,
      red50: theme.colors["red50-static"].computedValue,
      red800: theme.colors["red800-static"].computedValue,
    };

    const Component = () => {
      return (
        <div>
          <Button
            backgroundColor={theme.colors["primary-semantic"].computedValue}
            color={theme.colors["onPrimary-semantic"].computedValue}
          >
            버튼
          </Button>
          <InfoBox borderColor={theme.colors.gray300.computedValue}>
            <Text color={theme.colors.gray900.computedValue}>안내사항</Text>
            <WarningIcon fill={theme.colors["warning-semantic"].computedValue} />
          </InfoBox>
          <Badge backgroundColor={theme.colors["danger-semantic"].computedValue}>
            <BadgeText color={theme.colors["white-static"].computedValue}>중요</BadgeText>
          </Badge>
        </div>
      );
    };

    const Dialog = ({ isOpen, onClose }) => {
      const styles = {
        overlay: {
          backgroundColor: theme.colors["overlayDim-semantic"].computedValue,
        },
        container: {
          backgroundColor: theme.colors["paperDialog-semantic"].computedValue,
          borderColor: theme.colors.gray300.computedValue,
        },
        header: {
          borderBottom: `1px solid ${theme.colors["divider1-semantic"].computedValue}`,
        },
        title: {
          color: theme.colors.gray900.computedValue,
        },
        content: {
          color: theme.colors.gray700.computedValue,
          backgroundColor: theme.colors["paperContents-semantic"].computedValue,
        },
        footer: {
          borderTop: `1px solid ${theme.colors["divider2-semantic"].computedValue}`,
        },
        closeButton: {
          color: theme.colors.gray500.computedValue,
        },
        submitButton: {
          backgroundColor: theme.colors.blue600.computedValue,
          color: theme.colors["white-static"].computedValue,
        },
      };

      return isOpen ? (
        <div style={styles.overlay}>
          <div style={styles.container}>
            <div style={styles.header}>
              <h2 style={styles.title}>다이얼로그 제목</h2>
              <button style={styles.closeButton} onClick={onClose}>
                닫기
              </button>
            </div>
            <div style={styles.content}>다이얼로그 내용</div>
            <div style={styles.footer}>
              <button style={styles.submitButton}>확인</button>
            </div>
          </div>
        </div>
      ) : null;
    };

    export { semanticColors, scaleColors, staticColors, Component, Dialog };
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    import { theme } from "@src/stitches/stitches.config";

    const semanticColors = {
      primary: theme.colors["bg-brand-solid"].computedValue,
      onPrimary: theme.colors["palette-static-white"].computedValue,
      primaryLow: theme.colors["palette-carrot-100"].computedValue,
      success: theme.colors["bg-positive-solid"].computedValue,
      warning: theme.colors["bg-warning-solid"].computedValue,
      danger: theme.colors["bg-critical-solid"].computedValue,
      paperDefault: theme.colors["bg-layer-default"].computedValue,
      paperContents: theme.colors["bg-layer-fill"].computedValue,
      paperDialog: theme.colors["bg-layer-floating"].computedValue,
      inkText: theme.colors["fg-neutral"].computedValue,
      inkTextLow: theme.colors["fg-neutral-subtle"].computedValue,
      divider1: theme.colors["stroke-neutral-subtle"].computedValue,
      divider2: theme.colors["stroke-neutral-muted"].computedValue,
      overlayDim: theme.colors["bg-overlay"].computedValue,
      accent: theme.colors["bg-informative-solid"].computedValue,
    };

    const scaleColors = {
      gray00: theme.colors["palette-gray-00"].computedValue,
      gray100: theme.colors["palette-gray-200"].computedValue,
      gray200: theme.colors["palette-gray-300"].computedValue,
      gray300: theme.colors["palette-gray-400"].computedValue,
      gray400: theme.colors["palette-gray-500"].computedValue,
      gray500: theme.colors["palette-gray-600"].computedValue,
      gray600: theme.colors["palette-gray-700"].computedValue,
      gray700: theme.colors["palette-gray-800"].computedValue,
      gray800: theme.colors["palette-gray-900"].computedValue,
      gray900: theme.colors["palette-gray-1000"].computedValue,
      carrot100: theme.colors["palette-carrot-200"].computedValue,
      carrot500: theme.colors["palette-carrot-600"].computedValue,
      carrot900: theme.colors["palette-carrot-800"].computedValue,
      carrotAlpha50: theme.colors["palette-carrot-100"].computedValue,
      carrotAlpha100: theme.colors["palette-carrot-200"].computedValue,
      carrotAlpha200: theme.colors["palette-carrot-200"].computedValue,
      blue300: theme.colors["palette-blue-400"].computedValue,
      blue600: theme.colors["palette-blue-600"].computedValue,
      red500: theme.colors["palette-red-700"].computedValue,
    };

    const staticColors = {
      white: theme.colors["palette-static-white"].computedValue,
      black: theme.colors["palette-static-black"].computedValue,
      blackAlpha200: theme.colors["palette-static-black-alpha-500"].computedValue,
      whiteAlpha200: theme.colors["palette-static-white-alpha-300"].computedValue,
      gray900: theme.colors["palette-static-black"].computedValue,
      carrot50: theme.colors["palette-carrot-100"].computedValue,
      carrot800: theme.colors["palette-carrot-700"].computedValue,
      blue50: theme.colors["palette-blue-100"].computedValue,
      blue800: theme.colors["palette-blue-700"].computedValue,
      red50: theme.colors["palette-red-100"].computedValue,
      red800: theme.colors["palette-red-700"].computedValue,
    };

    const Component = () => {
      return (
        <div>
          <Button
            backgroundColor={theme.colors["bg-brand-solid"].computedValue}
            color={theme.colors["palette-static-white"].computedValue}
          >
            버튼
          </Button>
          <InfoBox borderColor={theme.colors["palette-gray-400"].computedValue}>
            <Text color={theme.colors["palette-gray-1000"].computedValue}>안내사항</Text>
            <WarningIcon fill={theme.colors["bg-warning-solid"].computedValue} />
          </InfoBox>
          <Badge backgroundColor={theme.colors["bg-critical-solid"].computedValue}>
            <BadgeText color={theme.colors["palette-static-white"].computedValue}>중요</BadgeText>
          </Badge>
        </div>
      );
    };

    const Dialog = ({ isOpen, onClose }) => {
      const styles = {
        overlay: {
          backgroundColor: theme.colors["bg-overlay"].computedValue,
        },
        container: {
          backgroundColor: theme.colors["bg-layer-floating"].computedValue,
          borderColor: theme.colors["palette-gray-400"].computedValue,
        },
        header: {
          borderBottom: `1px solid ${theme.colors["stroke-neutral-subtle"].computedValue}`,
        },
        title: {
          color: theme.colors["palette-gray-1000"].computedValue,
        },
        content: {
          color: theme.colors["palette-gray-800"].computedValue,
          backgroundColor: theme.colors["bg-layer-fill"].computedValue,
        },
        footer: {
          borderTop: `1px solid ${theme.colors["stroke-neutral-muted"].computedValue}`,
        },
        closeButton: {
          color: theme.colors["palette-gray-600"].computedValue,
        },
        submitButton: {
          backgroundColor: theme.colors["palette-blue-600"].computedValue,
          color: theme.colors["palette-static-white"].computedValue,
        },
      };

      return isOpen ? (
        <div style={styles.overlay}>
          <div style={styles.container}>
            <div style={styles.header}>
              <h2 style={styles.title}>다이얼로그 제목</h2>
              <button style={styles.closeButton} onClick={onClose}>
                닫기
              </button>
            </div>
            <div style={styles.content}>다이얼로그 내용</div>
            <div style={styles.footer}>
              <button style={styles.submitButton}>확인</button>
            </div>
          </div>
        </div>
      ) : null;
    };

    export { semanticColors, scaleColors, staticColors, Component, Dialog };
    ```
  </Accordion>
</Accordions>

## replace-css-seed-design-color-variable

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-css-seed-design-color-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-css-seed-design-color-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-css-seed-design-color-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-css-seed-design-color-variable <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```css title="basic.input.css"
    :root[data-seed] {
      --seed-alert-dialog-backdrop-background: var(--seed-semantic-color-overlay-dim);
      --seed-alert-dialog-content-background: var(--seed-semantic-color-paper-dialog);
      --seed-alert-dialog-title-color: var(--seed-scale-color-gray-900);
      --seed-alert-dialog-description-color: var(--seed-scale-color-gray-900);

      --seed-box-button-focus-border: 2px solid var(--seed-scale-color-blue-600);

      box-shadow: 0 0 0 2px var(--seed-scale-color-blue-600);
      background: linear-gradient(to bottom, var(--seed-scale-color-blue-600), var(--seed-scale-color-blue-700));
    }
    ```

    ```css title="basic.output.css"
    :root[data-seed] {
      --seed-alert-dialog-backdrop-background: var(--seed-color-bg-overlay);
      --seed-alert-dialog-content-background: var(--seed-color-bg-layer-floating);
      --seed-alert-dialog-title-color: var(--seed-color-palette-gray-1000);
      --seed-alert-dialog-description-color: var(--seed-color-palette-gray-1000);

      --seed-box-button-focus-border: 2px solid var(--seed-color-palette-blue-600);

      box-shadow: 0 0 0 2px var(--seed-color-palette-blue-600);
      background: linear-gradient(to bottom, var(--seed-color-palette-blue-600), var(--seed-color-palette-blue-800));
    }
    ```
  </Accordion>
</Accordions>

## replace-react-icon

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-react-icon <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-react-icon <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-react-icon <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-react-icon <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    import {
      IconSellRegular,
      IconListFill,
      IconAddFill as AddIconAlias,
    } from "@seed-design/react-icon";
    import IconSellFill from "@seed-design/react-icon/IconSellFill";
    import IconAddThin from '@karrotmarket/karrot-ui-icon/lib/react/IconAddThin';
    import IconCloseThin from '@karrotmarket/karrot-ui-icon/lib/react/IconCloseThin';
    import IconCarRegular from '@karrotmarket/karrot-ui-icon/lib/react/IconCarRegular';

    function App() {
      console.log(IconSellRegular);

      return (
        <>
          <IconListFill />
          <IconCloseThin />
          <IconCarRegular />
          <AddIconAlias />
        </>
      );
    }
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    import {
      IconPlusSquareLine,
      IconDothorizline3VerticalFill,
      IconPlusFill as AddIconAlias,
    } from "@karrotmarket/react-monochrome-icon";
    import IconPlusSquareFill from "@karrotmarket/react-monochrome-icon/IconPlusSquareFill";
    import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
    import IconXmarkLine from "@karrotmarket/react-monochrome-icon/IconXmarkLine";
    import IconCarFrontsideLine from "@karrotmarket/react-monochrome-icon/IconCarFrontsideLine";

    function App() {
      console.log(IconPlusSquareLine);

      return (
        <>
          <IconDothorizline3VerticalFill />
          <IconXmarkLine />
          <IconCarFrontsideLine />
          <AddIconAlias />
        </>
      );
    }
    ```
  </Accordion>
</Accordions>

## replace-seed-design-token-vars

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-seed-design-token-vars <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-seed-design-token-vars <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-seed-design-token-vars <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-seed-design-token-vars <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    import { vars as legacyVars } from "@seed-design/design-token";

    import { vars } from "@seed-design/css/vars";
    import { vars as typoVars } from "@seed-design/css/vars/component/typography";

    const color = vars.$color.palette.gray600;
    const typography = typoVars.textStyleT5Bold.enabled.root;
    const legacyColor = legacyVars.$static.color.staticWhiteAlpha50;
    ```

    ```tsx title="basic.output.tsx"
    import { vars as legacyVars } from "@seed-design/design-token";

    import { vars } from "@seed-design/css/vars";
    import { vars as typoVars } from "@seed-design/css/vars/component/typography";

    const color = vars.$color.palette.gray600;
    const typography = typoVars.textStyleT5Bold.enabled.root;
    const legacyColor = legacyVars.$static.color.staticWhiteAlpha50;
    ```
  </Accordion>
</Accordions>

## replace-semantic-stroke-color

시맨틱 stroke 컬러 토큰을 v0.2.0에 맞춰 마이그레이션하는 transform입니다.

### 목적

@seed-design/css v0.2.0에서 업데이트된 시맨틱 stroke 컬러 토큰을 자동으로 마이그레이션합니다.
이전 버전의 stroke 토큰들을 새로운 네이밍 규칙에 맞게 변환합니다.

### 변환 매핑

#### 우선 순위 변환 (1차)

⚠️ **중요**: 다음 변환은 반드시 다른 변환보다 먼저 처리됩니다.

| 기존 토큰                             | 신규 토큰                              | 비고                 |
| --------------------------------- | ---------------------------------- | ------------------ |
| `vars.$color.stroke.neutralMuted` | `vars.$color.stroke.neutralSubtle` | 가장 먼저 마이그레이션해야 합니다 |

#### 일반 변환 (2차)

| 기존 토큰                             | 신규 토큰                                |
| --------------------------------- | ------------------------------------ |
| `vars.$color.stroke.onImage`      | `vars.$color.stroke.neutralSubtle`   |
| `vars.$color.stroke.neutral`      | `vars.$color.stroke.neutralMuted`    |
| `vars.$color.stroke.fieldFocused` | `vars.$color.stroke.neutralContrast` |
| `vars.$color.stroke.control`      | `vars.$color.stroke.neutralWeak`     |
| `vars.$color.stroke.field`        | `vars.$color.stroke.neutralWeak`     |
| `vars.$color.stroke.brand`        | `vars.$color.stroke.brandWeak`       |
| `vars.$color.stroke.positive`     | `vars.$color.stroke.positiveWeak`    |
| `vars.$color.stroke.informative`  | `vars.$color.stroke.informativeWeak` |
| `vars.$color.stroke.warning`      | `vars.$color.stroke.warningWeak`     |
| `vars.$color.stroke.critical`     | `vars.$color.stroke.criticalWeak`    |

### 지원하는 파일 형식

* TypeScript (`.ts`)
* TypeScript JSX (`.tsx`)

### 변환 예시

#### 기본 사용

```typescript
// Before
import { vars } from "@seed-design/css/vars";
const borderColor = vars.$color.stroke.neutralMuted;
const outlineColor = vars.$color.stroke.neutral;

// After
import { vars } from "@seed-design/css/vars";
const borderColor = vars.$color.stroke.neutralSubtle;
const outlineColor = vars.$color.stroke.neutralMuted;
```

#### React 컴포넌트에서의 사용

```tsx
// Before
const Component = () => (
  <div style={{ 
    borderColor: vars.$color.stroke.control,
    outlineColor: vars.$color.stroke.brand 
  }} />
);

// After
const Component = () => (
  <div style={{ 
    borderColor: vars.$color.stroke.neutralWeak,
    outlineColor: vars.$color.stroke.brandWeak 
  }} />
);
```

### 우선 순위의 중요성

이 transform은 **2-pass 방식**으로 동작합니다:

1. **1차 변환**: `neutralMuted` → `neutralSubtle`을 먼저 처리
2. **2차 변환**: `neutral` → `neutralMuted` 등 나머지 변환들을 처리

이 순서가 중요한 이유는 연쇄 변환을 방지하기 위해서입니다.
만약 순서가 바뀌면 `neutralMuted`가 `neutralSubtle`로 변환되기 전에
`neutral`이 `neutralMuted`로 변환될 수 있어 예상치 못한 결과가 나올 수 있습니다.

### 변환되지 않는 토큰들

다음 토큰들은 이미 v3 형식이므로 변환되지 않습니다:

* `vars.$color.stroke.brandWeak`
* `vars.$color.stroke.brandSolid`
* `vars.$color.stroke.neutralSubtle`
* `vars.$color.stroke.neutralContrast`
* `vars.$color.stroke.neutralWeak`
* 기타 `-weak`, `-solid` 접미사를 가진 토큰들

### 로깅

transform 실행 시 다음과 같은 로그가 생성됩니다:

* `.report/replace-semantic-stroke-color-success.log`: 성공한 변환들
* `.report/replace-semantic-stroke-color-issues.log`: 경고 및 실패
* `.report/replace-semantic-stroke-color-debug.log`: 디버그 정보

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-semantic-stroke-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-semantic-stroke-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-semantic-stroke-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-semantic-stroke-color <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck
    import React from "react";
    import { vars } from "@seed-design/css/vars";

    // 인라인 스타일에서 stroke 토큰 사용
    const Component1 = () => (
      <div
        style={{
          borderColor: vars.$color.stroke.neutralMuted,
          borderTopColor: vars.$color.stroke.neutral,
          borderBottomColor: vars.$color.stroke.onImage,
          outlineColor: vars.$color.stroke.fieldFocused,
        }}
      />
    );

    // 객체 스타일에서 사용
    const styles = {
      container: {
        borderColor: vars.$color.stroke.control,
        border: `1px solid ${vars.$color.stroke.field}`,
      },
      button: {
        borderColor: vars.$color.stroke.brand,
        outlineColor: vars.$color.stroke.positive,
      },
      input: {
        borderColor: vars.$color.stroke.informative,
        "&:focus": {
          borderColor: vars.$color.stroke.warning,
        },
      },
      error: {
        borderColor: vars.$color.stroke.critical,
      },
    };

    // 삼항 연산자에서 사용
    const ConditionalComponent = ({ isActive }: { isActive: boolean }) => (
      <div
        style={{
          borderColor: isActive ? vars.$color.stroke.neutralMuted : vars.$color.stroke.neutral,
          stroke: vars.$color.stroke.onImage,
        }}
      />
    );

    // 새로운 토큰들 (변경되지 않아야 함)
    const NewTokensComponent = () => (
      <div
        style={{
          borderColor: vars.$color.stroke.brandWeak,
          outlineColor: vars.$color.stroke.neutralSubtle,
        }}
      />
    );
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck
    import React from "react";
    import { vars } from "@seed-design/css/vars";

    // 인라인 스타일에서 stroke 토큰 사용
    const Component1 = () => (
      <div
        style={{
          borderColor: vars.$color.stroke.neutralSubtle,
          borderTopColor: vars.$color.stroke.neutralMuted,
          borderBottomColor: vars.$color.stroke.neutralSubtle,
          outlineColor: vars.$color.stroke.neutralContrast,
        }}
      />
    );

    // 객체 스타일에서 사용
    const styles = {
      container: {
        borderColor: vars.$color.stroke.neutralWeak,
        border: `1px solid ${vars.$color.stroke.neutralWeak}`,
      },
      button: {
        borderColor: vars.$color.stroke.brandWeak,
        outlineColor: vars.$color.stroke.positiveWeak,
      },
      input: {
        borderColor: vars.$color.stroke.informativeWeak,
        "&:focus": {
          borderColor: vars.$color.stroke.warningWeak,
        },
      },
      error: {
        borderColor: vars.$color.stroke.criticalWeak,
      },
    };

    // 삼항 연산자에서 사용
    const ConditionalComponent = ({ isActive }: { isActive: boolean }) => (
      <div
        style={{
          borderColor: isActive ? vars.$color.stroke.neutralSubtle : vars.$color.stroke.neutralMuted,
          stroke: vars.$color.stroke.neutralSubtle,
        }}
      />
    );

    // 새로운 토큰들 (변경되지 않아야 함)
    const NewTokensComponent = () => (
      <div
        style={{
          borderColor: vars.$color.stroke.brandWeak,
          outlineColor: vars.$color.stroke.neutralSubtle,
        }}
      />
    );
    ```
  </Accordion>
</Accordions>

## replace-custom-seed-design-text-component

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-custom-seed-design-text-component <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-custom-seed-design-text-component <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-custom-seed-design-text-component <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-custom-seed-design-text-component <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    import Text from 'components/Base/Text';

    const Component = () => {
      return (
        <div>
          {/* 기존 variant prop 케이스 */}
          <Text variant="title2Bold">광고 노출 기준</Text>
          <Text variant="subtitle1Regular">
            앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
          </Text>
          
          {/* typography prop + color prop 케이스 */}
          <Text typography="$semantic.bodyL1Regular" color="$scale.gray700">
            앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
          </Text>
          <Text typography="$semantic.label3Bold" color="$scale.gray600" className={marginLeft['4px']}>
            지역 선택하기
          </Text>
          <Text typography="$semantic.label2Bold" color="$scale.gray900">
            지표별 성과
          </Text>
          
          {/* 다양한 typography prop 형태 */}
          <Text typography="bodyL1Regular">접두사 없는 토큰</Text>
          <Text typography="label2Bold">또 다른 토큰</Text>
          
          {/* 다양한 color prop 형태 */}
          <Text variant="title1Bold" color="$semantic.primary">시맨틱 컬러</Text>
          <Text variant="body1Regular" color="$static.white">스태틱 컬러</Text>
          <Text variant="caption1Regular" textColor="$scale.carrot500">textColor prop</Text>
          
          {/* 조건부 표현식 케이스 */}
          <Text variant={isActive ? "title1Bold" : "body1Regular"}>조건부 variant</Text>
          <Text color={isError ? "$semantic.danger" : "$scale.gray700"}>조건부 color</Text>
          
          {/* JSX 표현식 컨테이너 케이스 */}
          <Text typography={"$semantic.bodyL1Regular"} color={"$scale.gray500"}>
            표현식 컨테이너
          </Text>
        </div>
      );
    };
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    import { Text } from "@seed-design/react";

    const Component = () => {
      return (
        <div>
          {/* 기존 variant prop 케이스 */}
          <Text textStyle="t7Bold">광고 노출 기준</Text>
          <Text textStyle="t5Regular">
            앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
          </Text>
          {/* typography prop + color prop 케이스 */}
          <Text color="palette.gray800" textStyle="articleBody">
            앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
          </Text>
          <Text color="palette.gray700" className={marginLeft['4px']} textStyle="t4Bold">
            지역 선택하기
          </Text>
          <Text color="palette.gray1000" textStyle="t5Bold">
            지표별 성과
          </Text>
          {/* 다양한 typography prop 형태 */}
          <Text textStyle="articleBody">접두사 없는 토큰</Text>
          <Text textStyle="t5Bold">또 다른 토큰</Text>
          {/* 다양한 color prop 형태 */}
          <Text color="fg.brand" textStyle="t9Bold">시맨틱 컬러</Text>
          <Text variant="body1Regular" color="$static.white">스태틱 컬러</Text>
          <Text textColor="palette.carrot600" textStyle="t3Regular">textColor prop</Text>
          {/* 조건부 표현식 케이스 */}
          <Text textStyle={isActive ? "t9Bold" : "body1Regular"}>조건부 variant</Text>
          <Text color={isError ? "fg.critical" : "palette.gray800"}>조건부 color</Text>
          {/* JSX 표현식 컨테이너 케이스 */}
          <Text color={"palette.gray600"} textStyle="articleBody">
            표현식 컨테이너
          </Text>
        </div>
      );
    };
    ```
  </Accordion>
</Accordions>

## replace-seed-design-token-typography-classname

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-seed-design-token-typography-classname <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-seed-design-token-typography-classname <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-seed-design-token-typography-classname <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-seed-design-token-typography-classname <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    import { classNames } from "@seed-design/design-token";
    import { style } from "@vanilla-extract/css";

    const typography = {
      one: classNames.$semantic.typography.title2Regular,
      two: classNames.$semantic.typography.label3Regular,
      three: classNames.$semantic.typography.label5Regular,
      four: classNames.$semantic.typography.label6Regular,
    }

    export const footer = style([
      classNames.$semantic.typography.caption1Regular,
      {
        padding: "16px",
        marginTop: "12px",
        color: vars.$scale.color.gray700,
        backgroundColor: vars.$semantic.color.paperContents,
      },
    ]);
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    import { text } from "@seed-design/css/recipes/text";
    import { style } from "@vanilla-extract/css";

    const typography = {
      one: text({ textStyle: "t7Regular" }),
      two: text({ textStyle: "t4Regular" }),
      three: text({ textStyle: "t1Regular" }),
      four: text({ textStyle: "t1Regular" }),
    }

    export const footer = style([
      text({ textStyle: "t3Regular" }),
      {
        padding: "16px",
        marginTop: "12px",
        color: vars.$scale.color.gray700,
        backgroundColor: vars.$semantic.color.paperContents,
      },
    ]);
    ```
  </Accordion>
</Accordions>

## replace-stitches-styled-color

Stitches로 스타일링된 컴포넌트의 색상을 V3 형식으로 변환해요.

### 변환 내용

* Stitches `styled()` 함수에서 사용된 Seed Design V2 색상 토큰을 V3 색상 토큰으로 변환합니다.
* 모든 색상 관련 스타일 속성(color, backgroundColor, borderColor 등)을 지원합니다.
* 상태 변이(variants)에 적용된 색상 변경도 함께 변환합니다.

### 대상 파일

* `.tsx`, `.jsx`, `.ts`, `.js` 파일에서 Stitches 스타일링 사용 부분

### 주의사항

* 기존 코드의 구조와 포맷을 최대한 유지하면서 색상 값만 변경합니다.
* 커스텀 색상 값이나 CSS 변수는 변환하지 않습니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-stitches-styled-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-stitches-styled-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-stitches-styled-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-stitches-styled-color <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    const SemanticColorTestComponent = styled("div", {
      // Semantic Color 테스트
      color: "$primary-semantic",
      color: "$onPrimary-semantic",
      color: "$primaryLow-semantic",
      color: "$secondary-semantic",
      color: "$secondaryLow-semantic",
      color: "$success-semantic",
      color: "$successLow-semantic",
      color: "$warning-semantic",
      color: "$warningLow-semantic",
      color: "$danger-semantic",
      color: "$dangerLow-semantic",
      color: "$overlayDim-semantic",
      color: "$overlayLow-semantic",
      color: "$paperSheet-semantic",
      color: "$paperDialog-semantic",
      color: "$paperFloating-semantic",
      color: "$paperContents-semantic",
      color: "$paperDefault-semantic",
      color: "$paperBackground-semantic",
      color: "$paperAccent-semantic",
      color: "$primaryHover-semantic",
      color: "$primaryPressed-semantic",
      color: "$primaryLowHover-semantic",
      color: "$primaryLowActive-semantic",
      color: "$primaryLowPressed-semantic",
      color: "$grayHover-semantic",
      color: "$grayPressed-semantic",
      color: "$onPrimaryOverlay50-semantic",
      color: "$onPrimaryOverlay200-semantic",
      color: "$onPrimaryLowOverlay50-semantic",
      color: "$onPrimaryLowOverlay100-semantic",
      color: "$onPrimaryLowOverlay200-semantic",
      color: "$onGrayOverlay50-semantic",
      color: "$onGrayOverlay100-semantic",
      color: "$divider1-semantic",
      color: "$divider2-semantic",
      color: "$divider3-semantic",
      color: "$accent-semantic",
      color: "$inkText-semantic",
      color: "$inkTextLow-semantic",
      color: "$grayActive-semantic",
    });

    const ScaleColorTestComponent = styled("div", {
      // Scale Color Gray 테스트
      color: "$gray00",
      color: "$gray50",
      color: "$gray100",
      color: "$gray200",
      color: "$gray300",
      color: "$gray400",
      color: "$gray500",
      color: "$gray600",
      color: "$gray700",
      color: "$gray800",
      color: "$gray900",
      color: "$grayAlpha50",
      color: "$grayAlpha100",
      color: "$grayAlpha200",
      color: "$grayAlpha500",

      // Scale Color Carrot 테스트
      color: "$carrot50",
      color: "$carrot100",
      color: "$carrot200",
      color: "$carrot300",
      color: "$carrot400",
      color: "$carrot500",
      color: "$carrot600",
      color: "$carrot700",
      color: "$carrot800",
      color: "$carrot900",
      color: "$carrot950",
      color: "$carrotAlpha50",
      color: "$carrotAlpha100",
      color: "$carrotAlpha200",

      // Scale Color Blue 테스트
      color: "$blue50",
      color: "$blue100",
      color: "$blue200",
      color: "$blue300",
      color: "$blue400",
      color: "$blue500",
      color: "$blue600",
      color: "$blue700",
      color: "$blue800",
      color: "$blue900",
      color: "$blue950",
      color: "$blueAlpha50",
      color: "$blueAlpha100",
      color: "$blueAlpha200",

      // Scale Color Red 테스트
      color: "$red50",
      color: "$red100",
      color: "$red200",
      color: "$red300",
      color: "$red400",
      color: "$red500",
      color: "$red600",
      color: "$red700",
      color: "$red800",
      color: "$red900",
      color: "$red950",
      color: "$redAlpha50",
      color: "$redAlpha100",
      color: "$redAlpha200",

      // Scale Color Green 테스트
      color: "$green50",
      color: "$green100",
      color: "$green200",
      color: "$green300",
      color: "$green400",
      color: "$green500",
      color: "$green600",
      color: "$green700",
      color: "$green800",
      color: "$green900",
      color: "$green950",
      color: "$greenAlpha50",
      color: "$greenAlpha100",
      color: "$greenAlpha200",

      // Scale Color Yellow 테스트
      color: "$yellow50",
      color: "$yellow100",
      color: "$yellow200",
      color: "$yellow300",
      color: "$yellow400",
      color: "$yellow500",
      color: "$yellow600",
      color: "$yellow700",
      color: "$yellow800",
      color: "$yellow900",
      color: "$yellow950",
      color: "$yellowAlpha50",
      color: "$yellowAlpha100",
      color: "$yellowAlpha200",

      // Scale Color Purple 테스트
      color: "$purple50",
      color: "$purple100",
      color: "$purple200",
      color: "$purple300",
      color: "$purple400",
      color: "$purple500",
      color: "$purple600",
      color: "$purple700",
      color: "$purple800",
      color: "$purple900",
      color: "$purple950",
    });

    const StaticColorTestComponent = styled("div", {
      // Static Color 테스트
      color: "$black-static",
      color: "$white-static",
      color: "$gray900-static",
      color: "$carrot50-static",
      color: "$carrot800-static",
      color: "$green50-static",
      color: "$green800-static",
      color: "$yellow50-static",
      color: "$yellow800-static",
      color: "$red50-static",
      color: "$red800-static",
      color: "$blue50-static",
      color: "$blue800-static",
      color: "$blackAlpha200-static",
      color: "$blackAlpha500-static",
      color: "$whiteAlpha50-static",
      color: "$whiteAlpha200-static",
    });

    // 복합 속성 테스트
    const ComplexPropertyTestComponent = styled("div", {
      border: "1px solid $gray700",
      boxShadow: "0 0 10px $overlayDim-semantic",
      outline: "2px solid $accent-semantic",
      textDecoration: "underline $danger-semantic",

      // 네스팅된 속성 테스트
      "&:before": {
        borderBottom: "1px solid $divider1-semantic",
        background: "$paperContents-semantic",
      },

      // 변형 테스트
      variants: {
        theme: {
          primary: {
            background: "$primary-semantic",
            color: "$onPrimary-semantic",
          },
          secondary: {
            background: "$secondaryLow-semantic",
            color: "$inkText-semantic",
          },
          danger: {
            background: "$danger-semantic",
            color: "$white-static",
          },
        },
      },
    });

    // 복합 속성 (색상 토큰이 앞에 있는 경우) 테스트
    const BorderAndColorTestComponent = styled("div", {
      color: "$scale-red500 solid 1px",
      color: "$red600 dashed 2px",
      color: "$scale-blue400 dotted 3px",
      color: "$scale-green600 double 4px",
      color: "$scale-yellow500 groove 2px",
      outlineColor: "$scale-purple500",
    });

    const ImportantTest = styled("div", {
      color: "$primary-semantic !important",
      color: "$onPrimary-semantic !important",
      color: "$primaryLow-semantic !important",
      color: "$gray00 !important",
      color: "$gray50 !important",
      color: "$gray100 !important",
      css: {
        color: "$scale-gray600 !important",
        borderColor: "$scale-gray400 !important",
        backgroundColor: "$scale-gray100 !important",
      },
    });

    const Li_FieldItem = styled("li", {
      borderBottom: `${rem(1)} solid $semantic-divider1`,
      borderBottom: `0.5rem solid $semantic-paperBackground`,
      border: check ? "1px solid $semantic-divider1" : "0.5rem solid $semantic-paperBackground",
    });
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    const SemanticColorTestComponent = styled("div", {
      // Semantic Color 테스트
      color: "$fg-brand",
      color: "$palette-static-white",
      color: "$palette-carrot-100",
      color: "$palette-gray-900",
      color: "$bg-neutral-weak",
      color: "$fg-positive",
      color: "$bg-positive-weak",
      color: "$bg-warning-solid",
      color: "$bg-warning-weak",
      color: "$fg-critical",
      color: "$bg-critical-weak",
      color: "$bg-overlay",
      color: "$bg-overlay-muted",
      color: "$bg-layer-floating",
      color: "$bg-layer-floating",
      color: "$bg-layer-floating",
      color: "$bg-layer-fill",
      color: "$bg-layer-default",
      color: "$bg-layer-basement",
      color: "$palette-carrot-100",
      color: "$bg-brand-solid-pressed",
      color: "$bg-brand-solid-pressed",
      color: "$palette-carrot-200",
      color: "$palette-carrot-100",
      color: "$palette-carrot-200",
      color: "$bg-neutral-weak-pressed",
      color: "$bg-neutral-weak-pressed",
      color: "$onPrimaryOverlay50-semantic",
      color: "$onPrimaryOverlay200-semantic",
      color: "$onPrimaryLowOverlay50-semantic",
      color: "$onPrimaryLowOverlay100-semantic",
      color: "$onPrimaryLowOverlay200-semantic",
      color: "$stroke-neutral-subtle",
      color: "$onGrayOverlay100-semantic",
      color: "$stroke-neutral-subtle",
      color: "$stroke-neutral-muted",
      color: "$palette-gray-400",
      color: "$fg-informative",
      color: "$fg-neutral",
      color: "$fg-neutral-subtle",
      color: "$fg-neutral-muted",
    });

    const ScaleColorTestComponent = styled("div", {
      // Scale Color Gray 테스트
      color: "$palette-gray-00",
      color: "$palette-gray-100",
      color: "$palette-gray-200",
      color: "$palette-gray-300",
      color: "$palette-gray-400",
      color: "$palette-gray-500",
      color: "$palette-gray-600",
      color: "$palette-gray-700",
      color: "$palette-gray-800",
      color: "$palette-gray-900",
      color: "$palette-gray-1000",
      color: "$palette-gray-200",
      color: "$palette-gray-300",
      color: "$palette-gray-500",
      color: "$palette-gray-700",

      // Scale Color Carrot 테스트
      color: "$palette-carrot-100",
      color: "$palette-carrot-200",
      color: "$palette-carrot-300",
      color: "$palette-carrot-400",
      color: "$palette-carrot-500",
      color: "$palette-carrot-600",
      color: "$palette-carrot-600",
      color: "$palette-carrot-700",
      color: "$palette-carrot-700",
      color: "$palette-carrot-800",
      color: "$palette-carrot-800",
      color: "$palette-carrot-100",
      color: "$palette-carrot-200",
      color: "$palette-carrot-200",

      // Scale Color Blue 테스트
      color: "$palette-blue-100",
      color: "$palette-blue-200",
      color: "$palette-blue-300",
      color: "$palette-blue-400",
      color: "$palette-blue-400",
      color: "$palette-blue-600",
      color: "$palette-blue-600",
      color: "$palette-blue-800",
      color: "$palette-blue-900",
      color: "$palette-blue-900",
      color: "$palette-blue-1000",
      color: "$palette-blue-100",
      color: "$palette-blue-100",
      color: "$palette-blue-200",

      // Scale Color Red 테스트
      color: "$palette-red-100",
      color: "$palette-red-200",
      color: "$palette-red-300",
      color: "$palette-red-400",
      color: "$palette-red-600",
      color: "$palette-red-700",
      color: "$palette-red-700",
      color: "$palette-red-800",
      color: "$palette-red-900",
      color: "$palette-red-900",
      color: "$palette-red-900",
      color: "$palette-red-100",
      color: "$palette-red-200",
      color: "$palette-red-300",

      // Scale Color Green 테스트
      color: "$palette-green-100",
      color: "$palette-green-200",
      color: "$palette-green-300",
      color: "$palette-green-400",
      color: "$palette-green-500",
      color: "$palette-green-600",
      color: "$palette-green-700",
      color: "$palette-green-800",
      color: "$palette-green-900",
      color: "$palette-green-900",
      color: "$palette-green-900",
      color: "$palette-green-100",
      color: "$palette-green-200",
      color: "$palette-green-200",

      // Scale Color Yellow 테스트
      color: "$palette-yellow-100",
      color: "$palette-yellow-200",
      color: "$palette-yellow-300",
      color: "$palette-yellow-400",
      color: "$palette-yellow-500",
      color: "$palette-yellow-700",
      color: "$palette-yellow-700",
      color: "$palette-yellow-800",
      color: "$palette-yellow-800",
      color: "$palette-yellow-900",
      color: "$palette-yellow-900",
      color: "$palette-yellow-100",
      color: "$palette-yellow-100",
      color: "$palette-yellow-100",

      // Scale Color Purple 테스트
      color: "$palette-purple-100",
      color: "$palette-purple-300",
      color: "$palette-purple-400",
      color: "$palette-purple-400",
      color: "$palette-purple-500",
      color: "$palette-purple-600",
      color: "$palette-purple-700",
      color: "$palette-purple-800",
      color: "$palette-purple-900",
      color: "$palette-purple-900",
      color: "$palette-purple-1000",
    });

    const StaticColorTestComponent = styled("div", {
      // Static Color 테스트
      color: "$palette-static-black",
      color: "$palette-static-white",
      color: "$palette-static-black",
      color: "$palette-carrot-100",
      color: "$palette-carrot-700",
      color: "$palette-green-100",
      color: "$palette-green-700",
      color: "$palette-yellow-100",
      color: "$palette-yellow-700",
      color: "$palette-red-100",
      color: "$palette-red-700",
      color: "$palette-blue-100",
      color: "$palette-blue-700",
      color: "$palette-static-black-alpha-500",
      color: "$palette-static-black-alpha-700",
      color: "$palette-static-white-alpha-50",
      color: "$palette-static-white-alpha-300",
    });

    // 복합 속성 테스트
    const ComplexPropertyTestComponent = styled("div", {
      border: "1px solid $palette-gray-800",
      boxShadow: "0 0 10px $bg-overlay",
      outline: "2px solid $fg-informative",
      textDecoration: "underline $fg-critical",

      // 네스팅된 속성 테스트
      "&:before": {
        borderBottom: "1px solid $stroke-neutral-subtle",
        background: "$bg-layer-fill",
      },

      // 변형 테스트
      variants: {
        theme: {
          primary: {
            background: "$bg-brand-solid",
            color: "$palette-static-white",
          },
          secondary: {
            background: "$bg-neutral-weak",
            color: "$fg-neutral",
          },
          danger: {
            background: "$bg-critical-solid",
            color: "$palette-static-white",
          },
        },
      },
    });

    // 복합 속성 (색상 토큰이 앞에 있는 경우) 테스트
    const BorderAndColorTestComponent = styled("div", {
      color: "$palette-red-700 solid 1px",
      color: "$palette-red-700 dashed 2px",
      color: "$palette-blue-400 dotted 3px",
      color: "$palette-green-700 double 4px",
      color: "$palette-yellow-700 groove 2px",
      outlineColor: "$palette-purple-600",
    });

    const ImportantTest = styled("div", {
      color: "$fg-brand !important",
      color: "$palette-static-white !important",
      color: "$palette-carrot-100 !important",
      color: "$palette-gray-00 !important",
      color: "$palette-gray-100 !important",
      color: "$palette-gray-200 !important",
      css: {
        color: "$palette-gray-700 !important",
        borderColor: "$palette-gray-500 !important",
        backgroundColor: "$palette-gray-200 !important",
      },
    });

    const Li_FieldItem = styled("li", {
      borderBottom: `${rem(1)} solid $stroke-neutral-subtle`,
      borderBottom: `0.5rem solid $bg-layer-basement`,
      border: check ? "1px solid $stroke-neutral-subtle" : "0.5rem solid $bg-layer-basement",
    });
    ```
  </Accordion>
</Accordions>

## replace-custom-text-component-color-prop

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-custom-text-component-color-prop <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-custom-text-component-color-prop <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-custom-text-component-color-prop <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-custom-text-component-color-prop <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    const Component = () => {
      return (
        <>
          <Text color="gray100" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="gray700" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="carrot100" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="carrot500" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="carrot700" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="carrot900" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="staticBlack" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="staticWhite" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="onPrimary" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color={isSelected ? "onPrimary" : "primary"} />
          <Text color={isSelected ? 'primary' : 'gray900'}  />
          <Text color={isSelected ? 'carrot600' : 'blue600'}  />
        </>
      );
    };
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    const Component = () => {
      return (
        <>
          <Text color="palette.gray200" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.gray800" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.carrot200" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.carrot600" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.carrot700" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.carrot800" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.staticBlack" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.staticWhite" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color="palette.staticWhite" variant="subtitle2Regular" className="text-ellipsis-2" />
          <Text color={isSelected ? "palette.staticWhite" : "fg.brand"} />
          <Text color={isSelected ? "fg.brand" : "palette.gray1000"}  />
          <Text color={isSelected ? "palette.carrot600" : "palette.blue600"}  />
        </>
      );
    };
    ```
  </Accordion>
</Accordions>

## replace-alpha-color

Seed Design V3에서 V3로 알파 컬러 토큰을 업데이트하는 transform입니다.
이 transform은 다음과 같은 알파 컬러 토큰들을 새로운 값으로 변경합니다:

* `staticBlackAlpha50` → `staticBlackAlpha200`
* `staticBlackAlpha200` → `staticBlackAlpha500`
* `staticBlackAlpha500` → `staticBlackAlpha700`
* `staticWhiteAlpha200` → `staticWhiteAlpha300`

### 주의사항

* 이 transform은 JavaScript/TypeScript 파일과 CSS 파일을 모두 자동으로 처리합니다.
* **한 번만 실행**: 동일한 파일에 여러 번 실행하면 연쇄 변환이 발생할 수 있습니다
* **V3 → V3 마이그레이션**: 이미 V3를 사용 중인 프로젝트에서만 사용하세요
* **백업 권장**: 변환 전에 코드를 백업하는 것을 권장합니다
* **순서 중요**: 큰 번호부터 작은 번호 순으로 변환하여 연쇄 변환을 방지합니다

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-alpha-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-alpha-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-alpha-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-alpha-color <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck
    import { vars } from "@seed-design/css/vars";

    export const Component = () => {
      const styles = {
        overlay: {
          backgroundColor: vars.$color.palette.staticBlackAlpha50,
        },
        shadow: {
          backgroundColor: vars.$color.palette.staticBlackAlpha200,
        },
        darkOverlay: {
          backgroundColor: vars.$color.palette.staticBlackAlpha500,
        },
        lightOverlay: {
          backgroundColor: vars.$color.palette.staticWhiteAlpha200,
        },
      };

      return (
        <div>
          <div style={styles.overlay}>Light overlay</div>
          <div style={styles.shadow}>Shadow</div>
          <div style={styles.darkOverlay}>Dark overlay</div>
          <div style={styles.lightOverlay}>Light overlay</div>
          <div style={{ color: vars.$color.palette.staticBlackAlpha50 }}>Direct usage</div>
        </div>
      );
    };
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck
    import { vars } from "@seed-design/css/vars";

    export const Component = () => {
      const styles = {
        overlay: {
          backgroundColor: vars.$color.palette.staticBlackAlpha200,
        },
        shadow: {
          backgroundColor: vars.$color.palette.staticBlackAlpha500,
        },
        darkOverlay: {
          backgroundColor: vars.$color.palette.staticBlackAlpha700,
        },
        lightOverlay: {
          backgroundColor: vars.$color.palette.staticWhiteAlpha300,
        },
      };

      return (
        <div>
          <div style={styles.overlay}>Light overlay</div>
          <div style={styles.shadow}>Shadow</div>
          <div style={styles.darkOverlay}>Dark overlay</div>
          <div style={styles.lightOverlay}>Light overlay</div>
          <div style={{ color: vars.$color.palette.staticBlackAlpha200 }}>Direct usage</div>
        </div>
      );
    };
    ```
  </Accordion>
</Accordions>

## replace-custom-seed-design-color

커스텀 Seed Design 컬러 토큰을 V3 형식으로 변환하는 트랜스폼

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-custom-seed-design-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-custom-seed-design-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-custom-seed-design-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-custom-seed-design-color <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```ts title="basic.input.ts"
    // @ts-nocheck
    import { style } from "@vanilla-extract/css";
    import { color, backgroundColor, background } from "@/shared/styles";

    export const container = style({
      backgroundColor: color.gray100,
      color: color.gray900,
      borderColor: color.carrot500,
    });

    export const box = style({
      background: color.gray50,
      color: color.red500,
      border: `1px solid ${color.gray300}`,
    });

    export const alert = style({
      backgroundColor: color.red50,
      color: color.red900,
    });

    export const button = style({
      backgroundColor: background.gray100,
      color: color.gray900,
    });

    export const highlight = style({
      color: color.carrot500,
      backgroundColor: backgroundColor.primary,
    }); 

    export const primary = style({
      color: color.primary,
    });
    ```

    ```ts title="basic.output.ts"
    // @ts-nocheck
    import { style } from "@vanilla-extract/css";
    import { color, backgroundColor, background } from "@/shared/styles";

    export const container = style({
      backgroundColor: color.palette.gray200,
      color: color.palette.gray1000,
      borderColor: color.palette.carrot600,
    });

    export const box = style({
      background: color.palette.gray100,
      color: color.palette.red700,
      border: `1px solid ${color.palette.gray400}`,
    });

    export const alert = style({
      backgroundColor: color.palette.red100,
      color: color.palette.red900,
    });

    export const button = style({
      backgroundColor: background.palette.gray200,
      color: color.palette.gray1000,
    });

    export const highlight = style({
      color: color.palette.carrot600,
      backgroundColor: backgroundColor.bg.brandSolid,
    }); 

    export const primary = style({
      color: color.fg.brand,
    });
    ```
  </Accordion>
</Accordions>

## replace-custom-color-to-seed-design-vars-color

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-custom-color-to-seed-design-vars-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-custom-color-to-seed-design-vars-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-custom-color-to-seed-design-vars-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-custom-color-to-seed-design-vars-color <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```ts title="basic.input.ts"
    // @ts-nocheck
    import { color, bg, typography, mode } from '@/src/styles/tokens';

    export const container = style({
      backgroundColor: color['$semantic.paperDefault'],
      color: color['$scale.gray900'],
      borderColor: color['$scale.carrot500'],
    });

    export const box = style({
      background: color['$scale.gray50'],
      color: color['$scale.red500'],
      border: `1px solid ${color['$scale.gray300']}`,
    });

    export const alert = style({
      backgroundColor: color['$scale.red50'],
      color: color['$scale.red900'],
    });

    export const button = style({
      backgroundColor: color['$scale.gray100'],
      color: color['$scale.gray900'],
    });

    export const highlight = style({
      color: color['$scale.carrot500'],
      backgroundColor: color['$semantic.primary'],
    });

    export const primary = style({
      color: color['$semantic.primary'],
    });

    // Additional test cases for various mappings
    export const semanticColors = style({
      backgroundColor: color['$semantic.primary'],
      color: color['$semantic.inkText'],
      borderColor: color['$semantic.divider1'],
    });

    export const scaleColors = style({
      background: color['$scale.gray100'],
      color: color['$scale.carrot600'],
      border: `1px solid ${color['$scale.blue500']}`,
    });

    export const staticColors = style({
      backgroundColor: color['$static.staticWhite'],
      color: color['$static.staticBlack'],
      borderColor: color['$static.staticBlackAlpha200'],
    });

    // Test deprecated tokens with alternative
    export const deprecatedColors = style({
      backgroundColor: color['$semantic.paperContents'],
      color: color['$semantic.inkTextLow'],
    });

    // Test multiple token choices (should use first one)
    export const multipleChoices = style({
      backgroundColor: color['$semantic.success'],
      color: color['$semantic.warning'],
    });

    export const icon = {
      color: color['$scale.gray600'],
      bg: bg['$scale.gray100'],
    };
    ```

    ```ts title="basic.output.ts"
    // @ts-nocheck
    import { color, bg, typography, mode } from "@/src/styles/tokens";

    export const container = style({
      backgroundColor: color["bg.layerDefault"],
      color: color["palette.gray1000"],
      borderColor: color["palette.carrot600"],
    });

    export const box = style({
      background: color["palette.gray100"],
      color: color["palette.red700"],
      border: `1px solid ${color["palette.gray400"]}`,
    });

    export const alert = style({
      backgroundColor: color["palette.red100"],
      color: color["palette.red900"],
    });

    export const button = style({
      backgroundColor: color["palette.gray200"],
      color: color["palette.gray1000"],
    });

    export const highlight = style({
      color: color["palette.carrot600"],
      backgroundColor: color["bg.brandSolid"],
    });

    export const primary = style({
      color: color["fg.brand"],
    });

    // Additional test cases for various mappings
    export const semanticColors = style({
      backgroundColor: color["bg.brandSolid"],
      color: color["fg.neutral"],
      borderColor: color["stroke.neutralSubtle"],
    });

    export const scaleColors = style({
      background: color["palette.gray200"],
      color: color["palette.carrot600"],
      border: `1px solid ${color["palette.blue600"]}`,
    });

    export const staticColors = style({
      backgroundColor: color["palette.staticWhite"],
      color: color["palette.staticBlack"],
      borderColor: color["palette.staticBlackAlpha500"],
    });

    // Test deprecated tokens with alternative
    export const deprecatedColors = style({
      backgroundColor: color["bg.layerFill"],
      color: color["fg.neutralSubtle"],
    });

    // Test multiple token choices (should use first one)
    export const multipleChoices = style({
      backgroundColor: color["bg.positiveSolid"],
      color: color["bg.warningSolid"],
    });

    export const icon = {
      color: color["palette.gray700"],
      bg: bg["palette.gray200"],
    };
    ```
  </Accordion>
</Accordions>

## replace-css-seed-design-typography-variable

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-css-seed-design-typography-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-css-seed-design-typography-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-css-seed-design-typography-variable <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-css-seed-design-typography-variable <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```css title="basic.input.css"
    /* Radio Label */
    .seed-radio-group[data-size="small"] [data-part="radio-label"] {
      margin-inline-start: var(--seed-radio-small-label-margin-inline-start);
      margin-block-start: var(--seed-radio-small-label-margin-block-start);

      font-size: var(--seed-semantic-typography-label4-regular-font-size);
      font-weight: var(--seed-semantic-typography-label4-regular-font-weight);
      line-height: var(--seed-semantic-typography-label4-regular-line-height);
      letter-spacing: var(--seed-semantic-typography-label4-regular-letter-spacing);
    }

    .seed-radio-group[data-size="medium"] [data-part="radio-label"] {
      margin-inline-start: var(--seed-radio-medium-label-margin-inline-start);
      margin-block-start: var(--seed-radio-medium-label-margin-block-start);

      font-size: var(--seed-semantic-typography-label3-regular-font-size);
      font-weight: var(--seed-semantic-typography-label3-regular-font-weight);
      line-height: var(--seed-semantic-typography-label3-regular-line-height);
      letter-spacing: var(--seed-semantic-typography-label3-regular-letter-spacing);
    }

    .seed-radio-group[data-size="large"] [data-part="radio-label"] {
      margin-inline-start: var(--seed-radio-large-label-margin-inline-start);
      margin-block-start: var(--seed-radio-large-label-margin-block-start);

      font-size: var(--seed-semantic-typography-label2-regular-font-size);
      font-weight: var(--seed-semantic-typography-label2-regular-font-weight);
      line-height: var(--seed-semantic-typography-label2-regular-line-height);
      letter-spacing: var(--seed-semantic-typography-label2-regular-letter-spacing);
    }
    ```

    ```css title="basic.output.css"
    /* Radio Label */
    .seed-radio-group[data-size="small"] [data-part="radio-label"] {
      margin-inline-start: var(--seed-radio-small-label-margin-inline-start);
      margin-block-start: var(--seed-radio-small-label-margin-block-start);

      font-size: var(--seed-font-size-t2);
      font-weight: var(--seed-font-weight-regular);
      line-height: var(--seed-line-height-t2);
      letter-spacing: normal;
    }

    .seed-radio-group[data-size="medium"] [data-part="radio-label"] {
      margin-inline-start: var(--seed-radio-medium-label-margin-inline-start);
      margin-block-start: var(--seed-radio-medium-label-margin-block-start);

      font-size: var(--seed-font-size-t4);
      font-weight: var(--seed-font-weight-regular);
      line-height: var(--seed-line-height-t4);
      letter-spacing: normal;
    }

    .seed-radio-group[data-size="large"] [data-part="radio-label"] {
      margin-inline-start: var(--seed-radio-large-label-margin-inline-start);
      margin-block-start: var(--seed-radio-large-label-margin-block-start);

      font-size: var(--seed-font-size-t5);
      font-weight: var(--seed-font-weight-regular);
      line-height: var(--seed-line-height-t5);
      letter-spacing: normal;
    }
    ```
  </Accordion>
</Accordions>

## replace-tailwind-color

Tailwind CSS 색상 클래스를 Seed Design V3 형식으로 변환해요.

### 변환 내용

* Seed Design V2의 색상 클래스 네이밍을 V3 형식으로 변환합니다.
* `text-`, `bg-`, `border-` 등의 접두사를 가진 Tailwind 색상 클래스를 변환합니다.
* 색상 강도(shade)에 따른 변환 매핑을 적용합니다.

### 변환 예시

* `text-carrot-500` → `text-static-orange-base`
* `bg-salmon-100` → `bg-static-red-light`
* `border-navy-900` → `border-static-blue-dark`

### 대상 파일

* `.tsx`, `.jsx`, `.ts`, `.js`, `.html`, `.css` 파일에서 Tailwind 클래스를 사용하는 부분

### 주의사항

* className 문자열, 템플릿 리터럴, 배열 형태 모두 지원합니다.
* Tailwind 동적 클래스 조합(`clsx`, `cx`, `classnames` 등)도 변환됩니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest replace-tailwind-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest replace-tailwind-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest replace-tailwind-color <target_path>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest replace-tailwind-color <target_path>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Accordions>
  <Accordion title="변경 예시">
    ```tsx title="basic.input.tsx"
    // @ts-nocheck

    export function BackgroundExample() {
      return (
        <div>
          <div className="bg-primary">Primary Background</div>
          <div className="bg-primaryLow">Primary Low Background</div>
          <div className="hover:bg-primaryLow">Hover Primary Low Background</div>
          <div className="focus:bg-primaryLow">Focus Primary Low Background</div>
          <div className="active:bg-primaryLow">Active Primary Low Background</div>
          <div className="bg-gray500">Scale Background</div>
          <div className="bg-carrot100">Scale Carrot Low Background</div>
          <div className="bg-carrot200">Scale Carrot Mid Background</div>
          <div className="bg-carrot300">Scale Carrot High Background</div>
          <div className="bg-carrot400">Scale Carrot High Background</div>
          <div className="bg-carrot500">Scale Carrot High Background</div>
          <div className="bg-carrot600">Scale Carrot High Background</div>
          <div className="bg-carrot700">Scale Carrot High Background</div>
          <div className="bg-carrot800">Scale Carrot High Background</div>
          <div className="bg-carrot900">Scale Carrot High Background</div>
          <div className="!bg-carrot900">Scale Carrot High Background</div>
          <div className="bg-staticBlack">Static Black Background</div>
          <div className="bg-staticWhite">Static White Background</div>
          <div className="bg-staticGray900">Static Gray900 Background</div>
        </div>
      );
    }

    export function SeedBackgroundExample() {
      return (
        <div>
          <div className="bg-seed-primary">Primary Background</div>
          <div className="bg-seed-primaryLow">Primary Low Background</div>
          <div className="hover:bg-seed-primaryLow">Hover Primary Low Background</div>
          <div className="focus:bg-seed-primaryLow">Focus Primary Low Background</div>
          <div className="active:bg-seed-primaryLow">Active Primary Low Background</div>
          <div className="bg-seed-gray500">Scale Background</div>
          <div className="bg-seed-carrot100">Scale Carrot Low Background</div>
          <div className="bg-seed-carrot200">Scale Carrot Mid Background</div>
          <div className="bg-seed-carrot300">Scale Carrot High Background</div>
          <div className="bg-seed-carrot400">Scale Carrot High Background</div>
          <div className="bg-seed-carrot500">Scale Carrot High Background</div>
          <div className="bg-seed-carrot600">Scale Carrot High Background</div>
          <div className="bg-seed-carrot700">Scale Carrot High Background</div>
          <div className="bg-seed-carrot800">Scale Carrot High Background</div>
          <div className="bg-seed-carrot900">Scale Carrot High Background</div>
          <div className="!bg-seed-carrot900">Scale Carrot High Background</div>
          <div className="bg-seed-staticBlack">Static Black Background</div>
          <div className="bg-seed-staticWhite">Static White Background</div>
          <div className="bg-seed-staticGray900">Static Gray900 Background</div>
        </div>
      );
    }

    // Class Variance Authority Example
    import { cva } from "class-variance-authority";

    // Button component with variants
    const buttonVariants = cva(
      "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
      {
        variants: {
          variant: {
            default: "bg-primary text-staticWhite hover:bg-primaryLow",
            destructive: "bg-danger text-staticWhite hover:bg-dangerLow",
            outline: "border border-gray300 bg-staticWhite text-gray900 hover:bg-gray100",
            secondary: "bg-seed-secondaryLow text-seed-secondary hover:bg-seed-gray200",
            ghost: "text-seed-primary hover:bg-seed-primaryLow",
            link: "text-seed-primary underline-offset-4 hover:underline",
          },
          size: {
            default: "h-10 px-4 py-2",
            sm: "h-9 rounded-md px-3",
            lg: "h-11 rounded-md px-8",
            icon: "h-10 w-10",
          },
        },
        defaultVariants: {
          variant: "default",
          size: "default",
        },
      }
    );
    ```

    ```tsx title="basic.output.tsx"
    // @ts-nocheck

    export function BackgroundExample() {
      return (
        <div>
          <div className="bg-bg-brand-solid">Primary Background</div>
          <div className="bg-palette-carrot-100">Primary Low Background</div>
          <div className="hover:bg-palette-carrot-100">Hover Primary Low Background</div>
          <div className="focus:bg-palette-carrot-100">Focus Primary Low Background</div>
          <div className="active:bg-palette-carrot-100">Active Primary Low Background</div>
          <div className="bg-palette-gray-600">Scale Background</div>
          <div className="bg-palette-carrot-200">Scale Carrot Low Background</div>
          <div className="bg-palette-carrot-300">Scale Carrot Mid Background</div>
          <div className="bg-palette-carrot-400">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-500">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-600">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-600">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-700">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-700">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-800">Scale Carrot High Background</div>
          <div className="!bg-palette-carrot-800">Scale Carrot High Background</div>
          <div className="bg-palette-static-black">Static Black Background</div>
          <div className="bg-palette-static-white">Static White Background</div>
          <div className="bg-palette-static-black">Static Gray900 Background</div>
        </div>
      );
    }

    export function SeedBackgroundExample() {
      return (
        <div>
          <div className="bg-bg-brand-solid">Primary Background</div>
          <div className="bg-palette-carrot-100">Primary Low Background</div>
          <div className="hover:bg-palette-carrot-100">Hover Primary Low Background</div>
          <div className="focus:bg-palette-carrot-100">Focus Primary Low Background</div>
          <div className="active:bg-palette-carrot-100">Active Primary Low Background</div>
          <div className="bg-palette-gray-600">Scale Background</div>
          <div className="bg-palette-carrot-200">Scale Carrot Low Background</div>
          <div className="bg-palette-carrot-300">Scale Carrot Mid Background</div>
          <div className="bg-palette-carrot-400">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-500">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-600">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-600">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-700">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-700">Scale Carrot High Background</div>
          <div className="bg-palette-carrot-800">Scale Carrot High Background</div>
          <div className="!bg-palette-carrot-800">Scale Carrot High Background</div>
          <div className="bg-palette-static-black">Static Black Background</div>
          <div className="bg-palette-static-white">Static White Background</div>
          <div className="bg-palette-static-black">Static Gray900 Background</div>
        </div>
      );
    }

    // Class Variance Authority Example
    import { cva } from "class-variance-authority";

    // Button component with variants
    const buttonVariants = cva(
      "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
      {
        variants: {
          variant: {
            default: "bg-bg-brand-solid text-palette-static-white hover:bg-palette-carrot-100",
            destructive: "bg-bg-critical-solid text-palette-static-white hover:bg-bg-critical-weak",
            outline: "border border-palette-gray-400 bg-palette-static-white text-palette-gray-1000 hover:bg-palette-gray-200",
            secondary: "bg-bg-neutral-weak text-palette-gray-900 hover:bg-palette-gray-300",
            ghost: "text-fg-brand hover:bg-palette-carrot-100",
            link: "text-fg-brand underline-offset-4 hover:underline",
          },
          size: {
            default: "h-10 px-4 py-2",
            sm: "h-9 rounded-md px-3",
            lg: "h-11 rounded-md px-8",
            icon: "h-10 w-10",
          },
        },
        defaultVariants: {
          variant: "default",
          size: "default",
        },
      }
    );
    ```
  </Accordion>
</Accordions>


---

file: developer-tools/codemods/introduction.mdx

# Introduction

@seed-design/codemod는 Seed Design V2에서 V3로 마이그레이션하기 위한 코드 변환 도구예요.



## 사용 방법

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

사용 가능한 transform 목록을 확인하려면 다음 명령어를 실행해요.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest --list
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest --list
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest --list
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest --list
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Card title="Available Transforms" icon={<IconTerminal/>} href="/react/developer-tools/codemods/available-transforms">
  사용 가능한 변환 목록을 확인합니다.
</Card>

<Callout type="info" title="Node.js 요구사항">
  스크립트 실행을 위해서는 **Node.js 20.16.0 이상**의 버전이 필요해요. 버전 요구사항을 만족시키지 않으면 안내 문구가 표시돼요.

  nvm을 사용한다면 codemod 실행을 위해 Node.js 버전을 잠시 변경할 수 있어요.

  ```shell
  nvm install 20.16
  ```
</Callout>

## 옵션

* `--list`
  * 사용 가능한 transform 목록을 보여줘요.
* `--log`
  * 로그를 파일로 저장해요.
  * `./`에 `combined.log`와 `warnings.log` 파일이 생성돼요.
* `--parser`
  * jscodeshift가 사용할 파서를 지정해요
  * `babel` | `babylon` | `flow` | `ts` | `tsx`
  * 기본값: `tsx`
  * 예시: `--parser=babel`
* `--extensions`
  * 변환할 파일 확장자를 지정해요.
  * 지정하지 않으면 `<경로>` 안의 `js,jsx,ts,tsx` 파일을 변환해요. (`d.ts`는 제외)
  * 예시: `--extensions="ts,tsx"`
* `--ignore-config`
  * 변환하지 않을 파일 패턴이 정의된 파일을 지정해요.
  * 예시: `--ignore-config=".gitignore"`


---

file: developer-tools/figma-integration/codegen.mdx

# Codegen

Figma 디자인으로부터 React 코드를 생성하는 플러그인을 제공합니다.





## 설치

[SEED Design Codegen](https://www.figma.com/community/plugin/1469592983561656263) 플러그인을 설치합니다.

## 사용법

Figma 디자인을 열고, Dev mode에서 코드 생성을 원하는 디자인 요소를 선택합니다.

<img alt="Figma Codegen" src={__img0} placeholder="blur" />

Codegen 플러그인은 작은 단위의 코드 생성 및 작업에 적합합니다.

복잡한 작업은 [MCP](/react/ai-integration/mcp)를 활용하는 것을 권장합니다.

## 관련 문서

* [Figma Learn](https://help.figma.com/hc/en-us/articles/15023202277399-Use-code-snippets-in-Dev-Mode)


---

file: getting-started/cli/commands.mdx

# Commands

@seed-design/cli 패키지를 사용하여 seed-design을 더 쉽게 사용할 수 있습니다.



## init

`seed-design.json` 파일을 생성하기 위한 명령어입니다.

<Card icon={<IconFile />} title="Configuration" href="/react/getting-started/cli/configuration#옵션">
  `seed-design.json` 파일에 대해 알아봅니다.
</Card>

<Steps>
  <Step>
    ### init 명령어 입력하기
  </Step>

  <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="npm">
        npm
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="pnpm">
        pnpm
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="yarn">
        yarn
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="bun">
        bun
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="npm">
      ```bash
      npx @seed-design/cli@latest init
      ```
    </CodeBlockTab>

    <CodeBlockTab value="pnpm">
      ```bash
      pnpm dlx @seed-design/cli@latest init
      ```
    </CodeBlockTab>

    <CodeBlockTab value="yarn">
      ```bash
      yarn dlx @seed-design/cli@latest init
      ```
    </CodeBlockTab>

    <CodeBlockTab value="bun">
      ```bash
      bun x @seed-design/cli@latest init
      ```
    </CodeBlockTab>
  </CodeBlockTabs>

  <Step>
    ### seed-design 설정

    ```sh
    ◇  TypeScript를 사용중이신가요?
    │  Yes
    │
    ◇  React Server Components를 사용중이신가요?
    │  No
    │
    ◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
    │  ./seed-design
    ```
  </Step>
</Steps>

### 옵션

```sh copy
Usage:
  $ seed-design init

Options:
  -c, --cwd <cwd>  작업 디렉토리. 기본값은 현재 디렉토리.
  -y, --yes        모든 질문에 대해 기본값으로 답변합니다.
  -h, --help       Display this message
```

## add

스니펫을 다운로드받기 위한 명령어입니다.

<Card icon={<IconFile />} title="Snippet" href="/react/components/concepts/snippet">
  자주 쓰이는 UI 패턴의 재사용을 돕는 스니펫에 대해 알아봅니다.
</Card>

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add [...item-ids]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add [...item-ids]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add [...item-ids]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add [...item-ids]
    ```
  </CodeBlockTab>
</CodeBlockTabs>

`item-ids`를 입력하지 않고 명령어를 입력하면 다운로드받을 수 있는 모든 항목을 인터랙티브하게 선택할 수 있습니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```sh copy
◆  추가할 항목을 선택해주세요 (스페이스 바로 여러 개 선택 가능)
│  ◻ ui:action-button
│  ◻ ui:alert-dialog
│  ◻ ui:callout
│  ◻ ui:checkbox
│  ◻ ui:switch
│  ◻ ui:text-field
│  ◻ ui:tabs
│  ◻ (deprecated) ui:old-component
│  ◻ ...
└
```

여러 항목을 직접 지정해서 추가할 수도 있습니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:action-button ui:alert-dialog
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:action-button ui:alert-dialog
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:action-button ui:alert-dialog
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:action-button ui:alert-dialog
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### 옵션

```sh copy
Usage:
  $ seed-design add [...item-ids]

Options:
  -c, --cwd <cwd>          작업 디렉토리. 기본값은 현재 디렉토리.
  -u, --baseUrl <baseUrl>  레지스트리의 base URL. 기본값은 현재 디렉토리.
  --overwrite              기존 파일을 확인 없이 덮어쓰기
  -h, --help               Display this message
```

### baseUrl 사용하기

`--baseUrl` 옵션을 사용하면 스니펫을 다운로드할 레지스트리를 직접 지정할 수 있습니다.

기본값은 [`https://seed-design.io`](https://seed-design.io)입니다.

이 옵션은 특정 SEED React 패키지와 호환되는 스니펫이 필요한 경우 활용할 수 있습니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add --baseUrl https://1-0.seed-design.pages.dev
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add --baseUrl https://1-0.seed-design.pages.dev
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add --baseUrl https://1-0.seed-design.pages.dev
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add --baseUrl https://1-0.seed-design.pages.dev
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add --baseUrl https://1-1.seed-design.pages.dev
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add --baseUrl https://1-1.seed-design.pages.dev
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add --baseUrl https://1-1.seed-design.pages.dev
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add --baseUrl https://1-1.seed-design.pages.dev
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## add-all

레지스트리의 모든 항목을 한 번에 다운로드받기 위한 명령어입니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add-all [...registry-ids]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add-all [...registry-ids]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add-all [...registry-ids]
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add-all [...registry-ids]
    ```
  </CodeBlockTab>
</CodeBlockTabs>

모든 레지스트리의 모든 항목을 추가하려면 `--all` 옵션을 사용하세요.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add-all --all # 모든 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add-all --all # 모든 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add-all --all # 모든 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add-all --all # 모든 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>
</CodeBlockTabs>

특정 레지스트리의 모든 항목을 추가할 수도 있습니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add-all breeze # breeze 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add-all breeze # breeze 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add-all breeze # breeze 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add-all breeze # breeze 레지스트리의 모든 항목 추가
    ```
  </CodeBlockTab>
</CodeBlockTabs>

deprecated 항목을 포함하려면 `--include-deprecated` 옵션을 사용하세요.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add-all ui --include-deprecated # ui 레지스트리의 모든 항목 추가 (deprecated 포함)
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add-all ui --include-deprecated # ui 레지스트리의 모든 항목 추가 (deprecated 포함)
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add-all ui --include-deprecated # ui 레지스트리의 모든 항목 추가 (deprecated 포함)
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add-all ui --include-deprecated # ui 레지스트리의 모든 항목 추가 (deprecated 포함)
    ```
  </CodeBlockTab>
</CodeBlockTabs>

### 옵션

```sh copy
Usage:
  $ seed-design add-all [...registry-ids]

Options:
  -a, --all                모든 레지스트리의 모든 항목 추가
  --include-deprecated     deprecated 항목 포함 (--all과 함께 사용 시)
  -c, --cwd <cwd>          작업 디렉토리. 기본값은 현재 디렉토리.
  -u, --baseUrl <baseUrl>  레지스트리의 base URL. 기본값은 현재 디렉토리.
  --overwrite              기존 파일을 확인 없이 덮어쓰기
  -h, --help               Display this message
```


---

file: getting-started/cli/configuration.mdx

# Configuration

seed-design.json 파일을 통해 CLI를 사용할 때 필요한 설정을 명시해요.



## 설정

`seed-design.json` 파일은 CLI로 생성하거나 직접 추가할 수 있어요.

<Tabs items={['CLI로 추가', '직접 추가']}>
  <Tab value="CLI로 추가">
    <Card icon={<IconTerminal />} title="CLI" href="/react/getting-started/cli/commands#init">
      CLI로 seed-design을 추가하는 방법을 알아봐요.
    </Card>
  </Tab>

  <Tab value="직접 추가">
    아래 파일을 프로젝트 루트에 생성해주세요.

    ```json title="seed-design.json"
    {
      "rsc": false,
      "tsx": true,
      "path": "./seed-design",
      "telemetry": true
    }
    ```
  </Tab>
</Tabs>

## 옵션

### path

`path`는 생성되는 컴포넌트의 기본 경로를 설정해요.

seed-design이 필요로 하는 폴더나 파일들은 `path`로 지정된 경로의 하위에 생겨요.
`seed-design`의 root 폴더는 유저가 입력할 수 있게 하되, 그 내부에 생성되는 폴더나 파일들은 고정되는 형식이에요.

```json title="seed-design.json"
{
  "path": "./seed-design"
}
```

만약 위와 같이 설정했다면, `./seed-design` 폴더가 생성이 되고,
그 안에 `ui`, `utils`, `hooks`와 같은 폴더들이 생기게 될거에요.

<Files>
  <Folder name="seed-design (유저 설정, path)" defaultOpen>
    <Folder name="ui (고정)" defaultOpen>
      <File name="action-button.tsx" />

      <File name="alert-dialog.tsx" />

      <File name="tabs.tsx" />
    </Folder>

    <Folder name="hooks (고정)" defaultOpen>
      <File name="use-portal.ts" />

      <File name="use-focus-trap.ts" />
    </Folder>

    <Folder name="utils (고정)" defaultOpen>
      <File name="classnames.ts" />

      <File name="use-merge-refs.ts" />
    </Folder>
  </Folder>
</Files>

### rsc

[React Server Components](https://react.dev/reference/rsc/server-components)를 사용할지 설정해요.

`true`로 설정하면 컴포넌트에 `use client` directive가 추가돼요.

```json title="seed-design.json"
{
  "rsc": true | false // default: false
}
```

### tsx

TypeScript를 사용할지 설정해요.

`true`로 설정하면 `.tsx` 컴포넌트가, `false`로 설정하면 `.jsx` 컴포넌트가 생성돼요.

```json title="seed-design.json"
{
  "tsx": true | false // default: true
}
```

### telemetry

텔레메트리 데이터 수집 여부를 설정해요.

SEED Design CLI는 개선을 위해 익명 사용 데이터를 수집해요.
개인 정보는 수집하지 않으며, 커맨드 사용 패턴과 성능 지표만 수집해요.

```json title="seed-design.json"
{
  "telemetry": true | false // default: true
}
```

#### 수집되는 데이터

* 사용된 커맨드 (init, add, add-all)
* 설정 옵션 (tsx, rsc 사용 여부)
* 성능 지표 (실행 시간)
* 기술 환경 (Node.js 버전, OS 플랫폼)

#### 수집되지 않는 데이터

* 프로젝트 경로, 파일 이름
* 컴포넌트 이름
* 소스 코드
* 개인 식별 정보

#### 비활성화 방법

**1. seed-design.json 설정**

```json
{
  "telemetry": false
}
```

**2. 환경 변수 설정**

```bash
export DISABLE_TELEMETRY=true
# 또는
export SEED_DISABLE_TELEMETRY=true
```

### $schema

준비중이에요.


---

file: getting-started/installation/manual.mdx

# Manual

Seed Design을 번들러 통합 없이 설치하고 사용하는 방법을 알아봅니다.



<Steps>
  <Step>
    ### 의존성 설치

    필요한 의존성들을 설치해요.

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ### index.html 수정하기

    Seed Design의 컬러 토큰은 `<html />` 태그의 `data-seed-color-mode`, `data-seed-user-color-scheme`
    속성을 통해 라이트/다크모드 전환을 해요.

    <Card title="Theming" href="/react/getting-started/styling/theming" icon={<IconPalette />}>
      테마 속성에 대한 자세한 설명과 활용 방법을 확인합니다.
    </Card>

    <Tabs items={['system', 'light only', 'dark only']}>
      <Tab value="system">
        ```tsx title="index.html" 
        <html
          data-seed // [!code highlight]
          data-seed-color-mode="system" // [!code highlight]
          data-seed-user-color-scheme="light" // [!code highlight]
        >
          <head>
            <!-- [!code highlight] -->
            <meta name="color-scheme" content="light dark" />
            <script>
            /* user-color-scheme 설정 스크립트, 필요에 따라 수정하세요 */
            try {
              var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

              if ('addEventListener' in prefersDark) {
                prefersDark.addEventListener('change', apply);
              } else if ('addListener' in prefersDark) {
                prefersDark.addListener(apply);
              }

              if (prefersDark.matches) {
                document.documentElement.dataset.seedUserColorScheme = 'dark';
              } else {
                document.documentElement.dataset.seedUserColorScheme = 'light';
              }

              function apply() {
                document.documentElement.dataset.seedUserColorScheme = prefersDark.matches ? 'dark' : 'light';
              }
            } catch (e) {}
            </script>
          </head>
        </html>
        ```
      </Tab>

      <Tab value="light only">
        ```tsx title="index.html"
        <html
          data-seed // [!code highlight]
          data-seed-color-mode="light-only" // [!code highlight]
        >
          <head>
            <!-- [!code highlight] -->
            <meta name="color-scheme" content="light" />
            <!-- ... -->
          </head>
        </html>
        ```
      </Tab>

      <Tab value="dark only">
        ```tsx title="index.html"
        <html
          data-seed // [!code highlight]
          data-seed-color-mode="dark-only" // [!code highlight]
        >
          <head>
            <!-- [!code highlight] -->
            <meta name="color-scheme" content="dark" />
            <!-- ... -->
          </head>
        </html>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### all.css import하기

    <Callout>
      스타일시트 크기를 줄이기 위해 `base.css` 및 각 컴포넌트의 스타일시트를 따로 import할 수 있어요. 번들러를 사용하는 경우 문서 상단의 번들러 가이드를 통해 컴포넌트 스타일시트를 자동으로 로드할 수 있어요.
    </Callout>

    ```ts title="index.tsx"
    import "@seed-design/css/all.css";
    ```
  </Step>

  <Step>
    ### seed-design.json 생성하기

    <Tabs items={['CLI로 추가', '직접 추가']}>
      <Tab value="CLI로 추가">
        <Steps>
          <Step>
            ### init 명령어 입력하기
          </Step>

          ```sh
          npx @seed-design/cli@latest init
          ```

          <Step>
            ### seed-design 설정

            ```sh
            ◇  TypeScript를 사용중이신가요?
            │  Yes
            │
            ◇  React Server Components를 사용중이신가요?
            │  No
            │
            ◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
            │  ./seed-design
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="직접 추가">
        아래 파일을 프로젝트 루트에 생성해주세요.

        ```json title="seed-design.json"
        {
          "rsc": false,
          "tsx": true,
          "path": "./seed-design"
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### 컴포넌트를 한번 사용해볼까요?

    ```sh
    npx @seed-design/cli@latest add ui:action-button
    ```
  </Step>

  <Step>
    ### tsconfig.json 설정하기
  </Step>

  ```json title="tsconfig.json"
  {
    "compilerOptions": {
      // ... your options
      "paths": {
        // [!code highlight]
        "seed-design/*": [
          // [!code highlight]
          "./seed-design/*"
        ]
      }
    }
  }
  ```
</Steps>

***

<Card title="Getting Started with Stackflow" href="/react/stackflow/getting-started">
  SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.
</Card>


---

file: getting-started/installation/rsbuild.mdx

# Rsbuild

Rsbuild 프로젝트에서 Seed Design을 설치하고 사용하는 방법을 알아봅니다.



<Steps>
  <Step>
    ### 의존성 설치

    필요한 의존성들을 설치해요.

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ### base.css import하기

    ```ts title="index.tsx"
    import "@seed-design/css/base.css";
    ```
  </Step>

  <Step>
    ### seed-design.json 생성하기

    <Tabs items={['CLI로 추가', '직접 추가']}>
      <Tab value="CLI로 추가">
        <Steps>
          <Step>
            ### init 명령어 입력하기
          </Step>

          ```sh
          npx @seed-design/cli@latest init
          ```

          <Step>
            ### seed-design 설정

            ```sh
            ◇  TypeScript를 사용중이신가요?
            │  Yes
            │
            ◇  React Server Components를 사용중이신가요?
            │  No
            │
            ◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
            │  ./seed-design
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="직접 추가">
        아래 파일을 프로젝트 루트에 생성해주세요.

        ```json title="seed-design.json"
        {
          "rsc": false,
          "tsx": true,
          "path": "./seed-design"
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### tsconfig.json 설정하기

    <Callout>
      위에서 설정한 [seed-design.json path](/react/getting-started/cli/configuration#path)의 경로와 동일해야 해요.
    </Callout>
  </Step>

  ```json title="tsconfig.json"
  {
    "compilerOptions": {
      // ... your options
      "paths": {
        // [!code highlight]
        "seed-design/*": [
          // [!code highlight]
          "./seed-design/*"
        ]
      }
    }
  }
  ```

  <Step>
    ### Rsbuild config 수정하기

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install -D @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add -D @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add --dev @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add --dev @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Callout>
      `seedDesignPlugin`은 [theming](/react/getting-started/styling/theming) 및 CSS 파일 자동 로드 등을 담당해요.
    </Callout>

    ```ts title="rsbuild.config.ts"
    import { defineConfig } from "@rsbuild/core";
    import { pluginReact } from "@rsbuild/plugin-react";
    import { seedDesignPlugin } from "@seed-design/rsbuild-plugin"; // [!code highlight]

    export default defineConfig({
      plugins: [
        pluginReact(),
        seedDesignPlugin(), // [!code highlight]
      ],
    });
    ```
  </Step>

  <Step>
    ### 컴포넌트를 한번 사용해볼까요?

    ```sh
    npx @seed-design/cli@latest add ui:action-button
    ```
  </Step>
</Steps>

***

<Card title="Getting Started with Stackflow" href="/react/stackflow/getting-started">
  SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.
</Card>


---

file: getting-started/installation/vite.mdx

# Vite

Vite 프로젝트에서 Seed Design을 설치하고 사용하는 방법을 알아봅니다.



<Steps>
  <Step>
    ### 의존성 설치

    필요한 의존성들을 설치해요.

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ### base.css import하기

    ```ts title="index.tsx"
    import "@seed-design/css/base.css";
    ```
  </Step>

  <Step>
    ### seed-design.json 생성하기

    <Tabs items={['CLI로 추가', '직접 추가']}>
      <Tab value="CLI로 추가">
        <Steps>
          <Step>
            ### init 명령어 입력하기
          </Step>

          ```sh
          npx @seed-design/cli@latest init
          ```

          <Step>
            ### seed-design 설정

            ```sh
            ◇  TypeScript를 사용중이신가요?
            │  Yes
            │
            ◇  React Server Components를 사용중이신가요?
            │  No
            │
            ◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
            │  ./seed-design
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="직접 추가">
        아래 파일을 프로젝트 루트에 생성해주세요.

        ```json title="seed-design.json"
        {
          "rsc": false,
          "tsx": true,
          "path": "./seed-design"
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### tsconfig.json 설정하기

    <Callout>
      위에서 설정한 [seed-design.json
      path](/react/getting-started/cli/configuration#path)의 경로와 동일해야 해요.
    </Callout>
  </Step>

  ```json title="tsconfig.app.json"
  {
    "compilerOptions": {
      // ... your options
      "paths": {
        // [!code highlight]
        "seed-design/*": [
          // [!code highlight]
          "./seed-design/*"
        ]
      }
    }
  }
  ```

  <Step>
    ### Vite config 수정하기

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install -D @seed-design/vite-plugin vite-tsconfig-paths
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add -D @seed-design/vite-plugin vite-tsconfig-paths
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add --dev @seed-design/vite-plugin vite-tsconfig-paths
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add --dev @seed-design/vite-plugin vite-tsconfig-paths
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <Callout>
      `seedDesignPlugin`은 [theming](/react/getting-started/styling/theming) 및 CSS 파일 자동 로드 등을 담당해요.
    </Callout>

    ```ts title="vite.config.ts"
    import react from "@vitejs/plugin-react";
    import { defineConfig } from "vite";
    import { seedDesignPlugin } from "@seed-design/vite-plugin"; // [!code highlight]
    import tsconfigPaths from "vite-tsconfig-paths"; // [!code highlight]

    export default defineConfig({
      plugins: [
        react(),
        seedDesignPlugin(), // [!code highlight]
        tsconfigPaths(), // [!code highlight]
      ],
    });
    ```
  </Step>

  <Step>
    ### 컴포넌트를 한번 사용해볼까요?

    ```sh
    npx @seed-design/cli@latest add ui:action-button
    ```
  </Step>
</Steps>

***

<Card title="Getting Started with Stackflow" href="/react/stackflow/getting-started">
  SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.
</Card>


---

file: getting-started/installation/webpack.mdx

# Webpack

Webpack 프로젝트에서 Seed Design을 설치하고 사용하는 방법을 알아봅니다.



<Steps>
  <Step>
    ### 의존성 설치

    필요한 의존성들을 설치해요.

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/react @seed-design/css @seed-design/webpack-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/react @seed-design/css @seed-design/webpack-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/react @seed-design/css @seed-design/webpack-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/react @seed-design/css @seed-design/webpack-plugin
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ### base.css import하기

    ```ts title="index.tsx"
    import "@seed-design/css/base.css";
    ```
  </Step>

  <Step>
    ### Webpack config 설정하기

    ```ts title="vite.config.ts"
    +import { SeedDesignPlugin } from '@seed-design/webpack-plugin';

    export default defineConfig({
      plugins: [
    +    new SeedDesignPlugin()
      ]
    })
    ```
  </Step>

  <Step>
    ### seed-design.json 생성하기

    <Tabs items={['CLI로 추가', '직접 추가']}>
      <Tab value="CLI로 추가">
        <Steps>
          <Step>
            ### init 명령어 입력하기
          </Step>

          ```sh
          npx @seed-design/cli@latest init
          ```

          <Step>
            ### seed-design 설정

            ```sh
            ◇  TypeScript를 사용중이신가요?
            │  Yes
            │
            ◇  React Server Components를 사용중이신가요?
            │  No
            │
            ◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
            │  ./seed-design
            ```
          </Step>
        </Steps>
      </Tab>

      <Tab value="직접 추가">
        아래 파일을 프로젝트 루트에 생성해주세요.

        ```json title="seed-design.json"
        {
          "rsc": false,
          "tsx": true,
          "path": "./seed-design"
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### 컴포넌트를 한번 사용해볼까요?

    ```sh
    npx @seed-design/cli@latest add ui:action-button
    ```
  </Step>

  <Step>
    ### tsconfig.json 설정하기
  </Step>

  ```json title="tsconfig.json"
  {
    "compilerOptions": {
      // ... your options
      "paths": {
        // [!code highlight]
        "seed-design/*": [
          // [!code highlight]
          "./seed-design/*"
        ]
      }
    }
  }
  ```
</Steps>

***

<Card title="Getting Started with Stackflow" href="/react/stackflow/getting-started">
  SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.
</Card>


---

file: getting-started/styling/tailwind-css.mdx

# Tailwind CSS

Tailwind CSS 프로젝트에서 Seed Design 토큰을 사용하는 방법을 알아봅니다.



SEED에서 제공하는 토큰을 Tailwind CSS 3과 4 유틸리티 클래스를 통해 쉽게 사용할 수 있습니다. 사용하는 Tailwind 버전에 맞는 패키지를 선택하세요.

<Tabs items={['Tailwind CSS 4', 'Tailwind CSS 3']}>
  <Tab value="Tailwind CSS 4">
    <Steps>
      <Step>
        ### 의존성 설치

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @seed-design/css @seed-design/tailwind4-theme
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @seed-design/css @seed-design/tailwind4-theme
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @seed-design/css @seed-design/tailwind4-theme
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @seed-design/css @seed-design/tailwind4-theme
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### base.css import하기

        ```ts title="index.tsx"
        import "@seed-design/css/base.css";
        import "./style.css"; // 다음 단계 참고
        ```
      </Step>

      <Step>
        ### CSS 파일 설정하기

        ```css title="style.css"
        @import "tailwindcss";
        @import "@seed-design/tailwind4-theme";
        ```
      </Step>

      <Step>
        ### Theming 설정하기

        Tailwind CSS 스타일시트는 theming 스크립트와 별개로 작동합니다. 아래 가이드를 참고하여 테마 설정을 진행하세요.

        * [Vite](/react/getting-started/installation/vite)
        * [Rsbuild](/react/getting-started/installation/rsbuild)
        * [Webpack](/react/getting-started/installation/webpack)
        * [Manual](/react/getting-started/installation/manual)
      </Step>
    </Steps>
  </Tab>

  <Tab value="Tailwind CSS 3">
    <Steps>
      <Step>
        ### 의존성 설치

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @seed-design/css @seed-design/tailwind3-plugin
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @seed-design/css @seed-design/tailwind3-plugin
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @seed-design/css @seed-design/tailwind3-plugin
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @seed-design/css @seed-design/tailwind3-plugin
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### base.css import하기

        ```ts title="index.tsx"
        import "@seed-design/css/base.css";
        ```
      </Step>

      <Step>
        ### Tailwind 설정 파일 수정하기

        ```js title="tailwind.config.js"
        import seedPlugin from "@seed-design/tailwind3-plugin"; // [!code highlight]

        /** @type {import('tailwindcss').Config} */
        export default {
          content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
          theme: {
            extend: {},
          },
          plugins: [seedPlugin], // [!code highlight]
        };
        ```
      </Step>

      <Step>
        ### Theming 설정하기

        Tailwind CSS 스타일시트는 theming 스크립트와 별개로 작동합니다. 아래 가이드를 참고하여 테마 설정을 진행하세요.

        * [Vite](/react/getting-started/installation/vite)
        * [Rsbuild](/react/getting-started/installation/rsbuild)
        * [Webpack](/react/getting-started/installation/webpack)
        * [Manual](/react/getting-started/installation/manual)
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 유틸리티 클래스

SEED 디자인 시스템의 모든 디자인 토큰을 Tailwind 유틸리티 클래스로 사용할 수 있습니다.

### 색상

<ComponentExample name="react/tailwind/colors">
  ```tsx
  import { VStack, Text } from "@seed-design/react";

  export default function TailwindColors() {
    return (
      <VStack gap="x4">
        {/* 텍스트 색상 */}
        <VStack gap="x2">
          <div className="p-x3 rounded-r2">
            <p className="text-fg-brand t4-bold">text-fg-brand</p>
          </div>
          <div className="p-x3 rounded-r2">
            <p className="text-fg-neutral t4-bold">text-fg-neutral</p>
          </div>
          <div className="p-x3 rounded-r2">
            <p className="text-palette-blue-500 t4-bold">text-palette-blue-500</p>
          </div>
        </VStack>

        {/* 배경 색상 */}
        <VStack gap="x2">
          <div className="bg-bg-informative-weak p-x3 rounded-r2">
            <Text>bg-bg-informative-weak</Text>
          </div>
          <div className="bg-palette-gray-200 p-x3 rounded-r2">
            <Text>bg-palette-gray-200</Text>
          </div>
        </VStack>

        {/* 테두리 색상 */}
        <VStack gap="x2">
          <div className="border-2 border-stroke-brand-solid p-x3 rounded-r2">
            <Text>border-stroke-brand-solid</Text>
          </div>
          <div className="border-2 border-palette-red-500 p-x3 rounded-r2">
            <Text>border-palette-red-500</Text>
          </div>
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### 타이포그래피

<ComponentExample name="react/tailwind/typography">
  ```tsx
  import { VStack } from "@seed-design/react";

  export default function TailwindTypography() {
    return (
      <VStack gap="x3">
        <h1 className="screen-title text-fg-neutral">screen-title</h1>
        <p className="t3-regular text-fg-neutral">t3-regular</p>
        <p className="t3-bold text-fg-neutral">t3-bold</p>
        <p className="t4-medium text-fg-neutral">t4-medium</p>
        <p className="article-body text-fg-neutral">article-body</p>
      </VStack>
    );
  }
  ```
</ComponentExample>

### 크기 및 여백

<ComponentExample name="react/tailwind/spacing">
  ```tsx
  import { VStack, HStack, Text } from "@seed-design/react";

  export default function TailwindSpacing() {
    return (
      <VStack gap="x4">
        {/* 크기 유틸리티 */}
        <HStack gap="x3" align="center">
          <div className="size-x6 bg-palette-gray-400 rounded-r1" />
          <Text>size-x6</Text>
        </HStack>
        <HStack gap="x3" align="center">
          <div className="w-x8 h-x4 bg-palette-gray-400 rounded-r1" />
          <Text>w-x8 h-x4</Text>
        </HStack>

        {/* 패딩 유틸리티 */}
        <HStack gap="x3" align="center">
          <div className="p-x2 bg-palette-gray-600 rounded-r3">
            <div className="size-x6 bg-palette-gray-400 rounded-r1" />
          </div>
          <Text>p-x2</Text>
        </HStack>
        <HStack gap="x3" align="center">
          <div className="px-x4 py-x2 bg-palette-gray-600 rounded-r3">
            <div className="size-x6 bg-palette-gray-400 rounded-r1" />
          </div>
          <Text>px-x4 py-x2</Text>
        </HStack>

        {/* 간격 유틸리티 */}
        <HStack gap="x3" align="center">
          <div className="flex gap-x3 p-x2 bg-palette-gray-600 rounded-r3">
            <div className="size-x6 bg-palette-gray-400 rounded-r1" />
            <div className="size-x6 bg-palette-gray-400 rounded-r1" />
            <div className="size-x6 bg-palette-gray-400 rounded-r1" />
          </div>
          <Text>p-x2 gap-x3</Text>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

### 테두리 반경

<ComponentExample name="react/tailwind/border-radius">
  ```tsx
  import { HStack, VStack, Text } from "@seed-design/react";

  export default function TailwindBorderRadius() {
    return (
      <HStack gap="x4" align="center">
        <VStack gap="x3" align="center">
          <div className="size-x10 bg-bg-neutral-solid rounded-r2" />
          <Text textStyle="t4Regular">rounded-r2</Text>
        </VStack>
        <VStack gap="x3" align="center">
          <div className="size-x10 bg-bg-neutral-solid rounded-r4" />
          <Text textStyle="t4Regular">rounded-r4</Text>
        </VStack>
        <VStack gap="x3" align="center">
          <div className="size-x10 bg-bg-neutral-solid rounded-full" />
          <Text textStyle="t4Regular">rounded-full</Text>
        </VStack>
      </HStack>
    );
  }
  ```
</ComponentExample>

### 그라디언트

<ComponentExample name="react/tailwind/gradient">
  ```tsx
  import { VStack, Text } from "@seed-design/react";

  export default function TailwindGradient() {
    return (
      <VStack gap="x4">
        <VStack gap="x2">
          <div className="h-x10 bg-gradient-glow-magic-[90deg] rounded-r2" />
          <Text>bg-gradient-glow-magic-[90deg]</Text>
        </VStack>
        <VStack gap="x2">
          <div className="h-x10 bg-gradient-highlight-magic-[90deg] rounded-r2" />
          <Text>bg-gradient-highlight-magic-[90deg]</Text>
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

## 관련 문서

Tailwind CSS를 사용하지 않아도 SEED 토큰을 쉽게 사용할 수 있습니다.

<Card href="/react/components/layout/box" title="Box">
  레이아웃 컴포넌트에서 SEED 토큰을 사용하는 방법을 알아봅니다.
</Card>


---

file: getting-started/styling/theming.mdx

# Theming

SEED Design의 테마 시스템을 이해하고 활용하는 방법을 알아봅니다.



## 개요

SEED Design은 라이트 모드와 다크 모드를 지원하는 테마 시스템을 제공합니다.
테마는 HTML 요소의 `data-seed-color-mode`와 `data-seed-user-color-scheme` 속성을 통해 제어됩니다.

두 속성의 역할과 차이점을 이해하고, 전역 테마 설정 방법과 특정 영역에만 테마를 오버라이딩하는 방법을 알아봅니다.

## 테마 속성 이해하기

SEED Design의 테마 시스템은 두 가지 `data-*` 속성을 사용합니다.

### `data-seed-color-mode`

애플리케이션의 **테마 정책**을 설정하는 속성입니다. 세 가지 값을 가질 수 있습니다.

* `system`: 사용자의 시스템 설정에 따라 자동으로 라이트/다크 모드를 전환합니다.
* `light-only`: 항상 라이트 모드로 고정합니다.
* `dark-only`: 항상 다크 모드로 고정합니다.

```html
<!-- 시스템 설정 따르기 -->
<html data-seed-color-mode="system" />

<!-- 라이트 모드로 고정 -->
<html data-seed-color-mode="light-only" />

<!-- 다크 모드로 고정 -->
<html data-seed-color-mode="dark-only" />
```

### `data-seed-user-color-scheme`

사용자 기기의 **실제 컬러 스킴**을 나타내는 속성입니다. 두 가지 값을 가집니다.

* `light`: 사용자의 시스템이 라이트 모드로 설정되어 있음
* `dark`: 사용자의 시스템이 다크 모드로 설정되어 있음

이 값은 `data-seed-color-mode="system"`일 때만 의미를 가지며, `prefers-color-scheme` 미디어 쿼리를 통해 자동으로 업데이트됩니다.

```html
<!-- 시스템 설정을 따르도록 설정했으며, 현재 사용자는 라이트 모드를 사용 중 -->
<html data-seed-color-mode="system" data-seed-user-color-scheme="light"></html>
```

### 작동 원리

SEED CSS는 두 속성의 조합을 통해 적절한 색상 토큰을 적용합니다:

```css
/* 라이트 모드가 적용되는 경우 */
:root,
:root[data-seed-color-mode="system"][data-seed-user-color-scheme="light"],
:root[data-seed-color-mode="light-only"],
:root [data-seed-color-mode="light-only"] {
  /* 라이트 모드 색상 토큰 */
}

/* 다크 모드가 적용되는 경우 */
:root[data-seed-color-mode="system"][data-seed-user-color-scheme="dark"],
:root[data-seed-color-mode="dark-only"],
:root [data-seed-color-mode="dark-only"] {
  /* 다크 모드 색상 토큰 */
}
```

## 전역 테마 적용하기

애플리케이션 전체에 테마를 적용하는 방법은 Installation 문서를 참고하세요.

* [Vite](/react/getting-started/installation/vite)
* [Rsbuild](/react/getting-started/installation/rsbuild)
* [Webpack](/react/getting-started/installation/webpack)
* [Manual](/react/getting-started/installation/manual)

번들러 플러그인을 사용하거나, HTML에 직접 속성과 스크립트를 추가하는 방법을 확인할 수 있습니다.

## 일부 요소에만 테마 오버라이드하기

특정 영역이나 컴포넌트에만 다른 테마를 적용하고 싶을 때는 해당 요소에 `data-seed-color-mode`에 `light-only`, `dark-only` 또는 `system` 값을 설정합니다.

<ComponentExample name="react/theming/color-mode-override">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { actionButtonVariantMap } from "@seed-design/css/recipes/action-button";
  import { Text, VStack } from "@seed-design/react";

  function Demo() {
    return (
      <>
        {actionButtonVariantMap.variant.map((variant) => (
          <ActionButton key={variant} variant={variant}>
            {variant}
          </ActionButton>
        ))}
      </>
    );
  }

  export default function ThemingColorModeOverride() {
    return (
      <div className="grid grid-cols-2 size-full">
        <VStack
          data-seed-color-mode="light-only"
          bg="bg.layerDefault"
          alignItems="center"
          justify="center"
          gap="spacingY.componentDefault"
          p="x6"
        >
          <Text color="fg.neutral" textStyle="t4Bold">
            라이트 모드
          </Text>
          <Demo />
        </VStack>
        <VStack
          data-seed-color-mode="dark-only"
          bg="bg.layerDefault"
          alignItems="center"
          justify="center"
          gap="spacingY.componentDefault"
          p="x6"
        >
          <Text color="fg.neutral" textStyle="t4Bold">
            다크 모드
          </Text>
          <Demo />
        </VStack>
      </div>
    );
  }
  ```
</ComponentExample>

## 클라이언트에서 현재 테마 정보 감지하기

컴포넌트에서 현재 테마 설정에 따라 다른 동작을 수행해야 할 때가 있습니다.
이런 경우 `data-seed-color-mode`와 `data-seed-user-color-scheme` 속성을 감지하여 사용할 수 있습니다.

다음은 커스텀 훅을 만들어 현재 테마 정보를 감지하는 예제입니다:

```tsx
"use client";

import { useEffect, useState } from "react";

export type ColorMode = "system" | "light-only" | "dark-only";
export type UserColorScheme = "light" | "dark";

export interface ThemeInfo {
  colorMode: ColorMode;
  userColorScheme: UserColorScheme;
}

function readThemeInfo(): ThemeInfo {
  if (typeof document === "undefined") {
    return {
      colorMode: "system",
      userColorScheme: "light",
    };
  }

  const colorMode = document.documentElement.getAttribute(
    "data-seed-color-mode"
  ) as ColorMode;
  const userColorScheme = document.documentElement.getAttribute(
    "data-seed-user-color-scheme"
  );

  return {
    colorMode: colorMode || "system",
    userColorScheme: userColorScheme === "dark" ? "dark" : "light",
  };
}

export function useTheme(): ThemeInfo {
  const [themeInfo, setThemeInfo] = useState<ThemeInfo>(readThemeInfo);

  useEffect(() => {
    if (typeof document === "undefined") {
      return;
    }

    const observer = new MutationObserver(() => {
      setThemeInfo(readThemeInfo());
    });

    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-seed-color-mode", "data-seed-user-color-scheme"],
    });

    return () => observer.disconnect();
  }, []);

  return themeInfo;
}
```

이 훅은 다음과 같이 사용할 수 있습니다:

```tsx
"use client";

function MyComponent() {
  const { colorMode, userColorScheme } = useTheme();

  return (
    <div>
      <p>테마 정책: {colorMode}</p>
      <p>현재 컬러 스킴: {userColorScheme}</p>
      {userColorScheme === "dark" ? (
        <DarkModeSpecificComponent />
      ) : (
        <LightModeSpecificComponent />
      )}
    </div>
  );
}
```

### 작동 원리

* `MutationObserver`를 사용하여 `data-seed-color-mode`와 `data-seed-user-color-scheme` 속성의 변경을 감지합니다.
* `colorMode`는 애플리케이션의 테마 정책(`system`, `light-only`, `dark-only`)을 나타냅니다.
* `userColorScheme`는 현재 적용된 실제 컬러 스킴(`light` 또는 `dark`)을 나타냅니다.
* 시스템 설정이 변경되거나 테마가 전환될 때 자동으로 상태가 업데이트됩니다.


---

file: migration/guide.mdx

# Guide

Seed Design V2에서 V3로 마이그레이션하기 위해 필요한 작업들을 안내합니다.



## 마이그레이션 개요

V2에서 V3로 넘어가기 위해서는 크게 아래와 같은 순서로 진행됩니다.

1. 이전 버전 용례 분석
2. V3 설치
3. 파운데이션 마이그레이션 (일괄 적용 권장)
4. 컴포넌트 마이그레이션 (화면별로 적용 권장 및 점진적 적용 가능)

기본적으로 파운데이션까지는 프로젝트 전체에 일괄 교체를 진행합니다.
컴포넌트는 그 이후에 화면별로 적용하거나, 컴포넌트 별로 적용하는 것과 같이 점진적 적용이 가능합니다.

## V3 설치

V3를 사용하기 위한 기반 작업들을 먼저 진행합니다.
아래 작업들이 끝나면 V3 사용이 가능합니다.

<Steps>
  <Step>
    ### 의존성 설치

    필요한 의존성들을 설치해요.

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/react @seed-design/css
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    * `@seed-design/react`는 리액트 컴포넌트 라이브러리가 전부 포함되어 있습니다.
      * 기존 `sprout` 패키지들을 대체합니다.
      * 컴포넌트 마이그레이션 전까지는 기존 패키지들을 사용해주세요.
    * `@seed-design/css`는 스타일 관련된 모든 것이 포함되어 있습니다. (vars, theming, recipe, css, etc.)
      * 기존 `@seed-design/stylesheet` 라이브러리를 대체합니다.
      * 기존 `@seed-design/design-token` 라이브러리를 대체합니다.
      * 파운데이션 마이그레이션 전까지는 기존 패키지들을 사용해주세요.
  </Step>

  {/* ----------------------------------------------------------------------- */}

  {/* ----------------------------------------------------------------------- */}

  <Step>
    ### CSS import

    <Callout>
      V2 `@seed-design/stylesheet` 패키지의 `global.css`와 상호운용이 가능합니다.
    </Callout>

    <Callout type="warn">
      번들러 플러그인([webpack](https://github.com/daangn/seed-design/tree/dev/packages/webpack-plugin), [vite](https://github.com/daangn/seed-design/tree/dev/packages/vite-plugin), [rsbuild](https://github.com/daangn/seed-design/tree/dev/packages/rsbuild-plugin))을 사용하는 경우에는 `all.css` 대신 `base.css`를 사용해주세요.
    </Callout>

    ```ts title="index.tsx"
    import "@seed-design/css/all.css"; // [!code ++]
    ```

    V3 스타일시트 사용법은 [Installation의 css import](/react/getting-started/installation/manual#allcss-import하기) 설명을 참고해주세요.
  </Step>

  <Step>
    ### Theme 적용

    #### 변경사항

    기존 V2에서 사용되던 data-attribute가 바뀌었습니다.

    ```html
    <!-- [!code --] -->
    <html data-seed data-seed-scale-color="light" />
    <!-- [!code ++] -->
    <html data-seed data-seed-color-mode="system" data-seed-user-color-scheme="light" />
    ```

    * `data-seed`: Seed Design 전역 테마 적용 (V3에서 그대로 유지)
    * `data-seed-color-mode`: Seed Design 테마 강제 적용
      * `light-only`, `dark-only`, `system` 중 하나를 선택할 수 있습니다.
    * `data-seed-user-color-scheme`: 유저 기기의 설정
      * `light`, `dark` 중 하나의 값을 가집니다.
      * v2에서 `data-seed-scale-color` 속성을 사용하던 코드가 있다면 `data-seed-user-color-scheme` 속성으로 변경해주세요.

    <Card title="Theming" href="/react/getting-started/styling/theming" icon={<IconPalette />}>
      테마 속성에 대한 자세한 설명과 활용 방법을 확인하세요.
    </Card>

    해당 속성들을 직접 적용하는 방법도 있지만 `플러그인 적용` 방식을 권장합니다.
    지원되지 않는 번들러를 사용하는 경우 직접 `스크립트 적용` 방식을 사용해서 적용해주세요.

    #### 플러그인 적용

    Vite, Rsbuild, Webpack 등의 번들러를 사용하는 프로젝트에서는 플러그인을 추가하면 바로 Theming을 적용할 수 있습니다.

    Vite 사용 시

    * [@seed-design/vite-plugin](https://github.com/daangn/seed-design/tree/dev/packages/vite-plugin)

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/vite-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/vite-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/vite-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/vite-plugin
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Rsbuild 사용 시

    * [@seed-design/rsbuild-plugin](https://github.com/daangn/seed-design/tree/dev/packages/rsbuild-plugin)

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/rsbuild-plugin
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Webpack 사용 시

    * [@seed-design/webpack-plugin](https://github.com/daangn/seed-design/tree/dev/packages/webpack-plugin)

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @seed-design/webpack-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @seed-design/webpack-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @seed-design/webpack-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @seed-design/webpack-plugin
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    #### 스크립트 적용

    `@seed-design/css/theming` 패키지에서 제공하는 `generateThemingScript` 함수를 사용해서 스크립트를 생성해요.

    ```ts title="index.tsx"
    import { generateThemingScript } from "@seed-design/css/theming";
    ```

    생성된 스크립트를 직접 적용해주세요.

    ```html
    <script>
      {generateThemingScript({ mode: "system | light-only | dark-only" })}
    </script>
    ```

    혹은 직접 스크립트를 작성하실 수도 있습니다.

    <Accordions type="single">
      <Accordion title="스크립트 적용">
        ```html
        <html>
          <head>
            <script>
              (function applyTheming(mode) {
                try {
                  document.documentElement.dataset.seed = '';
                  document.documentElement.dataset.seedColorMode = mode;
                } catch (e) {}
         
                try {
                  var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
         
                  if ('addEventListener' in prefersDark) {
                    prefersDark.addEventListener('change', apply);
                  } else if ('addListener' in prefersDark) {
                    prefersDark.addListener(apply);
                  }
         
                  if (prefersDark.matches) {
                    document.documentElement.dataset.seedUserColorScheme = 'dark';
                  } else {
                    document.documentElement.dataset.seedUserColorScheme = 'light';
                  }
         
                  function apply() {
                    document.documentElement.dataset.seedUserColorScheme = prefersDark.matches ? 'dark' : 'light';
                  }
                } catch (e) {}
         
                try {
                  if (typeof window.AndroidFunction !== 'undefined') {
                    document.documentElement.dataset.seedPlatform = 'android';
                  } else if (typeof window.webkit !== 'undefined' && typeof window.webkit.messageHandlers !== 'undefined') {
                    document.documentElement.dataset.seedPlatform = 'ios';
                  } else {
                    document.documentElement.dataset.seedPlatform = 'ios';
                  }
                } catch (e) {}
              })('system');
            </script>
          </head>
        </html>
        ```
      </Accordion>
    </Accordions>
  </Step>
</Steps>

## 파운데이션 마이그레이션

파운데이션 마이그레이션에는 크게 `Color`와 `Typography` 두 가지에 대해서 작업이 필요합니다.

### 용례 분석하기

우선 현재 프로젝트에서 `@seed-design/design-token` 패키지를 사용하는 용례를 분석해야합니다.

* `@seed-design/design-token` 패키지의 vars를 사용하는 용례
* `@seed-design/design-token` 패키지의 vars를 확장해서 사용하는 컴포넌트
* 위 컴포넌트를 사용중인 코드 용례
* `@seed-design/stylesheet` 패키지를 사용하는 용례
* `--seed-` prefix로 시작하는 CSS Variable을 사용하는 용례
* 사용중인 CSS 라이브러리와 `@seed-design/design-token` 패키지와 결합해서 사용하는 용례

아래의 프롬프트를 이용해서 현재 프로젝트에서 사용중인 용례를 분석할 수도 있습니다.

```text title="prompt"
Seed Design System의 디자인 토큰을 새로운 토큰으로 마이그레이션
할건데 코드 어디 부분들을 변경해야 하는지 보고서를 써줘.

1. `@seed-design/design-token` 패키지의 vars 변수를 사용하는 용례
2. `@seed-design/design-token` 패키지의 vars 변수를 확장해서 사용하는 컴포넌트
3. 2번 컴포넌트를 사용중인 코드 용례 
4. `@seed-design/styleesheet` 패키지를 사용하는 용례
5. `--seed-` prefix로 시작하는 CSS Variable을 사용하는 용례
6. 사용중인 CSS 라이브러리와 `@seed-design/design-token` 패키지와 결합해서 사용하는 용례

위와 같은 사례들말고도 네가 더 분석해서 추가적으로 마이그레이션 해야하는 부분들도 알려줘.
```

### 마이그레이션 전략

* 만약 여러 패키지를 사용하는 경우에는 공통 패키지 먼저 마이그레이션 합니다.
* 전처리해서 사용하는 경우에는 전처리 코드 자체를 V3로 마이그레이션 한 후 나머지 코드들을 Codemod로 마이그레이션 하는게 좋습니다.
* Color와 Typography 각각 진행해도 되지만, Color와 Typography 마이그레이션을 동시에 진행 후 한번에 QA를 진행하는게 더 간결합니다.

### Typography Preset

많은 프로젝트에서 기존 타이포그래피 토큰을 이용해서 유틸리티 함수를 만들어서 사용하는 경우가 있습니다.

이런 경우에는 아래의 코드를 참고해서 전처리를 진행 후 코드들을 그에 맞게 변경해주세요.

* [replace-custom-seed-design-typography](https://seed-design.io/react/developer-tools/codemods/available-transforms#replace-custom-seed-design-typography) 커스텀 transform을 사용해서 마이그레이션 할 수 있습니다.

```ts title="typography.ts"
import type { TextVariant } from '@seed-design/css/recipes/text';

import { vars as typographyVars } from '@seed-design/css/vars/component/typography';

/**
 * @see https://seed-design.io/docs/foundation/typography/overview
 * @example
 * typography.t1Bold
 * typography.t2Regular
 * typography.t3Bold
 * typography.t4Regular
 * typography.t5Bold
 * typography.t6Bold
 * typography.t7Bold
 * typography.screenTitle
 * ...
 */
export const typography = Object.entries(typographyVars).reduce(
  (acc, [key, value]) => {
    const withoutPrefix = key.replace('textStyle', '');
    const firstChar = withoutPrefix.charAt(0).toLowerCase();
    const restOfString = withoutPrefix.slice(1);
    const name = (firstChar + restOfString) as TextVariant['textStyle'];
    acc[name] = value.enabled.root;
    return acc;
  },
  {} as Record<
    TextVariant['textStyle'],
    {
      fontSize: string;
      fontWeight: string;
      lineHeight: string;
    }
  >,
);
```

### Codemod

기본적으로 마이그레이션은 [Codemod](/react/developer-tools/codemods/introduction)를 이용해 진행합니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/codemod@latest <transform> <target_path> <옵션>
    ```
  </CodeBlockTab>
</CodeBlockTabs>

* Codemod는 기본적으로 `color`와 `typography` transform을 분리해서 제공합니다.
* 현재는 Tailwind CSS, Stitches 혹은 Emotion, Vanilla Extract CSS와 같은 CSS-in-JS 라이브러리에 대한 transform을 제공합니다.
* 각팀에서 커스텀으로 제공되는 transform의 경우에는 `replace-custom-`의 prefix로 제공됩니다.
* 커스텀 transform의 변경 예시를 살펴보고 프로젝트와 상황이 같다면 사용할 수 있습니다.
* 추가로 특정 라이브러리의 transform이 필요하거나, 필요한 경우 커스텀 transform을 만들 수 있습니다. (디자인코어 팀에 문의)

#### Tailwind CSS

* Tailwind V3 플러그인을 제공합니다.
* [@seed-design/tailwind3-plugin](https://github.com/daangn/seed-design/tree/dev/packages/tailwind3-plugin)
* [@seed-design/tailwind4-theme](https://github.com/daangn/seed-design/tree/dev/packages/tailwind4-theme)
* Tailwind transform은 [replace-tailwind-typography](/react/developer-tools/codemods/available-transforms#replace-tailwind-typography), [replace-tailwind-color](/react/developer-tools/codemods/available-transforms#replace-tailwind-color) 두 개가 제공됩니다.
* Tailwind 같은 경우는 각 프로젝트에서 커스텀 플러그인을 작성해서 사용중인 경우가 많기 때문에 Codemod가 정확하게 맞지 않을 수 있습니다.
* Codemod 페이지에서 변경 예시를 살펴보고 프로젝트와 상황이 같다면 사용할 수 있습니다.
* 예시와 맞지 않다면 디자인코어팀에 문의해주세요.

#### Stitches CSS

* Stitches는 [replace-stitches-styled-typography](/react/developer-tools/codemods/available-transforms#replace-stitches-styled-typography), [replace-stitches-styled-color](/react/developer-tools/codemods/available-transforms#replace-stitches-styled-color), [replace-stitches-theme-color](/react/developer-tools/codemods/available-transforms#replace-stitches-theme-color) 의 형태로 제공합니다.
* 자세한 내용은 [Codemod](/react/developer-tools/codemods/introduction) 페이지를 참고해주세요.

#### Emotion, Vanilla Extract CSS, (CSS-in-JS)

* Emotion, Vanilla Extract CSS와 같은 CSS-in-JS 라이브러리는 `@seed-design/design-token`을 사용하는 경우가 대부분입니다.
* [replace-seed-design-token-vars](/react/developer-tools/codemods/available-transforms#replace-seed-design-token-vars) transform을 사용해서 일괄적으로 마이그레이션 할 수 있습니다.
* 해당 transform은 `color`와 `typography` 두 개 동시에 변경합니다.

#### Native CSS

* 기본적으로 `--seed-` prefix가 붙은 CSS Variable을 사용하는 경우가 있습니다.
* [replace-css-seed-design-color-variable](/react/developer-tools/codemods/available-transforms#replace-css-seed-design-color-variable) CSS transform도 제공합니다.

### Codemod 사용 시 주의사항

Codemod는 다수의 파일을 변경하기 때문에 주의가 필요합니다.

* 변경사항 추적과 히스토리 관리를 위해서 별도의 브랜치를 사용할 것을 권장합니다.
* transform에 따라 커밋을 나누는 것을 권장합니다.
* Codemod 실행 후 `lint`와 `test`를 진행해주세요.

### Codemod Log 파일

Codemod 실행 시 디버깅에 도움을 주는 로그 파일을 생성할 수 있습니다.

* `--log` 옵션을 추가해주세요.
* 로그 파일은 Codemod 실행 경로에 `.report` 폴더에 생성됩니다.
* 로그 파일은 변경사항을 추적하고 히스토리 관리에 도움을 줍니다.

<Files>
  <Folder name=".report" defaultOpen>
    <File name="{transform_name}-debug.log" />

    <File name="{transform_name}-issues.log" />

    <File name="{transform_name}-success.log" />
  </Folder>
</Files>

#### debug.log

* 디버깅 정보를 기록합니다.
* 변경 시도한 파일 경로와 시간을 기록합니다.

```log title="debug.log"
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component1.tsx
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component2.tsx
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component3.tsx
2025-03-28 19:17:36 [DEBUG]: Starting transformation of /Project/src/component4.tsx
```

#### issues.log

* 확인이 필요한 변경사항을 기록합니다.
* 문제가 있는 파일 경로와 라인 번호를 기록합니다.
* 문제가 있는 이유를 기록합니다.
* 매핑이 없는 경우를 제외하고는 이미 변경된 상태입니다.

```log title="issues.log"
2025-03-28 18:46:55 [WARN]: /Project/src/component1.tsx (line: 171)
 ↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
2025-03-28 18:46:55 [WARN]: /Project/src/component2.tsx (line: 194)
 ↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
2025-03-28 18:46:55 [WARN]: /Project/src/component3.tsx (line: 147)
 ↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
2025-03-28 18:46:56 [WARN]: /Project/src/component4.tsx (line: 242)
 ↳ reason: $gray900-static static에서 palette로 변경되는 색상으로 용도 파악 필요
```

자주 발생하는 문제들은 제일 아래 [issues.log 파일에 생긴 문제들은 어떻게 해결해야 하나요?](#issueslog-파일에-생긴-문제들은-어떻게-해결해야-하나요)에 정리해두었습니다.

#### success.log

* 변경사항 추적에 도움을 줍니다.
* 변경된 파일 경로와 라인 번호를 기록합니다
* 변경된 토큰을 기록합니다.
* CSS 파일을 변경하는 transform의 경우는 토큰을 일일이 기록하지 않습니다.
* tailwind 같은 경우는 변경된 className을 기록합니다.

```log title="success.log"
2025-03-28 18:46:54 /Project/src/hooks/hook1.tsx (line: 149): $gray900 → $palette-gray-1000 (line 149)
2025-03-28 18:46:54 /Project/src/hooks/hook2.tsx (line: 155): $gray700 → $palette-gray-800 (line 155)
2025-03-28 18:46:54 /Project/src/components/component1.tsx (line: 54): $divider1-semantic → $stroke-neutral-muted (line 54)
2025-03-28 18:46:54 /Project/src/components/component2.tsx (line: 60): $paperDefault-semantic → $bg-layer-default (line 60)
```

### V2 V3 Compatibility

Color, Typography 마이그레이션이 끝나고 나면 기존 Sprout (V2) 컴포넌트와의 호환성 문제가 있을 수 있습니다.

Sprout 내부에 V2 토큰을 V3 토큰으로 전부 교체한 Compatibility 버전을 제공합니다.
여기까지 진행해야 파운데이션 마이그레이션이 끝난 것으로 간주할 수 있습니다.

[Sprout Compatibility 버전](https://github.com/daangn/sprout/pkgs/npm/sprout-components-button) 페이지에서
`-v3-compat` 태그가 붙은 버전중에 최신 버전으로 모든 컴포넌트를 전부 교체해주시면 됩니다. (모든 컴포넌트 동일한 버전을 제공합니다.)

주의할 점: 너무 예전의 버전을 사용하는 경우 컴포넌트 내부에서 breaking changes가 있을 수 있습니다.

V2 V3 Compatibility 버전까지 설치가 되었다면 파운데이션 마이그레이션이 끝난 것으로 간주할 수 있습니다.
이론상 이때부터는 `@seed-design/design-token` 패키지와 `@seed-design/stylesheet` 패키지를 제거할 수 있습니다.
또한 V3 컴포넌트를 점진적 사용이 가능합니다.

### V3 Compat Script 제거

```html
<script src="https://assets.krrt.io/daangn/seed-design-critical-script/latest/lib/index.js"></script>
```

기존에 25.10.0 앱버전 이상에서 V2 백그라운드 색상을 V3로 변경하기 위해 추가했던 스크립트는
마이그레이션이 끝나고 제거해도 됩니다.

## 컴포넌트 마이그레이션

TBD

## 자주 묻는 질문

### issues.log 파일에 생긴 문제들은 어떻게 해결해야 하나요?

#### 토큰 매핑이 안되는 경우 (컬러, 타이포그래피)

* V3에서 지원하지 않는 토큰을 사용하는 경우입니다. (주로 alpha 색상 토큰이거나 너무 작거나 큰 타이포 토큰입니다.)
* 토큰 매핑을 확인할 수 있는 방법은 [설명](#파운데이션-토큰-매핑은-어디서-확인할-수-있나요)을 참고해주세요.
* 해당 경우는 디자이너분과 상의 후 다른 적절한 토큰으로 직접 매핑해주세요.
* 결정에 어려움이 있는 경우 디자인코어팀에 문의해주세요.

#### alpha 토큰이 사라진 경우 (컬러)

* alpha가 들어간 토큰은 대부분의 경우 더 이상 사용되지 않습니다.
* 직접 CSS에 `alpha` 채널을 적용해주세요. (opacity 속성을 사용하거나, rgba 형식으로 직접 적용)

#### static 토큰이 palette로 변경된 경우 (컬러)

* V3에서 static 컬러 토큰은 웬만해서는 `white`, `black` 두 가지만 지원합니다.
* 나머지 색상 (yellow, green, blue, red, gray) 등은 palette 토큰으로 변경되었습니다.
* 다크모드와 라이트모드에 따라 색상이 달라질 수 있기 때문에 확인이 필요합니다.
* 배경은 변하는데 텍스트 색상이 변하지 않거나, 그 반대의 상황이 나올 수 있습니다.
* 대부분의 경우는 static 토큰이 필요한 경우가 아니기 때문에 palette 토큰으로 변경되었습니다.
* 이 경우는 디자이너분과 상의 후 기존 static 토큰을 다른 적절한 palette 토큰으로 직접 매핑해주세요.

#### 선택지가 두개인 토큰으로 매핑된 경우 (컬러)

* 컬러 토큰의 경우 대체 토큰이 두 가지인 경우가 있습니다. (ex. `primary` -> `bg.brand-solid`, `fg.brand`)
* `fg`는 텍스트, 아이콘 등 UI의 전경 요소에 사용되는 색상입니다. (color, fill, etc.)
* `bg`는 전체 화면 또는 UI의 배경에 사용하는 색상입니다. (backgroundColor, etc.)
* 변경되어야 하는 토큰을 Codemod가 판단하기 어려울 수 있습니다.
* 이 경우는 직접 적절한 토큰으로 매핑해주세요.

#### alternate 토큰으로 변경된 경우 (타이포그래피)

* 기본적으로 [Mapping](/docs/migration/migration-reference)은 1:1 매핑을 지원합니다.
* 하지만 V3에서 Deprecated 된 토큰인 경우, 대체 토큰으로 매핑 될 수 있습니다.
* 그런 경우 font size나 line height가 변경되었을 수 있습니다.
* 이 경우는 직접 UI를 확인해야 합니다.

### 파운데이션 토큰 매핑은 어디서 확인할 수 있나요?

[Migration Reference](/docs/migration/migration-reference)에서 토큰 매핑을 확인할 수 있습니다.

## Known Issues

### Vanilla Extract CSS + Vite + V3 사용시

* `@vanilla-extract/vite-plugin`와 `@seed-design/vite-plugin`을 같이 사용하는 경우 빌드가 실패할 수 있습니다.
* `@vanilla-extract/vite-plugin`의 버전을 `5` 이상으로 업그레이드 해주세요.


---

file: migration/migrating-icons.mdx

# Migrating Icons

SEED V2 아이콘을 V3 아이콘으로 쉽게 마이그레이션해요.



## 업그레이드 방법

현재 아이콘을 사용하고 있는 방법에 따라 적용할 수 있는 2가지 방법이 있어요.

### Codemod 스크립트

아래 3개 아이콘 패키지를 사용하고 있다면, 제공되는 codemod 스크립트를 사용해서 리뉴얼된 아이콘 패키지로 손쉽게 업그레이드할 수 있어요.

* [`@seed-deesign/react-icon`](https://www.npmjs.com/package/@seed-design/react-icon)
* [`@seed-design/icon`](https://www.npmjs.com/package/@seed-design/icon) (deprecated)
* [`@karrotmarket/karrot-ui-icon`](https://www.npmjs.com/package/@karrotmarket/karrot-ui-icon) (deprecated) (React 컴포넌트를 사용하는 경우)

3개 패키지에서 사용하고 있는 아이콘은 [`@karrotmarket/react-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-monochrome-icon)의 아이콘으로 대체돼요.

### 수동 업그레이드

다음과 같은 경우에는 수동으로 업그레이드해야 해요.

* PNG, SVG 등의 파일로 기존 아이콘을 사용하는 경우
  * [`@karrotmarket/karrot-ui-icon`](https://www.npmjs.com/package/@karrotmarket/karrot-ui-icon) (deprecated)에서 제공되는 SVG 파일을 사용하는 경우
* 다음 패키지를 사용하는 경우
  * [`@seed-design/vue2-icon`](https://www.npmjs.com/package/@seed-design/vue2-icon) → [`@daangn/vue2-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/vue2-monochrome-icon)으로 대체돼요.
  * [`@seed-design/vue3-icon`](https://www.npmjs.com/package/@seed-design/vue3-icon) → [`@daangn/vue3-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/vue3-monochrome-icon)으로 대체돼요.

## 작업 순서

<Callout type="warn" title="시작하기 전">
  많은 변경사항이 발생하게 되므로, 커밋하지 않은 변경사항이 없는지 확인하고 시작하는 것이 좋아요.
</Callout>

<Tabs items={["codemod 스크립트", "수동 업그레이드"]}>
  <Tab value="codemod 스크립트">
    ### Codemod 스크립트

    <Steps>
      <Step>
        #### 리뉴얼된 아이콘 패키지 설치

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        <Callout type="info" title="패키지 설명">
          2개 패키지 중 필요한 패키지만 설치해요.

          * [`@karrotmarket/react-monochrome-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-monochrome-icon)
            * 단색 아이콘 패키지에요. **일반** 아이콘, **카테고리** 아이콘, **서비스** 아이콘이 포함되어 있어요.
            * 이 패키지에서 제공되는 서비스 아이콘은 검은색으로만 사용할 수 있어요.
            * codemod 실행 시, 기존 패키지들의 아이콘은 모두 이 패키지의 아이콘으로 대체돼요.
          * [`@karrotmarket/react-multicolor-icon`](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)
            * 멀티컬러 아이콘 패키지에요. **카테고리** 아이콘과 **서비스** 아이콘이 포함되어 있어요.
            * 이 패키지에서 제공되는 카테고리 아이콘과 서비스 아이콘은 패키지에서 제공되는 색상 그대로만 사용할 수 있어요.
            * 기존에 SVG로 사용하던 멀티컬러 아이콘들을 이 패키지로 직접 대체할 수 있어요. 따라서, 필요한 경우에만 설치해도 좋아요.
        </Callout>
      </Step>

      <Step>
        #### Codemod 스크립트 실행

        `replace-react-icon` transform을 실행해요.

        ```shell
        npx @seed-design/codemod@latest replace-react-icon <target_path>
        ```

        <Card title="replace-react-icon" href="/react/developer-tools/codemods/available-transforms#replace-react-icon" icon={<IconTerminal/>}>
          해당 transform에 대해 자세히 알아봅니다.
        </Card>
      </Step>

      <Step>
        #### 결과 확인

        문제 없이 모든 변환이 완료된 경우 다음과 같은 결과가 표시돼요.

        ```
        All done.
        Results:
        0 errors // [!code highlight]
        439 unmodified
        1 skipped
        27 ok
        Time elapsed: 43.376seconds
        ```

        <Callout type="info" title="결과별 설명">
          * `errors`: 파싱 오류 등으로 인해, 아이콘을 참조하는 코드가 있는지 확인하지 못한 파일의 수에요.
            * 에러가 발생한 파일에 이전 아이콘을 참조하는 코드가 없다면, 해당 파일에서 발생하는 에러는 무시해도 좋아요.
            * 이전 아이콘을 참조하는 코드가 있다면, 문제가 발생한 부분을 수정하고 다시 스크립트를 실행하거나, 해당 파일의 아이콘 마이그레이션을 직접 진행해주세요.
          * `unmodified`: 아이콘을 참조하는 코드가 없어, 아무 변환도 이루어지지 않은 파일의 수에요.
          * `skipped`: 빈 파일 등 변환 대상이 아니어서, 아무 변환도 이루어지지 않은 파일의 수에요.
          * `ok`: 변환이 이루어진 파일의 수에요.
        </Callout>

        <Callout type="error" title="파싱 오류">
          ```
          ERR /Users/seed/foo/bar.js Transformation error (Unexpected reserved word 'package'. (3:3))
          ```

          codemod 스크립트 실행 중 파싱 오류가 발생할 수 있어요. 파싱 오류는 다음과 같은 이유로 발생해요.

          * `assert`를 사용한 [import assertion](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#import-attributes)과 같은, deprecated된 문법이 있는 경우
          * `package`와 같은 예약어를 변수 이름으로 사용한 경우 등
        </Callout>
      </Step>

      <Step>
        #### 코드 포맷

        프로젝트에서 사용하는 포매터를 사용해서 코드를 포맷해요.
      </Step>

      <Step>
        #### 이전 패키지 제거

        이전 아이콘이 모두 대체된 것을 확인하고, 이전 패키지를 제거해요.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm uninstall @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        #### 사이드 이펙트 확인

        * [사이드 이펙트](#발생-가능한-사이드-이펙트)가 발생했는지 확인하여 의도한 대로 변경이 이루어졌는지 검토해요.
        * 디자인 QA 과정에서, 자동으로 변경된 아이콘이 아닌 새로운 아이콘을 사용하도록 결정되었을 수 있어요. 이러한 경우, Figma 디자인 파일을 참고하여 코드에 반영해요.
        * 멀티컬러 아이콘 사용이 필요한 곳에는 [멀티컬러 아이콘 패키지](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)를 사용해주세요.
      </Step>
    </Steps>
  </Tab>

  <Tab value="수동 업그레이드">
    ### 수동 업그레이드

    <Steps>
      <Step>
        #### 이전 패키지 제거

        이전 아이콘 패키지들을 제거해요.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm uninstall @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun remove @seed-design/icon @seed-design/react-icon @karrotmarket/karrot-ui-icon @seed-design/vue2-icon @seed-design/vue3-icon
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        #### 리뉴얼된 패키지 설치

        ##### React

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @karrotmarket/react-monochrome-icon @karrotmarket/react-multicolor-icon
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        ##### Vue 2

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @daangn/vue2-monochrome-icon @daangn/vue2-multicolor-icon
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        ##### Vue 3

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @daangn/vue3-monochrome-icon @daangn/vue3-multicolor-icon
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        <Callout type="info" title="패키지 설명">
          2개 패키지 중 필요한 패키지만 설치해요.

          * `@daangn/*-monochrome-icon`
            * 단색 아이콘 패키지에요. **일반** 아이콘, **카테고리** 아이콘, **서비스** 아이콘이 포함되어 있어요.
            * 이 패키지에서 제공되는 서비스 아이콘은 검은색으로만 사용할 수 있어요.
            * codemod 실행 시, 기존 패키지들의 아이콘은 모두 이 패키지의 아이콘으로 대체돼요.
          * `@daangn/*-multicolor-icon`
            * 멀티컬러 아이콘 패키지에요. **카테고리** 아이콘과 **서비스** 아이콘이 포함되어 있어요.
            * 이 패키지에서 제공되는 카테고리 아이콘과 서비스 아이콘은 패키지에서 제공되는 색상 그대로만 사용할 수 있어요.
            * 기존에 SVG로 사용하던 멀티컬러 아이콘들을 이 패키지로 직접 대체할 수 있어요. 따라서, 필요한 경우에만 설치해도 좋아요.
        </Callout>
      </Step>

      <Step>
        #### 아이콘 이름 변경

        [V2 V3 아이콘 맵핑](/docs/migration/migration-reference#iconography) 문서를 참고하여 리뉴얼된 패키지를 사용하도록 코드를 수정해요.

        <Callout type="warn" title="이름 변경 관련 유의 사항">
          * 기존 아이콘의 `IconHome*`은 신규 아이콘에서 `IconHouse*`로 이름이 바뀌었어요.
          * 기존 아이콘의 `IconHouse*`는 신규 아이콘에서 `IconWindow4House*`로 이름이 바뀌었어요.

          따라서, 수동 마이그레이션 시 `IconHome*`이 `IconWindow4House*`로 잘못 변경되지 않게 주의해야 해요.

          **`IconHouse*`를 먼저 마이그레이션**하고, `IconHome*`을 마이그레이션하는 것을 추천해요.
        </Callout>
      </Step>

      <Step>
        #### 사이드 이펙트 확인

        * [사이드 이펙트](#발생-가능한-사이드-이펙트)가 발생했는지 확인하여 의도한 대로 변경이 이루어졌는지 검토해요.
        * 디자인 QA 과정에서, [V2 V3 아이콘 맵핑](/docs/migration/migration-reference#iconography)에 따른 아이콘이 아닌 새로운 아이콘을 사용하도록 결정되었을 수 있어요. 이러한 경우, Figma 디자인 파일을 참고하여 코드에 반영해요.
        * 멀티컬러 아이콘 사용이 필요한 곳에는 [멀티컬러 아이콘 패키지](https://github.com/daangn/seed-icon-v3/pkgs/npm/react-multicolor-icon)를 사용해주세요.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 발생 가능한 사이드 이펙트

### 정확히 대응되는 리뉴얼된 아이콘이 없는 경우

* 이전 아이콘 중 아래 5개 아이콘(총 15개 variant)은 리뉴얼된 아이콘 패키지에 시각적으로 정확히 대응되는 항목이 없어요.
* codemod 스크립트 실행 시 **추천되는 아이콘으로 변환되지만**, 시각적인 차이가 크기 때문에 변경 후 확인이 필요해요.

| 이전 아이콘 이름                               | 리뉴얼된 아이콘 이름                                                                              |
| --------------------------------------- | ---------------------------------------------------------------------------------------- |
| <V2Icon name="IconBoldThin" />          | <V3Icon type="monochrome" name="IconTUppercaseSerifLine" />                              |
| <V2Icon name="IconBoldRegular" />       | <V3Icon type="monochrome" name="IconTUppercaseSerifLine" />                              |
| <V2Icon name="IconBoldFill" />          | <V3Icon type="monochrome" name="IconTUppercaseSerifFill" />                              |
| <V2Icon name="IconCobuyingThin" />      | <V3Icon type="monochrome" name="IconShoppingbag2StackedLine" />                          |
| <V2Icon name="IconCobuyingRegular" />   | <V3Icon type="monochrome" name="IconShoppingbag2StackedLine" />                          |
| <V2Icon name="IconCobuyingFill" />      | <V3Icon type="monochrome" name="IconShoppingbag2StackedFill" />                          |
| <V2Icon name="IconDeliveryThin" />      | <V3Icon type="monochrome" name="IconTruckLine" />                                        |
| <V2Icon name="IconDeliveryRegular" />   | <V3Icon type="monochrome" name="IconTruckLine" />                                        |
| <V2Icon name="IconDeliveryFill" />      | <V3Icon type="monochrome" name="IconTruckFill" />                                        |
| <V2Icon name="IconSuggestThin" />       | <V3Icon type="monochrome" name="IconLightbulbDot5Line" />                                |
| <V2Icon name="IconSuggestRegular" />    | <V3Icon type="monochrome" name="IconLightbulbDot5Line" />                                |
| <V2Icon name="IconSuggestFill" />       | <V3Icon type="monochrome" name="IconLightbulbDot5Fill" />                                |
| <V2Icon name="IconWriteStoryThin" />    | <V3Icon type="monochrome" name="IconHorizline2VerticalChatbubbleRectangularRightLine" /> |
| <V2Icon name="IconWriteStoryRegular" /> | <V3Icon type="monochrome" name="IconHorizline2VerticalChatbubbleRectangularRightLine" /> |
| <V2Icon name="IconWriteStoryFill" />    | <V3Icon type="monochrome" name="IconHorizline2VerticalChatbubbleRectangularRightFill" /> |

<Callout type="info" title="사용 여부 확인 방법">
  * codemod 스크립트 사용 시, 5개 아이콘(총 15개 variant)이 사용된 경우 터미널에 메시지가 출력돼요.

  ```
  REP ...을 ...로 변경했지만, 변경된 아이콘이 적절한지 확인이 필요해요
  ```

  * codemod 스크립트를 `--log` flag와 함께 사용 시, 사용된 내역이 `migrate-icons-warnings.log`에 기록돼요.
  * 다음을 활용하여 코드를 직접 검색할 수 있어요.

  <Tabs items={["정규 표현식", "git grep"]}>
    <>
      <Tab value="정규 표현식">
        ```regex
        (IconBold|IconCobuying|IconDelivery|IconSuggest|IconWriteStory)(Thin|Regular|Fill)|(IconTUppercaseSerif|IconShoppingbag2Stacked|IconTruck|IconLightbulbDot5|IconHorizline2VerticalChatbubbleRight)(Line|Fill)
        ```
      </Tab>

      <Tab value="git grep">
        ```shell
        git grep -E '(IconBold|IconCobuying|IconDelivery|IconSuggest|IconWriteStory)(Thin|Regular|Fill)|(IconTUppercaseSerif|IconShoppingbag2Stacked|IconTruck|IconLightbulbDot5|IconHorizline2VerticalChatbubbleRight)(Line|Fill)'
        ```
      </Tab>
    </>
  </Tabs>
</Callout>

### 여러 이전 아이콘이 하나의 리뉴얼된 아이콘으로 대체되는 경우

**이전 아이콘과 리뉴얼된 아이콘은 `n:1`로 대응돼요.** 따라서, 같은 페이지에 표시되었던 서로 다른 여러 개의 아이콘이, 동일한 리뉴얼된 아이콘으로 대체되는 경우가 있어요. 의도한 목적대로 아이콘이 표시되는지 확인해요.

* 한 이전 아이콘의 3개 variant 중 `Thin` variant와 `Regular` variant는 리뉴얼된 아이콘에서 모두 `Line` variant로 대체돼요.
  * 예를 들면, `IconForwardThin`, `IconForwardRegular`는 모두 [`IconArrowRightLine`](/docs/foundation/iconography/library?icon=icon_arrow_right_line)으로 대체돼요.
  * 이전 아이콘의 `Fill` variant는 리뉴얼된 아이콘에서도 `Fill` variant로 대체돼요.
* 여러 개의 이전 아이콘이 하나의 리뉴얼된 아이콘으로 대체되는 경우도 있어요.
  * 예를 들면, `IconHeadphoneRegular`, `IconHelpcenterRegular`, `IconHelperRegular`는 모두 [`IconHeadsetLine`](/docs/foundation/iconography/library?icon=icon_headset_line)으로 대체돼요.


---

file: stackflow/alert-dialog.mdx

# Alert Dialog

Alert Dialog를 Stackflow와 함께 사용하는 방법을 안내합니다.



<Card title="Alert Dialog" href="/react/components/alert-dialog">
  Alert Dialog 컴포넌트에 대해 자세히 알아봅니다.
</Card>

## Making an Alert Dialog Activity

**일반적인 경우 Alert Dialog를 [Activity](https://stackflow.so/docs/get-started/activity)로 만들어 사용하는 것을 권장합니다.**

* Activity로 관리되므로, 하위 Activity보다 높고 상위 Activity보다는 낮은 z-index를 갖도록 관리하기 쉽습니다.
* 딥링킹이 가능합니다. (URL 접속으로 Alert Dialog를 열 수 있습니다.)
* [@stackflow/plugin-basic-ui](https://www.npmjs.com/package/@stackflow/plugin-basic-ui) `Modal`에서의 마이그레이션이 쉽습니다.

<StackflowExample path="/alert-dialog-activity">
  ```tsx title='ActivityAlertDialogActivity.tsx'
  import { VStack } from "@seed-design/react";
  import { useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
  import {
    AppBar,
    AppBarBackButton,
    AppBarLeft,
    AppBarMain,
    AppBarIconButton,
    AppBarRight,
  } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { ActionButton } from "seed-design/ui/action-button";
  import { IconHouseLine } from "@karrotmarket/react-monochrome-icon";

  declare module "@stackflow/config" {
    interface Register {
      ActivityAlertDialogActivity: {};
    }
  }

  const ActivityAlertDialogActivity: StaticActivityComponentType<
    "ActivityAlertDialogActivity"
  > = () => {
    const { push } = useFlow();

    return (
      <AppScreen>
        <AppBar>
          <AppBarLeft>
            <AppBarBackButton />
          </AppBarLeft>
          <AppBarMain title="Activity" />
          <AppBarRight>
            <AppBarIconButton aria-label="Home" onClick={() => push("ActivityHome", {})}>
              <IconHouseLine />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <VStack p="x5" justify="center" gap="x4">
            <ActionButton
              variant="neutralSolid"
              flexGrow
              onClick={() => push("ActivityAlertDialog", {})}
            >
              ActivityAlertDialog를 Push
            </ActionButton>
            <ActionButton
              variant="neutralWeak"
              flexGrow
              onClick={() => push("ActivityAlertDialogActivity", {})}
            >
              지금 열린 이 Activity를 Push
            </ActionButton>
          </VStack>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ActivityAlertDialogActivity;
  ```

  ```tsx title='ActivityAlertDialog.tsx'
  import { useActivity, useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
  import { useState } from "react";

  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
  } from "seed-design/ui/alert-dialog";
  import { Divider, ResponsivePair, VStack } from "@seed-design/react";
  import { send } from "@stackflow/compat-await-push";
  import { useActivityZIndexBase } from "@seed-design/stackflow";
  import { Switch } from "seed-design/ui/switch";

  declare module "@stackflow/config" {
    interface Register {
      ActivityAlertDialog: {};
    }
  }

  const ActivityAlertDialog: StaticActivityComponentType<"ActivityAlertDialog"> = () => {
    const activity = useActivity();
    const { pop, push } = useFlow();

    const [keepMounted, setKeepMounted] = useState(false);

    const handleClose = (open: boolean) => {
      if (!open) {
        pop();
        send({
          activityId: activity.id,
          data: {
            message: "hello",
          },
        });
      }
    };

    const open = keepMounted
      ? activity.transitionState === "enter-active" || activity.transitionState === "enter-done"
      : activity.isActive;

    const onOpenChange = keepMounted
      ? (open: boolean) => !open && activity.isActive && handleClose(open)
      : handleClose;

    return (
      <AlertDialogRoot open={open} onOpenChange={onOpenChange}>
        <AlertDialogContent layerIndex={useActivityZIndexBase()}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>다람쥐 헌 쳇바퀴에 타고파</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <VStack gap="x4">
              <ResponsivePair gap="x2">
                <AlertDialogAction asChild>
                  <ActionButton variant="neutralWeak">확인</ActionButton>
                </AlertDialogAction>
                <ActionButton
                  variant="neutralSolid"
                  onClick={() =>
                    push("ActivityDetail", {
                      title: "AlertDialog에서 Push됨",
                      body: keepMounted
                        ? "AlertDialog가 언마운트되지 않았으므로, 현재 Activity를 pop하는 경우 AlertDialog가 열린 상태로 표시됩니다."
                        : "AlertDialog가 언마운트되었으므로, 현재 Activity를 pop하는 경우 AlertDialog가 다시 enter 트랜지션을 재생하며 마운트됩니다.",
                    })
                  }
                >
                  Push
                </ActionButton>
              </ResponsivePair>
              <Switch
                tone="neutral"
                size="16"
                label="Push 이후에도 AlertDialog 마운트 유지"
                checked={keepMounted}
                onCheckedChange={setKeepMounted}
                style={{ alignSelf: "center" }}
              />
            </VStack>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default ActivityAlertDialog;
  ```
</StackflowExample>

### Usage

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { useActivity, useFlow, type ActivityComponentType } from "@stackflow/react/future";
// ... more imports

const ActivityAlertDialog: ActivityComponentType<"ActivityAlertDialog"> = () => {
  const { pop, push } = useFlow();

  return (
    {/* [!code highlight] */}
    <AlertDialogRoot open={useActivity().isActive} onOpenChange={(open) => !open && pop()}>
      {/* [!code highlight] */}
      <AlertDialogContent layerIndex={useActivityZIndexBase()}>
        <AlertDialogHeader>
          <AlertDialogTitle>제목</AlertDialogTitle>
          <AlertDialogDescription>설명 텍스트</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <VStack gap="x2">
            <AlertDialogAction asChild>
              <ActionButton>확인</ActionButton>
            </AlertDialogAction>
            <ActionButton
              variant="neutralSolid"
              onClick={() => push("AnotherActivity", {})}
            >
              다른 화면으로 이동
            </ActionButton>
          </VStack>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialogRoot>
  );
};
```

1. `open` prop에 `useActivity().isActive`를 전달하여 Activity가 활성화될 때 Alert Dialog가 열리도록 합니다.
2. `onOpenChange`를 통해 Alert Dialog가 닫힐 때 `pop()`을 실행하여 Activity를 종료합니다.
3. `layerIndex={useActivityZIndexBase()}`로 Alert Dialog Activity의 z-index 기준점을 전달합니다.

* [`useActivityZIndexBase`에 대해 자세히 알아보기](#about-useactivityzindexbase)

#### Keeping Alert Dialog Mounted

Alert Dialog Activity 위에 다른 Activity를 push할 때 Alert Dialog가 unmount되는 것을 방지하려면,

* `open` 상태를 `isActive` 대신 `transitionState`로 관리하고
* `onOpenChange` 핸들러에서 `!isOpen && isActive`인 경우 `pop()`을 실행하도록 합니다.

이 패턴은 Alert Dialog 액티비티 위에 다른 오버레이 컴포넌트 액티비티를 중첩하여 표시하고 싶은 경우 유용합니다.

```tsx
const { isActive, transitionState } = useActivity();

return (
  <AlertDialogRoot
    open={
      // [!code highlight]
      transitionState === "enter-active" || transitionState === "enter-done"
    }
    // [!code highlight]
    onOpenChange={(open) => !open && isActive && pop()}
  >
    {/* ... */}
  </AlertDialogRoot>
);
```

## Syncing Alert Dialog State with a Step

Alert Dialog를 Activity로 만들 수 없는 경우, Alert Dialog가 표시된 상태를 [Step](https://stackflow.so/docs/get-started/navigating-step)으로 만들 수 있습니다.

* 현재 Activity를 유지하면서도, 뒤로 가기 버튼 등으로 Alert Dialog를 닫을 수 있습니다.
* `AlertDialogTrigger`를 사용하여 Alert Dialog를 열고 닫을 수 있습니다.

<Callout type="warn" title="제약 사항">
  **Activity로 만들지 않은 Alert Dialog에서 다른 Activity를 push하기 전, z-index 문제를 방지하기 위해 Alert Dialog를 닫으세요.**

  Alert Dialog를 닫을 수 없거나, Alert Dialog를 연 Activity로 돌아왔을 때 Alert Dialog가 열린 상태를 유지해야 하는 경우 [Alert Dialog를 Activity로](#making-an-alert-dialog-activity) 만들어 사용하는 것을 권장합니다.

  Activity 간 유려한 트랜지션을 제공하기 위해 하위 AppScreen 요소 중 일부가 상위 AppScreen 요소보다 위에 위치합니다. 이 제약으로 인해, 열린 상태의 Alert Dialog는 독립적인 Activity로 만들지 않는 경우 하위 Activity와 상위 Activity 사이에 위치시키는 것이 불가능합니다.
</Callout>

<StackflowExample path="/alert-dialog-step">
  ```tsx title='ActivityAlertDialogStep.tsx'
  import { HStack, Portal, VStack } from "@seed-design/react";
  import { useActivityZIndexBase } from "@seed-design/stackflow";
  import {
    useActivityParams,
    useFlow,
    useStepFlow,
    type StaticActivityComponentType,
  } from "@stackflow/react/future";
  import { useEffect, useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { AppBar, AppBarMain, AppBarIconButton, AppBarRight } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { IconHouseLine } from "@karrotmarket/react-monochrome-icon";
  import {
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  declare module "@stackflow/config" {
    interface Register {
      ActivityAlertDialogStep: {
        "alert-dialog"?: "open";
      };
    }
  }

  const ActivityAlertDialogStep: StaticActivityComponentType<"ActivityAlertDialogStep"> = () => {
    const [open, setOpen] = useState(false);
    const { push } = useFlow();
    const { pushStep, popStep } = useStepFlow("ActivityAlertDialogStep");
    const params = useActivityParams<"ActivityAlertDialogStep">();
    const isOverlayOpen = params["alert-dialog"] === "open";

    useEffect(() => setOpen(isOverlayOpen), [isOverlayOpen]);

    const onOpenChange = (newOpen: boolean) => {
      setOpen(newOpen);

      if (newOpen && !isOverlayOpen) {
        pushStep((params) => ({ ...params, "alert-dialog": "open" }));
        return;
      }

      if (!newOpen && isOverlayOpen) {
        popStep();
        return;
      }
    };

    return (
      <AppScreen>
        <AppBar>
          <AppBarMain title="Step" />
          <AppBarRight>
            <AppBarIconButton aria-label="Home" onClick={() => push("ActivityHome", {})}>
              <IconHouseLine />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <AlertDialogRoot open={open} onOpenChange={onOpenChange}>
            <AlertDialogTrigger asChild>
              <VStack p="x5" justify="center" gap="x4">
                <ActionButton variant="neutralSolid" flexGrow>
                  Alert Dialog 열기
                </ActionButton>
              </VStack>
            </AlertDialogTrigger>
            <Portal>
              <AlertDialogContent layerIndex={useActivityZIndexBase({ activityOffset: 1 })}>
                <AlertDialogHeader>
                  <AlertDialogTitle>Step</AlertDialogTitle>
                  <AlertDialogDescription>
                    Alert Dialog가 Step으로 만들어져 있기 때문에 뒤로 가기로 닫을 수 있습니다.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <HStack gap="x2">
                    <ActionButton onClick={() => setOpen(false)} variant="neutralWeak">
                      닫기
                    </ActionButton>
                    <ActionButton
                      flexGrow
                      variant="neutralSolid"
                      onClick={() => {
                        // 이 Alert Dialog는 Activity로 만들어지지 않았기 때문에, z-index 정리를 위해
                        // Alert Dialog를 먼저 닫고 다음 Activity를 push해야 합니다.
                        setOpen(false);
                        push("ActivityDetail", {
                          title: "Alert Dialog에서 이동한 화면",
                          body: "Alert Dialog를 닫고 이동했습니다.",
                        });
                      }}
                    >
                      Push
                    </ActionButton>
                  </HStack>
                </AlertDialogFooter>
              </AlertDialogContent>
            </Portal>
          </AlertDialogRoot>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ActivityAlertDialogStep;
  ```
</StackflowExample>

### Usage

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import {
  useActivity,
  useActivityParams,
  useFlow,
  useStepFlow,
  type ActivityComponentType,
} from "@stackflow/react/future";
import { useEffect, useState } from "react";
// ... more imports

declare module "@stackflow/config" {
  interface Register {
    ActivityHome: {
      "alert-dialog"?: "open";
    };
  }
}

const ActivityHome: ActivityComponentType<"ActivityHome"> = () => {
  const [open, setOpen] = useState(false);

  const { push } = useFlow();
  const { pushStep, popStep } = useStepFlow("ActivityHome");
  const params = useActivityParams<"ActivityHome">();
  // [!code highlight]
  const isOverlayOpen = params["alert-dialog"] === "open";

  // [!code highlight]
  useEffect(() => {
    if (!isOverlayOpen) {
      setOpen(false);
    }
  }, [isOverlayOpen]);

  // [!code highlight]
  const onOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);

    if (newOpen && !isOverlayOpen) {
      pushStep((params) => ({ ...params, "alert-dialog": "open" }));

      return;
    }

    if (!newOpen && isOverlayOpen) {
      popStep();

      return;
    }
  };

  return (
    <AppScreen>
      <AlertDialogRoot open={open} onOpenChange={onOpenChange}>
        <AlertDialogTrigger asChild>
          <ActionButton>Open</ActionButton>
        </AlertDialogTrigger>
        {/* [!code highlight] */}
        <Portal>
          {/* [!code highlight] */}
          <AlertDialogContent
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <AlertDialogHeader>
              <AlertDialogTitle>제목</AlertDialogTitle>
              <AlertDialogDescription>설명 텍스트</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <HStack gap="x2">
                <ActionButton onClick={() => setOpen(false)}>취소</ActionButton>
                <ActionButton
                  onClick={() => {
                    // [!code highlight]
                    setOpen(false); // 다른 Activity로 이동하기 전에는 Alert Dialog를 닫으세요.
                    push("ActivityNext");
                  }}
                >
                  다음
                </ActionButton>
              </HStack>
            </AlertDialogFooter>
          </AlertDialogContent>
          {/* [!code highlight] */}
        </Portal>
      </AlertDialogRoot>
    </AppScreen>
  );
};
```

1. `Portal`을 사용하여 Alert Dialog가 DOM 상 현재 Activity 밖에 렌더링되도록 합니다.
2. `open` prop를 관리하고, `onOpenChange` 핸들러를 통해 Step 상태와 동기화합니다.
3. 뒤로 가기 버튼 등을 통해 Activity 파라미터가 변경될 때 Alert Dialog의 `open` 상태를 동기화합니다.
4. `layerIndex={useActivityZIndexBase({ activityOffset: 1 })}`로 현재 Activity보다 한 단계 높은 z-index 기준점을 전달합니다.
   * [`useActivityZIndexBase`에 대해 자세히 알아보기](#about-useactivityzindexbase)

### `useStepOverlay`

\#2와 #3을 일반화하여 `useStepOverlay`를 사용하면 편리합니다. `useStepOverlay` 구현 예시는 [코드](https://github.com/daangn/seed-design/blob/dev/examples/stackflow-spa/src/seed-design/stackflow/use-step-overlay.ts)를 참고하세요.

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import { useStepOverlay } from "./use-step-overlay";
// ... more imports

const MyActivity: ActivityComponentType = () => {
  // [!code highlight]
  const { overlayProps, setOpen } = useStepOverlay();
  const { popStep } = useStepFlow("MyActivity");
  const { push } = useFlow();

  return (
    <AppScreen>
      {/* [!code highlight] */}
      <AlertDialogRoot {...overlayProps}>
        <AlertDialogTrigger asChild>
          <ActionButton>Open</ActionButton>
        </AlertDialogTrigger>
        {/* [!code highlight] */}
        <Portal>
          {/* [!code highlight] */}
          <AlertDialogContent
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <AlertDialogHeader>
              <AlertDialogTitle>제목</AlertDialogTitle>
              <AlertDialogDescription>설명 텍스트</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <HStack gap="x2">
                <ActionButton onClick={() => setOpen(false)}>취소</ActionButton>
                <ActionButton
                  onClick={() => {
                    // [!code highlight]
                    setOpen(false); // 다른 Activity로 이동하기 전에는 Alert Dialog를 닫으세요.
                    push("ActivityNext");
                  }}
                >
                  다음
                </ActionButton>
              </HStack>
            </AlertDialogFooter>
          </AlertDialogContent>
          {/* [!code highlight] */}
        </Portal>
      </AlertDialogRoot>
    </AppScreen>
  );
};
```

## About `useActivityZIndexBase`

`useActivityZIndexBase`는 각 Activity의 z-index 기준점을 반환하는 훅입니다.

<Accordions>
  <Accordion title="useActivityZIndexBase는 어떤 값을 반환하나요?">
    * `useActivity().zIndex * 5`를 반환합니다. `useActivity().zIndex`는 현재 Activity가 enter된 Activity 중 몇 번째 Activity인지를 나타내는 값입니다.
    * AppScreen을 구성하는 요소들(layer, appbar, dim, edge)은 `useActivityZIndexBase()` 값을 바탕으로 계산된 z-index를 갖습니다.
      ```
      ┌─ 2번 AlertDialog Activity
      │  └─ AlertDialog: 12 (2 × 5 + 2)
      ├─ 1번 AppScreen Activity
      │  ├─ appbar: 12 (1 × 5 + 7)
      │  ├─ edge: 9 (1 × 5 + 4)
      │  ├─ layer: 7 (1 × 5 + 2)
      │  └─ dim: 5 (1 × 5 + 0)
      └─ 0번 AppScreen Activity
         ├─ appbar: 7 (0 × 5 + 7)
         ├─ edge: 4 (0 × 5 + 4)
         ├─ layer: 2 (0 × 5 + 2)
         └─ dim: 0 (0 × 5 + 0)
      ```
  </Accordion>

  <Accordion title="activityOffset 옵션은 무엇인가요?">
    * `activityOffset` 옵션은 현재 Activity가 아닌 다음 Activity의 z-index 기준점을 사용하고 싶을 때 사용합니다.
    * 예를 들어, `useActivityZIndexBase({ activityOffset: 1 })`는 다음 Activity의 z-index 기준점을 반환합니다.
    * 이는 Step 패턴에서 현재 Activity 위에 AlertDialog를 표시할 때 유용합니다.
      ```
      ┌─ 1번 AppScreen Activity에서 activityOffset: 1로 띄운 AlertDialog (예: Step 패턴)
      │  └─ AlertDialog: 12 ((1 + 1) × 5 + 2)
      ├─ 1번 AppScreen Activity
      │  ├─ appbar: 12 (1 × 5 + 7)
      │  ├─ edge: 9 (1 × 5 + 4)
      │  ├─ layer: 7 (1 × 5 + 2)
      │  └─ dim: 5 (1 × 5 + 0)
      └─ 0번 AppScreen Activity
         ├─ appbar: 7 (0 × 5 + 7)
         ├─ edge: 4 (0 × 5 + 4)
         ├─ layer: 2 (0 × 5 + 2)
         └─ dim: 0 (0 × 5 + 0)
      ```
  </Accordion>

  <Accordion title="@stackflow/react-ui-core useZIndexBase와 @seed-design/stackflow useActivityZIndexBase는 어떻게 다른가요?">
    * 두 훅 모두 현재 Activity가 enter된 Activity 중 **몇 번째 Activity인지를 바탕으로 z-index 스타일링에 필요한 값을 반환하는 훅입니다.**
    * 두 훅이 반환하는 값은 같으나, [@stackflow/plugin-basic-ui](https://www.npmjs.com/package/@stackflow/plugin-basic-ui)가 아닌, SEED 컴포넌트를 사용하는 경우 SEED가 관리하는 `@seed-design/stackflow` 패키지의 `useActivityZIndexBase` 훅을 사용하는 것을 권장합니다.
    * `@stackflow/react-ui-core` 패키지의 `useZIndexBase`는 `activityOffset` 옵션을 제공하지 않습니다.
    * `@seed-design/stackflow@1.1.1`부터 `useActivityZIndexBase` 훅이 제공됩니다.
  </Accordion>

  <Accordion title="기존에 layerIndex에 수동으로 z-index 값을 지정해주던 코드는 어떻게 변경해야 하나요?">
    `layerIndex`를 `useActivity().zIndex * 5 + n` 형태로 지정하고 있었다면 `useActivityZIndexBase() + n`으로 변경할 수 있습니다. 변경 과정에서 `+ n`이 필요한지 함께 검토해보세요.
  </Accordion>
</Accordions>


---

file: stackflow/app-screen.mdx

# App Screen

Stackflow 네비게이션에서 개별 화면을 구성하는 컴포넌트입니다. 모바일 앱과 같은 화면 전환 경험을 제공할 때 사용됩니다.









<StackflowExample names={["react/app-screen/preview"]}>
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { Flex } from "@seed-design/react";
  import type { ActivityComponentType } from "@stackflow/react/future";
  import {
    AppBar,
    AppBarCloseButton,
    AppBarIconButton,
    AppBarLeft,
    AppBarMain,
    AppBarRight,
  } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

  declare module "@stackflow/config" {
    interface Register {
      "react/app-screen/preview": {};
    }
  }

  const AppScreenPreviewActivity: ActivityComponentType<"react/app-screen/preview"> = () => {
    return (
      <AppScreen theme="cupertino">
        <AppBar>
          <AppBarLeft>
            <AppBarCloseButton />
          </AppBarLeft>
          <AppBarMain>Preview</AppBarMain>
          <AppBarRight>
            <AppBarIconButton aria-label="Notification">
              <IconBellFill />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <Flex height="full" justify="center" align="center">
            Preview
          </Flex>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default AppScreenPreviewActivity;
  ```
</StackflowExample>

## Installation

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx @seed-design/cli@latest add ui:app-screen
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add ui:app-screen
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add ui:app-screen
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x @seed-design/cli@latest add ui:app-screen
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ManualInstallation name="app-screen" />

## Usage

```tsx
import {
  AppBar,
  AppBarBackButton,
  AppBarCloseButton,
  AppBarIconButton,
  AppBarLeft,
  AppBarMain,
  AppBarRight,
} from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
```

```tsx
<AppScreen theme="cupertino">
  <AppBar>
    <AppBarLeft>
      <AppBarBackButton />
    </AppBarLeft>
    <AppBarMain>Title</AppBarMain>
    <AppBarRight>{/* actions */}</AppBarRight>
  </AppBar>
  <AppScreenContent>{/* content */}</AppScreenContent>
</AppScreen>
```

## Props

### App Screen

#### `AppScreen`

<TypeTable
  type={{
    preventSwipeBack: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    tone: {
        "type": "\"layer\" | \"transparent\" | undefined",
        "default": "\"layer\"",
        "required": false
    },

    theme: {
        "type": "\"cupertino\" | \"android\" | undefined",
        "default": "\"cupertino\"",
        "required": false
    },

    transitionStyle: {
        "type": "\"slideFromRightIOS\" | \"fadeFromBottomAndroid\" | \"fadeIn\" | undefined",
        "default": "\"slideFromRightIOS\"",
        "required": false
    },

    layerOffsetTop: {
        "type": "\"none\" | \"safeArea\" | \"appBar\" | undefined",
        "default": "\"appBar\"",
        "required": false
    },

    layerOffsetBottom: {
        "type": "\"none\" | \"safeArea\" | undefined",
        "default": "\"none\"",
        "required": false
    },

    gradient: {
        "type": "boolean | undefined",
        "default": "true",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    swipeBackDisplacementRatioThreshold: {
        "type": "number | undefined",
        "default": "0.4",
        "required": false,
        description: <><p>{"The threshold to determine whether the swipe back is intentional."}</p></>
    },

    swipeBackVelocityThreshold: {
        "type": "number | undefined",
        "default": "1",
        "required": false,
        description: <><p>{"The threshold to determine whether the swipe back is intentional."}</p></>
    },

    onSwipeBackStart: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    },

    onSwipeBackMove: {
        "type": "((props: { displacement: number; displacementRatio: number; }) => void) | undefined",
        "default": undefined,
        "required": false
    },

    onSwipeBackEnd: {
        "type": "((props: { swiped: boolean; }) => void) | undefined",
        "default": undefined,
        "required": false
    }
}}
/>

#### `AppScreenContent`

<TypeTable
  type={{
    ptr: {
        "type": "boolean | undefined",
        "default": undefined,
        "required": false
    },

    onPtrReady: {
        "type": "(() => void) | undefined",
        "default": undefined,
        "required": false
    },

    onPtrRefresh: {
        "type": "(() => Promise<void>) | undefined",
        "default": undefined,
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### App Bar

#### `AppBar`

<TypeTable
  type={{
    theme: {
        "type": "\"cupertino\" | \"android\" | undefined",
        "default": "\"cupertino\"",
        "required": false
    },

    transitionStyle: {
        "type": "\"slideFromRightIOS\" | \"fadeFromBottomAndroid\" | \"fadeIn\" | undefined",
        "default": "\"slideFromRightIOS\"",
        "required": false
    },

    tone: {
        "type": "\"layer\" | \"transparent\" | undefined",
        "default": "\"layer\"",
        "required": false
    },

    divider: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false
    },

    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

#### `AppBarLeft`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

#### `AppBarMain`

<TypeTable
  type={{
    title: {
        "type": "string | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The title of the app bar.\nIf children is provided as ReactElement, this prop will be ignored."}</p></>
    },

    subtitle: {
        "type": "string | undefined",
        "default": undefined,
        "required": false,
        description: <><p>{"The subtitle of the app bar.\nIf children is provided as ReactElement, this prop will be ignored."}</p></>
    },

    layout: {
        "type": "\"titleOnly\" | \"withSubtitle\" | undefined",
        "default": "\"titleOnly\"",
        "required": false
    },

    theme: {
        "type": "\"cupertino\" | \"android\" | undefined",
        "default": "\"cupertino\"",
        "required": false
    },

    transitionStyle: {
        "type": "\"slideFromRightIOS\" | \"fadeFromBottomAndroid\" | \"fadeIn\" | undefined",
        "default": "\"slideFromRightIOS\"",
        "required": false
    },

    tone: {
        "type": "\"layer\" | \"transparent\" | undefined",
        "default": "\"layer\"",
        "required": false
    }
}}
/>

#### `AppBarRight`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

#### `AppBarIconButton`, `AppBarBackButton`, `AppBarCloseButton`

<TypeTable
  type={{
    asChild: {
        "type": "boolean | undefined",
        "default": "false",
        "required": false,
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Tones

AppScreen의 `tone` 속성을 `transparent`로 설정하여 투명한 배경을 사용할 수 있습니다.

* `AppBar`의 배경이 투명해집니다.
* 모바일 OS 상태바를 포함한 `AppScreen` 상단에 그라디언트가 표시됩니다.
  * `gradient` 속성을 `false`로 설정하여 숨길 수 있습니다.

<StackflowExample names={["react/app-screen/transparent"]}>
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { Flex } from "@seed-design/react";
  import type { ActivityComponentType } from "@stackflow/react/future";
  import {
    AppBar,
    AppBarCloseButton,
    AppBarIconButton,
    AppBarLeft,
    AppBarMain,
    AppBarRight,
  } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

  declare module "@stackflow/config" {
    interface Register {
      "react/app-screen/transparent-bar": {};
    }
  }

  const AppScreenTransparentBarActivity: ActivityComponentType<
    "react/app-screen/transparent-bar"
  > = () => {
    return (
      <AppScreen theme="cupertino" layerOffsetTop="none" tone="transparent">
        <AppBar>
          <AppBarLeft>
            <AppBarCloseButton aria-label="Close" />
          </AppBarLeft>
          <AppBarMain>Preview</AppBarMain>
          <AppBarRight>
            <AppBarIconButton aria-label="Notification">
              <IconBellFill />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <Flex
            height="full"
            justify="center"
            align="center"
            bg="palette.gray800"
            color="fg.neutralInverted"
          >
            Preview
          </Flex>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default AppScreenTransparentBarActivity;
  ```
</StackflowExample>

#### With Intersection Observer

Intersection Observer를 사용해 `AppBar`의 `tone` 속성을 동적으로 변경할 수 있습니다.

<StackflowExample names={["react/app-screen/with-intersection-observer"]}>
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { Flex } from "@seed-design/react";
  import type { ActivityComponentType } from "@stackflow/react/future";
  import { useEffect, useRef, useState } from "react";
  import {
    AppBar,
    AppBarCloseButton,
    AppBarIconButton,
    AppBarLeft,
    AppBarMain,
    AppBarProps,
    AppBarRight,
  } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

  declare module "@stackflow/config" {
    interface Register {
      "react/app-screen/with-intersection-observer": unknown;
    }
  }

  const AppScreenWithIntersectionObserverActivity: ActivityComponentType<
    "react/app-screen/with-intersection-observer"
  > = () => {
    const [tone, setTone] = useState<AppBarProps["tone"]>("transparent");
    const whiteImageRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      const observer = new IntersectionObserver(
        (entries) => {
          const entry = entries[0];

          if (!entry.isIntersecting) {
            // 이미지 영역을 벗어나면 tone을 layer로 변경
            setTone("layer");
          } else {
            // 이미지 영역을 포함하면 tone을 transparent로 변경
            setTone("transparent");
          }
        },
        {
          threshold: [0, 0.1, 0.5, 1],
          rootMargin: "0px",
        },
      );

      if (whiteImageRef.current) {
        observer.observe(whiteImageRef.current);
      }

      return () => {
        observer.disconnect();
      };
    }, []);

    return (
      <AppScreen theme="cupertino" layerOffsetTop="none" tone={tone}>
        <AppBar>
          <AppBarLeft>
            <AppBarCloseButton aria-label="Close" />
          </AppBarLeft>
          <AppBarMain>Preview</AppBarMain>
          <AppBarRight>
            <AppBarIconButton aria-label="Notification">
              <IconBellFill />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <Flex
            ref={whiteImageRef}
            justifyContent="center"
            alignItems="center"
            bg="palette.staticWhite"
            height="400px"
            width="full"
          >
            하얀 이미지
          </Flex>
          <Flex
            height="1000px"
            justify="center"
            align="center"
            bg="palette.gray800"
            color="fg.neutralInverted"
          >
            컨텐츠 영역
          </Flex>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default AppScreenWithIntersectionObserverActivity;
  ```
</StackflowExample>

### Layer Offset Top

`layerOffsetTop` 속성을 사용해 `AppScreenContent`의 상단 오프셋을 조정할 수 있습니다.

`tone="transparent"`와 `gradient`를 사용하는 경우, 일반적으로 `layerOffsetTop="none"`을 함께 설정하여 모바일 OS 상태바 영역까지 콘텐츠 영역을 확장합니다.

<Callout type="info">
  디스플레이 컷아웃 (notch) 등 safe area를 올바르게 처리하기 위해 `viewport-fit=cover`가 포함된 `viewport` 메타 태그를 사용하세요.

  ```html
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, viewport-fit=cover"
  />
  ```
</Callout>

<div className="grid grid-cols-3 gap-4">
    <img alt="layerOffsetTop을 none으로 설정한 스크린샷" src={__img0} placeholder="blur" />

    <img alt="layerOffsetTop을 safeArea으로 설정한 스크린샷" src={__img1} placeholder="blur" />

    <img alt="layerOffsetTop을 appBar로 설정한 스크린샷" src={__img2} placeholder="blur" />
</div>

### Customizing App Bar

<StackflowExample names={["react/app-screen/app-bar-customization"]}>
  ```tsx
  import { Flex, Icon } from "@seed-design/react";
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import type { ActivityComponentType } from "@stackflow/react/future";
  import { AppBar, AppBarIconButton, AppBarMain, AppBarRight } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";

  declare module "@stackflow/config" {
    interface Register {
      "react/app-screen/app-bar-customization": {};
    }
  }

  const AppScreenAppBarCustomizationActivity: ActivityComponentType<
    "react/app-screen/app-bar-customization"
  > = () => {
    return (
      <AppScreen theme="android">
        <AppBar>
          <AppBarMain title="Preview" subtitle="This is a nice preview." />
          <AppBarRight>
            <AppBarIconButton aria-label="Notification">
              <Icon svg={<IconBellFill />} color="fg.informative" size="x5" />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <Flex justify="center" align="center" height="full">
            Preview
          </Flex>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default AppScreenAppBarCustomizationActivity;
  ```
</StackflowExample>

### Preventing Swipe Back

`preventSwipeBack` 속성을 사용해 `theme="cupertino"`인 AppScreen에서 edge 영역을 렌더링하지 않음으로써 스와이프 백 제스처를 방지할 수 있습니다.

### Transition Styles

`transitionStyle` 속성을 사용해 AppScreen이 최상위로 push되거나 최상위에서 pop될 때 재생할 트랜지션을 지정할 수 있습니다.

<Callout type="info">
  최상위: `useActivity().isTop === true`인 액티비티로 만들어진 AppScreen을
  의미합니다.
</Callout>

별도로 지정하지 않는 경우, `transitionStyle`은 `theme`에 따른 기본값을 갖습니다.

* `theme="cupertino"`: `slideFromRightIOS`
* `theme="android"`: `fadeFromBottomAndroid`

최상위 AppScreen이 push/pop될 때, 최상위가 아닌 AppScreen도 함께 트랜지션을 재생합니다.

<Callout type="warning" title="최상위가 아닌 AppScreen의 트랜지션 스타일">
  **`@seed-design/stackflow@1.1.15`까지**

  최상위 AppScreen이 push/pop될 때, 최상위가 아닌 AppScreen은 **각 AppScreen의 고유한 `transitionStyle`을 재생합니다**.

  * 예를 들면, `transitionStyle="fadeFromBottomAndroid"`인 0번 AppScreen 위에 `transitionStyle="slideFromLeftIOS"`인 1번 AppScreen이 push되는 경우, 0번 AppScreen은 `fadeFromBottomAndroid` 트랜지션을 재생합니다.
    * 0번 AppScreen이 위치 변화 없이 그대로 유지된 상태에서(`fadeFromBottomAndroid`) 1번 AppScreen이 우측에서 슬라이드 인(`slideFromLeftIOS`)

  **이후 버전**

  최상위 AppScreen이 push/pop될 때, 최상위가 아닌 AppScreen은 **최상위 AppScreen의 `transitionStyle`을 재생합니다**.

  * 같은 스택 내에 여러 `transitionStyle`이 공존할 때 자연스러운 트랜지션을 제공합니다.
  * 예를 들면, `transitionStyle="fadeFromBottomAndroid"`인 0번 AppScreen 위에 `transitionStyle="slideFromLeftIOS"`인 1번 AppScreen이 push되는 경우, 0번 AppScreen은 `slideFromLeftIOS` 트랜지션을 재생합니다.
    * 0번 AppScreen이 자연스럽게 좌측으로 조금 밀려나며 어두워지고(`slideFromLeftIOS`) 1번 AppScreen이 우측에서 슬라이드 인(`slideFromLeftIOS`)
</Callout>

<StackflowExample path="/transition-style">
  ```tsx title='ActivityTransitionStyle.tsx'
  import { VStack, Text } from "@seed-design/react";
  import { useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
  import {
    AppBar,
    AppBarBackButton,
    AppBarIconButton,
    AppBarLeft,
    AppBarMain,
    AppBarRight,
  } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent, type AppScreenProps } from "seed-design/ui/app-screen";
  import { IconHouseLine } from "@karrotmarket/react-monochrome-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import { appScreenVariantMap } from "@seed-design/css/recipes/app-screen";
  import { Snackbar, useSnackbarAdapter } from "seed-design/ui/snackbar";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
  import { useState } from "react";

  declare module "@stackflow/config" {
    interface Register {
      ActivityTransitionStyle: {
        transitionStyle: NonNullable<AppScreenProps["transitionStyle"]>;
      };
    }
  }

  const ActivityTransitionStyle: StaticActivityComponentType<"ActivityTransitionStyle"> = ({
    params: { transitionStyle },
  }) => {
    const { push } = useFlow();
    const { create } = useSnackbarAdapter();
    const [preventSwipeBack, setPreventSwipeBack] = useState(false);

    return (
      <AppScreen
        transitionStyle={transitionStyle}
        preventSwipeBack={preventSwipeBack}
        onSwipeBackStart={() => {
          create({ render: () => <Snackbar message="Started swiping" />, timeout: 500 });
        }}
        onSwipeBackEnd={({ swiped }) => {
          create({ render: () => <Snackbar message={`Swiped: ${swiped}`} />, timeout: 500 });
        }}
      >
        <AppBar>
          <AppBarLeft>
            <AppBarBackButton />
          </AppBarLeft>
          {/* can be undefined if search parameter isn't provided */}
          <AppBarMain title={transitionStyle ?? "Transition Styles"} />
          <AppBarRight>
            <AppBarIconButton aria-label="Home" onClick={() => push("ActivityHome", {})}>
              <IconHouseLine />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <VStack px="spacingX.globalGutter" py="x3" gap="x4">
            <VStack gap="x2">
              {appScreenVariantMap.transitionStyle.map((style) => (
                <ActionButton
                  key={style}
                  variant={transitionStyle === style ? "neutralWeak" : "neutralSolid"}
                  onClick={() => push("ActivityTransitionStyle", { transitionStyle: style })}
                >
                  {style}
                </ActionButton>
              ))}
            </VStack>
            <VStack gap="x2" align="center">
              <Text textStyle="t3Bold" aria-hidden>
                Prevent Swipe Back
              </Text>
              <SegmentedControl
                value={preventSwipeBack ? "true" : "false"}
                onValueChange={(value) => setPreventSwipeBack(value === "true")}
                aria-label="Prevent Swipe Back"
              >
                <SegmentedControlItem value="false">false</SegmentedControlItem>
                <SegmentedControlItem value="true">true</SegmentedControlItem>
              </SegmentedControl>
            </VStack>
          </VStack>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ActivityTransitionStyle;
  ```
</StackflowExample>


---

file: stackflow/bottom-sheet.mdx

# Bottom Sheet

Bottom Sheet를 Stackflow와 함께 사용하는 방법을 안내합니다.



<Card title="Bottom Sheet" href="/react/components/bottom-sheet">
  Bottom Sheet 컴포넌트에 대해 자세히 알아봅니다.
</Card>

## Making a Bottom Sheet Activity

**일반적인 경우 Bottom Sheet를 [Activity](https://stackflow.so/docs/get-started/activity)로 만들어 사용하는 것을 권장합니다.**

* Activity로 관리되므로, 하위 Activity보다 높고 상위 Activity보다는 낮은 z-index를 갖도록 관리하기 쉽습니다.
* 딥링킹이 가능합니다. (URL 접속으로 Bottom Sheet를 열 수 있습니다.)
* [@stackflow/plugin-basic-ui](https://www.npmjs.com/package/@stackflow/plugin-basic-ui) `BottomSheet`에서의 마이그레이션이 쉽습니다.

<StackflowExample path="/bottom-sheet-activity">
  ```tsx title='ActivityBottomSheetActivity.tsx'
  import { VStack } from "@seed-design/react";
  import { useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
  import {
    AppBar,
    AppBarBackButton,
    AppBarLeft,
    AppBarMain,
    AppBarIconButton,
    AppBarRight,
  } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { ActionButton } from "seed-design/ui/action-button";
  import { IconHouseLine } from "@karrotmarket/react-monochrome-icon";

  declare module "@stackflow/config" {
    interface Register {
      ActivityBottomSheetActivity: {};
    }
  }

  const ActivityBottomSheetActivity: StaticActivityComponentType<
    "ActivityBottomSheetActivity"
  > = () => {
    const { push } = useFlow();

    return (
      <AppScreen>
        <AppBar>
          <AppBarLeft>
            <AppBarBackButton />
          </AppBarLeft>
          <AppBarMain title="Activity" />
          <AppBarRight>
            <AppBarIconButton aria-label="Home" onClick={() => push("ActivityHome", {})}>
              <IconHouseLine />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <VStack p="x5" justify="center" gap="x4">
            <ActionButton
              variant="neutralSolid"
              flexGrow
              onClick={() => push("ActivityBottomSheet", {})}
            >
              ActivityBottomSheet을 Push
            </ActionButton>
            <ActionButton
              variant="neutralWeak"
              flexGrow
              onClick={() => push("ActivityBottomSheetActivity", {})}
            >
              지금 열린 이 Activity를 Push
            </ActionButton>
          </VStack>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ActivityBottomSheetActivity;
  ```

  ```tsx title='ActivityBottomSheet.tsx'
  import { Box, Divider, HStack, VStack } from "@seed-design/react";
  import { useActivity, useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
  import { useRef, useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
  } from "seed-design/ui/bottom-sheet";
  import { Checkbox } from "seed-design/ui/checkbox";
  import { Snackbar, useSnackbarAdapter } from "seed-design/ui/snackbar";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";
  import { useActivityZIndexBase } from "@seed-design/stackflow";
  import { Switch } from "seed-design/ui/switch";
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
  import { appScreenVariantMap, type AppScreenVariant } from "@seed-design/css/recipes/app-screen";

  declare module "@stackflow/config" {
    interface Register {
      ActivityBottomSheet: {};
    }
  }

  const ActivityBottomSheet: StaticActivityComponentType<"ActivityBottomSheet"> = () => {
    const { push, pop } = useFlow();
    const activity = useActivity();

    const form = useRef<HTMLFormElement>(null);

    const snackbar = useSnackbarAdapter();

    const [nameError, setNameError] = useState<string | null>(null);
    const [keepMounted, setKeepMounted] = useState(false);
    const [transitionStyle, setTransitionStyle] =
      useState<AppScreenVariant["transitionStyle"]>("slideFromRightIOS");

    const handleSubmit = () => {
      if (!form.current) return;
      const formData = new FormData(form.current);

      if (!formData.get("name")) {
        setNameError("이름을 입력해주세요.");

        return;
      }

      setNameError(null);
      pop();

      snackbar.create({
        render: () => (
          <Snackbar
            variant="positive"
            message={JSON.stringify({
              name: formData.get("name"),
              subscribe: formData.get("subscribe"),
            })}
          />
        ),
      });
    };

    const open = keepMounted
      ? activity.transitionState === "enter-active" || activity.transitionState === "enter-done"
      : activity.isActive;

    const onOpenChange = keepMounted
      ? (open: boolean) => !open && activity.isActive && pop()
      : (open: boolean) => !open && pop();

    return (
      <BottomSheetRoot open={open} onOpenChange={onOpenChange}>
        <BottomSheetContent
          showHandle
          showCloseButton={false}
          title="정보 입력"
          layerIndex={useActivityZIndexBase()}
        >
          <form
            ref={form}
            onSubmit={(e) => {
              e.preventDefault();
              handleSubmit();
            }}
          >
            <BottomSheetBody>
              <VStack gap="spacingY.componentDefault">
                <TextField
                  required
                  showRequiredIndicator
                  name="name"
                  label="이름"
                  description="본명이 아니어도 괜찮아요."
                  invalid={!!nameError}
                  errorMessage={nameError}
                >
                  <TextFieldInput placeholder="이름을 입력하세요" />
                </TextField>
                <Checkbox
                  label="뉴스레터 구독하기"
                  tone="neutral"
                  inputProps={{ name: "subscribe" }}
                />
              </VStack>
            </BottomSheetBody>
            <BottomSheetFooter>
              <VStack gap="x4">
                <HStack gap="x2">
                  <ActionButton type="button" variant="neutralWeak" onClick={pop}>
                    닫기
                  </ActionButton>
                  <ActionButton type="submit" variant="neutralSolid" flexGrow>
                    제출
                  </ActionButton>
                </HStack>
                <Divider as="div" />
                <VStack gap="x2">
                  <Switch
                    tone="neutral"
                    size="16"
                    label="Push 이후에도 BottomSheet 마운트 유지"
                    checked={keepMounted}
                    onCheckedChange={setKeepMounted}
                    style={{ alignSelf: "center" }}
                  />
                  <Box alignSelf="center">
                    <SegmentedControl
                      value={transitionStyle}
                      onValueChange={(style) =>
                        setTransitionStyle(style as AppScreenVariant["transitionStyle"])
                      }
                    >
                      {appScreenVariantMap.transitionStyle.map((style) => (
                        <SegmentedControlItem key={style} value={style}>
                          {style}
                        </SegmentedControlItem>
                      ))}
                    </SegmentedControl>
                  </Box>
                  <ActionButton
                    flexGrow
                    type="button"
                    variant="neutralSolid"
                    onClick={() =>
                      push("ActivityDetail", {
                        title: "ActivityDetail",
                        body: keepMounted
                          ? "BottomSheet가 언마운트되지 않았으므로, 현재 Activity를 pop하는 경우 uncontrolled 상태의 TextField와 Checkbox 값이 유지되며 BottomSheet가 열린 상태로 표시됩니다."
                          : "BottomSheet가 언마운트되었으므로, 현재 Activity를 pop하는 경우 uncontrolled 상태의 TextField와 Checkbox 값이 초기화되며 BottomSheet가 다시 enter 트랜지션을 재생하며 마운트됩니다.",
                        transitionStyle,
                      })
                    }
                  >
                    ActivityDetail
                  </ActionButton>
                  <ActionButton
                    flexGrow
                    type="button"
                    variant="neutralSolid"
                    onClick={() => push("ActivityHome", { transitionStyle })}
                  >
                    ActivityHome
                  </ActionButton>
                </VStack>
              </VStack>
            </BottomSheetFooter>
          </form>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default ActivityBottomSheet;
  ```
</StackflowExample>

### Usage

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { useActivity, useFlow, type ActivityComponentType } from "@stackflow/react/future";
// ... more imports

const ActivityBottomSheetSimple: ActivityComponentType<"ActivityBottomSheetSimple"> = () => {
  const { pop } = useFlow();

  return (
    {/* [!code highlight] */}
    <BottomSheetRoot open={useActivity().isActive} onOpenChange={(open) => !open && pop()}>
      <BottomSheetContent
        title="Activity로 만들어진 BottomSheet"
        // [!code highlight]
        layerIndex={useActivityZIndexBase()}
      >
        <BottomSheetFooter>
          <ActionButton onClick={pop}>
            확인
          </ActionButton>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
};
```

1. `open` prop에 `useActivity().isActive`를 전달하여 Activity가 활성화될 때 Bottom Sheet가 열리도록 합니다.
2. `onOpenChange`를 통해 Bottom Sheet가 닫힐 때 `pop()`을 실행하여 Activity를 종료합니다.
3. `layerIndex={useActivityZIndexBase()}`로 Bottom Sheet Activity의 z-index 기준점을 전달합니다.

* [`useActivityZIndexBase`에 대해 자세히 알아보기](#about-useactivityzindexbase)

#### Keeping Bottom Sheet Mounted

Bottom Sheet Activity 위에 다른 Activity를 push할 때 Bottom Sheet가 unmount되는 것을 방지하려면,

* `open` 상태를 `isActive` 대신 `transitionState`로 관리하고
* `onOpenChange` 핸들러에서 `!isOpen && isActive`인 경우 `pop()`을 실행하도록 합니다.

이 패턴은 다음 상황에서 유용합니다.

* Bottom Sheet 액티비티 위에 다른 오버레이 컴포넌트 액티비티를 중첩하여 표시하고 싶은 경우
* 하위 Bottom Sheet 액티비티 내부에 존재하는 Uncontrolled 폼 요소의 상태를 유지하고 싶은 경우

```tsx
const { isActive, transitionState } = useActivity();

return (
  <BottomSheetRoot
    open={
      // [!code highlight]
      transitionState === "enter-active" || transitionState === "enter-done"
    }
    // [!code highlight]
    onOpenChange={(open) => !open && isActive && pop()}
  >
    {/* ... */}
  </BottomSheetRoot>
);
```

## Syncing BottomSheet State with a Step

Bottom Sheet를 Activity로 만들 수 없는 경우, Bottom Sheet가 표시된 상태를 [Step](https://stackflow.so/docs/get-started/navigating-step)으로 만들 수 있습니다.

* 현재 Activity를 유지하면서도, 뒤로 가기 버튼 등으로 Bottom Sheet를 닫을 수 있습니다.
* `BottomSheetTrigger`를 사용하여 Bottom Sheet를 열고 닫을 수 있습니다.

<Callout type="warn" title="제약 사항">
  **Activity로 만들지 않은 Bottom Sheet에서 다른 Activity를 push하기 전, z-index 문제를 방지하기 위해 Bottom Sheet를 닫으세요.**

  Bottom Sheet를 닫을 수 없거나, Bottom Sheet를 연 Activity로 돌아왔을 때 Bottom Sheet가 열린 상태를 유지해야 하는 경우 [Bottom Sheet를 Activity로](#making-a-bottom-sheet-activity) 만들어 사용하는 것을 권장합니다.

  Activity 간 유려한 트랜지션을 제공하기 위해 하위 AppScreen 요소 중 일부가 상위 AppScreen 요소보다 위에 위치합니다. 이 제약으로 인해, 열린 상태의 Bottom Sheet는 독립적인 Activity로 만들지 않는 경우 하위 Activity와 상위 Activity 사이에 위치시키는 것이 불가능합니다.
</Callout>

<StackflowExample path="/bottom-sheet-step">
  ```tsx title='ActivityBottomSheetStep.tsx'
  import { HStack, Portal, VStack } from "@seed-design/react";
  import { useActivityZIndexBase } from "@seed-design/stackflow";
  import {
    useActivityParams,
    useFlow,
    useStepFlow,
    type StaticActivityComponentType,
  } from "@stackflow/react/future";
  import { useEffect, useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { AppBar, AppBarMain, AppBarIconButton, AppBarRight } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { IconHouseLine } from "@karrotmarket/react-monochrome-icon";
  import {
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  declare module "@stackflow/config" {
    interface Register {
      ActivityBottomSheetStep: {
        "bottom-sheet"?: "open";
      };
    }
  }

  const ActivityBottomSheetStep: StaticActivityComponentType<"ActivityBottomSheetStep"> = () => {
    const [open, setOpen] = useState(false);
    const { push } = useFlow();
    const { pushStep, popStep } = useStepFlow("ActivityBottomSheetStep");
    const params = useActivityParams<"ActivityBottomSheetStep">();
    const isOverlayOpen = params["bottom-sheet"] === "open";

    useEffect(() => setOpen(isOverlayOpen), [isOverlayOpen]);

    const onOpenChange = (newOpen: boolean) => {
      setOpen(newOpen);

      if (newOpen && !isOverlayOpen) {
        pushStep((params) => ({ ...params, "bottom-sheet": "open" }));
        return;
      }

      if (!newOpen && isOverlayOpen) {
        popStep();
        return;
      }
    };

    return (
      <AppScreen>
        <AppBar>
          <AppBarMain title="Step" />
          <AppBarRight>
            <AppBarIconButton aria-label="Home" onClick={() => push("ActivityHome", {})}>
              <IconHouseLine />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <BottomSheetRoot open={open} onOpenChange={onOpenChange}>
            <BottomSheetTrigger asChild>
              <VStack p="x5" justify="center" gap="x4">
                <ActionButton variant="neutralSolid" flexGrow>
                  Bottom Sheet 열기
                </ActionButton>
              </VStack>
            </BottomSheetTrigger>
            <Portal>
              <BottomSheetContent
                showHandle
                title="Step"
                description="Bottom Sheet가 Step으로 만들어져 있기 때문에 뒤로 가기로 닫을 수 있습니다."
                layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
              >
                <BottomSheetFooter>
                  <HStack gap="x2">
                    <ActionButton onClick={() => setOpen(false)} variant="neutralWeak">
                      닫기
                    </ActionButton>
                    <ActionButton
                      flexGrow
                      variant="neutralSolid"
                      onClick={() => {
                        // 이 Bottom Sheet는 Activity로 만들어지지 않았기 때문에, z-index 정리를 위해
                        // BottomSheet를 먼저 닫고 다음 Activity를 push해야 합니다.
                        setOpen(false);
                        push("ActivityDetail", {
                          title: "Bottom Sheet에서 이동한 화면",
                          body: "Bottom Sheet를 닫고 이동했습니다.",
                        });
                      }}
                    >
                      Push
                    </ActionButton>
                  </HStack>
                </BottomSheetFooter>
              </BottomSheetContent>
            </Portal>
          </BottomSheetRoot>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ActivityBottomSheetStep;
  ```
</StackflowExample>

### Usage

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import {
  useActivity,
  useActivityParams,
  useFlow,
  useStepFlow,
  type ActivityComponentType,
} from "@stackflow/react/future";
import { useEffect, useState } from "react";
// ... more imports

declare module "@stackflow/config" {
  interface Register {
    ActivityHome: {
      "bottom-sheet"?: "open";
    };
  }
}

const ActivityHome: ActivityComponentType<"ActivityHome"> = () => {
  const [open, setOpen] = useState(false);

  const { push } = useFlow();
  const { pushStep, popStep } = useStepFlow("ActivityHome");
  const params = useActivityParams<"ActivityHome">();
  // [!code highlight]
  const isOverlayOpen = params["bottom-sheet"] === "open";

  // [!code highlight]
  useEffect(() => {
    if (!isOverlayOpen) {
      setOpen(false);
    }
  }, [isOverlayOpen]);

  // [!code highlight]
  const onOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);

    if (newOpen && !isOverlayOpen) {
      pushStep((params) => ({ ...params, "bottom-sheet": "open" }));

      return;
    }

    if (!newOpen && isOverlayOpen) {
      popStep();

      return;
    }
  };

  return (
    <AppScreen>
      <BottomSheetRoot open={open} onOpenChange={onOpenChange}>
        <BottomSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </BottomSheetTrigger>
        {/* [!code highlight] */}
        <Portal>
          <BottomSheetContent
            title="Step으로 관리되는 Bottom Sheet"
            // [!code highlight]
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <BottomSheetFooter>
              <HStack gap="x2">
                <ActionButton onClick={() => setOpen(false)}>취소</ActionButton>
                <ActionButton
                  onClick={() => {
                    // [!code highlight]
                    setOpen(false); // 다른 Activity로 이동하기 전에는 Bottom Sheet를 닫으세요.
                    push("ActivityNext");
                  }}
                >
                  다음
                </ActionButton>
              </HStack>
            </BottomSheetFooter>
          </BottomSheetContent>
          {/* [!code highlight] */}
        </Portal>
      </BottomSheetRoot>
    </AppScreen>
  );
};
```

1. `Portal`을 사용하여 Bottom Sheet가 DOM 상 현재 Activity 밖에 렌더링되도록 합니다.
2. `open` prop를 관리하고, `onOpenChange` 핸들러를 통해 Step 상태와 동기화합니다.
3. 뒤로 가기 버튼 등을 통해 Activity 파라미터가 변경될 때 Bottom Sheet의 `open` 상태를 동기화합니다.
4. `layerIndex={useActivityZIndexBase({ activityOffset: 1 })}`로 현재 Activity보다 한 단계 높은 z-index 기준점을 전달합니다.
   * [`useActivityZIndexBase`에 대해 자세히 알아보기](#about-useactivityzindexbase)

### `useStepOverlay`

\#2와 #3을 일반화하여 `useStepOverlay`를 사용하면 편리합니다. `useStepOverlay` 구현 예시는 [코드](https://github.com/daangn/seed-design/blob/dev/examples/stackflow-spa/src/seed-design/stackflow/use-step-overlay.ts)를 참고하세요.

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import { useStepOverlay } from "./use-step-overlay";
// ... more imports

const MyActivity: ActivityComponentType = () => {
  // [!code highlight]
  const { overlayProps, setOpen } = useStepOverlay();
  const { popStep } = useStepFlow("MyActivity");
  const { push } = useFlow();

  return (
    <AppScreen>
      {/* [!code highlight] */}
      <BottomSheetRoot {...overlayProps}>
        <BottomSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </BottomSheetTrigger>
        {/* [!code highlight] */}
        <Portal>
          <BottomSheetContent
            title="Step으로 관리되는 Bottom Sheet"
            // [!code highlight]
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <BottomSheetFooter>
              <HStack gap="x2">
                <ActionButton onClick={() => setOpen(false)}>취소</ActionButton>
                <ActionButton
                  onClick={() => {
                    // [!code highlight]
                    setOpen(false); // 다른 Activity로 이동하기 전에는 Bottom Sheet를 닫으세요.
                    push("ActivityNext");
                  }}
                >
                  다음
                </ActionButton>
              </HStack>
            </BottomSheetFooter>
          </BottomSheetContent>
          {/* [!code highlight] */}
        </Portal>
      </BottomSheetRoot>
    </AppScreen>
  );
};
```

## About `useActivityZIndexBase`

`useActivityZIndexBase`는 각 Activity의 z-index 기준점을 반환하는 훅입니다.

<Accordions>
  <Accordion title="useActivityZIndexBase는 어떤 값을 반환하나요?">
    * `useActivity().zIndex * 5`를 반환합니다. `useActivity().zIndex`는 현재 Activity가 enter된 Activity 중 몇 번째 Activity인지를 나타내는 값입니다.
    * AppScreen을 구성하는 요소들(layer, appbar, dim, edge)은 `useActivityZIndexBase()` 값을 바탕으로 계산된 z-index를 갖습니다.
      ```
      ┌─ 2번 BottomSheet Activity
      │  └─ BottomSheet: 12 (2 × 5 + 2)
      ├─ 1번 AppScreen Activity
      │  ├─ appbar: 12 (1 × 5 + 7)
      │  ├─ edge: 9 (1 × 5 + 4)
      │  ├─ layer: 7 (1 × 5 + 2)
      │  └─ dim: 5 (1 × 5 + 0)
      └─ 0번 AppScreen Activity
         ├─ appbar: 7 (0 × 5 + 7)
         ├─ edge: 4 (0 × 5 + 4)
         ├─ layer: 2 (0 × 5 + 2)
         └─ dim: 0 (0 × 5 + 0)
      ```
  </Accordion>

  <Accordion title="activityOffset 옵션은 무엇인가요?">
    * `activityOffset` 옵션은 현재 Activity가 아닌 다음 Activity의 z-index 기준점을 사용하고 싶을 때 사용합니다.
    * 예를 들어, `useActivityZIndexBase({ activityOffset: 1 })`는 다음 Activity의 z-index 기준점을 반환합니다.
    * 이는 Step 패턴에서 현재 Activity 위에 BottomSheet를 표시할 때 유용합니다.
      ```
      ┌─ 1번 AppScreen Activity에서 activityOffset: 1로 띄운 BottomSheet (예: Step 패턴)
      │  └─ BottomSheet: 12 ((1 + 1) × 5 + 2)
      ├─ 1번 AppScreen Activity
      │  ├─ appbar: 12 (1 × 5 + 7)
      │  ├─ edge: 9 (1 × 5 + 4)
      │  ├─ layer: 7 (1 × 5 + 2)
      │  └─ dim: 5 (1 × 5 + 0)
      └─ 0번 AppScreen Activity
         ├─ appbar: 7 (0 × 5 + 7)
         ├─ edge: 4 (0 × 5 + 4)
         ├─ layer: 2 (0 × 5 + 2)
         └─ dim: 0 (0 × 5 + 0)
      ```
  </Accordion>

  <Accordion title="@stackflow/react-ui-core useZIndexBase와 @seed-design/stackflow useActivityZIndexBase는 어떻게 다른가요?">
    * 두 훅 모두 현재 Activity가 enter된 Activity 중 **몇 번째 Activity인지를 바탕으로 z-index 스타일링에 필요한 값을 반환하는 훅입니다.**
    * 두 훅이 반환하는 값은 같으나, [@stackflow/plugin-basic-ui](https://www.npmjs.com/package/@stackflow/plugin-basic-ui)가 아닌, SEED 컴포넌트를 사용하는 경우 SEED가 관리하는 `@seed-design/stackflow` 패키지의 `useActivityZIndexBase` 훅을 사용하는 것을 권장합니다.
    * `@stackflow/react-ui-core` 패키지의 `useActivityZIndexBase`는 `activityOffset` 옵션을 제공하지 않습니다.
    * `@seed-design/stackflow@1.1.1`부터 `useActivityZIndexBase` 훅이 제공됩니다.
  </Accordion>

  <Accordion title="기존에 layerIndex에 수동으로 z-index 값을 지정해주던 코드는 어떻게 변경해야 하나요?">
    `layerIndex`를 `useActivity().zIndex * 5 + n` 형태로 지정하고 있었다면 `useActivityZIndexBase() + n`으로 변경할 수 있습니다. 변경 과정에서 `+ n`이 필요한지 함께 검토해보세요.
  </Accordion>
</Accordions>


---

file: stackflow/getting-started.mdx

# Getting Started

SEED AppScreen을 사용하기 위한 Stackflow 플러그인 설정 방법을 안내합니다.



## Overview

SEED React의 [`AppScreen`](/react/stackflow/app-screen) 컴포넌트를 사용하려면 [Stackflow](https://stackflow.so/) 플러그인에 `seedPlugin`을 추가합니다.

<Card title="App Screen" href="/react/stackflow/app-screen">
  AppScreen 컴포넌트에 대해 자세히 알아봅니다.
</Card>

`seedPlugin`은 다음 기능을 제공합니다.

* **테마 컨텍스트 제공**: 모든 `AppScreen` 컴포넌트에 `theme`을 자동으로 전달합니다.
* **전역(Global) 인터랙션 관리**: Swipe Back (쓸어서 뒤로 가기) 제스처 및 전역 트랜지션 상태를 관리합니다.

## Installation

`seedPlugin`은 `@seed-design/stackflow` 패키지에 포함되어 있습니다.

<CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @seed-design/stackflow
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @seed-design/stackflow
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @seed-design/stackflow
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @seed-design/stackflow
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage

Stackflow 설정 시 `plugins` 배열에 `seedPlugin`을 추가합니다.

```tsx
import { stackflow } from "@stackflow/react/future";
import { seedPlugin } from "@seed-design/stackflow";

export const { Stack, actions } = stackflow({
  plugins: [
    seedPlugin({ theme: "cupertino" }),
    // ...
  ],
  // ...
});
```

### Options

<TypeTable
  type={{
    theme: {
        "type": "\"android\" | \"cupertino\"",
        "default": undefined,
        "required": true
    }
}}
/>

## What It Provides

### Theme Context

`seedPlugin`은 `theme` 옵션을 통해 설정된 테마를 모든 `AppScreen` 컴포넌트에 전달합니다. 모든 `AppScreen`은 기본적으로 이 테마를 사용합니다.

`theme`은 [@stackflow/plugin-basic-ui](https://stackflow.so/api-references/plugins/plugin-basic-ui)와 동일하게 `"android" | "cupertino"` 중 선택할 수 있습니다.

```tsx
// seedPlugin에 옵션으로 제공한 theme이 `AppScreen`에 기본적으로 적용됩니다.
// `AppScreen`의 `theme` prop을 통해 오버라이드할 수 있습니다.
<AppScreen>
  <AppBar>
    {/* ... */}
  </AppBar>
  <AppScreenContent>
    {/* ... */}
  </AppScreenContent>
</AppScreen>
```

### Swipe Back Gesture

`theme="cupertino"`를 사용하는 경우, iOS 스타일의 Swipe Back (쓸어서 뒤로 가기) 제스처가 활성화됩니다.

* 화면 왼쪽 가장자리에서 오른쪽으로 스와이프하면 이전 Activity로 이동합니다.
* 스와이프 정도에 따라 `AppScreen`이 위치를 업데이트합니다.


---

file: stackflow/menu-sheet.mdx

# Menu Sheet

Menu Sheet를 Stackflow와 함께 사용하는 방법을 안내합니다.



<Card title="Menu Sheet" href="/react/components/menu-sheet">
  Menu Sheet 컴포넌트에 대해 자세히 알아봅니다.
</Card>

## Making a Menu Sheet Activity

**일반적인 경우 Menu Sheet를 [Activity](https://stackflow.so/docs/get-started/activity)로 만들어 사용하는 것을 권장합니다.**

* Activity로 관리되므로, 하위 Activity보다 높고 상위 Activity보다는 낮은 z-index를 갖도록 관리하기 쉽습니다.
* 딥링킹이 가능합니다. (URL 접속으로 Menu Sheet를 열 수 있습니다.)
* [@stackflow/plugin-basic-ui](https://www.npmjs.com/package/@stackflow/plugin-basic-ui) `BottomSheet`에서의 마이그레이션이 쉽습니다.

<StackflowExample path="/menu-sheet-activity">
  ```tsx title='ActivityMenuSheetActivity.tsx'
  import { VStack } from "@seed-design/react";
  import { useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
  import { IconHouseLine } from "@karrotmarket/react-monochrome-icon";
  import {
    AppBar,
    AppBarBackButton,
    AppBarIconButton,
    AppBarLeft,
    AppBarMain,
    AppBarRight,
  } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import { ActionButton } from "seed-design/ui/action-button";

  declare module "@stackflow/config" {
    interface Register {
      ActivityMenuSheetActivity: {};
    }
  }

  const ActivityMenuSheetActivity: StaticActivityComponentType<"ActivityMenuSheetActivity"> = () => {
    const { push } = useFlow();

    return (
      <AppScreen>
        <AppBar>
          <AppBarLeft>
            <AppBarBackButton />
          </AppBarLeft>
          <AppBarMain title="Activity" />
          <AppBarRight>
            <AppBarIconButton aria-label="Home" onClick={() => push("ActivityHome", {})}>
              <IconHouseLine />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <VStack p="x5" justify="center" gap="x4">
            <ActionButton
              variant="neutralSolid"
              flexGrow
              onClick={() => push("ActivityMenuSheetSimple", {})}
            >
              ActivityMenuSheetSimple을 Push
            </ActionButton>
            <ActionButton
              variant="neutralWeak"
              flexGrow
              onClick={() => push("ActivityMenuSheetActivity", {})}
            >
              지금 열린 이 Activity를 Push
            </ActionButton>
          </VStack>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ActivityMenuSheetActivity;
  ```

  ```tsx title='ActivityMenuSheetSimple.tsx'
  import { Flex, VStack } from "@seed-design/react";
  import { useActivityZIndexBase } from "@seed-design/stackflow";
  import { useActivity, useFlow, type StaticActivityComponentType } from "@stackflow/react/future";
  import { useState } from "react";
  import {
    IconPencilLine,
    IconPlusLine,
    IconTrashcanLine,
  } from "@karrotmarket/react-monochrome-icon";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
  } from "seed-design/ui/menu-sheet";
  import { Snackbar, useSnackbarAdapter } from "seed-design/ui/snackbar";
  import { Switch } from "seed-design/ui/switch";

  declare module "@stackflow/config" {
    interface Register {
      ActivityMenuSheetSimple: {};
    }
  }

  const ActivityMenuSheetSimple: StaticActivityComponentType<"ActivityMenuSheetSimple"> = () => {
    const { pop, push } = useFlow();
    const activity = useActivity();
    const snackbar = useSnackbarAdapter();

    const [keepMounted, setKeepMounted] = useState(false);

    const handleAction = (action: string) => {
      snackbar.create({
        render: () => <Snackbar variant="positive" message={`선택한 액션: ${action}`} />,
      });
      pop();
    };

    const open = keepMounted
      ? activity.transitionState === "enter-active" || activity.transitionState === "enter-done"
      : activity.isActive;

    const onOpenChange = keepMounted
      ? (open: boolean) => !open && activity.isActive && pop()
      : (open: boolean) => !open && pop();

    return (
      <MenuSheetRoot open={open} onOpenChange={onOpenChange}>
        <MenuSheetContent title="Actions" layerIndex={useActivityZIndexBase()}>
          <MenuSheetGroup>
            <MenuSheetItem
              onClick={() => handleAction("add")}
              label="추가"
              prefixIcon={<IconPlusLine />}
            />
            <MenuSheetItem
              onClick={() => handleAction("edit")}
              label="수정"
              prefixIcon={<IconPencilLine />}
            />
            <MenuSheetItem
              onClick={() => handleAction("delete")}
              tone="critical"
              label="삭제"
              prefixIcon={<IconTrashcanLine />}
            />
          </MenuSheetGroup>
          <VStack gap="x2">
            <MenuSheetGroup>
              <MenuSheetItem
                onClick={() =>
                  push("ActivityDetail", {
                    title: "Activity",
                    body: keepMounted
                      ? "MenuSheet가 언마운트되지 않았으므로, 현재 Activity를 pop하는 경우 MenuSheet가 열린 상태로 표시됩니다."
                      : "MenuSheet가 언마운트되었으므로, 현재 Activity를 pop하는 경우 MenuSheet가 다시 enter 트랜지션을 재생하며 마운트됩니다.",
                  })
                }
                label="Push"
              />
            </MenuSheetGroup>
            <Flex px="x2" py="x1_5">
              <Switch
                tone="neutral"
                size="16"
                label="Push 이후에도 MenuSheet 마운트 유지"
                checked={keepMounted}
                onCheckedChange={setKeepMounted}
              />
            </Flex>
          </VStack>
        </MenuSheetContent>
      </MenuSheetRoot>
    );
  };

  export default ActivityMenuSheetSimple;
  ```
</StackflowExample>

### Usage

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { useActivity, useFlow, type ActivityComponentType } from "@stackflow/react/future";
// ... more imports

const ActivityMenuSheet: ActivityComponentType<"ActivityMenuSheet"> = () => {
  const { pop } = useFlow();

  const handleAction = (action: string) => {
    console.log("선택한 액션:", action);

    pop();
  };

  return (
    {/* [!code highlight] */}
    <MenuSheetRoot open={useActivity().isActive} onOpenChange={(open) => !open && pop()}>
      <MenuSheetContent
        title="Actions"
        // [!code highlight]
        layerIndex={useActivityZIndexBase()}
      >
        <MenuSheetGroup>
          <MenuSheetItem
            onClick={() => handleAction("add")}
            label="추가"
            prefixIcon={<IconPlusLine />}
          />
          <MenuSheetItem
            onClick={() => handleAction("edit")}
            label="수정"
            prefixIcon={<IconPencilLine />}
          />
          <MenuSheetItem
            onClick={() => handleAction("delete")}
            tone="critical"
            label="삭제"
            prefixIcon={<IconTrashcanLine />}
          />
        </MenuSheetGroup>
      </MenuSheetContent>
    </MenuSheetRoot>
  );
};
```

1. `open` prop에 `useActivity().isActive`를 전달하여 Activity가 활성화될 때 Menu Sheet가 열리도록 합니다.
2. `onOpenChange`를 통해 Menu Sheet가 닫힐 때 `pop()`을 실행하여 Activity를 종료합니다.
3. `layerIndex={useActivityZIndexBase()}`로 Menu Sheet Activity의 z-index 기준점을 전달합니다.

* [`useActivityZIndexBase`에 대해 자세히 알아보기](#about-useactivityzindexbase)

#### Keeping Menu Sheet Mounted

Menu Sheet Activity 위에 다른 Activity를 push할 때 Menu Sheet가 unmount되는 것을 방지하려면,

* `open` 상태를 `isActive` 대신 `transitionState`로 관리하고
* `onOpenChange` 핸들러에서 `!isOpen && isActive`인 경우 `pop()`을 실행하도록 합니다.

이 패턴은 Menu Sheet 액티비티 위에 다른 오버레이 컴포넌트 액티비티를 중첩하여 표시하고 싶은 경우 유용합니다.

```tsx
const { isActive, transitionState } = useActivity();

return (
  <MenuSheetRoot
    open={
      // [!code highlight]
      transitionState === "enter-active" || transitionState === "enter-done"
    }
    // [!code highlight]
    onOpenChange={(open) => !open && isActive && pop()}
  >
    {/* ... */}
  </MenuSheetRoot>
);
```

## Syncing Menu Sheet State with a Step

Menu Sheet를 Activity로 만들 수 없는 경우, Menu Sheet가 표시된 상태를 [Step](https://stackflow.so/docs/get-started/navigating-step)으로 만들 수 있습니다.

* 현재 Activity를 유지하면서도, 뒤로 가기 버튼 등으로 Menu Sheet를 닫을 수 있습니다.
* `MenuSheetTrigger`를 사용하여 Menu Sheet를 열고 닫을 수 있습니다.

<Callout type="warn" title="제약 사항">
  **Activity로 만들지 않은 Menu Sheet에서 다른 Activity를 push하는 경우, push하기 전 Menu Sheet를 닫으세요.**

  Menu Sheet를 닫을 수 없거나, Menu Sheet를 연 Activity로 돌아왔을 때 Menu Sheet가 열린 상태를 유지해야 하는 경우 [Menu Sheet를 Activity로](#making-a-menu-sheet-activity) 만들어 사용하는 것을 권장합니다.

  Activity 간 유려한 트랜지션을 제공하기 위해 하위 AppScreen 요소 중 일부가 상위 AppScreen 요소보다 위에 위치합니다. 이 제약으로 인해, 열린 상태의 Menu Sheet는 독립적인 Activity로 만들지 않는 경우 하위 Activity와 상위 Activity 사이에 위치시키는 것이 불가능합니다.
</Callout>

<StackflowExample path="/menu-sheet-step">
  ```tsx title='ActivityMenuSheetStep.tsx'
  import { Portal, VStack } from "@seed-design/react";
  import { useActivityZIndexBase } from "@seed-design/stackflow";
  import {
    useActivityParams,
    useFlow,
    useStepFlow,
    type StaticActivityComponentType,
  } from "@stackflow/react/future";
  import { useEffect, useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { AppBar, AppBarIconButton, AppBarMain, AppBarRight } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import {
    MenuSheetContent,
    MenuSheetGroup,
    MenuSheetItem,
    MenuSheetRoot,
    MenuSheetTrigger,
  } from "seed-design/ui/menu-sheet";
  import {
    IconHouseLine,
    IconPencilLine,
    IconPlusLine,
    IconTrashcanLine,
  } from "@karrotmarket/react-monochrome-icon";
  import { Snackbar, useSnackbarAdapter } from "seed-design/ui/snackbar";

  declare module "@stackflow/config" {
    interface Register {
      ActivityMenuSheetStep: {
        "menu-sheet"?: "open";
      };
    }
  }

  const ActivityMenuSheetStep: StaticActivityComponentType<"ActivityMenuSheetStep"> = () => {
    const [open, setOpen] = useState(false);
    const { push } = useFlow();
    const { pushStep, popStep } = useStepFlow("ActivityMenuSheetStep");
    const params = useActivityParams<"ActivityMenuSheetStep">();
    const isOverlayOpen = params["menu-sheet"] === "open";
    const snackbar = useSnackbarAdapter();

    useEffect(() => setOpen(isOverlayOpen), [isOverlayOpen]);

    const onOpenChange = (newOpen: boolean) => {
      setOpen(newOpen);

      if (newOpen && !isOverlayOpen) {
        pushStep((params) => ({ ...params, "menu-sheet": "open" }));
        return;
      }

      if (!newOpen && isOverlayOpen) {
        popStep();
        return;
      }
    };

    const handleAction = (action: string) => {
      snackbar.create({
        render: () => <Snackbar variant="positive" message={`선택한 액션: ${action}`} />,
      });
      setOpen(false);
    };

    return (
      <AppScreen>
        <AppBar>
          <AppBarMain title="Step" />
          <AppBarRight>
            <AppBarIconButton aria-label="Home" onClick={() => push("ActivityHome", {})}>
              <IconHouseLine />
            </AppBarIconButton>
          </AppBarRight>
        </AppBar>
        <AppScreenContent>
          <MenuSheetRoot open={open} onOpenChange={onOpenChange}>
            <MenuSheetTrigger asChild>
              <VStack p="x5" justify="center" gap="x4">
                <ActionButton variant="neutralSolid" flexGrow>
                  Menu Sheet 열기
                </ActionButton>
              </VStack>
            </MenuSheetTrigger>
            <Portal>
              <MenuSheetContent
                title="Step"
                layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
              >
                <MenuSheetGroup>
                  <MenuSheetItem
                    onClick={() => handleAction("add")}
                    label="추가"
                    prefixIcon={<IconPlusLine />}
                  />
                  <MenuSheetItem
                    onClick={() => handleAction("edit")}
                    label="수정"
                    prefixIcon={<IconPencilLine />}
                  />
                  <MenuSheetItem
                    onClick={() => handleAction("delete")}
                    tone="critical"
                    label="삭제"
                    prefixIcon={<IconTrashcanLine />}
                  />
                </MenuSheetGroup>
                <MenuSheetGroup labelAlign="center">
                  <MenuSheetItem
                    onClick={() => {
                      // 이 Menu Sheet는 Activity로 만들어지지 않았기 때문에, z-index 정리를 위해
                      // Menu Sheet를 먼저 닫고 다음 Activity를 push해야 합니다.
                      setOpen(false);
                      push("ActivityDetail", {
                        title: "Menu Sheet에서 이동한 화면",
                        body: "Menu Sheet를 닫고 이동했습니다.",
                      });
                    }}
                    label="Push"
                  />
                </MenuSheetGroup>
              </MenuSheetContent>
            </Portal>
          </MenuSheetRoot>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default ActivityMenuSheetStep;
  ```
</StackflowExample>

### Usage

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import {
  useActivity,
  useActivityParams,
  useFlow,
  useStepFlow,
  type ActivityComponentType,
} from "@stackflow/react/future";
import { useEffect, useState } from "react";
// ... more imports

declare module "@stackflow/config" {
  interface Register {
    ActivityHome: {
      "menu-sheet"?: "open";
    };
  }
}

const ActivityHome: ActivityComponentType<"ActivityHome"> = () => {
  const [open, setOpen] = useState(false);

  const { push } = useFlow();
  const { pushStep, popStep } = useStepFlow("ActivityHome");
  const params = useActivityParams<"ActivityHome">();
  // [!code highlight]
  const isOverlayOpen = params["menu-sheet"] === "open";

  // [!code highlight]
  useEffect(() => {
    if (!isOverlayOpen) {
      setOpen(false);
    }
  }, [isOverlayOpen]);

  // [!code highlight]
  const onOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);

    if (newOpen && !isOverlayOpen) {
      pushStep((params) => ({ ...params, "menu-sheet": "open" }));

      return;
    }

    if (!newOpen && isOverlayOpen) {
      popStep();

      return;
    }
  };

  const handleAction = (action: string) => {
    console.log("선택한 액션:", action);
    setOpen(false);
  };

  return (
    <AppScreen>
      <MenuSheetRoot open={open} onOpenChange={onOpenChange}>
        <MenuSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </MenuSheetTrigger>
        {/* [!code highlight] */}
        <Portal>
          <MenuSheetContent
            title="Actions"
            // [!code highlight]
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <MenuSheetGroup>
              <MenuSheetItem onClick={() => handleAction("add")} label="추가" />
              <MenuSheetItem onClick={() => handleAction("edit")} label="수정" />
              <MenuSheetItem
                onClick={() => {
                  // [!code highlight]
                  setOpen(false); // 다른 Activity로 이동하기 전에는 Menu Sheet를 닫으세요.
                  push("ActivityNext");
                }}
                label="Push"
              />
              <MenuSheetItem
                onClick={() => handleAction("delete")}
                tone="critical"
                label="삭제"
              />
            </MenuSheetGroup>
          </MenuSheetContent>
          {/* [!code highlight] */}
        </Portal>
      </MenuSheetRoot>
    </AppScreen>
  );
};
```

1. `Portal`을 사용하여 Menu Sheet가 DOM 상 현재 Activity 밖에 렌더링되도록 합니다.
2. `open` prop를 관리하고, `onOpenChange` 핸들러를 통해 Step 상태와 동기화합니다.
3. 뒤로 가기 버튼 등을 통해 Activity 파라미터가 변경될 때 Menu Sheet의 `open` 상태를 동기화합니다.
4. `layerIndex={useActivityZIndexBase({ activityOffset: 1 })}`로 현재 Activity보다 한 단계 높은 z-index 기준점을 전달합니다.
   * [`useActivityZIndexBase`에 대해 자세히 알아보기](#about-useactivityzindexbase)

### `useStepOverlay`

\#2와 #3을 일반화하여 `useStepOverlay`를 사용하면 편리합니다. `useStepOverlay` 구현 예시는 [코드](https://github.com/daangn/seed-design/blob/dev/examples/stackflow-spa/src/seed-design/stackflow/use-step-overlay.ts)를 참고하세요.

```tsx
import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import { useStepOverlay } from "./use-step-overlay";
// ... more imports

const MyActivity: ActivityComponentType = () => {
  // [!code highlight]
  const { overlayProps, setOpen } = useStepOverlay();
  const { popStep } = useStepFlow("MyActivity");
  const { push } = useFlow();

  const handleAction = (action: string) => {
    console.log("선택한 액션:", action);
    popStep();
  };

  return (
    <AppScreen>
      {/* [!code highlight] */}
      <MenuSheetRoot {...overlayProps}>
        <MenuSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </MenuSheetTrigger>
        {/* [!code highlight] */}
        <Portal>
          <MenuSheetContent
            title="Actions"
            // [!code highlight]
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <MenuSheetGroup>
              <MenuSheetItem onClick={() => handleAction("add")} label="추가" />
              <MenuSheetItem onClick={() => handleAction("edit")} label="수정" />
              <MenuSheetItem
                onClick={() => {
                  // [!code highlight]
                  setOpen(false); // 다른 Activity로 이동하기 전에는 Menu Sheet를 닫으세요.
                  push("ActivityNext");
                }}
                label="Push"
              />
              <MenuSheetItem
                onClick={() => handleAction("delete")}
                tone="critical"
                label="삭제"
              />
            </MenuSheetGroup>
          </MenuSheetContent>
          {/* [!code highlight] */}
        </Portal>
      </MenuSheetRoot>
    </AppScreen>
  );
};
```

## About `useActivityZIndexBase`

`useActivityZIndexBase`는 각 Activity의 z-index 기준점을 반환하는 훅입니다.

<Accordions>
  <Accordion title="useActivityZIndexBase는 어떤 값을 반환하나요?">
    * `useActivity().zIndex * 5`를 반환합니다. `useActivity().zIndex`는 현재 Activity가 enter된 Activity 중 몇 번째 Activity인지를 나타내는 값입니다.
    * AppScreen을 구성하는 요소들(layer, appbar, dim, edge)은 `useActivityZIndexBase()` 값을 바탕으로 계산된 z-index를 갖습니다.
      ```
      ┌─ 2번 BottomSheet Activity
      │  └─ BottomSheet: 12 (2 × 5 + 2)
      ├─ 1번 AppScreen Activity
      │  ├─ appbar: 12 (1 × 5 + 7)
      │  ├─ edge: 9 (1 × 5 + 4)
      │  ├─ layer: 7 (1 × 5 + 2)
      │  └─ dim: 5 (1 × 5 + 0)
      └─ 0번 AppScreen Activity
         ├─ appbar: 7 (0 × 5 + 7)
         ├─ edge: 4 (0 × 5 + 4)
         ├─ layer: 2 (0 × 5 + 2)
         └─ dim: 0 (0 × 5 + 0)
      ```
  </Accordion>

  <Accordion title="activityOffset 옵션은 무엇인가요?">
    * `activityOffset` 옵션은 현재 Activity가 아닌 다음 Activity의 z-index 기준점을 사용하고 싶을 때 사용합니다.
    * 예를 들어, `useActivityZIndexBase({ activityOffset: 1 })`는 다음 Activity의 z-index 기준점을 반환합니다.
    * 이는 Step 패턴에서 현재 Activity 위에 BottomSheet를 표시할 때 유용합니다.
      ```
      ┌─ 1번 AppScreen Activity에서 activityOffset: 1로 띄운 BottomSheet (예: Step 패턴)
      │  └─ BottomSheet: 12 ((1 + 1) × 5 + 2)
      ├─ 1번 AppScreen Activity
      │  ├─ appbar: 12 (1 × 5 + 7)
      │  ├─ edge: 9 (1 × 5 + 4)
      │  ├─ layer: 7 (1 × 5 + 2)
      │  └─ dim: 5 (1 × 5 + 0)
      └─ 0번 AppScreen Activity
         ├─ appbar: 7 (0 × 5 + 7)
         ├─ edge: 4 (0 × 5 + 4)
         ├─ layer: 2 (0 × 5 + 2)
         └─ dim: 0 (0 × 5 + 0)
      ```
  </Accordion>

  <Accordion title="@stackflow/react-ui-core useZIndexBase와 @seed-design/stackflow useActivityZIndexBase는 어떻게 다른가요?">
    * 두 훅 모두 현재 Activity가 enter된 Activity 중 **몇 번째 Activity인지를 바탕으로 z-index 스타일링에 필요한 값을 반환하는 훅입니다.**
    * 두 훅이 반환하는 값은 같으나, [@stackflow/plugin-basic-ui](https://www.npmjs.com/package/@stackflow/plugin-basic-ui)가 아닌, SEED 컴포넌트를 사용하는 경우 SEED가 관리하는 `@seed-design/stackflow` 패키지의 `useActivityZIndexBase` 훅을 사용하는 것을 권장합니다.
    * `@stackflow/react-ui-core` 패키지의 `useActivityZIndexBase`는 `activityOffset` 옵션을 제공하지 않습니다.
    * `@seed-design/stackflow@1.1.1`부터 `useActivityZIndexBase` 훅이 제공됩니다.
  </Accordion>

  <Accordion title="기존에 layerIndex에 수동으로 z-index 값을 지정해주던 코드는 어떻게 변경해야 하나요?">
    `layerIndex`를 `useActivity().zIndex * 5 + n` 형태로 지정하고 있었다면 `useActivityZIndexBase() + n`으로 변경할 수 있습니다. 변경 과정에서 `+ n`이 필요한지 함께 검토해보세요.
  </Accordion>
</Accordions>


---

file: updates/changelog.mdx

# Changelog

최신 업데이트와 변경사항을 기록합니다.



## 2026.02.03 #4

Snackbar 타이머가 멈추는 기준을 `focus`에서 `focus-visible`로 수정하여 `pauseOnInteraction={true}`인 경우 Snackbar가 닫히지 않는 문제를 수정합니다. [`acae645`](https://github.com/daangn/seed-design/commit/acae645ac92ae63e5ccd1256ca1903624dde0f8c)

영향받는 패키지

* 📦 [@seed-design/react-snackbar@1.0.1](https://npmjs.com/package/@seed-design/react-snackbar/v/1.0.1)

***

## 2026.02.03 #3

Figma 엔티티를 업데이트합니다. 모든 구성 요소에 대해 generated 데이터를 사용하여 안정성을 개선합니다. [`934bea0`](https://github.com/daangn/seed-design/commit/934bea0127a6bf43494356c5738e8f9a810fb83f)

영향받는 패키지

* 📦 [@seed-design/figma@1.3.2](https://npmjs.com/package/@seed-design/figma/v/1.3.2)

***

## 2026.02.03 #2

MCP를 Node.js 프로젝트에서 직접 구성할 수 있도록 `registerTools`를 비롯한 export를 추가합니다. [`2f9690a`](https://github.com/daangn/seed-design/commit/2f9690a0f2e2c8cfe316df81bbb7c92a27660d58)

영향받는 패키지

* 📦 [@seed-design/mcp@1.3.1](https://npmjs.com/package/@seed-design/mcp/v/1.3.1)

***

## 2026.02.03

`AlertDialogRoot`, `MenuSheetRoot` 및 `BottomSheetRoot`의 `onOpenChange` 두 번째 인자로 `details`를 제공합니다. `details.reason`과 `details.event`를 사용할 수 있습니다. [`576c2e6`](https://github.com/daangn/seed-design/commit/576c2e602de44bacdad8991cf6be2d369ace73f5)

`DialogAction`을 `DialogPrimitive.CloseButton`으로 교체합니다. `AlertDialogAction` `onClick` 핸들러에서 `event.preventDefault()`를 호출하여 닫기 동작을 방지할 수 있습니다. [(예제)](https://seed-design.io/react/components/alert-dialog#prevent-close)

영향받는 패키지

* 📦 [@seed-design/react@1.2.2](https://npmjs.com/package/@seed-design/react/v/1.2.2)
* 📦 [@seed-design/react-dialog@1.0.2](https://npmjs.com/package/@seed-design/react-dialog/v/1.0.2)
* 📦 [@seed-design/react-drawer@1.0.8](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.8)
* 📦 [@seed-design/react-use-controllable-state@1.0.0](https://npmjs.com/package/@seed-design/react-use-controllable-state/v/1.0.0)

***

Figma Personal Access Token을 활용하여 WebSocket 서버와 Figma 플러그인 없이 MCP 일부 기능을 활용할 수 있도록 합니다. `--mode` 옵션을 통해 필요한 도구만 등록할 수 있습니다. [`423d604`](https://github.com/daangn/seed-design/commit/423d604b9ecc178f935d7c105e49d3711eab6f82)

영향받는 패키지

* 📦 [@seed-design/mcp@1.3.0](https://npmjs.com/package/@seed-design/mcp/v/1.3.0)

***

## 2026.01.29

AlertDialog 닫힐 때 focus 복원으로 인해 BottomSheet가 즉시 닫히는 문제 수정 [`8188130`](https://github.com/daangn/seed-design/commit/8188130e3c62651acea63ae699f11fe16d2e9a06)

* onFocusOutside에서 항상 preventDefault 호출
* onInteractOutside에서 defaultPrevented 체크 추가

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.6](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.6)

***

ImageFrameReactionButton에 fillIcon, lineIcon spec을 추가합니다 [`9446f2c`](https://github.com/daangn/seed-design/commit/9446f2cc68ae9db41cc5da6124a2a0897a2f250b)

영향받는 패키지

* 📦 [@seed-design/css@1.2.1](https://npmjs.com/package/@seed-design/css/v/1.2.1)
* 📦 [@seed-design/rootage-artifacts@1.2.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.2.1)

***

ImageFrameReactionButton의 SVG 사이즈와 Rootage 정의를 수정합니다. [`8ad9484`](https://github.com/daangn/seed-design/commit/8ad948427977be6b18b6e385a6ffc95478fdef16)

영향받는 패키지

* 📦 [@seed-design/css@1.2.1](https://npmjs.com/package/@seed-design/css/v/1.2.1)
* 📦 [@seed-design/react@1.2.1](https://npmjs.com/package/@seed-design/react/v/1.2.1)
* 📦 [@seed-design/rootage-artifacts@1.2.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.2.1)

***

Figma 엔티티를 최신 버전으로 업데이트합니다. [`15d9587`](https://github.com/daangn/seed-design/commit/15d95874c61bfed3b88bcdc578b5147764bec8aa)

영향받는 패키지

* 📦 [@seed-design/figma@1.2.1](https://npmjs.com/package/@seed-design/figma/v/1.2.1)

***

`@seed-design/figma-extractor` config 파이프라인에서 `fetchNodes`를 context의 일부로 제공합니다. [`15d9587`](https://github.com/daangn/seed-design/commit/15d95874c61bfed3b88bcdc578b5147764bec8aa)

영향받는 패키지

* 📦 [@seed-design/figma-extractor@1.1.0](https://npmjs.com/package/@seed-design/figma-extractor/v/1.1.0)

***

BottomSheet `showCloseButton` variant 변경 및 animation 버그 수정 [`9cbeba0`](https://github.com/daangn/seed-design/commit/9cbeba019778a5fc10b1308b3a492a91083a6795)

* `showCloseButton` variant 변경: CloseButton 미사용 시 header padding 조정 가능
* `hasEntered` 상태 추가: modal prop 변경 시 enter animation 재실행 방지

영향받는 패키지

* 📦 [@seed-design/css@1.2.1](https://npmjs.com/package/@seed-design/css/v/1.2.1)
* 📦 [@seed-design/react-drawer@1.0.6](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.6)

***

## 2026.01.26

`--on-diff` flag를 추가하고 `--overwrite` flag를 `--on-diff=overwrite`로 대체합니다. `--on-diff=backup`을 사용하여 변경사항이 있는 모든 snippet에 대해 이전 파일을 유지할 수 있습니다. [`f7a6217`](https://github.com/daangn/seed-design/commit/f7a621701082bc1bf09da849d036c279c56eefa5)

영향받는 패키지

* 📦 [@seed-design/cli@1.2.1](https://npmjs.com/package/@seed-design/cli/v/1.2.1)

***

## 2026.01.25

[Help Bubble](/react/components/help-bubble) 관련 컴포넌트를 업데이트합니다. [`0ecb893`](https://github.com/daangn/seed-design/commit/0ecb893a5de3075ad975cf41cb0cff4cea0901a5)

* **1.1 → 1.2 업그레이드 시 snippet 업데이트 필요**: `HelpBubbleTrigger` 및 `HelpBubbleAnchor`의 내부 구조가 변경되었습니다. snippet을 다시 내려받아 주세요.
  * `npx @seed-design/cli@latest add ui:help-bubble`
  * **인터페이스 변경사항이 없으므로 `HelpBubbleAnchor`와 `HelpBubbleTrigger`를 사용하는 기존 코드를 변경할 필요가 없습니다.**
  * `HelpBubble.Body`를 사용하여 `HelpBubble.Title`과 `HelpBubble.Description`을 감싸도록 변경되었습니다.
  * `zIndexOffset`을 활용하여 `HelpBubble.Positioner`의 z-index를 조정할 수 있습니다. ([예시](/react/components/help-bubble#z-index-offset))

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/react@1.2.0](https://npmjs.com/package/@seed-design/react/v/1.2.0)
* 📦 [@seed-design/rootage-artifacts@1.2.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.2.0)

***

[Checkbox](/react/components/checkbox) 관련 컴포넌트를 추가합니다. [`98dbac4`](https://github.com/daangn/seed-design/commit/98dbac46406999d30734edc9e8f3c2180e406414)

* `CheckboxGroup` snippet 컴포넌트가 추가되었습니다. 사용하려면 snippet을 다시 내려받아 주세요.
  * `npx @seed-design/cli@latest add ui:checkbox`
  * `CheckboxGroup`은 자체적으로 gap과 100% width를 갖습니다. `VStack`을 사용하여 `Checkbox`를 묶지 않아도 됩니다.
    * 기존 `Checkbox`를 `CheckboxGroup`으로 감쌀 필요는 없습니다. `CheckboxGroup`은 선택적으로 사용할 수 있습니다.
  * `label`, `description`, `errorMessage`, `indicator`, `showRequiredIndicator`, `labelWeight` prop을 사용할 수 있습니다.

[Radio Group](/react/components/radio-group) 관련 컴포넌트를 업데이트합니다.

* **1.1 → 1.2 업그레이드 시 snippet 업데이트 필요**: `RadioGroup` snippet의 내부 구조가 변경되었습니다. snippet을 다시 내려받아 주세요.

  * `npx @seed-design/cli@latest add ui:radio-group`
  * `RadioGroup`이 자체적으로 gap과 100% width를 갖습니다. `VStack`을 사용하여 `RadioGroupItem`을 묶는 코드를 제거합니다.
    * **1.1 → 1.2 업그레이드 시 변경 필요**: `RadioGroupItem`을 묶어서 사용하던 `VStack`을 제거하여 `RadioGroupItem`이 `RadioGroup`의 direct child가 되도록 변경하세요.
  * `label`, `description`, `errorMessage`, `indicator`, `showRequiredIndicator`, `labelWeight` prop을 사용할 수 있습니다.
  * `@seed-design/react`의 `RadioGroup.Root`를 레이아웃 컴포넌트로 변경합니다.
    * `@seed-design/react`에서 직접 import해서 사용하는 코드가 있다면 `RadioGroup.Root`를 `@seed-design/react/primitive`의 `RadioGroup.Root`로 변경해주세요.

  ```tsx
  // 전
  import { VStack } from "@seed-design/react";
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  <RadioGroup defaultValue="apple" aria-label="Fruit selection">
    <VStack>
      <RadioGroupItem value="apple" label="Apple" />
      <RadioGroupItem value="banana" label="Banana" />
    </VStack>
  </RadioGroup>;
  ```

  ```tsx
  // 후
  import { RadioGroup, RadioGroupItem } from "seed-design/ui/radio-group";

  {
    /* aria-label 대신 label을 사용하여 시각적으로 레이블을 표시할 수도 있습니다. */
  }
  <RadioGroup defaultValue="apple" aria-label="Fruit selection">
    <RadioGroupItem value="apple" label="Apple" />
    <RadioGroupItem value="banana" label="Banana" />
  </RadioGroup>;
  ```

  ```tsx
  // 전
  import { RadioGroup } from "@seed-design/react";
  import { ListRadioItem } from "seed-design/ui/list";

  <RadioGroup.Root
    value={value}
    onValueChange={onValueChange}
    aria-label="옵션 선택"
  >
    <ListRadioItem
      value="option1"
      title="옵션 1"
      detail="첫 번째 선택지"
      suffix={<Radiomark tone="neutral" size="large" />}
    />
  </RadioGroup.Root>;
  ```

  ```tsx
  // 후
  import { RadioGroup } from "@seed-design/react/primitive";
  import { ListRadioItem } from "seed-design/ui/list";

  <RadioGroup.Root
    value={value}
    onValueChange={onValueChange}
    aria-label="옵션 선택"
  >
    <ListRadioItem
      value="option1"
      title="옵션 1"
      detail="첫 번째 선택지"
      suffix={<Radiomark tone="neutral" size="large" />}
    />
  </RadioGroup.Root>;
  ```

RadioGroupItem, RadioChipItem, RadioSelectBoxItem, ListRadioItem에서 `invalid` prop이 제거되었습니다.

* **1.1 → 1.2 업그레이드 시 확인 필요**: `invalid` 상태는 group/field 레벨에서 설정해주세요. 각 항목을 `data-invalid` 속성으로 스타일링하는 경우 확인이 필요합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/react@1.2.0](https://npmjs.com/package/@seed-design/react/v/1.2.0)
* 📦 [@seed-design/react-radio-group@1.1.0](https://npmjs.com/package/@seed-design/react-radio-group/v/1.1.0)
* 📦 [@seed-design/rootage-artifacts@1.2.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.2.0)

***

`SwitchMark`를 `Switchmark`로, `RadioMark`를 `Radiomark`로 Snippet 컴포넌트 이름을 변경합니다.

* **1.1 → 1.2 업그레이드 시 변경 권장**: snippet을 다시 내려받고, `SwitchMark`, `RadioMark`를 사용하는 코드를 아래와 같이 변경하세요.

  * `npx @seed-design/cli@latest add ui:switch ui:radio-group`
  * snippet에 `SwitchMark`, `RadioMark` 정의가 존재하지만, 1.3 릴리즈 시 snippet에서 해당 맵핑이 제거될 예정이므로 미리 변경해두시길 권장드립니다.

  ```tsx
  // 전
  import { ListSwitchItem, ListRadioItem } from "seed-design/ui/list";
  import { SwitchMark } from "seed-design/ui/switch";
  import { RadioMark } from "seed-design/ui/radio-group";

  <ListSwitchItem
    title="리스트 아이템 스위치"
    detail="설명 텍스트"
    suffix={<SwitchMark tone="neutral" />}
  />;

  <ListRadioItem
    prefix={<RadioMark tone="neutral" size="large" />}
    value="option"
    title="옵션"
  />;
  ```

  ```tsx
  // 후
  import { ListSwitchItem, ListRadioItem } from "seed-design/ui/list";
  import { Switchmark } from "seed-design/ui/switch";
  import { Radiomark } from "seed-design/ui/radio-group";

  <ListSwitchItem
    title="리스트 아이템 스위치"
    detail="설명 텍스트"
    suffix={<Switchmark tone="neutral" />}
  />;

  <ListRadioItem
    prefix={<Radiomark tone="neutral" size="large" />}
    value="option"
    title="옵션"
  />;
  ```

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/figma@1.2.0](https://npmjs.com/package/@seed-design/figma/v/1.2.0)
* 📦 [@seed-design/react@1.2.0](https://npmjs.com/package/@seed-design/react/v/1.2.0)
* 📦 [@seed-design/rootage-artifacts@1.2.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.2.0)

***

[`Grid` 및 `GridItem`](/react/components/layout/grid) 레이아웃 유틸리티 컴포넌트를 추가합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/react@1.2.0](https://npmjs.com/package/@seed-design/react/v/1.2.0)

***

[Select Box](/react/components/select-box) 관련 컴포넌트를 업데이트합니다. [`cfd2df4`](https://github.com/daangn/seed-design/commit/cfd2df43c3bed9cda6413fc7938068d38da777ff)

* **1.1 → 1.2 업그레이드 시 snippet을 다시 내려받아 주세요.**
  * `npx @seed-design/cli@latest add ui:select-box`
* `CheckSelectBoxGroup`, `RadioSelectBoxRoot`의 children이 기본적으로 gap이 포함된 그리드 레이아웃으로 정렬됩니다.
  * **1.1 → 1.2 업그레이드 시 변경 필요**: `CheckSelectBox`, `RadioSelectBoxItem`을 묶어서 사용하던 `VStack`을 제거하여 `CheckSelectBox`와 `RadioSelectBoxItem`이 `CheckSelectBoxGroup` 또는 `RadioSelectBoxRoot`의 direct child가 되도록 변경하세요. `VStack`에 `gap` 이외의 스타일이 적용된 경우 `<VStack paddingX="x4"><CheckSelectBoxGroup>...</CheckSelectBoxGroup></VStack>`와 같이 `VStack`을 외부에 남겨두세요.
  * **기능 추가**: `CheckSelectBoxGroup`와 `RadioSelectBoxRoot`에 `columns`를 지정할 수 있습니다. `columns`가 `2` 이상인 경우 하위 항목에 기본적으로 `layout="vertical"`이 적용됩니다. 기본 `layout`은 하위 항목에서 오버라이드할 수 있습니다.
  * **기능 추가**: `CheckSelectBoxGroup`과 `RadioSelectBoxRoot`에 `label`, `description`, `errorMessage`, `indicator` 등 Fieldset 관련 prop을 사용할 수 있습니다.
* **1.1 → 1.2 업그레이드 시 변경 필요**: `CheckSelectBox`, `RadioSelectBoxItem`에 기본적으로 표시되던 `Checkmark`와 `RadioMark`가 이제 표시되지 않습니다. `suffix` prop을 통해 선택적으로 추가할 수 있습니다.
  * 단순 마이그레이션 시 `suffix={<CheckSelectBoxCheckmark />}`와 `suffix={<RadioSelectBoxRadiomark />}`를 추가하세요.
* **기능 추가**: `prefixIcon`, `footer`, `footerVisibility` prop 추가
  * `footer`에 넣는 요소는 기본적으로 해당 `CheckSelectBox` 또는 `RadioSelectBoxItem`가 선택된 상태일 때 표시됩니다. `footerVisibility="always"`를 설정하여 footer 요소를 항상 표시할 수 있습니다.
* `label`이 기본적으로 가로 나열되며 `$dimension.x2` gap을 갖는 flex container로 변경되었습니다.
  * **1.1 → 1.2 업그레이드 시 확인 권장**: `label={<HStack gap="x2">{/* ... */}</HStack>}`와 같은 코드는 `HStack`을 `Fragment` 등으로 대체할 수 있습니다.
* **문제 수정**: `CheckSelectBox`와 `RadioSelectBoxItem`에서 사용되지 않는 `children`을 타입 정의에서 제거합니다.
* `CheckSelectBoxGroup`에 `label`, `aria-label`, `aria-labelledby` 중 아무것도 설정하지 않은 경우 경고를 표시합니다. (`RadioSelectBoxRoot`는 기존에도 표시)

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/react@1.2.0](https://npmjs.com/package/@seed-design/react/v/1.2.0)
* 📦 [@seed-design/react-radio-group@1.1.0](https://npmjs.com/package/@seed-design/react-radio-group/v/1.1.0)
* 📦 [@seed-design/rootage-artifacts@1.2.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.2.0)

***

fieldset, collapsible headless 릴리즈

영향받는 패키지

* 📦 [@seed-design/react-collapsible@0.1.0](https://npmjs.com/package/@seed-design/react-collapsible/v/0.1.0)
* 📦 [@seed-design/react-fieldset@0.1.0](https://npmjs.com/package/@seed-design/react-fieldset/v/0.1.0)

***

[BottomSheetContent](/react/components/bottom-sheet)와 [MenuSheetContent](/react/components/menu-sheet)가 기본적으로 bottom safe area만큼 하단 padding을 갖도록 수정합니다. [`b673455`](https://github.com/daangn/seed-design/commit/b6734550839d17df2fda63df144fd861e21877dd)

* 별도로 safe area padding을 지정하는 경우 제거할 수 있습니다. BottomSheetContent 내부에서의 `<VStack paddingBottom="safeArea">` 등

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)

***

[Tag Group](/react/components/tag-group) 관련 컴포넌트를 업데이트합니다. [`a0e40ca`](https://github.com/daangn/seed-design/commit/a0e40ca2d568a249fa77e46f5780c735082e911c)

* `TagGroupItem` 레이블 내부에서 줄바꿈이 발생할 수 있도록 수정합니다. (기존: `TagGroupItem` 또는 separator 전후에서 줄바꿈 발생)
* 한 줄 레이아웃 및 우선순위 옵션을 추가합니다.
  * `TagGroupRoot`에 `truncate` prop을 사용하여 한 줄로 유지하고 말줄임 처리를 할 수 있습니다. (기본값: `false`)
  * `TagGroupItem`에 `flexShrink` prop을 사용하여 말줄임 우선순위를 조정할 수 있습니다.
* **1.1 → 1.2 업그레이드 시 변경 필요**: `TagGroupItem` 내부 레이블을 `TagGroupItemLabel`로 감싸거나, 신규로 제공되는 Snippet에서 제공하는 API로 교체해주세요.

  * `npx @seed-design/cli@latest add ui:tag-group` 명령어로 Snippet을 추가할 수 있습니다.

  ```tsx
  // 전
  import { TagGroupRoot, TagGroupItem } from "@seed-design/react";

  {
    /* TagGroup.Root, TagGroup.Item처럼 namespace import하는 코드가 있을 수 있습니다. */
  }
  <TagGroupRoot>
    <TagGroupItem>
      <PrefixIcon svg={<IconLocationpinFill />} />
      서초4동
    </TagGroupItem>
    <TagGroupItem>
      광고
      <Icon svg={<IconMegaphoneFill />} color="fg.brand" />
    </TagGroupItem>
    {/* ... */}
  </TagGroupRoot>;
  ```

  ```tsx
  // 후 (Compound Component 유지)

  import {
    TagGroupRoot,
    TagGroupItem,
    TagGroupItemLabel,
  } from "@seed-design/react";

  <TagGroupRoot>
    <TagGroupItem>
      <PrefixIcon svg={<IconLocationpinFill />} />
      {/* TagGroupItemLabel 사용 */}
      <TagGroupItemLabel>서초4동</TagGroupItemLabel>
    </TagGroupItem>
    <TagGroupItem>
      {/* TagGroupItemLabel 사용 */}
      <TagGroupItemLabel>광고</TagGroupItemLabel>
      <Icon svg={<IconMegaphoneFill />} color="fg.brand" />
    </TagGroupItem>
    {/* ... */}
  </TagGroupRoot>;
  ```

  ```tsx
  // 후 (snippet API로 교체)
  // snippet 없는 경우, `npx @seed-design/cli@latest add ui:tag-group`

  import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group";
  import {
    TagGroupRoot as SeedTagGroupRoot,
    TagGroupItem as SeedTagGroupItem,
    TagGroupItemLabel as SeedTagGroupItemLabel,
  } from "@seed-design/react";

  <TagGroupRoot>
    <TagGroupItem label="서초4동" prefixIcon={<IconLocationpinFill />} />
    <SeedTagGroupItem>
      <SeedTagGroupItemLabel>광고</SeedTagGroupItemLabel>
      {/* 아이콘 커스터마이징이 필요한 경우 snippet 대신 Compound Component를 사용합니다. */}
      <Icon svg={<IconMegaphoneFill />} color="fg.brand" />
    </SeedTagGroupItem>
    {/* ... */}
  </TagGroupRoot>;
  ```

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/figma@1.2.0](https://npmjs.com/package/@seed-design/figma/v/1.2.0)
* 📦 [@seed-design/react@1.2.0](https://npmjs.com/package/@seed-design/react/v/1.2.0)

***

Text Field (text-input)과 Field Button (input-button)의 포커스 및 에러 상태 border 트랜지션을 수정합니다. [`17c0ebd`](https://github.com/daangn/seed-design/commit/17c0ebde386711eed1188045238272224179f2d7)

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/rootage-artifacts@1.2.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.2.0)

***

[Menu Sheet](/react/components/menu-sheet) 관련 컴포넌트를 업데이트합니다. [`358a1e4`](https://github.com/daangn/seed-design/commit/358a1e47dd855ab22dfaa4e0a2fd657a93595f13)

* `MenuSheetContent`에 설명을 추가할 수 있는 `description` prop이 추가되었습니다.
* `MenuSheetItem`에 설명을 추가할 수 있는 `description` prop이 추가되었습니다.
* **1.1 → 1.2 업그레이드 시 변경 필요**: snippet을 다시 내려받고, `MenuSheetItem`을 사용하는 코드를 아래와 같이 변경하세요.

  * `npx @seed-design/cli@latest add ui:menu-sheet`
  * `children` 대신 `label` prop을 사용합니다.
  * `description`, `prefixIcon` prop이 추가되었습니다.

  ```tsx
  // 전
  <MenuSheetItem>
    <PrefixIcon svg={<IconHouseLine />} />
    메뉴 항목
  </MenuSheetItem>

  // 후
  <MenuSheetItem
    prefixIcon={<IconHouseLine />}
    label="메뉴 항목"
    description="이제 설명도 추가할 수 있어요"
  />
  ```

영향받는 패키지

* 📦 [@seed-design/css@1.2.0](https://npmjs.com/package/@seed-design/css/v/1.2.0)
* 📦 [@seed-design/figma@1.2.0](https://npmjs.com/package/@seed-design/figma/v/1.2.0)
* 📦 [@seed-design/react@1.2.0](https://npmjs.com/package/@seed-design/react/v/1.2.0)

***

react-image headless 릴리즈 [`cfd2df4`](https://github.com/daangn/seed-design/commit/cfd2df43c3bed9cda6413fc7938068d38da777ff)

영향받는 패키지

* 📦 [@seed-design/react-image@0.1.0](https://npmjs.com/package/@seed-design/react-image/v/0.1.0)

***

CLI add/add-all 명령 실행 시, 파일 변경사항을 보여주고 덮어쓰기/백업/그대로 두기 선택지를 제공합니다. `--overwrite` flag를 통해 이 과정을 건너뛰고 덮어쓰기를 선택할 수 있습니다. [`21c6ca8`](https://github.com/daangn/seed-design/commit/21c6ca8aa792d7bfc5a6f73f9434532185eb6050)

영향받는 패키지

* 📦 [@seed-design/cli@1.2.0](https://npmjs.com/package/@seed-design/cli/v/1.2.0)

***

MCP `get_node(s)_info` 및 `get_node_react_code` 툴 호출이 실패하는 경우 Figma 라이브러리 업데이트 안내를 추가합니다. [`41c4e31`](https://github.com/daangn/seed-design/commit/41c4e3185d938467bb7d2071e1548dde15bf16d0)

영향받는 패키지

* 📦 [@seed-design/mcp@1.2.0](https://npmjs.com/package/@seed-design/mcp/v/1.2.0)

***

## 2026.01.20

BottomSheetRoot `headerAlign="center"` variant에서 텍스트 정렬 문제를 수정합니다 ([예제](/react/components/bottom-sheet#header-align)). MenuSheetTitle의 내용이 길어질 때 MenuSheetHeader가 가운데 정렬되지 않는 문제를 수정합니다. [`6697fbe`](https://github.com/daangn/seed-design/commit/6697fbeb1b194e4edd48d2dcfd017bac93d5a3d3)

영향받는 패키지

* 📦 [@seed-design/css@1.1.19](https://npmjs.com/package/@seed-design/css/v/1.1.19)

***

## 2026.01.19 #2

아이콘 정보를 업데이트합니다. [`e92892a`](https://github.com/daangn/seed-design/commit/e92892a568d1dec922e7b19ba79e6bb7db0f1722)

영향받는 패키지

* 📦 [@seed-design/docs-mcp@0.5.1](https://npmjs.com/package/@seed-design/docs-mcp/v/0.5.1)
* 📦 [@seed-design/figma@1.1.18](https://npmjs.com/package/@seed-design/figma/v/1.1.18)

***

## 2026.01.19

Chip 컴포넌트 스펙에 `layout=withText` variant를 명시합니다. (스타일 변경사항 없음) [`db49a84`](https://github.com/daangn/seed-design/commit/db49a844ef665853d7cb23f096eaea3fce9144d5)

영향받는 패키지

* 📦 [@seed-design/css@1.1.17](https://npmjs.com/package/@seed-design/css/v/1.1.17)
* 📦 [@seed-design/rootage-artifacts@1.1.8](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.8)

***

Skeleton 가시성 향상을 위해 `$gradient.shimmer-magic` 및 `$gradient.shimmer-neutral` 토큰의 색상을 업데이트합니다. [`6fab0e7`](https://github.com/daangn/seed-design/commit/6fab0e7275613d6732356d00111c24bbf2eaaa41)

영향받는 패키지

* 📦 [@seed-design/css@1.1.17](https://npmjs.com/package/@seed-design/css/v/1.1.17)
* 📦 [@seed-design/rootage-artifacts@1.1.8](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.8)
* 📦 [@seed-design/tailwind3-plugin@1.1.17](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.17)
* 📦 [@seed-design/tailwind4-theme@1.1.17](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.17)

***

주석, 참고 사항 및 상세 리스트 등 부가 정보에 사용할 수 있는 시맨틱 텍스트 스타일 `articleNote`를 추가합니다. [`5faef3a`](https://github.com/daangn/seed-design/commit/5faef3ad175e62e60e1214b301db1c2b4ca2721a)

영향받는 패키지

* 📦 [@seed-design/css@1.1.17](https://npmjs.com/package/@seed-design/css/v/1.1.17)
* 📦 [@seed-design/rootage-artifacts@1.1.8](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.8)
* 📦 [@seed-design/tailwind3-plugin@1.1.17](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.17)
* 📦 [@seed-design/tailwind4-theme@1.1.17](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.17)

***

`@seed-design/css@1.3` 및 `@seed-design/react@1.3`에서 제거되는 토큰 및 옵션에 관한 경고를 추가합니다. [`8847e88`](https://github.com/daangn/seed-design/commit/8847e88b38a826e1f4c98f5168d83d4f739df315)

* 1.3에서 제거 예정인 색상 토큰
  * [`$color.bg.layer-fill`](/docs/foundation/design-token/%24color.bg.layer-fill)
  * [`$gradient.fade-layer-floating`](/docs/foundation/design-token/%24gradient.fade-layer-floating)
  * [`$gradient.fade-layer-default`](/docs/foundation/design-token/%24gradient.fade-layer-default)
* 1.3에서 제거 예정인 컴포넌트 variant
  * [ChipTabs](/react/components/chip-tabs)
    * `variant="brandSolid"`
      * 1.2까지 사용 가능, 1.3부터 디자인 변경 필요
  * [Checkbox](/react/components/checkbox)
    * `weight="default"`
      * 0.2.4부터 `weight="regular"` 사용 가능
      * `weight="default"`는 1.2까지 사용 가능, 1.3부터 `weight="regular"`만 허용
    * `weight="stronger"`
      * 0.2.4부터 `weight="bold"` 사용 가능
      * `weight="stronger"`는 1.2까지 사용 가능, 1.3부터 `weight="bold"`만 허용
  * [Switch](/react/components/switch)
    * `size="small"`
      * 0.1.9부터 `size="16"` 사용 가능
      * `size="small"`은 1.2까지 사용 가능, 1.3부터 `size="16"`만 허용
    * `size="medium"`
      * 0.1.9부터 `size="32"` 사용 가능
      * `size="medium"`은 1.2까지 사용 가능, 1.3부터 `size="32"`만 허용
  * `StyleProps`를 상속하는 컴포넌트
    * `display`, `justifyContent/justify`, `alignItems/align`, `alignContent`, `alignSelf`, `flexDirection/direction` 프로퍼티에서의 `camelCase` 값 제거 예정
      * 0.0.15부터 `kebab-case` 값 사용 가능
      * `camelCase` 값은 1.2까지 사용 가능, 1.3부터 `kebab-case` 값만 허용
      * 예: `justifyContent="spaceBetween"` → `justifyContent="space-between"`
    * 영향 범위인 컴포넌트: [Box](/react/components/layout/box), [Flex](/react/components/layout/flex), [HStack](/react/components/layout/h-stack), [VStack](/react/components/layout/v-stack), [Article](/react/components/article), [List (List.Root) 및 ListItem, ListButtonItem, ListLinkItem, ListSwitchItem, ListCheckItem, ListRadioItem (List.Item)](/react/components/list), [BottomSheetBody (BottomSheet.Body)](/react/components/bottom-sheet), ResponsivePair, [Inline (deprecated)](/react/components/inline), [Columns, Column (deprecated)](/react/components/columns), [Stack (deprecated)](/react/components/stack)

영향받는 패키지

* 📦 [@seed-design/css@1.1.17](https://npmjs.com/package/@seed-design/css/v/1.1.17)
* 📦 [@seed-design/react@1.1.17](https://npmjs.com/package/@seed-design/react/v/1.1.17)
* 📦 [@seed-design/rootage-artifacts@1.1.8](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.8)

***

`$color.bg.layer-basement` 위에서 컴포넌트의 가시성을 보장하기 위해 `$color.bg.neutral-weak-alpha` 토큰을 추가합니다. [`94bebf8`](https://github.com/daangn/seed-design/commit/94bebf836c33681d4945a88af8fe8a8b3393197b)

* Chip `variant=solid`에 적용
* ChipTab `variant=neutralSolid`에 적용
* SegmentedControl root에 적용

영향받는 패키지

* 📦 [@seed-design/css@1.1.17](https://npmjs.com/package/@seed-design/css/v/1.1.17)
* 📦 [@seed-design/rootage-artifacts@1.1.8](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.8)
* 📦 [@seed-design/tailwind3-plugin@1.1.17](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.17)
* 📦 [@seed-design/tailwind4-theme@1.1.17](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.17)

***

잘못된 pseudo selector를 수정합니다 [`8495fae`](https://github.com/daangn/seed-design/commit/8495fae362f9f5d0673c19cb4362c06fec3a1241)

영향받는 패키지

* 📦 [@seed-design/css@1.1.17](https://npmjs.com/package/@seed-design/css/v/1.1.17)

***

## 2026.01.12

Tool의 개수를 유지보수 가능한 형태로 줄였습니다 [`c300110`](https://github.com/daangn/seed-design/commit/c3001105fddd2b57f27914c82ff79c2df2b6e236)

영향받는 패키지

* 📦 [@seed-design/docs-mcp@0.5.0](https://npmjs.com/package/@seed-design/docs-mcp/v/0.5.0)

***

## 2026.01.07

정적 텍스트 스타일 추가 (t1Static\* \~ t10Static\*) [`2f29fe8`](https://github.com/daangn/seed-design/commit/2f29fe862e6f9a68476ff01a809bc7845b2e6ba2)

영향받는 패키지

* 📦 [@seed-design/css@1.1.16](https://npmjs.com/package/@seed-design/css/v/1.1.16)
* 📦 [@seed-design/rootage-artifacts@1.1.7](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.7)
* 📦 [@seed-design/tailwind3-plugin@1.1.16](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.16)
* 📦 [@seed-design/tailwind4-theme@1.1.16](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.16)

***

Checkmark `variant=ghost` `tone=neutral`에서 icon의 색상을 $color.fg.neutral로 변경하고 색상 트랜지션을 추가합니다. [`9119723`](https://github.com/daangn/seed-design/commit/91197230b98ca59296c3e77e4bece18af7580087)

영향받는 패키지

* 📦 [@seed-design/css@1.1.16](https://npmjs.com/package/@seed-design/css/v/1.1.16)
* 📦 [@seed-design/rootage-artifacts@1.1.7](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.7)

***

Stackflow와 함께 AppScreen 사용 시 최상위 AppScreen이 push/pop될 때, 이외의 AppScreen이 고유한 `transitionStyle`을 재생하는 문제를 수정합니다. 같은 스택 내에 여러 `transitionStyle`이 공존할 때 자연스러운 트랜지션을 제공하기 위해 최상위 AppScreen의 `transitionStyle`을 재생합니다. ([데모](https://seed-design.io/react/stackflow/app-screen#transition-styles)) [`6d30b72`](https://github.com/daangn/seed-design/commit/6d30b7294974d31e853cc07fcda7d74405795cb4)

* 예를 들면, `transitionStyle="fadeFromBottomAndroid"`인 0번 AppScreen 위에 `transitionStyle="slideFromLeftIOS"`인 1번 AppScreen이 push되는 경우, 0번 AppScreen이 `slideFromLeftIOS` 트랜지션을 재생하도록 수정합니다.
  * 0번 AppScreen이 자연스럽게 좌측으로 조금 밀려나며 어두워지고(`slideFromLeftIOS`) 1번 AppScreen이 우측에서 슬라이드 인(`slideFromLeftIOS`)

영향받는 패키지

* 📦 [@seed-design/css@1.1.16](https://npmjs.com/package/@seed-design/css/v/1.1.16)
* 📦 [@seed-design/stackflow@1.1.16](https://npmjs.com/package/@seed-design/stackflow/v/1.1.16)

***

배너 템플릿에 사용되는 `$color.banner.*` 색상 토큰을 추가합니다. [`10c0765`](https://github.com/daangn/seed-design/commit/10c0765c378261aca611eb62c62a0564004e01f9)

영향받는 패키지

* 📦 [@seed-design/css@1.1.16](https://npmjs.com/package/@seed-design/css/v/1.1.16)
* 📦 [@seed-design/react@1.1.16](https://npmjs.com/package/@seed-design/react/v/1.1.16)
* 📦 [@seed-design/rootage-artifacts@1.1.7](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.7)
* 📦 [@seed-design/tailwind3-plugin@1.1.16](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.16)
* 📦 [@seed-design/tailwind4-theme@1.1.16](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.16)

***

`AppScreen`에 신규 `transitionStyle` `fadeIn`을 추가합니다. [`5e462db`](https://github.com/daangn/seed-design/commit/5e462dbe0fec261662442096ad451d51b84370c2)

영향받는 패키지

* 📦 [@seed-design/css@1.1.16](https://npmjs.com/package/@seed-design/css/v/1.1.16)

***

아이콘 라이브러리 관련 새로운 도구 3개를 추가합니다. (아이콘 목록 조회, 검색, 상세 정보 조회) [`0315e98`](https://github.com/daangn/seed-design/commit/0315e986aa6cf557ae5f0fdddee2fd1ad11f8ca9)

영향받는 패키지

* 📦 [@seed-design/docs-mcp@0.4.0](https://npmjs.com/package/@seed-design/docs-mcp/v/0.4.0)

***

Rootage에 누락된 Slot Schema 정의 추가 (스타일 변경사항 없음) [`b46264a`](https://github.com/daangn/seed-design/commit/b46264aae6eb640f9f79fdecd4218dc33c047a49)

영향받는 패키지

* 📦 [@seed-design/rootage-artifacts@1.1.7](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.7)

***

## 2025.12.24

iOS 15 이하 기기에서 MenuSheetItem이 의도하지 않은 margin을 갖는 문제를 수정합니다. [`76acd7e`](https://github.com/daangn/seed-design/commit/76acd7eebc0b537acf1c4fe2e82271a0a04c9cf3)

영향받는 패키지

* 📦 [@seed-design/css@1.1.15](https://npmjs.com/package/@seed-design/css/v/1.1.15)

***

AppScreen 스와이프 중 취소 시 트랜지션이 끝난 뒤에도 `GlobalInteraction`의 `data-swipe-back-state`가 `idle`로 되돌아가지 않고 `canceling`으로 남아 있는 문제를 수정합니다. [`e4b0ce8`](https://github.com/daangn/seed-design/commit/e4b0ce8009f3dc7edbb142a5c02df10a860df4fe)

영향받는 패키지

* 📦 [@seed-design/stackflow@1.1.15](https://npmjs.com/package/@seed-design/stackflow/v/1.1.15)

***

`theme=“android”`인 AppScreen 또는 AppBar에 속한 AppBarMain의 title과 subtitle 말줄임(truncation)이 적용되지 않는 문제를 수정합니다. [`7a428ec`](https://github.com/daangn/seed-design/commit/7a428ec62c84f1746b4316ea1965c8c9d63b7da5)

영향받는 패키지

* 📦 [@seed-design/css@1.1.15](https://npmjs.com/package/@seed-design/css/v/1.1.15)

***

* `get_rootage` tool 추가 (design token 및 component spec 조회) [`63b65db`](https://github.com/daangn/seed-design/commit/63b65db36dedeb421f164aa9f2fd3c048fa476d7)
* React 문서 조회 기능 개선 및 fetch 함수 통합

영향받는 패키지

* 📦 [@seed-design/docs-mcp@0.3.0](https://npmjs.com/package/@seed-design/docs-mcp/v/0.3.0)

***

iOS 17 이하 기기에서 SegmentedControlItem의 높이가 잘못 설정될 수 있는 문제를 수정합니다. [`498a9e7`](https://github.com/daangn/seed-design/commit/498a9e7013662a19f941f3e42edaa125685cf62a)

영향받는 패키지

* 📦 [@seed-design/css@1.1.15](https://npmjs.com/package/@seed-design/css/v/1.1.15)

***

## 2025.12.22

Figma Codegen & MCP에서 `boxShadow` 코드 생성을 지원하고 엔티티 정보를 최신화합니다. [`c1f818f`](https://github.com/daangn/seed-design/commit/c1f818f92b8e07f43fd5def3a28430342da0ef90)

영향받는 패키지

* 📦 [@seed-design/figma@1.1.14](https://npmjs.com/package/@seed-design/figma/v/1.1.14)

***

## 2025.12.18

`list_foundation`, `get_foundation`, `list_docs_components`, `get_docs_component` tools 추가 [`f385599`](https://github.com/daangn/seed-design/commit/f3855998785f9b5d9ee2bea1e997c2c22b20cbf2)

영향받는 패키지

* 📦 [@seed-design/docs-mcp@0.2.0](https://npmjs.com/package/@seed-design/docs-mcp/v/0.2.0)

***

## 2025.12.15

`radiomark` Rootage 정의를 명확화합니다. (스타일 변경사항 없음) [`9be0581`](https://github.com/daangn/seed-design/commit/9be0581cd36d3d350284445b4a7fd75898bb1823)

영향받는 패키지

* 📦 [@seed-design/css@1.1.13](https://npmjs.com/package/@seed-design/css/v/1.1.13)
* 📦 [@seed-design/rootage-artifacts@1.1.6](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.6)

***

신규 [Elevation 가이드](https://seed-design.io/docs/foundation/elevation)에 맞는 shadow 토큰을 추가합니다. [`cc4a45a`](https://github.com/daangn/seed-design/commit/cc4a45a00a93c987447255b3cc6bee9182e520a9)

* React: Box, Flex, HStack 등 StyleProps를 사용하는 컴포넌트에서 `boxShadow` prop을 사용하여 shadow 토큰을 쉽게 사용할 수 있습니다.

영향받는 패키지

* 📦 [@seed-design/css@1.1.13](https://npmjs.com/package/@seed-design/css/v/1.1.13)
* 📦 [@seed-design/react@1.1.13](https://npmjs.com/package/@seed-design/react/v/1.1.13)
* 📦 [@seed-design/rootage-artifacts@1.1.6](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.6)
* 📦 [@seed-design/tailwind3-plugin@1.1.13](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.13)
* 📦 [@seed-design/tailwind4-theme@1.1.13](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.13)

***

unicode-segmenter 0.14.4 버전을 설치합니다. [`8f54b80`](https://github.com/daangn/seed-design/commit/8f54b80e81adf6415e5b687bf25da33dd3c82ea9)

영향받는 패키지

* 📦 [@seed-design/react@1.1.13](https://npmjs.com/package/@seed-design/react/v/1.1.13)

***

Button들의 xsmall variant의 텍스트 사이즈를 t4에서 t3로 변경해요. [`739937f`](https://github.com/daangn/seed-design/commit/739937fefe4ffcc21e57216508053fe60bfa958d)

영향받는 패키지

* 📦 [@seed-design/css@1.1.13](https://npmjs.com/package/@seed-design/css/v/1.1.13)
* 📦 [@seed-design/rootage-artifacts@1.1.6](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.6)

***

Divider 자체적으로 16px의 여백을 가지는 `inset` 옵션을 추가합니다. [`fce8668`](https://github.com/daangn/seed-design/commit/fce866834642a0a516a85efdce65f1637ae28181)

영향받는 패키지

* 📦 [@seed-design/react@1.1.13](https://npmjs.com/package/@seed-design/react/v/1.1.13)

***

## 2025.12.08

Figma Codegen 정보를 최신화합니다. [`6d680ba`](https://github.com/daangn/seed-design/commit/6d680baf7b106d97f64e41b0e4aa7156959ec49e)

영향받는 패키지

* 📦 [@seed-design/figma@1.1.12](https://npmjs.com/package/@seed-design/figma/v/1.1.12)

***

seedFontMultiplier, seedFontScaling attribute를 추가합니다 [`8d0ad90`](https://github.com/daangn/seed-design/commit/8d0ad90ca761954a066025ee0075fac90bd9a9e5)

* seedFontMultiplier: 폰트 크기 스케일링 계수 (e.g. 0.8, 1.35, 1.5, 1)
* seedFontScaling: 폰트 크기 스케일링 활성화 여부 (e.g. "enabled")

영향받는 패키지

* 📦 [@seed-design/css@1.1.12](https://npmjs.com/package/@seed-design/css/v/1.1.12)

***

cssnano 등 CSS 최적화 도구를 사용할 때, `bleedX`와 `bleedY` 중 한 가지 속성만 정의하는 경우 bleed가 적용되지 않던 문제를 수정합니다. [`8f31f93`](https://github.com/daangn/seed-design/commit/8f31f9315b18031c816ecc61dcec9a984e474318)

영향받는 패키지

* 📦 [@seed-design/css@1.1.12](https://npmjs.com/package/@seed-design/css/v/1.1.12)

***

Overlay 컴포넌트에 skipAnimation 옵션을 추가합니다 [`69ccc6e`](https://github.com/daangn/seed-design/commit/69ccc6e7d13ff1790bfb0b9924669e6ad63ea49c)

영향받는 패키지

* 📦 [@seed-design/css@1.1.12](https://npmjs.com/package/@seed-design/css/v/1.1.12)
* 📦 [@seed-design/react-dialog@1.0.1](https://npmjs.com/package/@seed-design/react-dialog/v/1.0.1)
* 📦 [@seed-design/react-drawer@1.0.5](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.5)

***

Badge의 크기와 Field의 indicator 크기 및 여백이 폰트 스케일링 제한의 영향을 받도록 업데이트합니다. [`279001a`](https://github.com/daangn/seed-design/commit/279001a99f13accf981654438e1bbee632b62476)

영향받는 패키지

* 📦 [@seed-design/css@1.1.12](https://npmjs.com/package/@seed-design/css/v/1.1.12)

***

## 2025.12.04

@seed-design/stackflow: @stackflow/react-ui-core를 peerDependencies에서 dependencies로 이동합니다. [`ea488c5`](https://github.com/daangn/seed-design/commit/ea488c5da8813d16f9d6401858dfd932d9b53553)

영향받는 패키지

* 📦 [@seed-design/stackflow@1.1.11](https://npmjs.com/package/@seed-design/stackflow/v/1.1.11)

***

Figma MCP가 `export_node_as_image` 툴과 `clone_node` 툴 호출 후 반환 결과를 정상적으로 파싱하지 못하는 문제를 수정합니다. [`b58ac46`](https://github.com/daangn/seed-design/commit/b58ac46b66c4a9589bd894d072a01a3c3de83c2a)

영향받는 패키지

* 📦 [@seed-design/mcp@1.1.11](https://npmjs.com/package/@seed-design/mcp/v/1.1.11)

***

## 2025.12.01

Figma 엔티티 및 Codegen을 업데이트합니다. (신규 아이콘 및 `ResultSection` Codegen 지원) [`bc9f9a0`](https://github.com/daangn/seed-design/commit/bc9f9a0462f4fbdd8282d2b107d036e4b7d33632)

영향받는 패키지

* 📦 [@seed-design/figma@1.1.10](https://npmjs.com/package/@seed-design/figma/v/1.1.10)

***

`TagGroupRoot`의 children이 `null` 또는 `undefined`를 포함하는 경우 불필요한 separator가 표시되는 문제를 수정합니다. [`a2b874b`](https://github.com/daangn/seed-design/commit/a2b874b790c7d40ce7561d044ceaad176dc7955d)

영향받는 패키지

* 📦 [@seed-design/react@1.1.10](https://npmjs.com/package/@seed-design/react/v/1.1.10)

***

peerDeps에 `@seed-design/css` 패키지가 추가됩니다. [`12ffece`](https://github.com/daangn/seed-design/commit/12ffece09da7a3740ddc2dba0fc8f65b70210d7a)

영향받는 패키지

* 📦 [@seed-design/react@1.1.10](https://npmjs.com/package/@seed-design/react/v/1.1.10)

***

PageBanner에 tone="magic" 스타일을 추가합니다. [`db5de74`](https://github.com/daangn/seed-design/commit/db5de74c6c8ad7b434372e498443c5d706f3279b)

영향받는 패키지

* 📦 [@seed-design/css@1.1.10](https://npmjs.com/package/@seed-design/css/v/1.1.10)
* 📦 [@seed-design/react@1.1.10](https://npmjs.com/package/@seed-design/react/v/1.1.10)
* 📦 [@seed-design/rootage-artifacts@1.1.5](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.5)

***

Segmented Control의 스타일을 업데이트합니다: Indicator에서 shadow 정의를 제거합니다. [`70d11b8`](https://github.com/daangn/seed-design/commit/70d11b80ae01b616570468ddc5133740ae1182cb)

영향받는 패키지

* 📦 [@seed-design/css@1.1.10](https://npmjs.com/package/@seed-design/css/v/1.1.10)
* 📦 [@seed-design/rootage-artifacts@1.1.5](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.5)

***

TabsCarousel에 onSwipeStart, onSwipeEnd 이벤트 콜백을 추가합니다. [`938bf0b`](https://github.com/daangn/seed-design/commit/938bf0bb413947ef03dcbb3d5cdf36af62cebfb5)

영향받는 패키지

* 📦 [@seed-design/react-tabs@1.0.2](https://npmjs.com/package/@seed-design/react-tabs/v/1.0.2)

***

TextFieldInput 및 TextFieldTextarea (text-input 스타일시트)에서 브라우저 기본 자동 완성 스타일이 표시되지 않도록 수정합니다. [`c03a3dd`](https://github.com/daangn/seed-design/commit/c03a3dd984a15d66da10127bd37d1b8966b15ec7)

영향받는 패키지

* 📦 [@seed-design/css@1.1.10](https://npmjs.com/package/@seed-design/css/v/1.1.10)

***

Field(TextField)의 스타일을 수정합니다. [`a12e49b`](https://github.com/daangn/seed-design/commit/a12e49b6f3a7fdec66c12666a35b15a4787d3aca)

* `maxGraphemeCount`를 사용하지만 `description`을 사용하지 않는 경우 `maxGraphemeCount`가 우측이 아닌 좌측에 표시되는 문제를 수정합니다.
* Tailwind Preflight 사용 시 Character Count 영역이 디자인 의도보다 높이를 더 많이 차지하는 문제를 수정합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.1.10](https://npmjs.com/package/@seed-design/css/v/1.1.10)
* 📦 [@seed-design/react@1.1.10](https://npmjs.com/package/@seed-design/react/v/1.1.10)

***

## 2025.11.26

`AppBar`에 적용되는 그라디언트를 `AppScreen`으로 이동합니다. [`37d332d`](https://github.com/daangn/seed-design/commit/37d332daf30f0f61e4e1692e896021a73b38287c)

* `<AppBar tone="transparent">`를 사용하는 경우 `tone="transparent"`를 `AppScreen`으로 옮겨 그라디언트를 표시할 수 있습니다.
* `AppScreen`에 `gradient={false}`를 설정하여 그라디언트를 숨길 수 있습니다.

영향받는 패키지

* 📦 [@seed-design/css@1.1.9](https://npmjs.com/package/@seed-design/css/v/1.1.9)

***

iOS 웹뷰 환경에서 Avatar가 정상적으로 렌더링되지 않는 문제를 수정합니다. [`77517f1`](https://github.com/daangn/seed-design/commit/77517f16067b72e4792e12105e93a7b0cc1d0292)

영향받는 패키지

* 📦 [@seed-design/css@1.1.9](https://npmjs.com/package/@seed-design/css/v/1.1.9)

***

Stackflow 플러그인이 최신이 아닌 data attribute에 의해 잘못된 트랜지션을 재생하지 않도록 수정합니다. [`afa281b`](https://github.com/daangn/seed-design/commit/afa281b2a802359c64b549e58c1d499792d28e29)

영향받는 패키지

* 📦 [@seed-design/stackflow@1.1.9](https://npmjs.com/package/@seed-design/stackflow/v/1.1.9)

***

## 2025.11.21

List Item에 신규 active(pressed) 스타일을 적용하고, disabled 상태에서 detail 영역의 색상을 수정합니다. [`8752805`](https://github.com/daangn/seed-design/commit/87528054e18200ab6098abfe66186ee2cddaf9e0)

영향받는 패키지

* 📦 [@seed-design/css@1.1.8](https://npmjs.com/package/@seed-design/css/v/1.1.8)
* 📦 [@seed-design/react@1.1.8](https://npmjs.com/package/@seed-design/react/v/1.1.8)
* 📦 [@seed-design/rootage-artifacts@1.1.4](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.4)

***

Help Bubble이 기본적으로 z-index 99를 가지도록 수정합니다. (HelpBubblePositioner 또는 HelpBubblePositionerPortal에 직접 인라인 스타일을 적용한 경우 인라인 스타일이 우선 적용됩니다.) [`ee98674`](https://github.com/daangn/seed-design/commit/ee98674aa0799515ead6e7c437aed8b8232c8798)

영향받는 패키지

* 📦 [@seed-design/css@1.1.8](https://npmjs.com/package/@seed-design/css/v/1.1.8)

***

@seed-design/react에서 unicode-segmenter가 externalize되지 않는 문제를 수정합니다. [`8edbf00`](https://github.com/daangn/seed-design/commit/8edbf003d327a8aec36b51edee40345cbc9c1d98)

영향받는 패키지

* 📦 [@seed-design/react@1.1.8](https://npmjs.com/package/@seed-design/react/v/1.1.8)

***

BottomSheet에 handleOnly 옵션이 정상적으로 동작하지 않는 이슈를 수정합니다 [`e3806c1`](https://github.com/daangn/seed-design/commit/e3806c1ea1937ef0b19c9acf6293fd0a87645e7c)

영향받는 패키지

* 📦 [@seed-design/react@1.1.8](https://npmjs.com/package/@seed-design/react/v/1.1.8)
* 📦 [@seed-design/react-drawer@1.0.4](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.4)

***

## 2025.11.20

Scroll Fog 컴포넌트가 항상 fog를 표시하게 변경하고 padding 가이드라인을 추가합니다 [`f4c62f6`](https://github.com/daangn/seed-design/commit/f4c62f6af1dc97627c818624a7359581a0f7cb40)

영향받는 패키지

* 📦 [@seed-design/react@1.1.7](https://npmjs.com/package/@seed-design/react/v/1.1.7)

***

스타일시트에서 logical property(padding-block 등)를 physical property(padding-left 및 padding-right 등)로 교체합니다. (브라우저 지원) [`bee919c`](https://github.com/daangn/seed-design/commit/bee919c028232078b4ba69c90e729bbd33508a11)

영향받는 패키지

* 📦 [@seed-design/css@1.1.7](https://npmjs.com/package/@seed-design/css/v/1.1.7)

***

Slider Value Indicator가 표시되는 조건을 설정하는 `valueIndicatorTrigger` prop을 추가합니다. ("active"|"hover", 기본값: "active") [`1340675`](https://github.com/daangn/seed-design/commit/13406751def0ba4c7efd3cf2a8bfbd62c8b63fbd)

영향받는 패키지

* 📦 [@seed-design/css@1.1.7](https://npmjs.com/package/@seed-design/css/v/1.1.7)
* 📦 [@seed-design/react@1.1.7](https://npmjs.com/package/@seed-design/react/v/1.1.7)
* 📦 [@seed-design/react-slider@1.0.1](https://npmjs.com/package/@seed-design/react-slider/v/1.0.1)

***

Slider Value Indicator가 Track 양 끝에 있을 때 Track 바깥 영역을 차지하지 않도록 수정합니다. [`1340675`](https://github.com/daangn/seed-design/commit/13406751def0ba4c7efd3cf2a8bfbd62c8b63fbd)

영향받는 패키지

* 📦 [@seed-design/css@1.1.7](https://npmjs.com/package/@seed-design/css/v/1.1.7)
* 📦 [@seed-design/react@1.1.7](https://npmjs.com/package/@seed-design/react/v/1.1.7)
* 📦 [@seed-design/react-slider@1.0.1](https://npmjs.com/package/@seed-design/react-slider/v/1.0.1)

***

## 2025.11.18

transparent 상태 컬러 추가, 컴포넌트 상태 컬러 변경, transition 추가 [`dfe6c1e`](https://github.com/daangn/seed-design/commit/dfe6c1e12f7b88b1ebdabbe54e4fc504b700489a)

* `$color.bg.transparent-pressed` 컬러와 `$color.bg.transparent` 컬러가 추가되었습니다.
* 다음 컴포넌트들의 색상이 transparent 관련 토큰으로 변경되었습니다.
  * `Chip` (outlineStrong, outlineWeak)
  * `Action Button` (neutralOutline, brandOutline, ghost)
  * `Checkmark`
  * `Tabs` (outline)
  * `List Item`
  * `Radiomark`
  * `Reaction Button`
  * `Select Box`
* 다음 컴포넌트들의 color transition이 추가되었습니다. (duration: $duration.d3, timing-function: $timing-function.easing)
  * `Checkmark`
  * `Radiomark`
  * `Reaction Button`
  * `Select Box`

영향받는 패키지

* 📦 [@seed-design/css@1.1.6](https://npmjs.com/package/@seed-design/css/v/1.1.6)
* 📦 [@seed-design/rootage-artifacts@1.1.3](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.3)
* 📦 [@seed-design/tailwind3-plugin@1.1.6](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.6)
* 📦 [@seed-design/tailwind4-theme@1.1.6](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.6)

***

다음 컴포넌트들의 color transition을 `$duration.color-transition` (d3) 토큰으로 변경합니다 [`a09e6b4`](https://github.com/daangn/seed-design/commit/a09e6b49f84e622f75563c85897992033301c3f3)

* `Action Button`
* `Bottom Sheet Handle`
* `Checkmark`
* `Tabs` (outline)
* `Chip`
* `Contextual Floating Button`
* `Floating Action Button`
* `Input Button`
* `List Item`
* `Radiomark`
* `Reaction Button`
* `Segmented Control Item`
* `Select Box`
* `Text Input`
* `Toggle Button`

영향받는 패키지

* 📦 [@seed-design/css@1.1.6](https://npmjs.com/package/@seed-design/css/v/1.1.6)
* 📦 [@seed-design/rootage-artifacts@1.1.3](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.3)
* 📦 [@seed-design/tailwind3-plugin@1.1.6](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.1.6)
* 📦 [@seed-design/tailwind4-theme@1.1.6](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.1.6)

***

## 2025.11.17

BottomSheetBody에 제공한 style 관련 prop(`paddingX` 등)이 적용되지 않고 DOM으로 bleed되는 문제를 수정합니다. [`03ff678`](https://github.com/daangn/seed-design/commit/03ff678ce576d85a37185f4551bfa99927a9bea6)

영향받는 패키지

* 📦 [@seed-design/react@1.1.5](https://npmjs.com/package/@seed-design/react/v/1.1.5)

***

FieldButton에 Read Only 상태를 추가합니다. Disabled 상태인 FieldButton은 내부 `<input />`도 `disabled` 속성을 갖도록 수정합니다. [`53290ab`](https://github.com/daangn/seed-design/commit/53290abaeda978d623317efb425de42ed2becd7d)

영향받는 패키지

* 📦 [@seed-design/css@1.1.5](https://npmjs.com/package/@seed-design/css/v/1.1.5)
* 📦 [@seed-design/react-field-button@1.0.1](https://npmjs.com/package/@seed-design/react-field-button/v/1.0.1)
* 📦 [@seed-design/rootage-artifacts@1.1.2](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.2)

***

@seed-design/stackflow 패키지에서 `useActivityZIndexBase` 훅을 제공합니다. [`7529e31`](https://github.com/daangn/seed-design/commit/7529e315c3c430b371ada6adf1d75f0ddb1badc0)

영향받는 패키지

* 📦 [@seed-design/stackflow@1.1.5](https://npmjs.com/package/@seed-design/stackflow/v/1.1.5)

***

use-prevent-scroll 로직을 삭제합니다 [`cc8864d`](https://github.com/daangn/seed-design/commit/cc8864d3cff5a7d4c06d56709d7eaffe6e11fc15)

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.3](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.3)

***

:focus-visible selector를 사용하기 전 브라우저에서 selector를 지원하는지 확인합니다. [`ae1b768`](https://github.com/daangn/seed-design/commit/ae1b76808dcc411fd34206195b517bc94035ecca)

영향받는 패키지

* 📦 [@seed-design/react@1.1.5](https://npmjs.com/package/@seed-design/react/v/1.1.5)
* 📦 [@seed-design/react-checkbox@1.0.1](https://npmjs.com/package/@seed-design/react-checkbox/v/1.0.1)
* 📦 [@seed-design/react-field@1.0.1](https://npmjs.com/package/@seed-design/react-field/v/1.0.1)
* 📦 [@seed-design/react-field-button@1.0.1](https://npmjs.com/package/@seed-design/react-field-button/v/1.0.1)
* 📦 [@seed-design/react-radio-group@1.0.1](https://npmjs.com/package/@seed-design/react-radio-group/v/1.0.1)
* 📦 [@seed-design/react-segmented-control@1.0.1](https://npmjs.com/package/@seed-design/react-segmented-control/v/1.0.1)
* 📦 [@seed-design/react-supports@0.0.1](https://npmjs.com/package/@seed-design/react-supports/v/0.0.1)
* 📦 [@seed-design/react-switch@1.0.1](https://npmjs.com/package/@seed-design/react-switch/v/1.0.1)
* 📦 [@seed-design/react-tabs@1.0.1](https://npmjs.com/package/@seed-design/react-tabs/v/1.0.1)
* 📦 [@seed-design/react-text-field@1.1.1](https://npmjs.com/package/@seed-design/react-text-field/v/1.1.1)

***

telemetry 옵션을 추가합니다 [`a6ae76f`](https://github.com/daangn/seed-design/commit/a6ae76fde02f957e53b5dcfe57f32420cfb95a85)

영향받는 패키지

* 📦 [@seed-design/cli@1.1.0](https://npmjs.com/package/@seed-design/cli/v/1.1.0)

***

## 2025.11.13

`@radix-ui/react-dialog` 의존성을 추가해 React 패키지를 Portable하게 수정합니다 [`77d304d`](https://github.com/daangn/seed-design/commit/77d304d3ddaed22cc247e3250390ecbe0309a8ba)

영향받는 패키지

* 📦 [@seed-design/react@1.1.4](https://npmjs.com/package/@seed-design/react/v/1.1.4)

***

Stackflow의 AppScreen에 있던 gradient 스타일을 AppBar로 이동합니다 [`795668c`](https://github.com/daangn/seed-design/commit/795668c57c76661222b6136b8d2e6a364da4ecbd)

영향받는 패키지

* 📦 [@seed-design/css@1.1.4](https://npmjs.com/package/@seed-design/css/v/1.1.4)

***

## 2025.11.11

일반적인 CSS Reset을 사용하지 않는 환경에서도 스타일이 의도한 대로 표시될 수 있도록 수정합니다. [`15c658b`](https://github.com/daangn/seed-design/commit/15c658b7cd78c2f4fe53b018f51f6770c5b6a02e)

* `list-header`에 `box-sizing: border-box;` 추가
* `button`으로 렌더링되는 컴포넌트 스타일 수정

영향받는 패키지

* 📦 [@seed-design/css@1.1.3](https://npmjs.com/package/@seed-design/css/v/1.1.3)

***

PopoverPositionerPortal과 HelpBubblePositionerPortal을 추가합니다. [`2c302a5`](https://github.com/daangn/seed-design/commit/2c302a56459bb8e9c9be8d166cc73da2205b0707)

영향받는 패키지

* 📦 [@seed-design/react@1.1.3](https://npmjs.com/package/@seed-design/react/v/1.1.3)
* 📦 [@seed-design/react-popover@1.0.3](https://npmjs.com/package/@seed-design/react-popover/v/1.0.3)

***

Release `@seed-design/react-scrollable` [`bc3cd6f`](https://github.com/daangn/seed-design/commit/bc3cd6fd1cdbf1d2c39fbe85ce6ecd735ee5b624)

영향받는 패키지

* 📦 [@seed-design/react-scrollable@1.0.0](https://npmjs.com/package/@seed-design/react-scrollable/v/1.0.0)

***

BottomSheetContent에 style 객체가 전달되지 않는 버그를 수정합니다. [`4102a4b`](https://github.com/daangn/seed-design/commit/4102a4b74fd89a007af590d2afa8866099cdc182)

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.2](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.2)

***

1.1 이전 버전과 호환 가능하도록 임시적으로 사용할 text-input size=medium variant를 추가합니다. [`f4e07bb`](https://github.com/daangn/seed-design/commit/f4e07bbed1a138d9864c966144f6655af7b062b1)

* 영향 받는 React 컴포넌트: TextFieldInput, TextFieldTextarea

영향받는 패키지

* 📦 [@seed-design/css@1.1.3](https://npmjs.com/package/@seed-design/css/v/1.1.3)
* 📦 [@seed-design/rootage-artifacts@1.1.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.1)

***

Export 수정: `DialogProps` → `UseDrawerProps` [`e272ef8`](https://github.com/daangn/seed-design/commit/e272ef8d2df763e8a5c2ad4bbd644815e353890f)

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.2](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.2)

***

uncontrolled 상태에서 onOpenChange가 두번 호출되는 버그를 수정합니다

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.2](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.2)

***

body에 강제로 스타일을 주입하는 noBodyStyles 옵션의 기본값을 true로 변경합니다 [`4971dcc`](https://github.com/daangn/seed-design/commit/4971dcce69a3af0119a4321dd8d7221b1d519a92)

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.2](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.2)

***

Figma Codegen 컴포넌트 핸들러를 업데이트합니다. 레거시 Text Field에 대한 Codegen을 한시적으로 지원합니다. [`d986fd5`](https://github.com/daangn/seed-design/commit/d986fd5fb9e353b7acf8a9e080d24fe10920a22c)

영향받는 패키지

* 📦 [@seed-design/figma@1.1.3](https://npmjs.com/package/@seed-design/figma/v/1.1.3)

***

text-input의 readonly 스타일을 업데이트합니다. [`114dafd`](https://github.com/daangn/seed-design/commit/114dafdebb6aa0579b5543a4bfeb38b4439d641a)

* 영향 받는 React 컴포넌트: TextFieldInput, TextFieldTextarea

영향받는 패키지

* 📦 [@seed-design/css@1.1.3](https://npmjs.com/package/@seed-design/css/v/1.1.3)
* 📦 [@seed-design/rootage-artifacts@1.1.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.1)

***

Scroll Fog 컴포넌트를 추가합니다 [`bc3cd6f`](https://github.com/daangn/seed-design/commit/bc3cd6fd1cdbf1d2c39fbe85ce6ecd735ee5b624)

영향받는 패키지

* 📦 [@seed-design/css@1.1.3](https://npmjs.com/package/@seed-design/css/v/1.1.3)
* 📦 [@seed-design/react@1.1.3](https://npmjs.com/package/@seed-design/react/v/1.1.3)
* 📦 [@seed-design/rootage-artifacts@1.1.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.1)

***

## 2025.11.05

Figma 토큰 정보 및 Codegen 핸들러를 최신화합니다. [`4c5d7c4`](https://github.com/daangn/seed-design/commit/4c5d7c4f2d14ae25041f8603d0389aa7a6cdd386)

영향받는 패키지

* 📦 [@seed-design/figma@1.1.2](https://npmjs.com/package/@seed-design/figma/v/1.1.2)

***

## 2025.11.04 #2

@seed-design/react-drawer 패키지 배포 [`68b5eab`](https://github.com/daangn/seed-design/commit/68b5eab1849292f0ed5c286d22ac3fe1316c36c6)

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.1](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.1)

***

## 2025.11.04

(BREAKING CHANGE: TextField snippet을 다시 설치해야 합니다.) Text Field 관련 컴포넌트를 업데이트합니다. [`6af6501`](https://github.com/daangn/seed-design/commit/6af6501e132c2c1c61f4c56f644a4d29e178ab89)

* 스타일 업데이트
* size 통일 및 variant (underline) 추가
* 내부적으로 Field 컴포넌트를 사용하도록 변경하여 스타일 일관성 향상

Field Button 컴포넌트를 추가합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.1.0](https://npmjs.com/package/@seed-design/css/v/1.1.0)
* 📦 [@seed-design/react@1.1.0](https://npmjs.com/package/@seed-design/react/v/1.1.0)
* 📦 [@seed-design/react-field-button@1.0.0](https://npmjs.com/package/@seed-design/react-field-button/v/1.0.0)
* 📦 [@seed-design/react-text-field@1.1.0](https://npmjs.com/package/@seed-design/react-text-field/v/1.1.0)
* 📦 [@seed-design/rootage-artifacts@1.1.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.0)

***

Slider 컴포넌트를 추가합니다. [`a55f584`](https://github.com/daangn/seed-design/commit/a55f584860439f373b50328c654d313d7f6dbb57)

영향받는 패키지

* 📦 [@seed-design/css@1.1.0](https://npmjs.com/package/@seed-design/css/v/1.1.0)
* 📦 [@seed-design/react@1.1.0](https://npmjs.com/package/@seed-design/react/v/1.1.0)
* 📦 [@seed-design/react-field@1.0.0](https://npmjs.com/package/@seed-design/react-field/v/1.0.0)
* 📦 [@seed-design/react-slider@1.0.0](https://npmjs.com/package/@seed-design/react-slider/v/1.0.0)
* 📦 [@seed-design/rootage-artifacts@1.1.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.0)

***

Action Button 컴포넌트를 `variant=ghost`로 사용하는 경우 `fontWeight`를 사용자화할 수 있도록 업데이트합니다. [`6af6501`](https://github.com/daangn/seed-design/commit/6af6501e132c2c1c61f4c56f644a4d29e178ab89)

(BREAKING CHANGE: Error State snippet을 다시 설치해야 합니다.) Error State 스니펫에서 Action Button을 활용하도록 업데이트합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.1.0](https://npmjs.com/package/@seed-design/css/v/1.1.0)
* 📦 [@seed-design/figma@1.1.0](https://npmjs.com/package/@seed-design/figma/v/1.1.0)
* 📦 [@seed-design/react@1.1.0](https://npmjs.com/package/@seed-design/react/v/1.1.0)

***

AppScreen에 `tone` 속성을 조절해 그라데이션이 들어간 투명한 배경을 사용할 수 있습니다. [`b131282`](https://github.com/daangn/seed-design/commit/b131282c00acb631486135896bcc598989afa15c)

* AppBar에 있던 `tone` 속성을 AppScreen에서도 사용할 수 있도록 이동합니다.
* AppScreen, AppBar 둘 다 `tone` 속성을 사용할 수 있도록 합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.1.0](https://npmjs.com/package/@seed-design/css/v/1.1.0)
* 📦 [@seed-design/stackflow@1.1.0](https://npmjs.com/package/@seed-design/stackflow/v/1.1.0)

***

`@seed-design/react-drawer` 1.0.0 [`33def2d`](https://github.com/daangn/seed-design/commit/33def2d31449d484e08e1102a84cc31eb07175c4)

영향받는 패키지

* 📦 [@seed-design/react-drawer@1.0.0](https://npmjs.com/package/@seed-design/react-drawer/v/1.0.0)

***

(BREAKING CHANGE: PageBanner snippet을 다시 설치해야 합니다.) Page Banner 스니펫을 업데이트합니다. [`6af6501`](https://github.com/daangn/seed-design/commit/6af6501e132c2c1c61f4c56f644a4d29e178ab89)

* Box를 사용하여 스타일링하던 부분을 `PageBanner.Body`로 교체합니다.
* `PageBanner.TextContent`를 `PageBanner.Content`로 이름 변경합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.1.0](https://npmjs.com/package/@seed-design/css/v/1.1.0)
* 📦 [@seed-design/react@1.1.0](https://npmjs.com/package/@seed-design/react/v/1.1.0)
* 📦 [@seed-design/rootage-artifacts@1.1.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.0)

***

닫힌 HelpBubbleAnchor/HelpBubbleTrigger가 불필요하게 리렌더링되지 않도록 수정합니다. [`0c1ab6a`](https://github.com/daangn/seed-design/commit/0c1ab6abaf964e2d8041bf41ba816df19d19d027)

영향받는 패키지

* 📦 [@seed-design/react-popover@1.0.2](https://npmjs.com/package/@seed-design/react-popover/v/1.0.2)

***

(BREAKING CHANGE: BottomSheet snippet을 다시 설치해야 합니다.) BottomSheet에 드래그를 통해 닫는 기능을 추가합니다. [`33def2d`](https://github.com/daangn/seed-design/commit/33def2d31449d484e08e1102a84cc31eb07175c4)

* vaul headless 코드 기반으로 seed에 맞게 커스텀하여 구현했습니다.
* vaul과 동일한 인터페이스를 가지고 있습니다. (snap-points, fade-from-index, etc.)
* `npx @seed-design/cli@latest add ui:bottom-sheet`로 snippet을 최신화하세요.

영향받는 패키지

* 📦 [@seed-design/css@1.1.0](https://npmjs.com/package/@seed-design/css/v/1.1.0)
* 📦 [@seed-design/react@1.1.0](https://npmjs.com/package/@seed-design/react/v/1.1.0)
* 📦 [@seed-design/rootage-artifacts@1.1.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.1.0)

***

## 2025.10.27

Article에서 selection 색상에 대한 정의를 제거합니다. [`e52d6d1`](https://github.com/daangn/seed-design/commit/e52d6d161cd466b16966dc1f9bbe02abfb63921d)

영향받는 패키지

* 📦 [@seed-design/css@1.0.7](https://npmjs.com/package/@seed-design/css/v/1.0.7)

***

Tailwind Preflight 사용 시 Page Banner가 디자인 의도와 다르게 표시되는 문제를 수정합니다. [`97669bc`](https://github.com/daangn/seed-design/commit/97669bc06367ea20ba2f386eae2cdc558595532c)

영향받는 패키지

* 📦 [@seed-design/css@1.0.7](https://npmjs.com/package/@seed-design/css/v/1.0.7)

***

List Item 컴포넌트의 상하 여백을 `$dimension.x2_5`에서 `$dimension.x3`로 늘립니다. [`15ab93a`](https://github.com/daangn/seed-design/commit/15ab93afc2b4df50f23561be6b0341afba89a341)

영향받는 패키지

* 📦 [@seed-design/css@1.0.7](https://npmjs.com/package/@seed-design/css/v/1.0.7)
* 📦 [@seed-design/rootage-artifacts@1.0.6](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.6)

***

Tailwind Preflight 사용 시 Text Field의 Header/Footer와 Callout이 디자인 의도와 다르게 표시되는 문제를 수정합니다. [`50366c0`](https://github.com/daangn/seed-design/commit/50366c08d502a6fe164d9dbd9b240a82d93aae41)

영향받는 패키지

* 📦 [@seed-design/css@1.0.7](https://npmjs.com/package/@seed-design/css/v/1.0.7)

***

## 2025.10.23

Tag Group 컴포넌트를 추가합니다. Tag Group은 아이콘 및 텍스트로 이루어진 태그를 구분 기호와 함께 수평 레이아웃으로 표시하는 컴포넌트입니다. [`6aafce0`](https://github.com/daangn/seed-design/commit/6aafce022144cee1db624cc3a7c88b71ced1d553)

영향받는 패키지

* 📦 [@seed-design/css@1.0.6](https://npmjs.com/package/@seed-design/css/v/1.0.6)
* 📦 [@seed-design/figma@1.0.6](https://npmjs.com/package/@seed-design/figma/v/1.0.6)
* 📦 [@seed-design/react@1.0.6](https://npmjs.com/package/@seed-design/react/v/1.0.6)
* 📦 [@seed-design/rootage-artifacts@1.0.5](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.5)

***

AppBar의 스타일을 업데이트합니다. [`1902dfa`](https://github.com/daangn/seed-design/commit/1902dfa9d3573976285f07475fa17fa778661f8f)

* Top Navigation의 title 및 description에 `lineHeight` 값을 정의합니다. (React AppBar 컴포넌트에 반영됩니다.)
* `<Icon />` 컴포넌트를 활용하여 `<AppBarIconButton />` 내부 아이콘을 커스터마이징할 수 있도록 수정합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.0.6](https://npmjs.com/package/@seed-design/css/v/1.0.6)
* 📦 [@seed-design/rootage-artifacts@1.0.5](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.5)

***

Article 유틸리티 컴포넌트를 추가하고 Text 컴포넌트를 업데이트합니다. [`f2ddf29`](https://github.com/daangn/seed-design/commit/f2ddf294bb0dd8e78ab5cbe89b640db0843886a7)

* Article 컴포넌트는 일관된 selection 스타일 및 줄바꿈 정책을 사용할 수 있게 돕습니다.
* Text 컴포넌트에서 textDecorationLine="underline" 및 whiteSpace, userSelect prop을 지원합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.0.6](https://npmjs.com/package/@seed-design/css/v/1.0.6)
* 📦 [@seed-design/react@1.0.6](https://npmjs.com/package/@seed-design/react/v/1.0.6)

***

Switch가 checked 상태가 아닐 때 thumb 크기를 줄여 상태를 인지하기 쉽도록 합니다. enabled-disabled 상태 간 트랜지션을 추가합니다. [`4c33f07`](https://github.com/daangn/seed-design/commit/4c33f072afb6f2e3be6b2268ab27a814eec8abe8)

영향받는 패키지

* 📦 [@seed-design/css@1.0.6](https://npmjs.com/package/@seed-design/css/v/1.0.6)
* 📦 [@seed-design/rootage-artifacts@1.0.5](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.5)

***

Switch와 Switch Mark의 disabled 상태를 더 잘 구별할 수 있도록 스타일을 수정합니다. [`3df657f`](https://github.com/daangn/seed-design/commit/3df657fee8f6f919315500b0b05b2e77a509c1b5)

영향받는 패키지

* 📦 [@seed-design/css@1.0.6](https://npmjs.com/package/@seed-design/css/v/1.0.6)
* 📦 [@seed-design/rootage-artifacts@1.0.5](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.5)

***

## 2025.10.17

Text Field와 Multiline Text Field가 기본적으로 배경 색을 갖지 않도록 수정합니다. [`f1cf4cd`](https://github.com/daangn/seed-design/commit/f1cf4cdfa1c0ea90b5ca9b15bf8e42014e8336d1)

영향받는 패키지

* 📦 [@seed-design/css@1.0.5](https://npmjs.com/package/@seed-design/css/v/1.0.5)
* 📦 [@seed-design/rootage-artifacts@1.0.4](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.4)

***

`PullToRefresh.preventPull`을 활용하여 `PullToRefreshContent` 내부에서 당겨서 새로고침(PTR) 동작을 비활성화할 수 있습니다. [`687b261`](https://github.com/daangn/seed-design/commit/687b261e6b0ae7ac18457ffabe1c9c0717a73148)

영향받는 패키지

* 📦 [@seed-design/react@1.0.5](https://npmjs.com/package/@seed-design/react/v/1.0.5)
* 📦 [@seed-design/react-pull-to-refresh@1.0.1](https://npmjs.com/package/@seed-design/react-pull-to-refresh/v/1.0.1)

***

실제 기본값을 표시하도록 JSDoc을 업데이트합니다. [`687b261`](https://github.com/daangn/seed-design/commit/687b261e6b0ae7ac18457ffabe1c9c0717a73148)

영향받는 패키지

* 📦 [@seed-design/react@1.0.5](https://npmjs.com/package/@seed-design/react/v/1.0.5)

***

AppScreen에서 스와이프로 pop할 때 AppScreen이 한번 깜빡거리고 닫히는 버그를 수정합니다. [`9b91751`](https://github.com/daangn/seed-design/commit/9b91751cae33f92463a12226ae4767bfea6f377f)

영향받는 패키지

* 📦 [@seed-design/css@1.0.5](https://npmjs.com/package/@seed-design/css/v/1.0.5)
* 📦 [@seed-design/stackflow@1.0.5](https://npmjs.com/package/@seed-design/stackflow/v/1.0.5)

***

매너온도 L9 전경 및 배경 색상의 채도를 낮춥니다. [`3898183`](https://github.com/daangn/seed-design/commit/3898183f9d0b536b1340ff1d21a529e933aa7975)

영향받는 패키지

* 📦 [@seed-design/css@1.0.5](https://npmjs.com/package/@seed-design/css/v/1.0.5)
* 📦 [@seed-design/rootage-artifacts@1.0.4](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.4)

***

## 2025.10.10

closeOnInteractOutside를 false로 설정하여 Help Bubble 외부와 상호작용 시에도 닫히지 않도록 설정할 수 있습니다. (기본값: true) [`b10ff0b`](https://github.com/daangn/seed-design/commit/b10ff0b03fc0f0bed6df4313ec2c3d0507c56e20)

영향받는 패키지

* 📦 [@seed-design/react-popover@1.0.1](https://npmjs.com/package/@seed-design/react-popover/v/1.0.1)

***

## 2025.10.02

HelpBubble의 스타일을 업데이트하고, 신규 기능을 지원합니다. [`0b8a02e`](https://github.com/daangn/seed-design/commit/0b8a02e1511766986a47a971dca51ecaa2745c02)

* arrowTip이 content에서 떨어져 보이던 문제를 수정합니다.
* title과 description에서 `\n`을 줄바꿈으로 렌더링하도록 수정합니다.
* `closeOnInteractOutside`를 `false`로 설정하여 Help Bubble 외부와 상호작용 시에도 닫히지 않도록 설정할 수 있습니다. (기본값: `true`)

영향받는 패키지

* 📦 [@seed-design/css@1.0.3](https://npmjs.com/package/@seed-design/css/v/1.0.3)

***

`@seed-design/docs-mcp` 패키지 추가 [`8661d79`](https://github.com/daangn/seed-design/commit/8661d796edd8400d02132c7090e5972f370f0f4b)

Tools:

* `get_react_component`
* `get_breeze_component`
* `get_react_changelog`
* `list_react_components`
* `list_breeze_components`
* `get_react_changelog`

영향받는 패키지

* 📦 [@seed-design/docs-mcp@0.1.0](https://npmjs.com/package/@seed-design/docs-mcp/v/0.1.0)

***

Callout에 tone=positive variant를 추가합니다. [`6c6099d`](https://github.com/daangn/seed-design/commit/6c6099d0d01f5a8643d8e6580b2ff096acb2870f)

영향받는 패키지

* 📦 [@seed-design/css@1.0.3](https://npmjs.com/package/@seed-design/css/v/1.0.3)
* 📦 [@seed-design/rootage-artifacts@1.0.3](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.3)

***

Figma Codegen이 Bottom Sheet의 `hideCloseButton` prop을 사용하는 코드를 반환하도록 수정합니다. [`ac1fd00`](https://github.com/daangn/seed-design/commit/ac1fd00d865c94450edc3c010739a12666ef7b9e)

영향받는 패키지

* 📦 [@seed-design/figma@1.0.3](https://npmjs.com/package/@seed-design/figma/v/1.0.3)

***

Figma 아이콘 및 스타일 정보를 최신화합니다. [`8b07555`](https://github.com/daangn/seed-design/commit/8b07555547aaa14c549ffb735b5672ef4b0baa9c)

영향받는 패키지

* 📦 [@seed-design/figma@1.0.3](https://npmjs.com/package/@seed-design/figma/v/1.0.3)

***

## 2025.09.29

[`6d2e13d`](https://github.com/daangn/seed-design/commit/6d2e13dda9180bae958885db1abf2000dae3f969) MannerTemp 컴포넌트가 레이아웃에서 너비를 덜 차지하도록 업데이트합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.0.2](https://npmjs.com/package/@seed-design/css/v/1.0.2)
* 📦 [@seed-design/rootage-artifacts@1.0.2](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.2)

***

## 2025.09.26

[`1420b68`](https://github.com/daangn/seed-design/commit/1420b68683c0669539b04208855eb7cf6d1961db) MannerTemp 컴포넌트가 레이아웃에서 높이를 덜 차지하도록 업데이트합니다.

영향받는 패키지

* 📦 [@seed-design/css@1.0.1](https://npmjs.com/package/@seed-design/css/v/1.0.1)
* 📦 [@seed-design/rootage-artifacts@1.0.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.1)

***

## 2025.09.25

[`39a96f1`](https://github.com/daangn/seed-design/commit/39a96f1cb990c0d25605790f12bf1ab1b7060901) (**BREAKING CHANGE**: Snackbar Snippet을 다시 설치해야합니다) Snackbar 컴포넌트 변경

* Snackbar의 배경색이 다크모드에서 흰색으로 변경됩니다.
* Prefix 요소유무에 따라 여백이 변경됩니다.
* `npx @seed-design/cli@latest add ui:snackbar` 명령어로 설치하세요.

[`2cf90ac`](https://github.com/daangn/seed-design/commit/2cf90ac677e285fa313787d84f966a9d5769f37f) 🌱 SEED Design 패키지의 첫 메이저 버전을 출시합니다.

[`e038490`](https://github.com/daangn/seed-design/commit/e0384908bca49e8fccadd01ede5ffb8977d61af2) (**BREAKING CHANGE**: Snippet을 다시 설치해야 합니다.) Manner Temp, Manner Temp Badge 컴포넌트를 업데이트합니다.

* snippet 내 오타 수정
* 신규 10단계 반영
* 업데이트 가이드
  1. `@seed-design/css@latest @seed-design/react@latest` 설치
  2. `npx @seed-design/cli@latest add ui:manner-temp ui:manner-temp-badge`로 snippet 최신화
  3. 온도 범위가 변경되었으므로, `<MannerTemp level="l1" />` 혹은 `<MannerTempBadge level="l1" />`과 같이 `level`을 직접 지정하여 사용하고 있는 경우가 있는지 확인

[`4153ca5`](https://github.com/daangn/seed-design/commit/4153ca547353db4f77758e3b6de4ba011c76b9ce) HelpBubble 컴포넌트의 배경색이 다크모드에서 흰색으로 변경됩니다.

[`a7d07f0`](https://github.com/daangn/seed-design/commit/a7d07f0160f8f0976580a7eaeef750862acf9e77) (**BREAKING CHANGE**: `SwitchMark` 사용을 위해서는 Snippet을 다시 설치해야 합니다.) Switch의 토글 영역만을 정의한 Switch Mark 컴포넌트를 추가합니다.

* `npx @seed-design/cli@latest add ui:switch` 명령어로 설치하세요.

(**BREAKING CHANGE**: `ListHeader` 사용을 위해서는 Snippet을 다시 설치해야 합니다.) List Header 컴포넌트를 추가합니다.

* `npx @seed-design/cli@latest add ui:list` 명령어로 설치하세요.

영향받는 패키지

* 📦 [@seed-design/codemod@1.0.0](https://npmjs.com/package/@seed-design/codemod/v/1.0.0)
* 📦 [@seed-design/css@1.0.0](https://npmjs.com/package/@seed-design/css/v/1.0.0)
* 📦 [@seed-design/dom-utils@1.0.0](https://npmjs.com/package/@seed-design/dom-utils/v/1.0.0)
* 📦 [@seed-design/figma@1.0.0](https://npmjs.com/package/@seed-design/figma/v/1.0.0)
* 📦 [@seed-design/figma-extractor@1.0.0](https://npmjs.com/package/@seed-design/figma-extractor/v/1.0.0)
* 📦 [@seed-design/mcp@1.0.0](https://npmjs.com/package/@seed-design/mcp/v/1.0.0)
* 📦 [@seed-design/migration-index@1.0.0](https://npmjs.com/package/@seed-design/migration-index/v/1.0.0)
* 📦 [@seed-design/react@1.0.0](https://npmjs.com/package/@seed-design/react/v/1.0.0)
* 📦 [@seed-design/react-avatar@1.0.0](https://npmjs.com/package/@seed-design/react-avatar/v/1.0.0)
* 📦 [@seed-design/react-checkbox@1.0.0](https://npmjs.com/package/@seed-design/react-checkbox/v/1.0.0)
* 📦 [@seed-design/react-dialog@1.0.0](https://npmjs.com/package/@seed-design/react-dialog/v/1.0.0)
* 📦 [@seed-design/react-popover@1.0.0](https://npmjs.com/package/@seed-design/react-popover/v/1.0.0)
* 📦 [@seed-design/react-portal@1.0.0](https://npmjs.com/package/@seed-design/react-portal/v/1.0.0)
* 📦 [@seed-design/react-primitive@1.0.0](https://npmjs.com/package/@seed-design/react-primitive/v/1.0.0)
* 📦 [@seed-design/react-progress@1.0.0](https://npmjs.com/package/@seed-design/react-progress/v/1.0.0)
* 📦 [@seed-design/react-pull-to-refresh@1.0.0](https://npmjs.com/package/@seed-design/react-pull-to-refresh/v/1.0.0)
* 📦 [@seed-design/react-radio-group@1.0.0](https://npmjs.com/package/@seed-design/react-radio-group/v/1.0.0)
* 📦 [@seed-design/react-segmented-control@1.0.0](https://npmjs.com/package/@seed-design/react-segmented-control/v/1.0.0)
* 📦 [@seed-design/react-snackbar@1.0.0](https://npmjs.com/package/@seed-design/react-snackbar/v/1.0.0)
* 📦 [@seed-design/react-switch@1.0.0](https://npmjs.com/package/@seed-design/react-switch/v/1.0.0)
* 📦 [@seed-design/react-tabs@1.0.0](https://npmjs.com/package/@seed-design/react-tabs/v/1.0.0)
* 📦 [@seed-design/react-text-field@1.0.0](https://npmjs.com/package/@seed-design/react-text-field/v/1.0.0)
* 📦 [@seed-design/react-toggle@1.0.0](https://npmjs.com/package/@seed-design/react-toggle/v/1.0.0)
* 📦 [@seed-design/rootage-artifacts@1.0.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/1.0.0)
* 📦 [@seed-design/rsbuild-plugin@1.0.0](https://npmjs.com/package/@seed-design/rsbuild-plugin/v/1.0.0)
* 📦 [@seed-design/stackflow@1.0.0](https://npmjs.com/package/@seed-design/stackflow/v/1.0.0)
* 📦 [@seed-design/tailwind3-plugin@1.0.0](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/1.0.0)
* 📦 [@seed-design/tailwind4-theme@1.0.0](https://npmjs.com/package/@seed-design/tailwind4-theme/v/1.0.0)
* 📦 [@seed-design/vite-plugin@1.0.0](https://npmjs.com/package/@seed-design/vite-plugin/v/1.0.0)
* 📦 [@seed-design/webpack-plugin@1.0.0](https://npmjs.com/package/@seed-design/webpack-plugin/v/1.0.0)

***

## 2025.09.22

[`0ca19c0`](https://github.com/daangn/seed-design/commit/0ca19c062d2a3a1f264f17e8ca75b10fd4768aba) Segmented Control 컴포넌트를 업데이트합니다.

* Notification Badge를 표시하는 notification prop을 추가합니다.
* `SegmentedControlItem`의 `children`을 `string`에서 `ReactNode`로 확대합니다.
* 스타일을 업데이트합니다.

[`950c9e1`](https://github.com/daangn/seed-design/commit/950c9e1ab112396e96bd7aa74d31f1bb23b0f683) **`add` 명령어 사용 방식을 변경합니다.**

* 항목 추가

```sh
seed-design add ui:action-button breeze:animate-number # ui 이외 레지스트리의 항목도 추가할 수 있게 되었습니다.
```

* 특정 레지스트리에 있는 모든 항목 추가

```sh
seed-design add-all ui lib breeze
```

* 모든 레지스트리의 모든 항목 추가

```sh
seed-design add-all --all
```

패키지 의존성 및 스니펫 의존성 설치 방식을 최적화합니다.

[`bef65a6`](https://github.com/daangn/seed-design/commit/bef65a6852ed272f9aadf336f89518b8ace77f2e) Figma Variable & Variable Collection 정보를 최신화합니다.

[`11f5e76`](https://github.com/daangn/seed-design/commit/11f5e7699392858e6f02329070186dea08029bcd) Snackbar 헤드리스에서 닫기 버튼에 하드코딩된 `aria-label` 속성을 제거합니다.

영향받는 패키지

* 📦 [@seed-design/cli@1.0.0](https://npmjs.com/package/@seed-design/cli/v/1.0.0)
* 📦 [@seed-design/css@0.2.5](https://npmjs.com/package/@seed-design/css/v/0.2.5)
* 📦 [@seed-design/figma@0.2.5](https://npmjs.com/package/@seed-design/figma/v/0.2.5)
* 📦 [@seed-design/react-snackbar@0.0.7](https://npmjs.com/package/@seed-design/react-snackbar/v/0.0.7)
* 📦 [@seed-design/rootage-artifacts@0.1.4](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.1.4)

***

## 2025.09.12

[`afdd1ee`](https://github.com/daangn/seed-design/commit/afdd1ee825168fbf76bd5a7b718d982cda36bcc9) Figma Codegen을 위한 컴포넌트 핸들러를 업데이트합니다.

* List, Checkmark, RadioMark, Radio, Tabs, ChipTabs 지원
* Chip, Divider, HelpBubble, Switch, Checkbox 업데이트

[`8ebe8a5`](https://github.com/daangn/seed-design/commit/8ebe8a57d6ca64ec862e918d9be30dca94ec6643) Switch, Checkmark, Radio Mark의 스타일을 업데이트합니다.

* tone=neutral variant를 추가합니다.
* Switch의 thumb 크기를 조정합니다.

Checkbox와 Radio의 weight variant를 default, stronger에서 regular, bold로 수정합니다.

[`f61b80d`](https://github.com/daangn/seed-design/commit/f61b80d31f71524d29233b501be609350e5d3528) 다크 모드에서의 색상 대비 보장을 위해 시맨틱 색상을 수정하고 컴포넌트에서의 색상을 변경합니다.

* **$color.bg.warning-solid**: theme-dark에서 $color.palette.yellow-600 → $color.palette.yellow-800
* **$color.bg.warning-solid-pressed**: theme-dark에서 $color.palette.yellow-700 → $color.palette.yellow-900
* Badge, Page Banner의 tone=warning, variant=solid variant에서 전경 항목 색상 변경: $color.fg.neutral → $color.palette.static-black-alpha-900

[`ce047f5`](https://github.com/daangn/seed-design/commit/ce047f502d9ccff5cb48e94de47bfa0c5b60d29f) Tabs.Carousel의 reInit 이벤트 시 탭 인덱스가 변경되지 않는 문제를 수정합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.2.4](https://npmjs.com/package/@seed-design/css/v/0.2.4)
* 📦 [@seed-design/figma@0.2.4](https://npmjs.com/package/@seed-design/figma/v/0.2.4)
* 📦 [@seed-design/react@0.2.4](https://npmjs.com/package/@seed-design/react/v/0.2.4)
* 📦 [@seed-design/react-tabs@0.0.9](https://npmjs.com/package/@seed-design/react-tabs/v/0.0.9)
* 📦 [@seed-design/rootage-artifacts@0.1.3](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.1.3)

***

## 2025.09.08

[`a22b8b9`](https://github.com/daangn/seed-design/commit/a22b8b9b21e0072220b78c604f17b86c06251b45) ChipTabs 컴포넌트 Variant, Size 변경 및 디자인 수정

* variant `neutralOutline` 추가
* variant `brandSolid` deprecated
* size(`medium(default)` | `large`) 추가

[`5836976`](https://github.com/daangn/seed-design/commit/583697689d0c1e6d6c1695411dee4c889eac5408) text-field의 value slot이 input의 size attribute로 인해 기본적으로 width를 가지는 문제를 해결합니다.

[`12faf5a`](https://github.com/daangn/seed-design/commit/12faf5a50ea4fb109b90378d264e1301f0d61c29) List 컴포넌트를 추가하고, Checkbox 및 Radio 컴포넌트를 개선합니다.

* List 컴포넌트를 제공하여, 정보를 구조화된 목록 형태로 표시할 수 있도록 합니다.
* Checkbox와 Radio의 컨트롤 영역만을 표시하는 Checkmark와 RadioMark를 제공합니다.
* Select Box에서 컨트롤 영역을 Checkmark와 RadioMark로 교체합니다.
* RadioGroup 컴포넌트를 제공합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.2.3](https://npmjs.com/package/@seed-design/css/v/0.2.3)
* 📦 [@seed-design/react@0.2.3](https://npmjs.com/package/@seed-design/react/v/0.2.3)
* 📦 [@seed-design/rootage-artifacts@0.1.2](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.1.2)

***

## 2025.09.05

[`9d93518`](https://github.com/daangn/seed-design/commit/9d935189cff6c528338d9a00b103a7be5366eb18) Text 컴포넌트의 fontSize, lineHeight, color 속성에 string도 사용 가능하도록 변경했습니다.

[`91952e4`](https://github.com/daangn/seed-design/commit/91952e408d31d919b6c6f1a77739b04e7164e61b) `replace-semantic-stroke-color` transform을 추가합니다.

* `@seed-design/css` v0.2.0에 맞춰 `replace-semantic-stroke-color` transform을 추가합니다.
* `@seed-design/css/vars`에서 사용한 stroke 토큰을 업데이트하는 마이그레이션 코드모드를 추가합니다.

영향받는 패키지

* 📦 [@seed-design/codemod@0.0.31](https://npmjs.com/package/@seed-design/codemod/v/0.0.31)
* 📦 [@seed-design/react@0.2.2](https://npmjs.com/package/@seed-design/react/v/0.2.2)

***

## 2025.09.04

[`35984d0`](https://github.com/daangn/seed-design/commit/35984d05ac4cd9677526152e975d3daf2c4c345d) Chip 컴포넌트를 업데이트합니다.

* 아이콘에 트랜지션 효과가 적용되지 않던 현상을 수정합니다.
* Button, Toggle 등 사용되는 방식에 따라 적절한 data prop을 받도록 수정합니다.

[`c5bed96`](https://github.com/daangn/seed-design/commit/c5bed9674a1c036bd0c84acf9e81ebed72215b79) Divider 컴포넌트가 `$color.stroke.neutral-muted` 색상을 기본값으로 사용하도록 수정합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.2.1](https://npmjs.com/package/@seed-design/css/v/0.2.1)
* 📦 [@seed-design/react@0.2.1](https://npmjs.com/package/@seed-design/react/v/0.2.1)
* 📦 [@seed-design/rootage-artifacts@0.1.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.1.1)

***

## 2025.09.03

[`8448880`](https://github.com/daangn/seed-design/commit/8448880aa424edcd3af8e78a5c3ff5a0f142ae8d) 시맨틱 stroke 컬러 토큰을 업데이트합니다.

**이름이 변경되는 stroke 토큰**

* [Color Role 규칙](https://seed-design.io/docs/foundation/color/color-role)에 맞춰 일관적인 토큰 이름을 유지할 수 있도록 업데이트합니다.
* 이름이 변경되는 stroke 토큰을 사용하고 있는 경우, 간단한 Find & Replace 마이그레이션이 필요합니다.

| 기존                              | 신규                              | 비고                  |
| ------------------------------- | ------------------------------- | ------------------- |
| **$color.stroke.neutral-muted** | $color.stroke.neutral-subtle    | 가장 먼저 마이그레이션해야 합니다. |
| $color.stroke.on-image          | $color.stroke.neutral-subtle    |                     |
| $color.stroke.neutral           | **$color.stroke.neutral-muted** |                     |
| $color.stroke.field-focused     | $color.stroke.neutral-contrast  |                     |
| $color.stroke.control           | $color.stroke.neutral-weak      |                     |
| $color.stroke.field             | $color.stroke.neutral-weak      |                     |
| $color.stroke.brand             | $color.stroke.brand-weak        |                     |
| $color.stroke.positive          | $color.stroke.positive-weak     |                     |
| $color.stroke.informative       | $color.stroke.informative-weak  |                     |
| $color.stroke.warning           | $color.stroke.warning-weak      |                     |
| $color.stroke.critical          | $color.stroke.critical-weak     |                     |

**색상이 변경되는 stroke 토큰 (마이그레이션 불필요)**

`$color.stroke.neutral-contrast` (이름 변경 전 `$color.stroke.field-focused`)

모든 theme mode에서 `$color.palette.gray-800` → `$color.palette.gray-1000`로 변경되었습니다.

**신규 stroke 토큰 (마이그레이션 불필요)**

| 신규                              |
| ------------------------------- |
| $color.stroke.neutral-solid     |
| $color.stroke.brand-solid       |
| $color.stroke.positive-solid    |
| $color.stroke.informative-solid |
| $color.stroke.warning-solid     |
| $color.stroke.critical-solid    |

영향받는 패키지

* 📦 [@seed-design/css@0.2.0](https://npmjs.com/package/@seed-design/css/v/0.2.0)
* 📦 [@seed-design/migration-index@0.0.31](https://npmjs.com/package/@seed-design/migration-index/v/0.0.31)
* 📦 [@seed-design/rootage-artifacts@0.2.0](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.2.0)
* 📦 [@seed-design/tailwind3-plugin@0.2.0](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/0.2.0)
* 📦 [@seed-design/tailwind4-theme@0.2.0](https://npmjs.com/package/@seed-design/tailwind4-theme/v/0.2.0)

***

## 2025.08.28

[`c51a261`](https://github.com/daangn/seed-design/commit/c51a261858087bc4a7a572af52bd0ebcacc69d49) font-size, line-height 토큰에 static variant를 추가합니다.

* `--seed-font-size-t1-static` \~ `--seed-font-size-t10-static`
* `--seed-line-height-t1-static` \~ `--seed-line-height-t10-static`

[`5f2ee39`](https://github.com/daangn/seed-design/commit/5f2ee39374372be285e6679e3aa08b822b0ef938) CSS 최적화 도구(e.g. cssnano)가 CSS variable로 정의된 longhand declaration을 병합하지 않도록 합니다. (workaround, [관련 issue](https://github.com/cssnano/cssnano/issues/1472))

[`8299ba9`](https://github.com/daangn/seed-design/commit/8299ba91f2f77ee3a226b8059d56a7c1c2317232) Snackbar 컴포넌트를 업데이트합니다.

* root 영역에 maxWidth 스펙을 추가합니다.
* `pauseOnInteraction`의 기본값을 `false`에서 `true`로 변경합니다.

[`d497166`](https://github.com/daangn/seed-design/commit/d497166f648952a68bfef445a39f9822f2cfa44d) 플랫폼별 조건부 폰트 스케일링 제한 (iOS: 135%, Android: 150%) 적용

* CSS 변수 `--seed-{font-size|line-height}-limit-{min|max}` 도입
* 빌드 타임 basePx 계산을 런타임 static 토큰 참조로 대체
* global.ts에 폰트 스케일링 변수 통합

[`9a3c76a`](https://github.com/daangn/seed-design/commit/9a3c76a74eec244736f8bc7807d3629b4d5328c5) Divider 컴포넌트를 업데이트합니다.

* `orientation`을 지정할 수 있습니다.
* Divider를 `li`로 렌더링하여 `ol`, `ul` 내부에서 사용할 수 있습니다.
* Divider를 `div` 또는 `li`로 렌더링하는 경우에도 `role="separator"`를 지정하여 스크린 리더가 Divider를 읽도록 할 수 있습니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.15](https://npmjs.com/package/@seed-design/css/v/0.1.15)
* 📦 [@seed-design/react@0.1.15](https://npmjs.com/package/@seed-design/react/v/0.1.15)
* 📦 [@seed-design/react-snackbar@0.0.6](https://npmjs.com/package/@seed-design/react-snackbar/v/0.0.6)
* 📦 [@seed-design/rootage-artifacts@0.0.6](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.0.6)
* 📦 [@seed-design/tailwind3-plugin@0.1.15](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/0.1.15)
* 📦 [@seed-design/tailwind4-theme@0.1.15](https://npmjs.com/package/@seed-design/tailwind4-theme/v/0.1.15)

***

## 2025.08.22

[`f806356`](https://github.com/daangn/seed-design/commit/f806356f0ca5d419647c9672426e14ca3350f479) Page Banner 컴포넌트를 추가합니다. Inline Banner 컴포넌트를 deprecate합니다.

* Inline Banner 컴포넌트 대비 모든 `tone`에서 모든 `variant`를 지원하며, 내부 Button의 충분한 터치 영역을 보장합니다.

```tsx
<PageBanner
  tone="informative"
  variant="weak"
  description="사업자 정보를 등록해주세요."
  suffix={
    <PageBannerButton asChild>
      <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
        새 탭에서 열기
      </a>
    </PageBannerButton>
  }
/>
```

시맨틱 색상 토큰을 추가하고 수정합니다.

* `$color.bg.positive-solid-pressed`: theme-dark에서 `$color.palette.green-500` → `$color.palette.green-600`
* `$color.bg.warning-solid-pressed` 추가

[`1982494`](https://github.com/daangn/seed-design/commit/198249432e62bcc693c469aa233fabe6a6b23532) Badge 컴포넌트를 업데이트합니다.

* `tone=warning` variant를 추가합니다.
* `maxWidth` 스펙을 추가합니다.

신규 시맨틱 색상 토큰을 추가합니다.

* `$color.fg.warning`
* `$color.stroke.warning`
* `$color.fg.brand-contrast`
* `$color.bg.brand-weak`
* `$color.bg.brand-weak-pressed`

영향받는 패키지

* 📦 [@seed-design/css@0.1.14](https://npmjs.com/package/@seed-design/css/v/0.1.14)
* 📦 [@seed-design/figma@0.1.14](https://npmjs.com/package/@seed-design/figma/v/0.1.14)
* 📦 [@seed-design/react@0.1.14](https://npmjs.com/package/@seed-design/react/v/0.1.14)
* 📦 [@seed-design/rootage-artifacts@0.0.5](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.0.5)
* 📦 [@seed-design/tailwind3-plugin@0.1.14](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/0.1.14)
* 📦 [@seed-design/tailwind4-theme@0.1.14](https://npmjs.com/package/@seed-design/tailwind4-theme/v/0.1.14)

***

## 2025.08.20

[`0be9b00`](https://github.com/daangn/seed-design/commit/0be9b00baad2502eb4ea32e641c5c1d8c3f3eb4c) Avatar, Avatar Stack 컴포넌트에 `size=108` variant를 추가합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.13](https://npmjs.com/package/@seed-design/css/v/0.1.13)
* 📦 [@seed-design/rootage-artifacts@0.0.4](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.0.4)

***

## 2025.08.12 #2

[`62094b6`](https://github.com/daangn/seed-design/commit/62094b6e6d445edd1fbd7085f80a8e1cc4da03bf) Help Bubble의 스타일 문제를 수정합니다.

* `placement=left-*` / `placement=right-*`에서 arrow가 content와 떨어져 표시되는 문제를 수정합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.12](https://npmjs.com/package/@seed-design/css/v/0.1.12)
* 📦 [@seed-design/react@0.1.12](https://npmjs.com/package/@seed-design/react/v/0.1.12)
* 📦 [@seed-design/react-popover@0.0.8](https://npmjs.com/package/@seed-design/react-popover/v/0.0.8)

***

## 2025.08.12

[`9993e0e`](https://github.com/daangn/seed-design/commit/9993e0ea799258e88a5d81777ab7785e21cafa97) 레이아웃 컴포넌트를 사용할 때 `flexGrow`, `flexShrink`, `flexWrap`에도 `true`를 사용할 수 있도록 수정합니다.

Figma 레이어가 이미지 Fill을 가지고 있는 경우 `<img />` 요소를 prepend합니다.

영향받는 패키지

* 📦 [@seed-design/figma@0.1.11](https://npmjs.com/package/@seed-design/figma/v/0.1.11)
* 📦 [@seed-design/react@0.1.11](https://npmjs.com/package/@seed-design/react/v/0.1.11)

***

## 2025.08.11

[`ef91c21`](https://github.com/daangn/seed-design/commit/ef91c21da109e74405fc57f0fd0246af63dcd1a9) Bottom Sheet의 스타일 문제를 수정해요.

* Close Button에 브라우저 기본 스타일이 표시되는 문제를 수정해요.

[`aa40f66`](https://github.com/daangn/seed-design/commit/aa40f66e33a6d050d4728cce4d749f56a79e7975) Figma 컴포넌트 정보 및 핸들러를 최신화하고 codegen을 업데이트합니다.

* Instance에 오버라이드한 내용이 있는 경우 주석으로 알립니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.10](https://npmjs.com/package/@seed-design/css/v/0.1.10)
* 📦 [@seed-design/figma@0.1.10](https://npmjs.com/package/@seed-design/figma/v/0.1.10)

***

## 2025.08.07

[`5a025b7`](https://github.com/daangn/seed-design/commit/5a025b7b12b7d288bc07dbea88e26cfb41d5b661) Switch 컴포넌트를 업데이트합니다.

* size: medium → 32, small → 16으로 rename합니다.
  * (React) `size="medium"`으로 `32`, `size="small"`로 `16`을 사용할 수 있습니다. (deprecated)
* size: 24를 추가합니다.
* 모든 size에 대해 레이블 스타일을 추가합니다. (기존: small에만 존재)

[`f9379e0`](https://github.com/daangn/seed-design/commit/f9379e09d64d047136383ca4b16a704a5d82268e) Figma 컴포넌트 핸들러 정보를 최신화하고 정확한 prop을 생성하도록 수정합니다.

* Chip, Progress Circle, Switch 컴포넌트 핸들러를 업데이트합니다.
* `grow` 대신 `flexGrow`가 생성되도록, `borderWidth`가 `string`으로 생성되도록 수정합니다.

[`ac35731`](https://github.com/daangn/seed-design/commit/ac35731de335a06b4aa2f87bf03ebce002e61e2b) Chip.Root `position: relative` 속성 추가

* 이제 Chip.Toggle을 사용해도 예상치 못한 스크롤이 발생하지 않습니다.

[`f9041e9`](https://github.com/daangn/seed-design/commit/f9041e9cf4ee90acef8e52be1dc483d01438e0e2) `CheckSelectBox`, `RadioSelectBox`의 `label`, `description` 영역을 수정합니다.

* `span` 대신 `div`를 렌더링합니다.
* 기본적으로 grow하도록 만들어 Badge 등 추가 요소를 넣기 쉽게 만듭니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.9](https://npmjs.com/package/@seed-design/css/v/0.1.9)
* 📦 [@seed-design/figma@0.1.9](https://npmjs.com/package/@seed-design/figma/v/0.1.9)
* 📦 [@seed-design/react@0.1.9](https://npmjs.com/package/@seed-design/react/v/0.1.9)
* 📦 [@seed-design/rootage-artifacts@0.0.3](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.0.3)

***

## 2025.08.04

[`2e2cc53`](https://github.com/daangn/seed-design/commit/2e2cc530648f5d10432f23fa8169e3c4225f6315) - Figma 컴포넌트 핸들러 및 스타일 정보를 최신화합니다.

* normalize 과정에서 그라디언트 정보를 포함하도록 수정합니다.

[`609b8f3`](https://github.com/daangn/seed-design/commit/609b8f3b69bc98f0b3a2c971f17409559811f376) iOS의 `더 큰 텍스트` 기능에 제한을 둡니다.

* iOS는 7단계(XS \~ XXXL)의 텍스트 크기 조절 이외에도, 보다 더 큰 텍스트를 위한 `더 큰 텍스트` 기능을 제공합니다.
* iOS 네이티브에서는 `더 큰 텍스트`의 UI 레이아웃 대응이 어렵다고 결정하여, XXXL(135%) 이상의 텍스트 크기 조절을 지원하지 않습니다.
* 웹뷰도 iOS와 동일한 제한을 위한 기능이 추가되었습니다.

[`99e7f2c`](https://github.com/daangn/seed-design/commit/99e7f2c693ac2a4d433791719b25d4818bc41170) figma-extractor (Figma REST API 호출 결과를 파일로 저장하는 CLI 툴) 설정 파일 작성 방법을 개선합니다.

* 사용자가 직접 API 호출부터 파일 저장까지의 파이프라인을 작성할 수 있습니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.8](https://npmjs.com/package/@seed-design/css/v/0.1.8)
* 📦 [@seed-design/figma@0.1.8](https://npmjs.com/package/@seed-design/figma/v/0.1.8)
* 📦 [@seed-design/figma-extractor@0.0.5](https://npmjs.com/package/@seed-design/figma-extractor/v/0.0.5)

***

## 2025.08.01

[`4afe80b`](https://github.com/daangn/seed-design/commit/4afe80b81e6845ec917426039ef8d7817e67e7ec) MultilineTextField의 스타일 문제를 수정합니다.

* 스크롤바가 요소 끝에 표시되도록 수정합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.7](https://npmjs.com/package/@seed-design/css/v/0.1.7)

***

## 2025.07.31

[`235147d`](https://github.com/daangn/seed-design/commit/235147def530d1d2ab6441f0e5b965efb1d67e43) action-button: `size=medium, layout=withText` variant에서 gap을 1 → 1.5로 수정합니다.

[`3c13ad7`](https://github.com/daangn/seed-design/commit/3c13ad76a32bbf909b44f4ffbca1277d6d0f1d7a) `highlight-magic-pressed` 그라디언트 토큰을 추가합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.6](https://npmjs.com/package/@seed-design/css/v/0.1.6)
* 📦 [@seed-design/rootage-artifacts@0.0.2](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.0.2)
* 📦 [@seed-design/tailwind3-plugin@0.1.6](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/0.1.6)
* 📦 [@seed-design/tailwind4-theme@0.1.6](https://npmjs.com/package/@seed-design/tailwind4-theme/v/0.1.6)

***

## 2025.07.29

[`a059fb0`](https://github.com/daangn/seed-design/commit/a059fb02b051fc4ca8fd0c79c5706dec90448097) Menu Sheet 컴포넌트를 추가하는 동시에 Action Sheet과 Extended Action Sheet 컴포넌트를 deprecate합니다.

* [Menu Sheet React 문서](https://seed-design.io/react/components/menu-sheet)
* Menu Sheet는 기존 Extended Action Sheet의 모든 기능을 포함하는 동시에, `labelAlign` prop으로 `MenuSheetItem`를 `left` 또는 `center`로 정렬할 수 있습니다.

[`3889eb6`](https://github.com/daangn/seed-design/commit/3889eb6c82915c6ae4df05c815841f0ad54d27a6) Inline Banner의 스타일 문제를 수정합니다.

* `title`과 `description`이 `inline-flex`로 레이아웃되던 문제를 해결합니다.
* `title`과 `description` 간의 간격을 조정합니다.
* 닫기 버튼(Dismissible)과 `suffix icon`, `link label`이 상단으로 레이아웃되던 문제를 해결합니다.

Callout의 스타일 문제를 수정합니다.

* `title`과 `description` 간의 간격을 조정합니다.

Chip의 스타일 문제를 수정합니다.

* `Chip.Button`의 `label`이 의도한 글꼴로 표시되도록 수정합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.5](https://npmjs.com/package/@seed-design/css/v/0.1.5)
* 📦 [@seed-design/react@0.1.5](https://npmjs.com/package/@seed-design/react/v/0.1.5)
* 📦 [@seed-design/rootage-artifacts@0.0.1](https://npmjs.com/package/@seed-design/rootage-artifacts/v/0.0.1)

***

## 2025.07.28

[`9b271d6`](https://github.com/daangn/seed-design/commit/9b271d613f2067c8cc8cbc517cd1d334f4e04e92) snippet의 deprecated 여부를 기록합니다. cli add 명령 실행 시 snippet 목록에서 deprecate 여부를 표시하고, `--all`로 모든 스니펫 추가 시 기본적으로 deprecated snippet을 제외합니다.

```sh
seed-design add --all # deprecated snippet 제외
```

```sh
seed-design add --all --include-deprecated # deprecated snippet 포함
```

영향받는 패키지

* 📦 [@seed-design/cli@0.0.3](https://npmjs.com/package/@seed-design/cli/v/0.0.3)

***

## 2025.07.23

[`0ffcd48`](https://github.com/daangn/seed-design/commit/0ffcd481d3be71cff6a7cfea6985a7c063086ff7) Chip 컴포넌트가 추가되고, ActionChip, ControlChip 컴포넌트가 Deprecated 되었습니다.

* [Chip 컴포넌트](https://seed-design.io/react/components/chip)
* Chip 컴포넌트는 버튼과 토글 컴포넌트를 모두 포함하고 있습니다.

[`56e03ca`](https://github.com/daangn/seed-design/commit/56e03cad0841e4a77e284da12d63e81d412e84b9) Layout 컴포넌트 `pb`, `pt`, `paddingBottom`, `paddingTop` 속성에 `safeArea` 값을 지정할 수 있도록 지원

```tsx
<Box pt="safeArea" paddingTop="safeArea" />
<Box pb="safeArea" paddingBottom="safeArea" />
```

영향받는 패키지

* 📦 [@seed-design/css@0.1.4](https://npmjs.com/package/@seed-design/css/v/0.1.4)
* 📦 [@seed-design/react@0.1.4](https://npmjs.com/package/@seed-design/react/v/0.1.4)

***

## 2025.07.11

[`cdc0930`](https://github.com/daangn/seed-design/commit/cdc09303deb05db51455c779b72c148b975014c5) `@seed-design/stackflow` 백스와이프 애니메이션 개선

* iOS 스타일 화면 전환 애니메이션의 지속 시간과 타이밍 함수가 `300ms`에서 `350ms`로 조정되어 더 부드러운 전환 효과를 제공합니다.
* 스와이프 백 제스처 시 애니메이션이 보다 자연스럽고 일관되게 표현됩니다.
* 스와이프 백 종료 시 CSS 변수를 활용해 전환 상태를 명확히 하여 사용자 경험이 개선되었습니다.

[`946faf7`](https://github.com/daangn/seed-design/commit/946faf79c824b435da30e4cf6162b7ba4dba49ec) 그라디언트 토큰 추가 및 변경

* `fade-layer-floating`, `fade-layer-default` 토큰이 추가되었습니다.
* `$gradient.shimmer-magic` 토큰 stop color가 변경되었습니다.

[`71c58fd`](https://github.com/daangn/seed-design/commit/71c58fd22901d6296f09a852082839e1b2888e31) iOS Font Scaling

* iOS 기기에서 시스템 폰트 크기 설정에 따라 동적으로 폰트 크기와 줄 높이를 조정하는 폰트 스케일링 옵션이 추가되었습니다.
* 플러그인(webpack, vite, rsbuild)에서 `fontScaling` 옵션을 통해 폰트 스케일링 기능을 활성화할 수 있습니다.
* `data-seed-font-scaling='enabled'` 일 때, 폰트 크기를 조정합니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.3](https://npmjs.com/package/@seed-design/css/v/0.1.3)
* 📦 [@seed-design/rsbuild-plugin@0.1.3](https://npmjs.com/package/@seed-design/rsbuild-plugin/v/0.1.3)
* 📦 [@seed-design/stackflow@0.1.3](https://npmjs.com/package/@seed-design/stackflow/v/0.1.3)
* 📦 [@seed-design/tailwind3-plugin@0.1.3](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/0.1.3)
* 📦 [@seed-design/tailwind4-theme@0.1.3](https://npmjs.com/package/@seed-design/tailwind4-theme/v/0.1.3)
* 📦 [@seed-design/vite-plugin@0.1.3](https://npmjs.com/package/@seed-design/vite-plugin/v/0.1.3)
* 📦 [@seed-design/webpack-plugin@0.1.3](https://npmjs.com/package/@seed-design/webpack-plugin/v/0.1.3)

***

## 2025.07.01

그라디언트 토큰 및 AI 관련 컴포넌트 업데이트

* AI용 magic 테마와 중립적인 테마의 다양한 그라디언트(Shimmer, Fade, Glow, Highlight) 컬러 토큰이 추가되었습니다.
* `<Callout />` 컴포넌트의 `tone="magic"` 스타일이 변경되었습니다.
* `<Skeleton />` 컴포넌트에 `tone` prop이 추가되어 `neutral`과 `magic` 옵션을 제공합니다.
* 모든 Layout 컴포넌트(Box, VStack, HStack 등)에서 `bg/bgGradient` 속성을 통해 그라디언트를 지정할 수 있습니다.
* `<Text />` 컴포넌트에 `textDecorationLine` 옵션이 추가되었습니다.
* `<HelpBubble />` 컴포넌트의 arrow가 상위 요소의 font-size에 영향받지 않도록 수정되었습니다.
* `<BottomSheet />` 컴포넌트의 description font-size가 t6에서 t5로 변경되었습니다.
* 기존 보라색 계열 magic 관련 시맨틱 색상들(`fg/magic`, `fg/magic-contrast`, `bg/magic-solid`)이 삭제되었습니다.

영향받는 패키지

* 📦 [@seed-design/css@0.1.0](https://npmjs.com/package/@seed-design/css/v/0.1.0)
* 📦 [@seed-design/figma@0.1.0](https://npmjs.com/package/@seed-design/figma/v/0.1.0)
* 📦 [@seed-design/mcp@0.1.0](https://npmjs.com/package/@seed-design/mcp/v/0.1.0)
* 📦 [@seed-design/react@0.1.0](https://npmjs.com/package/@seed-design/react/v/0.1.0)
* 📦 [@seed-design/rsbuild-plugin@0.1.0](https://npmjs.com/package/@seed-design/rsbuild-plugin/v/0.1.0)
* 📦 [@seed-design/stackflow@0.1.0](https://npmjs.com/package/@seed-design/stackflow/v/0.1.0)
* 📦 [@seed-design/vite-plugin@0.1.0](https://npmjs.com/package/@seed-design/vite-plugin/v/0.1.0)
* 📦 [@seed-design/webpack-plugin@0.1.0](https://npmjs.com/package/@seed-design/webpack-plugin/v/0.1.0)

***

## 2025.06.24

Alpha 컬러 업데이트

* White와 black의 alpha 색상이 새롭게 추가되었습니다. (staticWhiteAlpha50 \~ staticWhiteAlpha1000, staticBlackAlpha100 \~ staticBlackAlpha1000)
* stroke 색상에도 alpha 색상이 추가되었습니다.
* 기존 alpha 색상 값들의 매핑이 변경되었습니다:
  * `staticBlackAlpha500` → `staticBlackAlpha700`
  * `staticBlackAlpha200` → `staticBlackAlpha500`
  * `staticBlackAlpha50` → `staticBlackAlpha200`
  * `staticWhiteAlpha200` → `staticWhiteAlpha300`
* `npx @seed-design/codemod@latest replace-alpha-color` 코드모드를 제공합니다.

영향받는 패키지

* 📦 [@seed-design/codemod@0.0.28](https://npmjs.com/package/@seed-design/codemod/v/0.0.28)
* 📦 [@seed-design/css@0.0.39](https://npmjs.com/package/@seed-design/css/v/0.0.39)
* 📦 [@seed-design/figma@0.0.39](https://npmjs.com/package/@seed-design/figma/v/0.0.39)
* 📦 [@seed-design/mcp@0.0.39](https://npmjs.com/package/@seed-design/mcp/v/0.0.39)
* 📦 [@seed-design/migration-index@0.0.28](https://npmjs.com/package/@seed-design/migration-index/v/0.0.28)
* 📦 [@seed-design/react@0.0.39](https://npmjs.com/package/@seed-design/react/v/0.0.39)
* 📦 [@seed-design/rsbuild-plugin@0.0.39](https://npmjs.com/package/@seed-design/rsbuild-plugin/v/0.0.39)
* 📦 [@seed-design/stackflow@0.0.39](https://npmjs.com/package/@seed-design/stackflow/v/0.0.39)
* 📦 [@seed-design/tailwind3-plugin@0.0.39](https://npmjs.com/package/@seed-design/tailwind3-plugin/v/0.0.39)
* 📦 [@seed-design/tailwind4-theme@0.0.39](https://npmjs.com/package/@seed-design/tailwind4-theme/v/0.0.39)
* 📦 [@seed-design/vite-plugin@0.0.39](https://npmjs.com/package/@seed-design/vite-plugin/v/0.0.39)
* 📦 [@seed-design/webpack-plugin@0.0.39](https://npmjs.com/package/@seed-design/webpack-plugin/v/0.0.39)

***


---

file: updates/v3-improvements.mdx

# V3 Improvements

V2(Sprout) 대비 V3에서 개선된 점을 소개합니다.



## Concepts

### Composition

V3에서는 컴포넌트를 조합하여 복잡한 UI를 구성하는 방법과 원칙을 제공합니다.
as Prop, asChild Prop, 슬롯 등을 통해 컴포넌트를 조합할 수 있습니다.

[Composition](/react/components/concepts/composition) 페이지에서 자세히 설명합니다.

```tsx title="Composition"
// Text 컴포넌트는 기본적으로 span 태그를 사용하지만, as Prop을 사용해 다른 태그로 변경할 수 있습니다.
<Text as="p">단락 텍스트</Text>
<Text as="span">인라인 텍스트</Text>
<Text as="h3">제목 텍스트</Text>

// ContextualFloatingButton은 기본적으로 button 태그를 사용하지만, asChild를 사용해 anchor로 변경할 수 있습니다.
<ContextualFloatingButton asChild>
  <a href="/create" aria-label="Create">
    <Icon svg={<IconPlusLine />} />
  </a>
</ContextualFloatingButton>
```

### Snippet

V3에서는 자주 사용되는 UI 패턴을 스니펫으로 제공하여 개발 효율성을 높이는 방법을 제공합니다.
Compound Components 패턴과 Snippet의 조합을 통해 복잡한 컴포넌트를 쉽게 구현할 수 있습니다.

[Snippet](/react/components/concepts/snippet) 페이지에서 자세히 설명합니다.

```tsx title="Snippet"
<Checkbox.Root>
  <Checkbox.Control>
    <Checkbox.Indicator />
  </Checkbox.Control>
  <Checkbox.Label>Click me</Checkbox.Label>
  <Checkbox.HiddenInput />
</Checkbox.Root>
```

## Icon Usage

컴포넌트 안에서 아이콘을 사용하는 방식이 달라졌습니다.

[Icon Composition](/react/components/iconography/composition) 페이지에서 자세히 설명합니다.

```tsx title="Icon Usage"
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon, SuffixIcon, Icon } from "@seed-design/react"; // [!code highlight]
import { ActionButton } from "seed-design/ui/action-button";

export default function ActionButtonPrefixIcon() {
  return (
    <>
      <BoxButton prefix={<IconPlusFill />} /> {/* Sprout */}
      <BoxButton suffix={<IconPlusFill />} /> {/* Sprout */}
      <ActionButton>
        <PrefixIcon svg={<IconPlusFill />} />
        Prefix Icon
      </ActionButton>
      <ActionButton>
        <SuffixIcon svg={<IconPlusFill />} />
        Suffix Icon
      </ActionButton>
      <ActionButton layout="iconOnly" aria-label="Add">
        <Icon svg={<IconPlusFill />} />
      </ActionButton>
    </>
  );
}
```

## Components

### Avatar 업데이트

자세한 사용법은 [Avatar](/react/components/avatar) 문서를 참고해주세요.

```tsx
// [!code --]
import { Avatar } from "@daangn/sprout-components-avatar";
// [!code ++]
import { Avatar } from "seed-design/ui/avatar"; // snippet 제공
```

* size 옵션 재구성
* 이미지 로딩 실패 시 대체 콘텐츠를 위한 `fallback` prop 제공

<ComponentExample name="react/avatar/preview">
  ```tsx
  import { Box, Flex } from "@seed-design/react";
  import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function AvatarPreview() {
    return (
      <Flex gap="x4">
        <Avatar
          size="80"
          badgeMask="circle"
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        >
          <AvatarBadge>
            <Box borderRadius="full" bg="palette.green600" width="x6" height="x6" />
          </AvatarBadge>
        </Avatar>
        <Avatar size="80" src={undefined} fallback={<IdentityPlaceholder />} />
      </Flex>
    );
  }
  ```
</ComponentExample>

### AlertDialog 업데이트

V2의 Dialog와 AlertDialog는 V3에서 [AlertDialog](/react/components/alert-dialog)로 제공돼요.

```tsx
// [!code --]
import {
  Dialog,
  DialogContainer,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@daangn/sprout-components-dialog";
// [!code ++]
import {
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "seed-design/ui/alert-dialog"; // snippet 제공
```

* 기존에 `DialogHeader`로만 구조화되어 있던 부분을 세분화 (`AlertDialogContent`, `AlertDialogHeader`, `AlertDialogFooter`)
* 액션에 관한 슬롯 추가 `AlertDialogAction`
* `AlertDialogTrigger`로 명시적으로 trigger를 제공하거나 혹은 `open` prop을 통해 외부에서 제어 가능

<ComponentExample name="react/alert-dialog/preview">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogSingle = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton variant="neutralSolid">열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>주의</AlertDialogTitle>
            <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogSingle;
  ```
</ComponentExample>

### 버튼 업데이트

#### BoxButton, TextButton

V2의 [BoxButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-boxbutton--docs)과 [TextButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-textbutton--docs)은 V3에서 [**ActionButton**](/react/components/action-button)으로 변경되었어요.

```tsx
// [!code --]
import { BoxButton, TextButton } from "@daangn/sprout-components-button";
// [!code ++]
import { ActionButton } from "seed-design/ui/action-button"; // snippet 제공
```

* size 및 variant 옵션 재구성
  * `xlarge` size 제거
  * `Primary` → `Neutral Solid`
  * `Primary low` → `Neutral Weak`
  * `Secondary` → `Neutral Weak`
  * `Danger` → `Critical Solid`
  * TextButton을 대체하는 `ghost` variant 추가
* `layout` prop 추가 (`withText`, `iconOnly`)
* `prefix`, `suffix`: 아이콘 배치 방식이 `children`으로 통합

<ComponentExample name="react/action-button/preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonPreview() {
    return <ActionButton>라벨</ActionButton>;
  }
  ```
</ComponentExample>

#### BoxToggleButton, CapsuleToggleButton

V2의 [BoxToggleButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-boxtogglebutton--docs), [CapsuleToggleButton](https://sprout-storybook.vercel.app/?path=/docs/components-buttons-capsuletogglebutton--docs)은 V3에서 각각 [**ToggleButton**](/react/components/toggle-button), [**ReactionButton**](/react/components/reaction-button)으로 변경되었어요.

```tsx
// [!code --]
import {
  BoxToggleButton,
  CapsuleToggleButton,
} from "@daangn/sprout-components-button";
// [!code ++]
import { ToggleButton } from "seed-design/ui/toggle-button"; // snippet 제공
// [!code ++]
import { ReactionButton } from "seed-design/ui/reaction-button"; // snippet 제공
```

* size 옵션 재구성

<ComponentExample name="react/toggle-button/preview">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonPreview() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

<ComponentExample name="react/reaction-button/preview">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Count, PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonPreview() {
    return (
      <ReactionButton>
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        도움돼요
        <Count>1</Count>
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

### Chip 업데이트

V2에서는 `@daangn/sprout-components-chips` 패키지에서 여러 칩 관련 컴포넌트들을 제공했어요. V3에서는 이러한 컴포넌트들이 목적에 따라 Chip으로 재구성되었어요.

* `layout` prop 추가 (`withText`, `iconOnly`)
* `prefix`, `suffix` prop 대신 `children`으로 아이콘 전달
* `count` prop 제거

#### ChipButton

V2의 [ChipButton](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipbutton--docs)은 V3에서 [**Chip.Button**](/react/components/chip)으로 변경되었어요.

```tsx
// [!code --]
import { ChipButton } from "@daangn/sprout-components-chips";
// [!code ++]
import { Chip } from "seed-design/ui/chip"; // snippet 제공
```

<ComponentExample name="react/chip/preview">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { Chip } from "seed-design/ui/chip";

  export default function ChipPreview() {
    return (
      <VStack gap="x3" align="center">
        <HStack gap="x2">
          <Chip.Button>
            <Chip.Label>Button Chip</Chip.Label>
          </Chip.Button>
          <Chip.Toggle>
            <Chip.Label>Toggle Chip</Chip.Label>
          </Chip.Toggle>
        </HStack>
        <Chip.RadioRoot defaultValue="option1" aria-label="Options">
          <HStack gap="x2">
            <Chip.RadioItem value="option1">
              <Chip.Label>Radio Chip 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2">
              <Chip.Label>Radio Chip 2</Chip.Label>
            </Chip.RadioItem>
          </HStack>
        </Chip.RadioRoot>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### ChipToggleButton

V2의 [ChipToggleButton](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chiptogglebutton--docs)은 V3에서 [**Chip.Toggle**](/react/components/chip)으로 변경되었어요.

```tsx
// [!code --]
import { ChipToggleButton } from "@daangn/sprout-components-chips";
// [!code ++]
import { Chip } from "seed-design/ui/chip"; // snippet 제공
```

#### ChipRadio, ChipRadioGroup

V2의 [ChipRadio, ChipRadioGroup](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipradiogroup--docs)는 V3에서 [**Chip.RadioRoot**과 **Chip.RadioItem**](/react/components/control-chip)으로 변경되었어요.

```tsx
// [!code --]
import {
  ChipToggleButton,
  ChipRadio,
  ChipRadioGroup,
} from "@daangn/sprout-components-chips";
// [!code ++]
import { Chip } from "seed-design/ui/chip"; // snippet 제공
```

#### ChipFilter

V2의 [ChipFilter](https://sprout-storybook.vercel.app/?path=/docs/components-chips-chipfilter--docs)는 V3에서 제거되었어요. 필요한 경우 Chip.Button이나 Chip.Toggle로 대체할 수 있어요.

### Checkbox 업데이트

자세한 사용법은 [Checkbox](/react/components/checkbox) 문서를 참고해주세요.

```tsx
// [!code --]
import { Checkbox } from "@daangn/sprout-components-checkbox";
// [!code ++]
import { Checkbox } from "seed-design/ui/checkbox"; // snippet 제공
```

* size 및 variant 옵션 재구성
  * `circle` variant 제거, `square` 사용
  * `small` size 제거
* `bold` prop을 `weight`으로 재구성

<ComponentExample name="react/checkbox/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Checkbox, CheckboxGroup } from "seed-design/ui/checkbox";

  export default function CheckboxPreview() {
    return (
      <VStack p="x6">
        <CheckboxGroup
          label="관심 분야"
          description="관심 있는 분야를 모두 선택해 주세요."
          indicator="선택"
        >
          <Checkbox label="디자인" tone="neutral" size="large" />
          <Checkbox label="개발" tone="neutral" size="large" defaultChecked />
          <Checkbox label="마케팅" tone="neutral" size="large" />
        </CheckboxGroup>
      </VStack>
    );
  }
  ```
</ComponentExample>

### TextField 업데이트

V2에서는 TextField, MultilineTextField 컴포넌트를 따로 제공했지만, V3에서는 조합형 컴포넌트로 통합되었어요. 자세한 사용법은 [TextField](/react/components/text-field-input) 및 [MultilineTextField](/react/components/text-field-textarea) 문서를 참고해주세요.

```tsx
// [!code --]
import {
  TextField,
  MultilineTextField,
} from "@daangn/sprout-components-text-field";
// [!code ++]
import {
  TextField,
  TextFieldInput,
  TextFieldTextarea,
} from "seed-design/ui/text-field"; // snippet 제공
```

* size 제거, variant 추가
* `TextFieldInput`: `<input>`
* `TextFieldTextarea`: `<textarea>`
* `maxGraphemeCount` prop 추가 (기존 `maxLength` prop을 override하던 동작을 명시적으로 변경)

<ComponentExample name="react/text-field-input/preview">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldPreview() {
    return (
      <TextField label="라벨">
        <TextFieldInput autoFocus />
      </TextField>
    );
  }
  ```
</ComponentExample>

### InlineAlert 업데이트

V2에서는 `@daangn/sprout-components-inline-alert` 패키지에서 여러 배너 관련 컴포넌트들을 제공했어요.
V3에서는 [`PageBanner`](/react/components/page-banner) 컴포넌트로 제공되고 있어요.

```tsx
// [!code --]
import {
  InlineBanner,
  ActionableInlineBanner,
  DismissibleInlineBanner,
} from "@daangn/sprout-components-banner";
// [!code ++]
import {
  PageBanner,
  ActionablePageBanner,
  DismissiblePageBanner,
} from "seed-design/ui/page-banner"; // snippet 제공
```

* variant -> tone으로 변경 및 옵션 재구성
* variant 옵션 추가

<ComponentExample name="react/page-banner/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionablePageBanner,
    DismissiblePageBanner,
    PageBanner,
  } from "seed-design/ui/page-banner";

  export default function PageBannerPreview() {
    return (
      <VStack gap="x4" width="full">
        <PageBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <ActionablePageBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <DismissiblePageBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Callout 업데이트

자세한 사용법은 [Callout](/react/components/callout) 문서를 참고해주세요.

```tsx
// [!code --]
import {
  Callout,
  ActionableCallout,
  DismissibleCallout,
} from "@daangn/sprout-components-callout";
// [!code ++]
import {
  Callout,
  ActionableCallout,
  DismissibleCallout,
} from "seed-design/ui/callout"; // snippet 제공
```

* `variant` → `tone`으로 변경 및 옵션 재구성

<ComponentExample name="react/callout/preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutPreview() {
    return (
      <VStack gap="x4" width="full">
        <Callout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
        <ActionableCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
        <DismissibleCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
      </VStack>
    );
  }
  ```
</ComponentExample>

### SelectBox 업데이트

V2에서는 `@daangn/sprout-components-select-box` 패키지에서 여러 SelectBox 관련 컴포넌트들을 제공했어요. V3에서는 이러한 컴포넌트들이 목적에 따라 재구성되었어요. 자세한 사용법은 [CheckSelectBox](/react/components/select-box) 및 [RadioSelectBox](/react/components/select-box) 문서를 참고해주세요.

#### SelectBoxCheck

```tsx
// [!code --]
import { SelectBoxCheck } from "@daangn/sprout-components-select-box";
// [!code ++]
import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box"; // snippet 제공
```

* `SelectBoxCheck` -> `CheckSelectBox`

<ComponentExample name="react/select-box/preview">
  ```tsx
  import { HStack } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxPreview() {
    return (
      <HStack gap="x6" align="flex-start">
        <CheckSelectBoxGroup aria-label="Fruit">
          <CheckSelectBox label="Apple" defaultChecked suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox label="Mango" suffix={<CheckSelectBoxCheckmark />} />
        </CheckSelectBoxGroup>

        <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
          <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
          <RadioSelectBoxItem
            value="melon"
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem value="mango" label="Mango" suffix={<RadioSelectBoxRadiomark />} />
        </RadioSelectBoxRoot>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### SelectBoxRadio, SelectBoxRadioGroup

```tsx
// [!code --]
import {
  SelectBoxRadio,
  SelectBoxRadioGroup,
} from "@daangn/sprout-components-select-box";
// [!code ++]
import {
  RadioSelectBoxItem,
  RadioSelectBoxRoot,
} from "seed-design/ui/select-box"; // snippet 제공
```

* `SelectBoxRadio` -> `RadioSelectBoxItem`
* `SelectBoxRadioGroup` -> `RadioSelectBoxRoot`

<ComponentExample name="react/select-box/preview">
  ```tsx
  import { HStack } from "@seed-design/react";
  import {
    CheckSelectBox,
    CheckSelectBoxCheckmark,
    CheckSelectBoxGroup,
    RadioSelectBoxItem,
    RadioSelectBoxRadiomark,
    RadioSelectBoxRoot,
  } from "seed-design/ui/select-box";

  export default function SelectBoxPreview() {
    return (
      <HStack gap="x6" align="flex-start">
        <CheckSelectBoxGroup aria-label="Fruit">
          <CheckSelectBox label="Apple" defaultChecked suffix={<CheckSelectBoxCheckmark />} />
          <CheckSelectBox
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<CheckSelectBoxCheckmark />}
          />
          <CheckSelectBox label="Mango" suffix={<CheckSelectBoxCheckmark />} />
        </CheckSelectBoxGroup>

        <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
          <RadioSelectBoxItem value="apple" label="Apple" suffix={<RadioSelectBoxRadiomark />} />
          <RadioSelectBoxItem
            value="melon"
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
            suffix={<RadioSelectBoxRadiomark />}
          />
          <RadioSelectBoxItem value="mango" label="Mango" suffix={<RadioSelectBoxRadiomark />} />
        </RadioSelectBoxRoot>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Tabs 업데이트

#### Tabs

자세한 사용법은 [Tabs](/react/components/tabs) 문서를 참고해주세요.

```tsx
// [!code --]
import {
  Tabs,
  TabList,
  Tab,
  TabPanelGroup,
  TabPanel,
} from "@daangn/sprout-components-tabs";
// [!code ++]
import {
  TabsContent,
  TabsList,
  TabsRoot,
  TabsTrigger,
} from "seed-design/ui/tabs"; // snippet 제공
```

* size 옵션 재구성
* `dot` -> `notification`으로 변경
* `layout` -> `triggerLayout`으로 변경 (`fill`, `hug`)
* `stickyList` prop 추가: 스크롤 시 탭 목록 고정 가능
* 컨텐츠의 layout도 조절 가능 (`contentLayout`)
* 렌더링 관련 prop 변경
  * `isLazy` -> `lazyMount`
  * `lazyMode` (unmount, keepMounted) -> `unmountOnExit` (boolean)

<ComponentExample name="react/tabs/preview">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsPreview() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Switch 업데이트

자세한 사용법은 [Switch](/react/components/switch) 문서를 참고해주세요.

```tsx
// [!code --]
import { Switch } from "@daangn/sprout-components-switch";
// [!code ++]
import { Switch } from "seed-design/ui/switch"; // snippet 제공
```

* size 옵션 재구성
* tone 옵션 추가
* children으로 제공되던 label 대신 `label` prop 추가

<ComponentExample name="react/switch/preview">
  ```tsx
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchPreview() {
    return <Switch defaultChecked />;
  }
  ```
</ComponentExample>

### Spinner 업데이트

Spinner는 V3에서 [ProgressCircle](/react/components/progress-circle)로 변경되었어요.

```tsx
// [!code --]
import { Spinner } from "@daangn/sprout-components-spinner";
// [!code ++]
import { ProgressCircle } from "seed-design/ui/progress-circle"; // snippet 제공
```

* size 및 tone 옵션 재구성
* 값이 결정된 상태(`value` prop 제공)와 미결정 상태(`indeterminate` prop) 지원

<ComponentExample name="react/progress-circle/preview">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCirclePreview() {
    return <ProgressCircle tone="neutral" size="40" />;
  }
  ```
</ComponentExample>

### Snackbar 업데이트

자세한 사용법은 [Snackbar](/react/components/snackbar) 문서를 참고해주세요.

```tsx
// [!code --]
import {
  SnackBar,
  useSnackbarAdapter,
} from "@daangn/sprout-components-snackbar";
// [!code ++]
import {
  Snackbar,
  SnackbarProvider,
  useSnackbar,
} from "seed-design/ui/snackbar"; // snippet 제공
```

* variant 옵션 재구성
* `SnackbarProvider`와 `useSnackbar` hook을 통한 편리한 선언적 사용 방식 지원 (기존과 동일)

<ComponentExample name="react/snackbar/preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarPreview() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>

### HelpBubble 업데이트

자세한 사용법은 [HelpBubble](/react/components/help-bubble) 문서를 참고해주세요.

```tsx
// [!code --]
import {
  HelpBubbleAnchor,
  HelpBubbleTrigger,
} from "@daangn/sprout-components-help-bubble";
// [!code ++]
import {
  HelpBubbleTrigger,
  HelpBubbleAnchor,
} from "seed-design/ui/help-bubble"; // snippet 제공
```

<ComponentExample name="react/help-bubble/preview">
  ```tsx
  import { IconILowercaseSerifCircleLine } from "@karrotmarket/react-monochrome-icon";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Icon } from "@seed-design/react";

  export default function HelpBubblePreview() {
    return (
      <HelpBubbleTrigger defaultOpen title="아래 버튼이나 바깥 영역을 클릭해서 닫아보세요.">
        <ActionButton variant="ghost" size="small" layout="iconOnly" aria-label="도움말">
          <Icon svg={<IconILowercaseSerifCircleLine />} />
        </ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>

### FAB(Floating Action Button) 업데이트

V2의 FloatingActionButton과 ExtendedFAB는 용도에 따라 [FloatingActionButton](/react/components/floating-action-button)과 [ContextualFloatingButton](/react/components/contextual-floating-button)으로로 재구성되었어요.

```tsx
// [!code --]
import { FloatingActionButton } from "@daangn/sprout-components-floating-action-button";
// [!code --]
import { ExtendedFab } from "@daangn/sprout-components-fab";
// [!code ++]
import { FloatingActionButton } from "seed-design/ui/floating-action-button"; // snippet 제공
// [!code ++]
import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button"; // snippet 제공
```

<ComponentExample name="react/floating-action-button/preview">
  ```tsx
  import { FloatingActionButton } from "seed-design/ui/floating-action-button";
  import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";

  export default function FloatingActionButtonPreview() {
    return <FloatingActionButton icon={<IconPlusLine />} label="Example FAB" />;
  }
  ```
</ComponentExample>

<ComponentExample name="react/contextual-floating-button/preview">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonPreview() {
    return (
      <ContextualFloatingButton>
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

### 신규 컴포넌트

* [`AppScreen`](/react/stackflow/app-screen): Stackflow AppScreen 컴포넌트
* [`BottomSheet`](/react/components/bottom-sheet) 및 [`MenuSheet`](/react/components/menu-sheet)
* [`ChipTabs`](/react/components/chip-tabs)
* [`ErrorState`](/react/components/error-state)
* [`IdentityPlaceholder`](/react/components/identity-placeholder)
* [`MannerTemp`](/react/components/manner-temp) 및 [`MannerTempBadge`](/react/components/manner-temp-badge)
* [`PullToRefresh`](/react/components/pull-to-refresh)
* [`SegmentedControl`](/react/components/segmented-control)
* [`Skeleton`](/react/components/skeleton)

컴포넌트는 꾸준히 추가되고 있습니다. 사이드바에서 최신 목록을 확인해보세요.

#### 레이아웃 관련 컴포넌트

레이아웃 구성을 위한 다양한 컴포넌트가 제공됩니다.

```tsx
// [!code ++]
import { Box, Flex, VStack, HStack } from "@seed-design/react";
```

* [`Box`](/react/components/layout/box): 기본 레이아웃 컨테이너
* [`Flex`](/react/components/layout/flex): Flex 레이아웃을 구성하기 위한 컴포넌트
* [`VStack`](/react/components/layout/v-stack): 수직 방향으로 요소를 쌓는 레이아웃
* [`HStack`](/react/components/layout/h-stack): 수평 방향으로 요소를 쌓는 레이아웃