@refineui/mcp 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/{chunk-GY45SO6Y.js → chunk-TAJF3ATB.js} +89 -35
  2. package/lib/index.js +1 -1
  3. package/lib/server.js +1 -1
  4. package/package.json +3 -3
package/lib/{chunk-GY45SO6Y.js → chunk-TAJF3ATB.js} RENAMED
@@ -1,8 +1,8 @@
1
1
  // src/generated/docs-index.json
2
2
  var docs_index_default = {
3
- generatedAt: "2026-09-17T18:54:11.450Z",
4
- llmIndex: '# RefineUI Design System & Component Library\n\n> RefineUI is Pelagornis\'s unified design system. Foundation variables ship as `@refineui/tokens`; UI ships as `@refineui/react`. Docs render real components \u2014 not mockups.\n\n## Installation & Setup\n\n```bash\nbun add @refineui/react @refineui/tokens\n# or\nnpm install @refineui/react @refineui/tokens\n```\n\nStylesheet (app root):\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nOr in JS:\n\n```tsx\nimport "@refineui/react/refineui.css";\n```\n\n## Packages\n\n- `@refineui/react` \u2014 Accessible React components (Tailwind + design tokens)\n- `@refineui/tokens` \u2014 Color, typography, spacing, sizing, radius, elevation, motion, z-index\n- `@refineui/utilities` \u2014 Helpers and layout algorithms\n- `@refineui/web-icons` \u2014 RefineUI System Icons font (used by `WebIcon`)\n- `@refineui/mcp` \u2014 MCP server for docs search, component pages, and design rules\n\n## Guides\n\n- [Getting started](https://ui.pelagornis.com/getting-started/): Architecture, install, stylesheet, first example\n\n## AI & Tools\n\n- [Overview](https://ui.pelagornis.com/ai-tools/): LLM indexes, Skill, Doctor, and MCP\n- [Skill](https://ui.pelagornis.com/ai-tools/skill/): `refineui` agent skill for doc routing and codegen rules\n- [Doctor](https://ui.pelagornis.com/ai-tools/doctor/): Read-only workspace diagnostics\n- [MCP](https://ui.pelagornis.com/ai-tools/mcp/): `@refineui/mcp` documentation server\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md): Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt): Curated link index (llmstxt.org)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt): Expanded plain-text reference\n\n## Foundations\n\n- [Overview](https://ui.pelagornis.com/foundations/): Visual language and token model\n- [Design tokens](https://ui.pelagornis.com/foundations/design-tokens/): Semantic token introduction\n- [Color](https://ui.pelagornis.com/foundations/color/): Palette and alias colors\n- [Typography](https://ui.pelagornis.com/foundations/typography/): Type scale and roles\n- [Spacing](https://ui.pelagornis.com/foundations/spacing/): Padding and gap scale\n- [Sizing](https://ui.pelagornis.com/foundations/sizing/): Dimension tokens\n- [Radius](https://ui.pelagornis.com/foundations/radius/): Corner radius\n- [Border](https://ui.pelagornis.com/foundations/border/): Stroke widths and borders\n- [Elevation](https://ui.pelagornis.com/foundations/elevation/): Shadows and depth\n- [Opacity](https://ui.pelagornis.com/foundations/opacity/): Opacity and overlays\n- [Motion](https://ui.pelagornis.com/foundations/motion/): Duration, easing, distance\n- [Z-index](https://ui.pelagornis.com/foundations/z-index/): Layering scale\n- [Layout](https://ui.pelagornis.com/foundations/layout/): Container, grid, alignment, responsive layout\n- [Iconography](https://github.com/pelagornis/refineui-system-icons): System icons (external repo)\n\n## Components\n\nAlphabetical catalog \u2014 full docs at [/components/](https://ui.pelagornis.com/components/).\n\n- [Accordion](https://ui.pelagornis.com/components/accordion/)\n- [Alert](https://ui.pelagornis.com/components/alert/)\n- [Avatar](https://ui.pelagornis.com/components/avatar/)\n- [Avatars](https://ui.pelagornis.com/components/avatars/)\n- [Badge](https://ui.pelagornis.com/components/badge/)\n- [Box](https://ui.pelagornis.com/components/box/)\n- [Breadcrumb](https://ui.pelagornis.com/components/breadcrumb/)\n- [Bubble](https://ui.pelagornis.com/components/bubble/)\n- [Button](https://ui.pelagornis.com/components/button/)\n- [Button Group](https://ui.pelagornis.com/components/button-group/)\n- [Calendar](https://ui.pelagornis.com/components/calendar/)\n- [Card](https://ui.pelagornis.com/components/card/)\n- [Carousel](https://ui.pelagornis.com/components/carousel/)\n- [Chart](https://ui.pelagornis.com/components/chart/)\n- [Checkbox](https://ui.pelagornis.com/components/checkbox/)\n- [Command](https://ui.pelagornis.com/components/command/): Command palette with search and keyboard navigation\n- [Container](https://ui.pelagornis.com/components/container/)\n- [Dialog](https://ui.pelagornis.com/components/dialog/)\n- [Divider](https://ui.pelagornis.com/components/divider/)\n- [Drawer](https://ui.pelagornis.com/components/drawer/)\n- [Dropdown](https://ui.pelagornis.com/components/dropdown/)\n- [Field](https://ui.pelagornis.com/components/field/)\n- [Footer](https://ui.pelagornis.com/components/footer/)\n- [Grid](https://ui.pelagornis.com/components/grid/)\n- [Input](https://ui.pelagornis.com/components/input/)\n- [Input OTP](https://ui.pelagornis.com/components/input-otp/)\n- [Label](https://ui.pelagornis.com/components/label/)\n- [Link](https://ui.pelagornis.com/components/link/)\n- [Menu](https://ui.pelagornis.com/components/menu/)\n- [Navigation Menu](https://ui.pelagornis.com/components/navigation-menu/)\n- [Pagination](https://ui.pelagornis.com/components/pagination/)\n- [Popover](https://ui.pelagornis.com/components/popover/)\n- [Progress](https://ui.pelagornis.com/components/progress/)\n- [Progress Stepper](https://ui.pelagornis.com/components/progress-stepper/)\n- [Radio](https://ui.pelagornis.com/components/radio/)\n- [Resizable](https://ui.pelagornis.com/components/resizable/)\n- [Scroll Area](https://ui.pelagornis.com/components/scroll-area/)\n- [Search Field](https://ui.pelagornis.com/components/search-field/)\n- [Segmented Control](https://ui.pelagornis.com/components/segmented-control/)\n- [Select](https://ui.pelagornis.com/components/select/)\n- [Sidebar](https://ui.pelagornis.com/components/sidebar/)\n- [Skeleton](https://ui.pelagornis.com/components/skeleton/)\n- [Slider](https://ui.pelagornis.com/components/slider/)\n- [Spin Button](https://ui.pelagornis.com/components/spin-button/)\n- [Spinner](https://ui.pelagornis.com/components/spinner/)\n- [Stack](https://ui.pelagornis.com/components/stack/)\n- [Stepper](https://ui.pelagornis.com/components/stepper/)\n- [Switch](https://ui.pelagornis.com/components/switch/)\n- [Table](https://ui.pelagornis.com/components/table/)\n- [Tabs](https://ui.pelagornis.com/components/tabs/)\n- [Tag](https://ui.pelagornis.com/components/tag/)\n- [Textarea](https://ui.pelagornis.com/components/textarea/)\n- [Toast](https://ui.pelagornis.com/components/toast/)\n- [Toggle Button](https://ui.pelagornis.com/components/toggle-button/)\n- [Tooltip](https://ui.pelagornis.com/components/tooltip/)\n- [Tree](https://ui.pelagornis.com/components/tree/)\n\n## Development\n\n- [Overview](https://ui.pelagornis.com/development/): Build with RefineUI in product code\n- [Installation](https://ui.pelagornis.com/development/installation/): Packages, Tailwind, and project setup\n- [Theming](https://ui.pelagornis.com/development/theming/): Light/dark and semantic aliases\n- [Motion](https://ui.pelagornis.com/development/motion/): Motion roles in components\n\n## AI & machine-readable docs\n\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md) \u2014 Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt) \u2014 Curated link index (llmstxt.org format)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt) \u2014 Expanded reference for LLM context windows\n- [AI & Tools](https://ui.pelagornis.com/ai-tools/) \u2014 Overview, DESIGN.md, llms.txt, Skill, Doctor, MCP\n- `@refineui/mcp` \u2014 MCP server (`search_docs`, `get_doc_page`, `get_design_rules`, \u2026)\n- [GitHub](https://github.com/pelagornis/refineui) \u2014 Source and issues\n\n## Usage notes for LLMs\n\n- Import components from `@refineui/react` only; do not invent parallel APIs\n- Use design tokens (`bg-refineui-alias-*`, `text-refineui-alias-*`, spacing/radius utilities) \u2014 no arbitrary px or hex in component styles\n- Match Web Kit component scope; do not add variants or convenience props not in Figma Web Kit\n- Prefer composition (`Field` + `Input`, `Command` + `CommandDialog`, `Sidebar` + `SidebarLink`) over raw HTML for forms, navigation, and feedback\n',
5
- designMd: '---\nversion: alpha\nname: RefineUI\ndescription: >-\n Pelagornis design system for product UI. YAML values are light-theme identity\n snapshots for Stitch and coding agents. Authoritative tokens live in\n @refineui/tokens; shipped UI lives in @refineui/react. Prefer semantic aliases\n and components over copying these hex values into product code.\ncolors:\n primary: "#212121"\n on-primary: "#FFFFFF"\n secondary: "#6C6C6C"\n tertiary: "#7694FF"\n neutral: "#FFFFFF"\n surface: "#FFFFFF"\n surface-sunken: "#F0F0F0"\n foreground: "#212121"\n foreground-secondary: "#6C6C6C"\n border: "#DBDBDB"\n error: "#FF6969"\n success: "#26B12D"\n warning: "#F1B500"\n discovery: "#BD7BFF"\n inverse: "#000000"\ntypography:\n display-lg:\n fontFamily: Inter\n fontSize: 64px\n fontWeight: 800\n lineHeight: 86px\n heading-md:\n fontFamily: Inter\n fontSize: 40px\n fontWeight: 700\n lineHeight: 60px\n title-md:\n fontFamily: Inter\n fontSize: 28px\n fontWeight: 600\n lineHeight: 36px\n subtitle-md:\n fontFamily: Inter\n fontSize: 16px\n fontWeight: 600\n lineHeight: 24px\n body-md:\n fontFamily: Inter\n fontSize: 14px\n fontWeight: 500\n lineHeight: 20px\n body-sm:\n fontFamily: Inter\n fontSize: 14px\n fontWeight: 400\n lineHeight: 20px\n caption-md:\n fontFamily: Inter\n fontSize: 12px\n fontWeight: 400\n lineHeight: 16px\n label-md:\n fontFamily: Inter\n fontSize: 14px\n fontWeight: 500\n lineHeight: 20px\nrounded:\n xs: 2px\n sm: 4px\n md: 6px\n lg: 8px\n xl: 12px\n "2xl": 16px\n full: 9999px\nspacing:\n none: 0px\n xxxs: 2px\n xxs: 4px\n xs: 6px\n sm: 8px\n md: 10px\n lg: 16px\n xl: 20px\n "2xl": 24px\n "3xl": 32px\ncomponents:\n button-primary:\n backgroundColor: "{colors.primary}"\n textColor: "{colors.on-primary}"\n rounded: "{rounded.lg}"\n padding: 10px\n button-secondary:\n backgroundColor: "{colors.surface}"\n textColor: "{colors.foreground}"\n rounded: "{rounded.lg}"\n padding: 10px\n surface-card:\n backgroundColor: "{colors.surface}"\n textColor: "{colors.foreground}"\n rounded: "{rounded.xl}"\n padding: 16px\n---\n\n# RefineUI\n\nHow agents should use this file: treat YAML as the **visual identity snapshot** (Stitch / UI generation). For product code, prefer `@refineui/react` components and `@refineui/tokens` semantic aliases \u2014 do not hardcode these hex/px values. Full page index: https://ui.pelagornis.com/llm.txt \xB7 Live site: https://ui.pelagornis.com\n\n## Overview\n\nRefineUI is Pelagornis\u2019s unified design system: Foundation variables become `@refineui/tokens`; the Web Kit ships as `@refineui/react`. Docs render real package output, not mockups.\n\nThe system feels **precise, neutral, and product-first** \u2014 high-contrast ink on clean surfaces, restrained radius, and semantic color roles (brand, status, discovery) rather than decorative gradients. Light and dark resolve through `[data-theme]` semantic aliases; agents generating screens should assume light tokens unless the task asks for dark.\n\nArchitecture (do not skip layers):\n\n```\nFoundation \u2192 Semantic \u2192 Theme/Context \u2192 Component tokens \u2192 Recipe \u2192 Component \u2192 State/Interaction\n```\n\n## Colors\n\nPalette roles map to semantic aliases (`backgroundBrand`, `foregroundPrimary`, `borderDefault`, \u2026). Light-theme identity values are in the YAML front matter.\n\n- **Primary (#212121):** Brand ink \u2014 primary actions, strong emphasis, brand fills (`backgroundBrand` / `foregroundBrand`).\n- **On-primary (#FFFFFF):** Text and icons on brand fills (`foregroundOnBrand`).\n- **Secondary (#6C6C6C):** Supporting copy and quieter chrome (`foregroundSecondary`).\n- **Tertiary (#7694FF):** Info and links \u2014 not a second brand (`foregroundLink`, `backgroundInfo`).\n- **Neutral / surface (#FFFFFF):** Page and card canvases (`backgroundPrimary`, `backgroundSurface`).\n- **Surface-sunken:** Recessed wells (`surfaceSunken`).\n- **Border (#DBDBDB):** Default dividers and control outlines (`borderDefault`).\n- **Error / success / warning / discovery:** Status and accent roles only \u2014 never as generic decoration.\n\nDark theme flips the same semantic names via CSS variables; do not invent a second hex palette in product CSS.\n\n## Typography\n\nSingle family **Inter** for UI. Prefer semantic text roles (`displayLg`, `headingMd`, `titleMd`, `bodyMd`, `captionMd`, \u2026) over raw Foundation keys.\n\n- **Display / heading:** Heavy\u2013bold for marketing and page titles.\n- **Title / subtitle:** Semibold for component and section headers.\n- **Body:** Medium or regular at 14px for primary reading and controls.\n- **Caption / label:** 12\u201314px for metadata, helpers, and form labels.\n\n## Layout\n\nSpacing uses the RefineUI T-shirt scale (`sizeNone` \u2026 `sizeXXXLarge`: 0\u201332px). Prefer token utilities (`gap-refineui-*`, Box/Stack `gap`) over arbitrary Tailwind spacing.\n\nLayout primitives: `Box`, `Stack`, `Grid`, `Container`. Prefer **logical** insets (`ps`/`pe`/`ms`/`me`, `text-start`) for RTL. Spec `layout.direction=logical` is the contract \u2014 avoid physical `left`/`right` unless intentional (documented in component Spec).\n\n## Elevation & Depth\n\nElevation steps are semantic shadows (`shadow2` \u2026 `shadow64`) with separate light/dark recipes. Use the lowest step that establishes hierarchy; do not stack multi-layer custom box-shadows. Overlays use `surfaceOverlay` scrims, not ad-hoc rgba.\n\n## Shapes\n\nRadius scale: `roundedXSmall` (2px) through `roundedXXLarge` (16px), plus `roundedCircle`. Default interactive controls land around **large (8px)**; cards and panels often **x-large (12px)**. Prefer token radii over arbitrary `rounded-*` values.\n\n## Components\n\nCompose from `@refineui/react` \u2014 no convenience props (`title`, `description`, `items`, `actions`, `onClose`). Match sibling component patterns before inventing APIs.\n\nDOM / state contract:\n\n- `data-refineui` \u2014 component identity\n- `data-variant` / `data-size` \u2014 visual options\n- `data-state` \u2014 open, selected, loading, \u2026\n- Hover / `:focus-visible` / disabled \u2014 `refineui.css` (do not reimplement with `:focus` alone)\n\nImport only from `@refineui/react`. Stylesheet at app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nDeep lookup: catalog at https://ui.pelagornis.com/components/ \xB7 MCP tools `get_component_spec`, `get_component_recipe`, `inspect_token`.\n\n## Do\'s and Don\'ts\n\n**Do**\n\n- Use design tokens for color, spacing, radius, stroke, typography, shadow, z-index, and motion.\n- Follow composable subcomponent APIs and existing `packages/react` patterns.\n- Honor `:focus-visible`, `prefers-reduced-motion`, and forced-colors contracts from Spec / Doctor.\n- Start from https://ui.pelagornis.com/llm.txt (or `@refineui/mcp`) before inventing APIs.\n\n**Don\'t**\n\n- Hardcode hex, rgba, or arbitrary px in component styles.\n- Reference Foundation literals from component tokens \u2014 use semantic / `componentSizes`.\n- Invent variants, props, or dimensions not reflected in tokens + docs.\n- Duplicate this file\u2019s token tables into agent skills \u2014 link here instead.\n',
3
+ generatedAt: "2026-09-23T05:49:37.733Z",
4
+ llmIndex: '# RefineUI Design System & Component Library\n\n> RefineUI is Pelagornis\'s unified design system. Foundation variables ship as `@refineui/tokens`; UI ships as `@refineui/react`. Docs render real components \u2014 not mockups.\n\n## Installation & Setup\n\n```bash\nbun add @refineui/react @refineui/tokens\n# or\nnpm install @refineui/react @refineui/tokens\n```\n\nStylesheet (app root):\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nOr in JS:\n\n```tsx\nimport "@refineui/react/refineui.css";\n```\n\n## Packages\n\n- `@refineui/react` \u2014 Accessible React components (Tailwind + design tokens)\n- `@refineui/tokens` \u2014 Color, typography, spacing, sizing, radius, elevation, motion, z-index\n- `@refineui/utilities` \u2014 Helpers and layout algorithms\n- `@refineui/web-icons` \u2014 RefineUI System Icons font (used by `WebIcon`)\n- `@refineui/mcp` \u2014 MCP server for docs search, component pages, and design rules\n\n## Guides\n\n- [Getting started](https://ui.pelagornis.com/getting-started/): Architecture, install, stylesheet, first example\n\n## AI & Tools\n\n- [Overview](https://ui.pelagornis.com/ai-tools/): LLM indexes, Skill, Doctor, and MCP\n- [Skill](https://ui.pelagornis.com/ai-tools/skill/): `refineui` agent skill for doc routing and codegen rules\n- [Doctor](https://ui.pelagornis.com/ai-tools/doctor/): Read-only workspace diagnostics\n- [MCP](https://ui.pelagornis.com/ai-tools/mcp/): `@refineui/mcp` documentation server\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md): Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt): Curated link index (llmstxt.org)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt): Expanded plain-text reference\n\n## Foundations\n\n- [Overview](https://ui.pelagornis.com/foundations/): Visual language and token model\n- [Design tokens](https://ui.pelagornis.com/foundations/design-tokens/): Semantic token introduction\n- [Color](https://ui.pelagornis.com/foundations/color/): Palette and alias colors\n- [Typography](https://ui.pelagornis.com/foundations/typography/): Type scale and roles\n- [Spacing](https://ui.pelagornis.com/foundations/spacing/): Padding and gap scale\n- [Sizing](https://ui.pelagornis.com/foundations/sizing/): Dimension tokens\n- [Radius](https://ui.pelagornis.com/foundations/radius/): Corner radius\n- [Border](https://ui.pelagornis.com/foundations/border/): Stroke widths and borders\n- [Elevation](https://ui.pelagornis.com/foundations/elevation/): Shadows and depth\n- [Opacity](https://ui.pelagornis.com/foundations/opacity/): Opacity and overlays\n- [Blur](https://ui.pelagornis.com/foundations/blur/): Backdrop / surface frosted blur\n- [Motion](https://ui.pelagornis.com/foundations/motion/): Duration, easing, distance\n- [Z-index](https://ui.pelagornis.com/foundations/z-index/): Layering scale\n- [Layout](https://ui.pelagornis.com/foundations/layout/): Container, grid, alignment, responsive layout\n- [Iconography](https://github.com/pelagornis/refineui-system-icons): System icons (external repo)\n\n## Components\n\nAlphabetical catalog \u2014 full docs at [/components/](https://ui.pelagornis.com/components/).\n\n- [Accordion](https://ui.pelagornis.com/components/accordion/)\n- [Alert](https://ui.pelagornis.com/components/alert/)\n- [Avatar](https://ui.pelagornis.com/components/avatar/)\n- [Avatars](https://ui.pelagornis.com/components/avatars/)\n- [Badge](https://ui.pelagornis.com/components/badge/)\n- [Box](https://ui.pelagornis.com/components/box/)\n- [Breadcrumb](https://ui.pelagornis.com/components/breadcrumb/)\n- [Bubble](https://ui.pelagornis.com/components/bubble/)\n- [Button](https://ui.pelagornis.com/components/button/)\n- [Button Group](https://ui.pelagornis.com/components/button-group/)\n- [Calendar](https://ui.pelagornis.com/components/calendar/)\n- [Card](https://ui.pelagornis.com/components/card/)\n- [Carousel](https://ui.pelagornis.com/components/carousel/)\n- [Chart](https://ui.pelagornis.com/components/chart/)\n- [Checkbox](https://ui.pelagornis.com/components/checkbox/)\n- [Collapsible](https://ui.pelagornis.com/components/collapsible/): Show/hide a section from a trigger (`asChild` supported)\n- [Command](https://ui.pelagornis.com/components/command/): Command palette with search and keyboard navigation\n- [Container](https://ui.pelagornis.com/components/container/)\n- [Context Menu](https://ui.pelagornis.com/components/context-menu/): Right-click menu (Menu anatomy + portal)\n- [Dialog](https://ui.pelagornis.com/components/dialog/)\n- [Divider](https://ui.pelagornis.com/components/divider/)\n- [Drawer](https://ui.pelagornis.com/components/drawer/)\n- [Dropdown](https://ui.pelagornis.com/components/dropdown/)\n- [Field](https://ui.pelagornis.com/components/field/)\n- [Footer](https://ui.pelagornis.com/components/footer/)\n- [Grid](https://ui.pelagornis.com/components/grid/)\n- [Input](https://ui.pelagornis.com/components/input/)\n- [Input OTP](https://ui.pelagornis.com/components/input-otp/)\n- [Label](https://ui.pelagornis.com/components/label/)\n- [Link](https://ui.pelagornis.com/components/link/)\n- [Menu](https://ui.pelagornis.com/components/menu/)\n- [Navigation Menu](https://ui.pelagornis.com/components/navigation-menu/)\n- [Pagination](https://ui.pelagornis.com/components/pagination/)\n- [Popover](https://ui.pelagornis.com/components/popover/)\n- [Progress](https://ui.pelagornis.com/components/progress/)\n- [Progress Stepper](https://ui.pelagornis.com/components/progress-stepper/)\n- [Radio](https://ui.pelagornis.com/components/radio/)\n- [Resizable](https://ui.pelagornis.com/components/resizable/)\n- [Scroll Area](https://ui.pelagornis.com/components/scroll-area/)\n- [Search Field](https://ui.pelagornis.com/components/search-field/)\n- [Segmented Control](https://ui.pelagornis.com/components/segmented-control/)\n- [Select](https://ui.pelagornis.com/components/select/)\n- [Sidebar](https://ui.pelagornis.com/components/sidebar/)\n- [Skeleton](https://ui.pelagornis.com/components/skeleton/)\n- [Slider](https://ui.pelagornis.com/components/slider/)\n- [Spin Button](https://ui.pelagornis.com/components/spin-button/)\n- [Spinner](https://ui.pelagornis.com/components/spinner/)\n- [Stack](https://ui.pelagornis.com/components/stack/)\n- [Stepper](https://ui.pelagornis.com/components/stepper/)\n- [Switch](https://ui.pelagornis.com/components/switch/)\n- [Table](https://ui.pelagornis.com/components/table/)\n- [Tabs](https://ui.pelagornis.com/components/tabs/)\n- [Tag](https://ui.pelagornis.com/components/tag/)\n- [Textarea](https://ui.pelagornis.com/components/textarea/)\n- [Toast](https://ui.pelagornis.com/components/toast/)\n- [Toggle Button](https://ui.pelagornis.com/components/toggle-button/)\n- [Tooltip](https://ui.pelagornis.com/components/tooltip/)\n- [Tree](https://ui.pelagornis.com/components/tree/)\n\n## Development\n\n- [Overview](https://ui.pelagornis.com/development/): Build with RefineUI in product code\n- [Installation](https://ui.pelagornis.com/development/installation/): Packages, Tailwind, and project setup\n- [Theming](https://ui.pelagornis.com/development/theming/): Light/dark and semantic aliases\n- [Motion](https://ui.pelagornis.com/development/motion/): Motion roles in components\n\n## AI & machine-readable docs\n\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md) \u2014 Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt) \u2014 Curated link index (llmstxt.org format)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt) \u2014 Expanded reference for LLM context windows\n- [AI & Tools](https://ui.pelagornis.com/ai-tools/) \u2014 Overview, DESIGN.md, llms.txt, Skill, Doctor, MCP\n- `@refineui/mcp` \u2014 MCP server (`search_docs`, `get_doc_page`, `get_design_rules`, \u2026)\n- [GitHub](https://github.com/pelagornis/refineui) \u2014 Source and issues\n\n## Usage notes for LLMs\n\n- Import components from `@refineui/react` only; do not invent parallel APIs\n- Use design tokens (`bg-refineui-alias-*`, `text-refineui-alias-*`, spacing/radius utilities) \u2014 no arbitrary px or hex in component styles\n- Match Web Kit component scope; do not add variants or convenience props not in Figma Web Kit\n- Prefer composition (`Field` + `Input`, `Command` + `CommandDialog`, `Sidebar` + `SidebarLink`, `Collapsible` + `CollapsibleTrigger`/`Content`, `ContextMenu` + portal content) over raw HTML for forms, navigation, and feedback\n- `Slot` / `asChild` merge props onto a child element \u2014 use for triggers that should render as `Button` or custom hosts\n- **Segmented Control:** sliding brand indicator; until `data-ready`, the selected item keeps a brand fill so SSR/first paint is not blank; transform leads width on slide\n- **Breadcrumb:** `BreadcrumbEllipsis` is presentational (square icon chip); interactive collapse uses `BreadcrumbEllipsisTrigger` (`Button` ghost icon sm)\n- **Input OTP:** empty slots reuse Skeleton opacity pulse (staggered by index); filled, focused, disabled, and `prefers-reduced-motion` stop the pulse\n- **Checkbox** default radius is `roundedLarge`; **Chart** bar tops use `roundedXLarge` (clamped to bar geometry)\n- **Menu / Dropdown / Select / Context Menu / SidebarPeek** panels use frosted glass: `surfaceFrosted` fill + `surfaceFrost` blur (`prefers-reduced-transparency` falls back to opaque `backgroundPrimary`). Docked Sidebar stays opaque.\n',
5
+ designMd: '---\nversion: alpha\nname: RefineUI\ndescription: >-\n Pelagornis design system for product UI. YAML values are light-theme identity\n snapshots for Stitch and coding agents. Authoritative tokens live in\n @refineui/tokens; shipped UI lives in @refineui/react. Prefer semantic aliases\n and components over copying these hex values into product code.\ncolors:\n primary: "#212121"\n on-primary: "#FFFFFF"\n secondary: "#6C6C6C"\n tertiary: "#7694FF"\n neutral: "#FFFFFF"\n surface: "#FFFFFF"\n surface-sunken: "#F0F0F0"\n foreground: "#212121"\n foreground-secondary: "#6C6C6C"\n border: "#DBDBDB"\n error: "#FF6969"\n success: "#26B12D"\n warning: "#F1B500"\n discovery: "#BD7BFF"\n inverse: "#000000"\ntypography:\n display-lg:\n fontFamily: Inter\n fontSize: 64px\n fontWeight: 800\n lineHeight: 86px\n heading-md:\n fontFamily: Inter\n fontSize: 40px\n fontWeight: 700\n lineHeight: 60px\n title-md:\n fontFamily: Inter\n fontSize: 28px\n fontWeight: 600\n lineHeight: 36px\n subtitle-md:\n fontFamily: Inter\n fontSize: 16px\n fontWeight: 600\n lineHeight: 24px\n body-md:\n fontFamily: Inter\n fontSize: 14px\n fontWeight: 500\n lineHeight: 20px\n body-sm:\n fontFamily: Inter\n fontSize: 14px\n fontWeight: 400\n lineHeight: 20px\n caption-md:\n fontFamily: Inter\n fontSize: 12px\n fontWeight: 400\n lineHeight: 16px\n label-md:\n fontFamily: Inter\n fontSize: 14px\n fontWeight: 500\n lineHeight: 20px\nrounded:\n xs: 2px\n sm: 4px\n md: 6px\n lg: 8px\n xl: 12px\n "2xl": 16px\n full: 9999px\nspacing:\n none: 0px\n xxxs: 2px\n xxs: 4px\n xs: 6px\n sm: 8px\n md: 10px\n lg: 16px\n xl: 20px\n "2xl": 24px\n "3xl": 32px\ncomponents:\n button-primary:\n backgroundColor: "{colors.primary}"\n textColor: "{colors.on-primary}"\n rounded: "{rounded.lg}"\n padding: 10px\n button-secondary:\n backgroundColor: "{colors.surface}"\n textColor: "{colors.foreground}"\n rounded: "{rounded.lg}"\n padding: 10px\n surface-card:\n backgroundColor: "{colors.surface}"\n textColor: "{colors.foreground}"\n rounded: "{rounded.xl}"\n padding: 16px\n---\n\n# RefineUI\n\nHow agents should use this file: treat YAML as the **visual identity snapshot** (Stitch / UI generation). For product code, prefer `@refineui/react` components and `@refineui/tokens` semantic aliases \u2014 do not hardcode these hex/px values. Full page index: https://ui.pelagornis.com/llm.txt \xB7 Live site: https://ui.pelagornis.com\n\n## Overview\n\nRefineUI is Pelagornis\u2019s unified design system: Foundation variables become `@refineui/tokens`; the Web Kit ships as `@refineui/react`. Docs render real package output, not mockups.\n\nThe system feels **precise, neutral, and product-first** \u2014 high-contrast ink on clean surfaces, restrained radius, and semantic color roles (brand, status, discovery) rather than decorative gradients. Light and dark resolve through `[data-theme]` semantic aliases; agents generating screens should assume light tokens unless the task asks for dark.\n\nArchitecture (do not skip layers):\n\n```\nFoundation \u2192 Semantic \u2192 Theme/Context \u2192 Component tokens \u2192 Recipe \u2192 Component \u2192 State/Interaction\n```\n\n## Colors\n\nPalette roles map to semantic aliases (`backgroundBrand`, `foregroundPrimary`, `borderDefault`, \u2026). Light-theme identity values are in the YAML front matter.\n\n- **Primary (#212121):** Brand ink \u2014 primary actions, strong emphasis, brand fills (`backgroundBrand` / `foregroundBrand`).\n- **On-primary (#FFFFFF):** Text and icons on brand fills (`foregroundOnBrand`).\n- **Secondary (#6C6C6C):** Supporting copy and quieter chrome (`foregroundSecondary`).\n- **Tertiary (#7694FF):** Info and links \u2014 not a second brand (`foregroundLink`, `backgroundInfo`).\n- **Neutral / surface (#FFFFFF):** Page and card canvases (`backgroundPrimary`, `backgroundSurface`).\n- **Surface-sunken:** Recessed wells (`surfaceSunken`).\n- **Border (#DBDBDB):** Default dividers and control outlines (`borderDefault`).\n- **Error / success / warning / discovery:** Status and accent roles only \u2014 never as generic decoration.\n\nDark theme flips the same semantic names via CSS variables; do not invent a second hex palette in product CSS.\n\n## Typography\n\nSingle family **Inter** for UI. Prefer semantic text roles (`displayLg`, `headingMd`, `titleMd`, `bodyMd`, `captionMd`, \u2026) over raw Foundation keys.\n\n- **Display / heading:** Heavy\u2013bold for marketing and page titles.\n- **Title / subtitle:** Semibold for component and section headers.\n- **Body:** Medium or regular at 14px for primary reading and controls.\n- **Caption / label:** 12\u201314px for metadata, helpers, and form labels.\n\n## Layout\n\nSpacing uses the RefineUI T-shirt scale (`sizeNone` \u2026 `sizeXXXLarge`: 0\u201332px). Prefer token utilities (`gap-refineui-*`, Box/Stack `gap`) over arbitrary Tailwind spacing.\n\nLayout primitives: `Box`, `Stack`, `Grid`, `Container`. Prefer **logical** insets (`ps`/`pe`/`ms`/`me`, `text-start`) for RTL. Spec `layout.direction=logical` is the contract \u2014 avoid physical `left`/`right` unless intentional (documented in component Spec).\n\n## Elevation & Depth\n\nElevation steps are semantic shadows (`shadow2` \u2026 `shadow64`) with separate light/dark recipes. Use the lowest step that establishes hierarchy; do not stack multi-layer custom box-shadows. Overlays use `surfaceOverlay` scrims, not ad-hoc rgba.\n\nBackdrop **blur** is separate from tint: prefer semantic roles `overlayScrim` / `surfaceFrost` (`--refineui-blur-*`). Frosted floating panels (Menu family, SidebarPeek) pair blur with translucent **`surfaceFrosted`** fill \u2014 do not borrow spacing tokens for `backdrop-filter`. Docked Sidebar stays opaque `backgroundPrimary`.\n\n## Shapes\n\nRadius scale: `roundedXSmall` (2px) through `roundedXXLarge` (16px), plus `roundedCircle`. Default interactive controls land around **large (8px)**; cards and panels often **x-large (12px)**. Prefer token radii over arbitrary `rounded-*` values.\n\n## Components\n\nCompose from `@refineui/react` \u2014 no convenience props (`title`, `description`, `items`, `actions`, `onClose`). Match sibling component patterns before inventing APIs.\n\nDOM / state contract:\n\n- `data-refineui` \u2014 component identity\n- `data-variant` / `data-size` \u2014 visual options\n- `data-state` \u2014 open, selected, loading, \u2026\n- Hover / `:focus-visible` / disabled \u2014 `refineui.css` (do not reimplement with `:focus` alone)\n\n**Composition highlights**\n\n- **Collapsible** \u2014 `Collapsible` + `CollapsibleTrigger` + `CollapsibleContent`; trigger supports `asChild` (often a ghost icon `Button`)\n- **Context Menu** \u2014 same Menu item anatomy as Dropdown/Menu, opened from `ContextMenuTrigger` via right-click; content lives in `ContextMenuPortal`\n- **Slot / asChild** \u2014 merge host props onto a single child; prefer this over wrapping extra DOM for triggers\n- **Segmented Control** \u2014 mutually exclusive pill; brand indicator slides after first layout (`data-ready` / `data-animate`); empty first paint uses selected-item fill fallback\n- **Breadcrumb** \u2014 trail composition; square `BreadcrumbEllipsis` (presentational) vs `BreadcrumbEllipsisTrigger` (interactive icon Button)\n- **Input OTP** \u2014 per-digit slots; empty cells pulse like Skeleton until filled\n- **Checkbox** \u2014 default corner `roundedLarge`; circular variant uses `roundedCircle`\n- **Chart bars** \u2014 top corners use `roundedXLarge` (clamped to width/height)\n\nImport only from `@refineui/react`. Stylesheet at app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nDeep lookup: catalog at https://ui.pelagornis.com/components/ \xB7 MCP tools `get_component_spec`, `get_component_recipe`, `inspect_token`.\n\n## Do\'s and Don\'ts\n\n**Do**\n\n- Use design tokens for color, spacing, radius, stroke, typography, shadow, z-index, and motion.\n- Follow composable subcomponent APIs and existing `packages/react` patterns.\n- Honor `:focus-visible`, `prefers-reduced-motion`, and forced-colors contracts from Spec / Doctor.\n- Start from https://ui.pelagornis.com/llm.txt (or `@refineui/mcp`) before inventing APIs.\n\n**Don\'t**\n\n- Hardcode hex, rgba, or arbitrary px in component styles.\n- Reference Foundation literals from component tokens \u2014 use semantic / `componentSizes`.\n- Invent variants, props, or dimensions not reflected in tokens + docs.\n- Duplicate this file\u2019s token tables into agent skills \u2014 link here instead.\n',
6
6
  pages: [
7
7
  {
8
8
  slug: "ai-tools/doctor",
@@ -100,8 +100,8 @@ var docs_index_default = {
100
100
  title: "Breadcrumb",
101
101
  description: "Hierarchical trail showing page location.",
102
102
  category: "components",
103
- content: '<div class="not-content my-6">\n <BreadcrumbPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Components</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Current</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API Reference\n\n### Breadcrumb\n\nRoot container (`<nav>` element).\n\n### BreadcrumbList\n\nOrdered list of breadcrumb items.\n\n### BreadcrumbItem\n\nList item wrapper.\n\n### BreadcrumbLink\n\nLink to a page.\n\n### BreadcrumbPage\n\nCurrent page (non-clickable).\n\n### BreadcrumbSeparator\n\nVisual separator between items.\n\n### BreadcrumbEllipsis\n\nCollapsed items indicator.',
104
- searchText: 'breadcrumb hierarchical trail showing page location. <div class="not-content my-6">\n <breadcrumbpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="breadcrumb" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumblink href="/docs">docs</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>components</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbellipsis />\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>current</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n```\n\n## api reference\n\n### breadcrumb\n\nroot container (`<nav>` element).\n\n### breadcrumblist\n\nordered list of breadcrumb items.\n\n### breadcrumbitem\n\nlist item wrapper.\n\n### breadcrumblink\n\nlink to a page.\n\n### breadcrumbpage\n\ncurrent page (non-clickable).\n\n### breadcrumbseparator\n\nvisual separator between items.\n\n### breadcrumbellipsis\n\ncollapsed items indicator.\n\n'
103
+ content: '<div class="not-content my-6">\n <BreadcrumbPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Components</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Current</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API Reference\n\n### Breadcrumb\n\nRoot container (`<nav>` element).\n\n### BreadcrumbList\n\nOrdered list of breadcrumb items.\n\n### BreadcrumbItem\n\nList item wrapper.\n\n### BreadcrumbLink\n\nLink to a page.\n\n### BreadcrumbPage\n\nCurrent page (non-clickable).\n\n### BreadcrumbSeparator\n\nVisual separator between items.\n\n### BreadcrumbEllipsis\n\nPresentational collapsed marker (square icon chip, not interactive).\n\n### BreadcrumbEllipsisTrigger\n\nInteractive collapsed control \u2014 ghost icon `Button` (`layout="icon"` `size="sm"`). Use when the ellipsis should open a menu or expand the trail.',
104
+ searchText: 'breadcrumb hierarchical trail showing page location. <div class="not-content my-6">\n <breadcrumbpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="breadcrumb" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumblink href="/docs">docs</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>components</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbellipsis />\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>current</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n```\n\n## api reference\n\n### breadcrumb\n\nroot container (`<nav>` element).\n\n### breadcrumblist\n\nordered list of breadcrumb items.\n\n### breadcrumbitem\n\nlist item wrapper.\n\n### breadcrumblink\n\nlink to a page.\n\n### breadcrumbpage\n\ncurrent page (non-clickable).\n\n### breadcrumbseparator\n\nvisual separator between items.\n\n### breadcrumbellipsis\n\npresentational collapsed marker (square icon chip, not interactive).\n\n### breadcrumbellipsistrigger\n\ninteractive collapsed control \u2014 ghost icon `button` (`layout="icon"` `size="sm"`). use when the ellipsis should open a menu or expand the trail.\n\n'
105
105
  },
106
106
  {
107
107
  slug: "components/bubble",
@@ -163,8 +163,8 @@ var docs_index_default = {
163
163
  title: "Chart",
164
164
  description: "Data visualization chart primitive.",
165
165
  category: "components",
166
- content: '<div class="not-content my-6">\n <ChartPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="chart" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartYAxisLabels values={data} />\n <ChartPlot aria-label="Weekly sales chart">\n <ChartGrid values={data} />\n <ChartBars values={data} seriesColor="blue" />\n </ChartPlot>\n <ChartAxisLabels labels={labels} />\n </ChartContent>\n </ChartBody>\n <ChartLegend>\n <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n </ChartLegend>\n</Chart>\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartPlot>\n <ChartGrid values={data} lines={5} />\n <ChartLine values={data} seriesColor="green" showArea showPoints />\n </ChartPlot>\n </ChartContent>\n </ChartBody>\n</Chart>\n```\n\n## API Reference\n\n### Chart\n\nRoot chart container.\n\n### ChartBody\n\nMain chart body section.\n\n### ChartContent\n\nChart content wrapper.\n\n### ChartPlot\n\nSVG plot area.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the chart." }\n ]}\n />\n</div>\n### ChartGrid\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "Horizontal grid line count (includes baseline)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum (auto-derived from values when omitted)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale derivation." }\n ]}\n />\n</div>\n### ChartBars\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "Bar values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n { prop: "showTrack", default: "false", type: "boolean", description: "Shows full-height track behind each bar." }\n ]}\n />\n</div>\n### ChartLine\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "Line values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n { prop: "showArea", default: "false", type: "boolean", description: "Area fill under the line." },\n { prop: "showPoints", default: "false", type: "boolean", description: "Point markers on each value." }\n ]}\n />\n</div>\n### ChartYAxisLabels\n\nY-axis tick labels.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale." },\n { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "Custom formatter." }\n ]}\n />\n</div>\n### ChartAxisLabels\n\nX-axis labels.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "Label strings (required)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "Alignment style." }\n ]}\n />\n</div>\n### ChartLegend\n\nLegend list container.\n\n### ChartLegendItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key (required)." }\n ]}\n />\n</div>',
167
- searchText: 'chart data visualization chart primitive. <div class="not-content my-6">\n <chartpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="chart" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartyaxislabels values={data} />\n <chartplot aria-label="weekly sales chart">\n <chartgrid values={data} />\n <chartbars values={data} seriescolor="blue" />\n </chartplot>\n <chartaxislabels labels={labels} />\n </chartcontent>\n </chartbody>\n <chartlegend>\n <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n </chartlegend>\n</chart>\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartplot>\n <chartgrid values={data} lines={5} />\n <chartline values={data} seriescolor="green" showarea showpoints />\n </chartplot>\n </chartcontent>\n </chartbody>\n</chart>\n```\n\n## api reference\n\n### chart\n\nroot chart container.\n\n### chartbody\n\nmain chart body section.\n\n### chartcontent\n\nchart content wrapper.\n\n### chartplot\n\nsvg plot area.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the chart." }\n ]}\n />\n</div>\n### chartgrid\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "horizontal grid line count (includes baseline)." },\n { prop: "max", default: "\u2014", type: "number", description: "y scale maximum (auto-derived from values when omitted)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale derivation." }\n ]}\n />\n</div>\n### chartbars\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "bar values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n { prop: "showtrack", default: "false", type: "boolean", description: "shows full-height track behind each bar." }\n ]}\n />\n</div>\n### chartline\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "line values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n { prop: "showarea", default: "false", type: "boolean", description: "area fill under the line." },\n { prop: "showpoints", default: "false", type: "boolean", description: "point markers on each value." }\n ]}\n />\n</div>\n### chartyaxislabels\n\ny-axis tick labels.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale." },\n { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "custom formatter." }\n ]}\n />\n</div>\n### chartaxislabels\n\nx-axis labels.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "label strings (required)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "alignment style." }\n ]}\n />\n</div>\n### chartlegend\n\nlegend list container.\n\n### chartlegenditem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key (required)." }\n ]}\n />\n</div>\n'
166
+ content: '<div class="not-content my-6">\n <ChartPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="chart" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartYAxisLabels values={data} />\n <ChartPlot aria-label="Weekly sales chart">\n <ChartGrid values={data} />\n <ChartBars values={data} seriesColor="blue" />\n </ChartPlot>\n <ChartAxisLabels labels={labels} />\n </ChartContent>\n </ChartBody>\n <ChartLegend>\n <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n </ChartLegend>\n</Chart>\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartPlot>\n <ChartGrid values={data} lines={5} />\n <ChartLine values={data} seriesColor="green" showArea showPoints />\n </ChartPlot>\n </ChartContent>\n </ChartBody>\n</Chart>\n```\n\n## API Reference\n\n### Chart\n\nRoot chart container.\n\n### ChartBody\n\nMain chart body section.\n\n### ChartContent\n\nChart content wrapper.\n\n### ChartPlot\n\nSVG plot area.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the chart." }\n ]}\n />\n</div>\n### ChartGrid\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "Horizontal grid line count (includes baseline)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum (auto-derived from values when omitted)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale derivation." }\n ]}\n />\n</div>\n### ChartBars\n\nBar tops use `roundedXLarge` (clamped to bar width/height).\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "Bar values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n { prop: "showTrack", default: "false", type: "boolean", description: "Shows full-height track behind each bar." }\n ]}\n />\n</div>\n### ChartLine\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "Line values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n { prop: "showArea", default: "false", type: "boolean", description: "Area fill under the line." },\n { prop: "showPoints", default: "false", type: "boolean", description: "Point markers on each value." }\n ]}\n />\n</div>\n### ChartYAxisLabels\n\nY-axis tick labels.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale." },\n { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "Custom formatter." }\n ]}\n />\n</div>\n### ChartAxisLabels\n\nX-axis labels.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "Label strings (required)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "Alignment style." }\n ]}\n />\n</div>\n### ChartLegend\n\nLegend list container.\n\n### ChartLegendItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key (required)." }\n ]}\n />\n</div>',
167
+ searchText: 'chart data visualization chart primitive. <div class="not-content my-6">\n <chartpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="chart" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartyaxislabels values={data} />\n <chartplot aria-label="weekly sales chart">\n <chartgrid values={data} />\n <chartbars values={data} seriescolor="blue" />\n </chartplot>\n <chartaxislabels labels={labels} />\n </chartcontent>\n </chartbody>\n <chartlegend>\n <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n </chartlegend>\n</chart>\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartplot>\n <chartgrid values={data} lines={5} />\n <chartline values={data} seriescolor="green" showarea showpoints />\n </chartplot>\n </chartcontent>\n </chartbody>\n</chart>\n```\n\n## api reference\n\n### chart\n\nroot chart container.\n\n### chartbody\n\nmain chart body section.\n\n### chartcontent\n\nchart content wrapper.\n\n### chartplot\n\nsvg plot area.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the chart." }\n ]}\n />\n</div>\n### chartgrid\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "horizontal grid line count (includes baseline)." },\n { prop: "max", default: "\u2014", type: "number", description: "y scale maximum (auto-derived from values when omitted)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale derivation." }\n ]}\n />\n</div>\n### chartbars\n\nbar tops use `roundedxlarge` (clamped to bar width/height).\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "bar values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n { prop: "showtrack", default: "false", type: "boolean", description: "shows full-height track behind each bar." }\n ]}\n />\n</div>\n### chartline\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "line values (required)." },\n { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n { prop: "showarea", default: "false", type: "boolean", description: "area fill under the line." },\n { prop: "showpoints", default: "false", type: "boolean", description: "point markers on each value." }\n ]}\n />\n</div>\n### chartyaxislabels\n\ny-axis tick labels.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale." },\n { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "custom formatter." }\n ]}\n />\n</div>\n### chartaxislabels\n\nx-axis labels.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "label strings (required)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "alignment style." }\n ]}\n />\n</div>\n### chartlegend\n\nlegend list container.\n\n### chartlegenditem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key (required)." }\n ]}\n />\n</div>\n'
168
168
  },
169
169
  {
170
170
  slug: "components/checkbox",
@@ -172,8 +172,17 @@ var docs_index_default = {
172
172
  title: "Checkbox",
173
173
  description: "Binary selection control for forms.",
174
174
  category: "components",
175
- content: '<div class="not-content my-6">\n <CheckboxPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="checkbox" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n <TokenInspector client:load component="checkbox" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n label="Enable notifications"\n description="Receive updates about your account"\n checked={notificationsEnabled}\n onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n## API Reference\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "Checkbox label text." },\n { prop: "description", default: "\u2014", type: "string", description: "Optional description below the label." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "Visual variant style." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "Controlled checked state." },\n { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n ]}\n />\n</div>',
176
- searchText: 'checkbox binary selection control for forms. <div class="not-content my-6">\n <checkboxpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="checkbox" />\n</div>\n\n## tokens\n\n<div class="not-content">\n <tokeninspector client:load component="checkbox" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n label="enable notifications"\n description="receive updates about your account"\n checked={notificationsenabled}\n onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n## api reference\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "checkbox label text." },\n { prop: "description", default: "\u2014", type: "string", description: "optional description below the label." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "visual variant style." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "controlled checked state." },\n { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n ]}\n />\n</div>\n'
175
+ content: '<div class="not-content my-6">\n <CheckboxPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="checkbox" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n <TokenInspector client:load component="checkbox" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n label="Enable notifications"\n description="Receive updates about your account"\n checked={notificationsEnabled}\n onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\nDefault (square) controls use `roundedLarge`. The `circular` variant uses `roundedCircle`.\n\n## API Reference\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "Checkbox label text." },\n { prop: "description", default: "\u2014", type: "string", description: "Optional description below the label." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "Visual variant style." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "Controlled checked state." },\n { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n ]}\n />\n</div>',
176
+ searchText: 'checkbox binary selection control for forms. <div class="not-content my-6">\n <checkboxpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="checkbox" />\n</div>\n\n## tokens\n\n<div class="not-content">\n <tokeninspector client:load component="checkbox" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n label="enable notifications"\n description="receive updates about your account"\n checked={notificationsenabled}\n onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\ndefault (square) controls use `roundedlarge`. the `circular` variant uses `roundedcircle`.\n\n## api reference\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "checkbox label text." },\n { prop: "description", default: "\u2014", type: "string", description: "optional description below the label." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "visual variant style." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "controlled checked state." },\n { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n ]}\n />\n</div>\n'
177
+ },
178
+ {
179
+ slug: "components/collapsible",
180
+ href: "/components/collapsible/",
181
+ title: "Collapsible",
182
+ description: "Show and hide a section from a trigger.",
183
+ category: "components",
184
+ content: '<div class="not-content my-6">\n <CollapsiblePreview client:load />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Collapsible defaultOpen>\n <CollapsibleTrigger>Details</CollapsibleTrigger>\n <CollapsibleContent>\n Hidden until the trigger opens it.\n </CollapsibleContent>\n</Collapsible>\n```\n\n`open` and `onOpenChange` make it controlled. `CollapsibleTrigger` accepts `asChild` and merges onto its child. Closed content stays mounted and is hidden.',
185
+ searchText: 'collapsible show and hide a section from a trigger. <div class="not-content my-6">\n <collapsiblepreview client:load />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<collapsible defaultopen>\n <collapsibletrigger>details</collapsibletrigger>\n <collapsiblecontent>\n hidden until the trigger opens it.\n </collapsiblecontent>\n</collapsible>\n```\n\n`open` and `onopenchange` make it controlled. `collapsibletrigger` accepts `aschild` and merges onto its child. closed content stays mounted and is hidden.\n'
177
186
  },
178
187
  {
179
188
  slug: "components/command",
@@ -193,6 +202,15 @@ var docs_index_default = {
193
202
  content: '`Container` centers content horizontally with optional spacing-token padding. Use it as a page or section shell.\n\n<div class="not-content my-6">\n <ContainerPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="container" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Container padding="sizeXXLarge">\n <Stack gap="sizeLarge">\n <Text variant="headingMd" as="h1">Page title</Text>\n <Text variant="bodyMd">Body</Text>\n </Stack>\n</Container>\n```\n\n## API Reference\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "as", default: "\\"div\\"", type: "ElementType", description: "Root element." },\n { prop: "padding", default: "\u2014", type: "Spacing token", description: "Padding on all sides." }\n ]}\n />\n</div>',
194
203
  searchText: 'container centered page shell with token padding and full max width. `container` centers content horizontally with optional spacing-token padding. use it as a page or section shell.\n\n<div class="not-content my-6">\n <containerpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="container" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<container padding="sizexxlarge">\n <stack gap="sizelarge">\n <text variant="headingmd" as="h1">page title</text>\n <text variant="bodymd">body</text>\n </stack>\n</container>\n```\n\n## api reference\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "as", default: "\\"div\\"", type: "elementtype", description: "root element." },\n { prop: "padding", default: "\u2014", type: "spacing token", description: "padding on all sides." }\n ]}\n />\n</div>\n'
195
204
  },
205
+ {
206
+ slug: "components/context-menu",
207
+ href: "/components/context-menu/",
208
+ title: "Context Menu",
209
+ description: "A menu opened from a right click.",
210
+ category: "components",
211
+ content: '<div class="not-content my-6">\n <ContextMenuPreview client:load />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<ContextMenu>\n <ContextMenuTrigger asChild>\n <div>Right click</div>\n </ContextMenuTrigger>\n <ContextMenuPortal>\n <ContextMenuContent>\n <ContextMenuItem onSelect={() => copy()}>Copy</ContextMenuItem>\n <ContextMenuSeparator />\n <ContextMenuSub>\n <ContextMenuSubTrigger>More</ContextMenuSubTrigger>\n <ContextMenuPortal>\n <ContextMenuSubContent>\n <ContextMenuItem>Rename</ContextMenuItem>\n </ContextMenuSubContent>\n </ContextMenuPortal>\n </ContextMenuSub>\n </ContextMenuContent>\n </ContextMenuPortal>\n</ContextMenu>\n```\n\n`onSelect` receives an event. Call `preventDefault()` on it to keep the menu open. Disabled items do not select.',
212
+ searchText: 'context menu a menu opened from a right click. <div class="not-content my-6">\n <contextmenupreview client:load />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<contextmenu>\n <contextmenutrigger aschild>\n <div>right click</div>\n </contextmenutrigger>\n <contextmenuportal>\n <contextmenucontent>\n <contextmenuitem onselect={() => copy()}>copy</contextmenuitem>\n <contextmenuseparator />\n <contextmenusub>\n <contextmenusubtrigger>more</contextmenusubtrigger>\n <contextmenuportal>\n <contextmenusubcontent>\n <contextmenuitem>rename</contextmenuitem>\n </contextmenusubcontent>\n </contextmenuportal>\n </contextmenusub>\n </contextmenucontent>\n </contextmenuportal>\n</contextmenu>\n```\n\n`onselect` receives an event. call `preventdefault()` on it to keep the menu open. disabled items do not select.\n'
213
+ },
196
214
  {
197
215
  slug: "components/dialog",
198
216
  href: "/components/dialog/",
@@ -271,8 +289,8 @@ var docs_index_default = {
271
289
  title: "Input OTP",
272
290
  description: "One-time password code input field.",
273
291
  category: "components",
274
- content: '<div class="not-content my-6">\n <InputOTPDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="input-otp" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n maxLength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="Enter verification code"\n/>\n```\n\n## API Reference\n\n### InputOTP\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Controlled OTP string." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when value changes." },\n { prop: "maxLength", default: "\u2014", type: "number", description: "Number of slots (required)." },\n { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "Per-character allowlist (default: digits only)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Control size tier." },\n { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." },\n { prop: "autoFocus", default: "false", type: "boolean", description: "Auto-focus on mount." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the control." }\n ]}\n />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "Zero-based slot index (required)." }\n ]}\n />\n</div>',
275
- searchText: 'input otp one-time password code input field. <div class="not-content my-6">\n <inputotpdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="input-otp" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n <inputotpslot index={0} />\n <inputotpslot index={1} />\n <inputotpslot index={2} />\n <inputotpslot index={3} />\n <inputotpslot index={4} />\n <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n maxlength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="enter verification code"\n/>\n```\n\n## api reference\n\n### inputotp\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "controlled otp string." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when value changes." },\n { prop: "maxlength", default: "\u2014", type: "number", description: "number of slots (required)." },\n { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "per-character allowlist (default: digits only)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "control size tier." },\n { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." },\n { prop: "autofocus", default: "false", type: "boolean", description: "auto-focus on mount." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the control." }\n ]}\n />\n</div>\n### inputotpslot\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "zero-based slot index (required)." }\n ]}\n />\n</div>\n'
292
+ content: '<div class="not-content my-6">\n <InputOTPDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="input-otp" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n maxLength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="Enter verification code"\n/>\n```\n\nEmpty slots pulse with the same opacity motion as Skeleton (staggered by index). The pulse stops when a slot is filled, focused, disabled, or when `prefers-reduced-motion` is set.\n\n## API Reference\n\n### InputOTP\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Controlled OTP string." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when value changes." },\n { prop: "maxLength", default: "\u2014", type: "number", description: "Number of slots (required)." },\n { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "Per-character allowlist (default: digits only)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Control size tier." },\n { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." },\n { prop: "autoFocus", default: "false", type: "boolean", description: "Auto-focus on mount." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the control." }\n ]}\n />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "Zero-based slot index (required)." }\n ]}\n />\n</div>',
293
+ searchText: 'input otp one-time password code input field. <div class="not-content my-6">\n <inputotpdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="input-otp" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n <inputotpslot index={0} />\n <inputotpslot index={1} />\n <inputotpslot index={2} />\n <inputotpslot index={3} />\n <inputotpslot index={4} />\n <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n maxlength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="enter verification code"\n/>\n```\n\nempty slots pulse with the same opacity motion as skeleton (staggered by index). the pulse stops when a slot is filled, focused, disabled, or when `prefers-reduced-motion` is set.\n\n## api reference\n\n### inputotp\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "controlled otp string." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when value changes." },\n { prop: "maxlength", default: "\u2014", type: "number", description: "number of slots (required)." },\n { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "per-character allowlist (default: digits only)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "control size tier." },\n { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." },\n { prop: "autofocus", default: "false", type: "boolean", description: "auto-focus on mount." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the control." }\n ]}\n />\n</div>\n### inputotpslot\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "zero-based slot index (required)." }\n ]}\n />\n</div>\n'
276
294
  },
277
295
  {
278
296
  slug: "components/input",
@@ -307,8 +325,8 @@ var docs_index_default = {
307
325
  title: "Menu",
308
326
  description: "Action menu dropdown with list items.",
309
327
  category: "components",
310
- content: '<div class="not-content my-6">\n <MenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuItem onSelect={() => handleNew()}>\n New File\n </MenuItem>\n <MenuItem onSelect={() => handleOpen()}>\n Open\n </MenuItem>\n <MenuDivider />\n <MenuItem state="disabled">\n Save (disabled)\n </MenuItem>\n </MenuList>\n </MenuPopover>\n</Menu>\n\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuSection>\n <MenuItem\n startIcon={<Icon />}\n endIcon={<Badge />}\n description="Description text"\n shortcut="\u2318N"\n >\n Menu Item\n </MenuItem>\n <MenuSubTrigger>Submenu</MenuSubTrigger>\n <MenuSubContent>\n <MenuItem>Submenu Item</MenuItem>\n </MenuSubContent>\n </MenuSection>\n </MenuList>\n </MenuPopover>\n</Menu>\n```\n\n## API Reference\n\n### Menu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "Positioning configuration." }\n ]}\n />\n</div>\n### MenuPopover\n\nPopover container for the menu.\n\n### MenuList\n\nList container for menu items.\n\n### MenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "Keyboard shortcut hint." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "Trailing icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n ]}\n />\n</div>\n### MenuSection\n\nGroups related menu items.\n\n### MenuDivider\n\nVisual separator between items.\n\n### MenuSubTrigger\n\nSubmenu trigger item (shows chevron).\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n ]}\n />\n</div>\n### MenuSubContent\n\nSubmenu panel.',
311
- searchText: 'menu action menu dropdown with list items. <div class="not-content my-6">\n <menupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<menu>\n <menupopover>\n <menulist>\n <menuitem onselect={() => handlenew()}>\n new file\n </menuitem>\n <menuitem onselect={() => handleopen()}>\n open\n </menuitem>\n <menudivider />\n <menuitem state="disabled">\n save (disabled)\n </menuitem>\n </menulist>\n </menupopover>\n</menu>\n\n<menu>\n <menupopover>\n <menulist>\n <menusection>\n <menuitem\n starticon={<icon />}\n endicon={<badge />}\n description="description text"\n shortcut="\u2318n"\n >\n menu item\n </menuitem>\n <menusubtrigger>submenu</menusubtrigger>\n <menusubcontent>\n <menuitem>submenu item</menuitem>\n </menusubcontent>\n </menusection>\n </menulist>\n </menupopover>\n</menu>\n```\n\n## api reference\n\n### menu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "menupositioning", description: "positioning configuration." }\n ]}\n />\n</div>\n### menupopover\n\npopover container for the menu.\n\n### menulist\n\nlist container for menu items.\n\n### menuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n { prop: "shortcut", default: "\u2014", type: "reactnode", description: "keyboard shortcut hint." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n { prop: "endicon", default: "\u2014", type: "reactnode", description: "trailing icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n ]}\n />\n</div>\n### menusection\n\ngroups related menu items.\n\n### menudivider\n\nvisual separator between items.\n\n### menusubtrigger\n\nsubmenu trigger item (shows chevron).\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n ]}\n />\n</div>\n### menusubcontent\n\nsubmenu panel.\n\n'
328
+ content: '<div class="not-content my-6">\n <MenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuItem onSelect={() => handleNew()}>\n New File\n </MenuItem>\n <MenuItem onSelect={() => handleOpen()}>\n Open\n </MenuItem>\n <MenuDivider />\n <MenuItem state="disabled">\n Save (disabled)\n </MenuItem>\n </MenuList>\n </MenuPopover>\n</Menu>\n\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuLabel>File</MenuLabel>\n <MenuItem\n startIcon={<Icon />}\n endIcon={<Badge />}\n description="Description text"\n shortcut="\u2318N"\n >\n Menu Item\n </MenuItem>\n <MenuSubTrigger>Submenu</MenuSubTrigger>\n <MenuSubContent>\n <MenuItem>Submenu Item</MenuItem>\n </MenuSubContent>\n </MenuList>\n </MenuPopover>\n</Menu>\n```\n\n## API Reference\n\n### Menu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "Positioning configuration." }\n ]}\n />\n</div>\n### MenuPopover\n\nPopover container for the menu.\n\n### MenuList\n\nList container for menu items.\n\n### MenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "Keyboard shortcut hint." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "Trailing icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n ]}\n />\n</div>\n### MenuLabel\n\nHeading label for a group of related items.\n\n### MenuDivider\n\nVisual separator between items.\n\n### MenuSubTrigger\n\nSubmenu trigger item (shows chevron).\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n ]}\n />\n</div>\n### MenuSubContent\n\nSubmenu panel.',
329
+ searchText: 'menu action menu dropdown with list items. <div class="not-content my-6">\n <menupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<menu>\n <menupopover>\n <menulist>\n <menuitem onselect={() => handlenew()}>\n new file\n </menuitem>\n <menuitem onselect={() => handleopen()}>\n open\n </menuitem>\n <menudivider />\n <menuitem state="disabled">\n save (disabled)\n </menuitem>\n </menulist>\n </menupopover>\n</menu>\n\n<menu>\n <menupopover>\n <menulist>\n <menulabel>file</menulabel>\n <menuitem\n starticon={<icon />}\n endicon={<badge />}\n description="description text"\n shortcut="\u2318n"\n >\n menu item\n </menuitem>\n <menusubtrigger>submenu</menusubtrigger>\n <menusubcontent>\n <menuitem>submenu item</menuitem>\n </menusubcontent>\n </menulist>\n </menupopover>\n</menu>\n```\n\n## api reference\n\n### menu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "menupositioning", description: "positioning configuration." }\n ]}\n />\n</div>\n### menupopover\n\npopover container for the menu.\n\n### menulist\n\nlist container for menu items.\n\n### menuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n { prop: "shortcut", default: "\u2014", type: "reactnode", description: "keyboard shortcut hint." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n { prop: "endicon", default: "\u2014", type: "reactnode", description: "trailing icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n ]}\n />\n</div>\n### menulabel\n\nheading label for a group of related items.\n\n### menudivider\n\nvisual separator between items.\n\n### menusubtrigger\n\nsubmenu trigger item (shows chevron).\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n ]}\n />\n</div>\n### menusubcontent\n\nsubmenu panel.\n\n'
312
330
  },
313
331
  {
314
332
  slug: "components/navigation-menu",
@@ -397,8 +415,8 @@ var docs_index_default = {
397
415
  title: "Segmented Control",
398
416
  description: "Linear set of mutually exclusive options.",
399
417
  category: "components",
400
- content: '<div class="not-content my-6">\n <SegmentedControlPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n <TokenInspector client:load component="segmented-control" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n## API Reference\n\n### SegmentedControl\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Controlled selected value." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when selection changes." }\n ]}\n />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Unique value for this option (required)." },\n { prop: "disabled", default: "false", type: "boolean", description: "Disables this option." }\n ]}\n />\n</div>',
401
- searchText: 'segmented control linear set of mutually exclusive options. <div class="not-content my-6">\n <segmentedcontrolpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="segmented-control" />\n</div>\n\n## tokens\n\n<div class="not-content">\n <tokeninspector client:load component="segmented-control" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n## api reference\n\n### segmentedcontrol\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "controlled selected value." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when selection changes." }\n ]}\n />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "unique value for this option (required)." },\n { prop: "disabled", default: "false", type: "boolean", description: "disables this option." }\n ]}\n />\n</div>\n'
418
+ content: '<div class="not-content my-6">\n <SegmentedControlPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n <TokenInspector client:load component="segmented-control" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\nThe selected thumb is a sliding brand indicator. Until geometry is ready (`data-ready`), the selected item keeps a brand fill so the first paint is not blank. After the first layout, transform leads width slightly so the slide feels less mechanical.\n\n## API Reference\n\n### SegmentedControl\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Controlled selected value." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when selection changes." }\n ]}\n />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Unique value for this option (required)." },\n { prop: "disabled", default: "false", type: "boolean", description: "Disables this option." }\n ]}\n />\n</div>',
419
+ searchText: 'segmented control linear set of mutually exclusive options. <div class="not-content my-6">\n <segmentedcontrolpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="segmented-control" />\n</div>\n\n## tokens\n\n<div class="not-content">\n <tokeninspector client:load component="segmented-control" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\nthe selected thumb is a sliding brand indicator. until geometry is ready (`data-ready`), the selected item keeps a brand fill so the first paint is not blank. after the first layout, transform leads width slightly so the slide feels less mechanical.\n\n## api reference\n\n### segmentedcontrol\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "controlled selected value." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when selection changes." }\n ]}\n />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "unique value for this option (required)." },\n { prop: "disabled", default: "false", type: "boolean", description: "disables this option." }\n ]}\n />\n</div>\n'
402
420
  },
403
421
  {
404
422
  slug: "components/select",
@@ -580,6 +598,15 @@ var docs_index_default = {
580
598
  content: 'RefineUI themes resolve through semantic aliases (`--refineui-color-alias-*`). Toggle dark by setting `data-theme="dark"` (and optionally `.dark`) on the document root \u2014 the same path documentation uses.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## Rules\n\n- Consume **aliases** in UI (`background-brand`, `foreground-primary`), not raw palette steps\n- Component sizes stay linked to Foundation size steps\n- Do not invent theme-specific hex in product CSS\n\nSee [Color](/foundations/color/) for the visual token map.',
581
599
  searchText: 'theming light and dark surfaces from semantic color aliases. \nrefineui themes resolve through semantic aliases (`--refineui-color-alias-*`). toggle dark by setting `data-theme="dark"` (and optionally `.dark`) on the document root \u2014 the same path documentation uses.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## rules\n\n- consume **aliases** in ui (`background-brand`, `foreground-primary`), not raw palette steps\n- component sizes stay linked to foundation size steps\n- do not invent theme-specific hex in product css\n\nsee [color](/foundations/color/) for the visual token map.\n'
582
600
  },
601
+ {
602
+ slug: "foundations/blur",
603
+ href: "/foundations/blur/",
604
+ title: "Blur",
605
+ description: "Backdrop and surface blur steps for frosted chrome.",
606
+ category: "foundations",
607
+ content: 'Prefer **semantic roles** (`overlayScrim`, `surfaceFrost`) \u2014 CSS `--refineui-blur-overlay-scrim`. Do not invent a one-off `blur(2px)` in components.\n\n## Semantic roles\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="Semantic blur roles"\n columns={[\n { key: "token", header: "Token", mono: true },\n { key: "css", header: "CSS variable", mono: true },\n { key: "foundation", header: "Foundation", mono: true },\n { key: "use", header: "Use" },\n ]}\n rows={[\n {\n token: "overlayScrim",\n css: "--refineui-blur-overlay-scrim",\n foundation: "blur2",\n use: "Dialog / Drawer scrim backdrop-filter",\n },\n {\n token: "surfaceFrost",\n css: "--refineui-blur-surface-frost",\n foundation: "blur16",\n use: "Menu / Dropdown / Select / Context Menu / SidebarPeek frosted panels",\n },\n ]}\n />\n</div>\n\nPair the blur with translucent fill **`surfaceFrosted`** (`--refineui-color-alias-surface-frosted`). Opaque `backgroundPrimary` alone will hide the blur.\n\n## Foundation steps\n\nValue-based keys only \u2014 extend here before adding new semantic roles.\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="Foundation blur steps"\n columns={[\n { key: "token", header: "Token", mono: true },\n { key: "value", header: "Value", mono: true },\n ]}\n rows={[\n { token: "blurNone", value: "0" },\n { token: "blur2", value: "2px" },\n { token: "blur4", value: "4px" },\n { token: "blur8", value: "8px" },\n { token: "blur12", value: "12px" },\n { token: "blur16", value: "16px" },\n ]}\n />\n</div>\n\nScrim **tint** stays on `surfaceOverlay` / `--refineui-overlay-backdrop` (see [Opacity](/foundations/opacity/) and [Color](/foundations/color/)). Blur is the filter radius only.\n\n`prefers-reduced-transparency: reduce` collapses Dialog/Drawer `backdrop-filter` to `none` in `refineui.css`.\n\n## Usage\n\n```css\n.menu-panel {\n background: var(--refineui-color-alias-surface-frosted);\n backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n background: var(--refineui-overlay-backdrop);\n backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```',
608
+ searchText: 'blur backdrop and surface blur steps for frosted chrome. \nprefer **semantic roles** (`overlayscrim`, `surfacefrost`) \u2014 css `--refineui-blur-overlay-scrim`. do not invent a one-off `blur(2px)` in components.\n\n## semantic roles\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="semantic blur roles"\n columns={[\n { key: "token", header: "token", mono: true },\n { key: "css", header: "css variable", mono: true },\n { key: "foundation", header: "foundation", mono: true },\n { key: "use", header: "use" },\n ]}\n rows={[\n {\n token: "overlayscrim",\n css: "--refineui-blur-overlay-scrim",\n foundation: "blur2",\n use: "dialog / drawer scrim backdrop-filter",\n },\n {\n token: "surfacefrost",\n css: "--refineui-blur-surface-frost",\n foundation: "blur16",\n use: "menu / dropdown / select / context menu / sidebarpeek frosted panels",\n },\n ]}\n />\n</div>\n\npair the blur with translucent fill **`surfacefrosted`** (`--refineui-color-alias-surface-frosted`). opaque `backgroundprimary` alone will hide the blur.\n\n## foundation steps\n\nvalue-based keys only \u2014 extend here before adding new semantic roles.\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="foundation blur steps"\n columns={[\n { key: "token", header: "token", mono: true },\n { key: "value", header: "value", mono: true },\n ]}\n rows={[\n { token: "blurnone", value: "0" },\n { token: "blur2", value: "2px" },\n { token: "blur4", value: "4px" },\n { token: "blur8", value: "8px" },\n { token: "blur12", value: "12px" },\n { token: "blur16", value: "16px" },\n ]}\n />\n</div>\n\nscrim **tint** stays on `surfaceoverlay` / `--refineui-overlay-backdrop` (see [opacity](/foundations/opacity/) and [color](/foundations/color/)). blur is the filter radius only.\n\n`prefers-reduced-transparency: reduce` collapses dialog/drawer `backdrop-filter` to `none` in `refineui.css`.\n\n## usage\n\n```css\n.menu-panel {\n background: var(--refineui-color-alias-surface-frosted);\n backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n background: var(--refineui-overlay-backdrop);\n backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```\n'
609
+ },
583
610
  {
584
611
  slug: "foundations/border",
585
612
  href: "/foundations/border/",
@@ -604,8 +631,8 @@ var docs_index_default = {
604
631
  title: "Design tokens",
605
632
  description: "Semantic variables that power RefineUI \u2014 color, type, space, motion, and stacking.",
606
633
  category: "foundations",
607
- content: 'Tokens are the single source for visual values. `@refineui/tokens` maps Foundation scales to CSS variables and Tailwind utilities. Components and product UI should reference **semantic names**, not palette hex or raw `px`.\n\n## Categories\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="Token categories"\n columns={[\n { key: "category", header: "Category", hrefKey: "href" },\n { key: "use", header: "Use for" },\n ]}\n rows={[\n { category: "Color", href: "/foundations/color/", use: "Surfaces, text, borders, brand, status" },\n { category: "Typography", href: "/foundations/typography/", use: "Text roles (headingMd, bodyMd, \u2026)" },\n { category: "Spacing", href: "/foundations/spacing/", use: "Gaps, padding, margins" },\n { category: "Sizing", href: "/foundations/sizing/", use: "Control heights, icons, layout steps" },\n { category: "Radius", href: "/foundations/radius/", use: "Corner radii" },\n { category: "Border", href: "/foundations/border/", use: "Stroke widths" },\n { category: "Elevation", href: "/foundations/elevation/", use: "Shadows / depth" },\n { category: "Opacity", href: "/foundations/opacity/", use: "Disabled wash, overlay helpers" },\n { category: "Motion", href: "/foundations/motion/", use: "Duration, easing, press scale" },\n { category: "Z-index", href: "/foundations/z-index/", use: "Overlay stacking" },\n ]}\n />\n</div>\n\n## Rules\n\n1. Prefer semantic aliases (`backgroundSurface`, `sizeMedium`, `fast`) over Foundation primitives in product code.\n2. If a value is missing, update Foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. Import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.',
608
- searchText: 'design tokens semantic variables that power refineui \u2014 color, type, space, motion, and stacking. \ntokens are the single source for visual values. `@refineui/tokens` maps foundation scales to css variables and tailwind utilities. components and product ui should reference **semantic names**, not palette hex or raw `px`.\n\n## categories\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="token categories"\n columns={[\n { key: "category", header: "category", hrefkey: "href" },\n { key: "use", header: "use for" },\n ]}\n rows={[\n { category: "color", href: "/foundations/color/", use: "surfaces, text, borders, brand, status" },\n { category: "typography", href: "/foundations/typography/", use: "text roles (headingmd, bodymd, \u2026)" },\n { category: "spacing", href: "/foundations/spacing/", use: "gaps, padding, margins" },\n { category: "sizing", href: "/foundations/sizing/", use: "control heights, icons, layout steps" },\n { category: "radius", href: "/foundations/radius/", use: "corner radii" },\n { category: "border", href: "/foundations/border/", use: "stroke widths" },\n { category: "elevation", href: "/foundations/elevation/", use: "shadows / depth" },\n { category: "opacity", href: "/foundations/opacity/", use: "disabled wash, overlay helpers" },\n { category: "motion", href: "/foundations/motion/", use: "duration, easing, press scale" },\n { category: "z-index", href: "/foundations/z-index/", use: "overlay stacking" },\n ]}\n />\n</div>\n\n## rules\n\n1. prefer semantic aliases (`backgroundsurface`, `sizemedium`, `fast`) over foundation primitives in product code.\n2. if a value is missing, update foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.\n'
634
+ content: 'Tokens are the single source for visual values. `@refineui/tokens` maps Foundation scales to CSS variables and Tailwind utilities. Components and product UI should reference **semantic names**, not palette hex or raw `px`.\n\n## Categories\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="Token categories"\n columns={[\n { key: "category", header: "Category", hrefKey: "href" },\n { key: "use", header: "Use for" },\n ]}\n rows={[\n { category: "Color", href: "/foundations/color/", use: "Surfaces, text, borders, brand, status" },\n { category: "Typography", href: "/foundations/typography/", use: "Text roles (headingMd, bodyMd, \u2026)" },\n { category: "Spacing", href: "/foundations/spacing/", use: "Gaps, padding, margins" },\n { category: "Sizing", href: "/foundations/sizing/", use: "Control heights, icons, layout steps" },\n { category: "Radius", href: "/foundations/radius/", use: "Corner radii" },\n { category: "Border", href: "/foundations/border/", use: "Stroke widths" },\n { category: "Elevation", href: "/foundations/elevation/", use: "Shadows / depth" },\n { category: "Opacity", href: "/foundations/opacity/", use: "Disabled wash, overlay helpers" },\n { category: "Blur", href: "/foundations/blur/", use: "Backdrop / surface frosted blur" },\n { category: "Motion", href: "/foundations/motion/", use: "Duration, easing, press scale" },\n { category: "Z-index", href: "/foundations/z-index/", use: "Overlay stacking" },\n ]}\n />\n</div>\n\n## Rules\n\n1. Prefer semantic aliases (`backgroundSurface`, `sizeMedium`, `fast`) over Foundation primitives in product code.\n2. If a value is missing, update Foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. Import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.',
635
+ searchText: 'design tokens semantic variables that power refineui \u2014 color, type, space, motion, and stacking. \ntokens are the single source for visual values. `@refineui/tokens` maps foundation scales to css variables and tailwind utilities. components and product ui should reference **semantic names**, not palette hex or raw `px`.\n\n## categories\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="token categories"\n columns={[\n { key: "category", header: "category", hrefkey: "href" },\n { key: "use", header: "use for" },\n ]}\n rows={[\n { category: "color", href: "/foundations/color/", use: "surfaces, text, borders, brand, status" },\n { category: "typography", href: "/foundations/typography/", use: "text roles (headingmd, bodymd, \u2026)" },\n { category: "spacing", href: "/foundations/spacing/", use: "gaps, padding, margins" },\n { category: "sizing", href: "/foundations/sizing/", use: "control heights, icons, layout steps" },\n { category: "radius", href: "/foundations/radius/", use: "corner radii" },\n { category: "border", href: "/foundations/border/", use: "stroke widths" },\n { category: "elevation", href: "/foundations/elevation/", use: "shadows / depth" },\n { category: "opacity", href: "/foundations/opacity/", use: "disabled wash, overlay helpers" },\n { category: "blur", href: "/foundations/blur/", use: "backdrop / surface frosted blur" },\n { category: "motion", href: "/foundations/motion/", use: "duration, easing, press scale" },\n { category: "z-index", href: "/foundations/z-index/", use: "overlay stacking" },\n ]}\n />\n</div>\n\n## rules\n\n1. prefer semantic aliases (`backgroundsurface`, `sizemedium`, `fast`) over foundation primitives in product code.\n2. if a value is missing, update foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.\n'
609
636
  },
610
637
  {
611
638
  slug: "foundations/elevation",
@@ -649,8 +676,8 @@ var docs_index_default = {
649
676
  title: "Opacity",
650
677
  description: "Shared opacity steps and overlay helpers.",
651
678
  category: "foundations",
652
- content: '<div class="not-content">\n <SpecTable\n client:load\n aria-label="Opacity tokens"\n columns={[\n { key: "token", header: "Token", mono: true },\n { key: "value", header: "Value", mono: true },\n { key: "use", header: "Use" },\n ]}\n rows={[\n { token: "opacityFull", value: "1", use: "Default" },\n { token: "opacityDisabled", value: "0.5", use: "Disabled wash" },\n { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (dark)" },\n ]}\n />\n</div>\n\nPage dimmers use `surfaceOverlay` / `--refineui-overlay-backdrop` (see [Color](/foundations/color/)), not a custom alpha.\n\n<div class="not-content">\n <OpacityPreview client:load />\n</div>\n\n## Usage\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```',
653
- searchText: 'opacity shared opacity steps and overlay helpers. \n<div class="not-content">\n <spectable\n client:load\n aria-label="opacity tokens"\n columns={[\n { key: "token", header: "token", mono: true },\n { key: "value", header: "value", mono: true },\n { key: "use", header: "use" },\n ]}\n rows={[\n { token: "opacityfull", value: "1", use: "default" },\n { token: "opacitydisabled", value: "0.5", use: "disabled wash" },\n { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (dark)" },\n ]}\n />\n</div>\n\npage dimmers use `surfaceoverlay` / `--refineui-overlay-backdrop` (see [color](/foundations/color/)), not a custom alpha.\n\n<div class="not-content">\n <opacitypreview client:load />\n</div>\n\n## usage\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```\n'
679
+ content: '<div class="not-content">\n <SpecTable\n client:load\n aria-label="Opacity tokens"\n columns={[\n { key: "token", header: "Token", mono: true },\n { key: "value", header: "Value", mono: true },\n { key: "use", header: "Use" },\n ]}\n rows={[\n { token: "opacityFull", value: "1", use: "Default" },\n { token: "opacityDisabled", value: "0.5", use: "Disabled wash" },\n { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (dark)" },\n ]}\n />\n</div>\n\nPage dimmers use `surfaceOverlay` / `--refineui-overlay-backdrop` (see [Color](/foundations/color/)), not a custom alpha. Backdrop **blur** radius lives under [Blur](/foundations/blur/) (`overlayScrim`).\n\n<div class="not-content">\n <OpacityPreview client:load />\n</div>\n\n## Usage\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```',
680
+ searchText: 'opacity shared opacity steps and overlay helpers. \n<div class="not-content">\n <spectable\n client:load\n aria-label="opacity tokens"\n columns={[\n { key: "token", header: "token", mono: true },\n { key: "value", header: "value", mono: true },\n { key: "use", header: "use" },\n ]}\n rows={[\n { token: "opacityfull", value: "1", use: "default" },\n { token: "opacitydisabled", value: "0.5", use: "disabled wash" },\n { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (dark)" },\n ]}\n />\n</div>\n\npage dimmers use `surfaceoverlay` / `--refineui-overlay-backdrop` (see [color](/foundations/color/)), not a custom alpha. backdrop **blur** radius lives under [blur](/foundations/blur/) (`overlayscrim`).\n\n<div class="not-content">\n <opacitypreview client:load />\n</div>\n\n## usage\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```\n'
654
681
  },
655
682
  {
656
683
  slug: "foundations/radius",
@@ -811,8 +838,8 @@ var docs_index_default = {
811
838
  title: "Breadcrumb",
812
839
  description: "\uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C.",
813
840
  category: "guides",
814
- content: '<div class="not-content my-6">\n <BreadcrumbPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Components</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Current</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### BreadcrumbList\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### BreadcrumbItem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### BreadcrumbLink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### BreadcrumbPage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### BreadcrumbSeparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### BreadcrumbEllipsis\n\n\uC811\uD78C \uD56D\uBAA9 \uD45C\uC2DC\uAE30.',
815
- searchText: 'breadcrumb \uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C. <div class="not-content my-6">\n <breadcrumbpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumblink href="/docs">docs</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>components</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbellipsis />\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>current</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### breadcrumblist\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### breadcrumbitem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### breadcrumblink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### breadcrumbpage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### breadcrumbseparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### breadcrumbellipsis\n\n\uC811\uD78C \uD56D\uBAA9 \uD45C\uC2DC\uAE30.\n\n'
841
+ content: '<div class="not-content my-6">\n <BreadcrumbPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Components</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href="/">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Current</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### BreadcrumbList\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### BreadcrumbItem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### BreadcrumbLink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### BreadcrumbPage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### BreadcrumbSeparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### BreadcrumbEllipsis\n\n\uD45C\uC2DC\uC6A9 \uC811\uD798 \uB9C8\uCEE4(\uC815\uC0AC\uAC01 \uC544\uC774\uCF58 \uCE69, \uBE44\uC778\uD130\uB799\uD2F0\uBE0C).\n\n### BreadcrumbEllipsisTrigger\n\n\uC778\uD130\uB799\uD2F0\uBE0C \uC811\uD798 \uCEE8\uD2B8\uB864 \u2014 ghost icon `Button`(`layout="icon"` `size="sm"`). ellipsis\uAC00 \uBA54\uB274\uB97C \uC5F4\uAC70\uB098 trail\uC744 \uD3BC\uCE60 \uB54C \uC0AC\uC6A9\uD569\uB2C8\uB2E4.',
842
+ searchText: 'breadcrumb \uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C. <div class="not-content my-6">\n <breadcrumbpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumblink href="/docs">docs</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>components</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n <breadcrumblist>\n <breadcrumbitem>\n <breadcrumblink href="/">home</breadcrumblink>\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbellipsis />\n </breadcrumbitem>\n <breadcrumbseparator />\n <breadcrumbitem>\n <breadcrumbpage>current</breadcrumbpage>\n </breadcrumbitem>\n </breadcrumblist>\n</breadcrumb>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### breadcrumblist\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### breadcrumbitem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### breadcrumblink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### breadcrumbpage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### breadcrumbseparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### breadcrumbellipsis\n\n\uD45C\uC2DC\uC6A9 \uC811\uD798 \uB9C8\uCEE4(\uC815\uC0AC\uAC01 \uC544\uC774\uCF58 \uCE69, \uBE44\uC778\uD130\uB799\uD2F0\uBE0C).\n\n### breadcrumbellipsistrigger\n\n\uC778\uD130\uB799\uD2F0\uBE0C \uC811\uD798 \uCEE8\uD2B8\uB864 \u2014 ghost icon `button`(`layout="icon"` `size="sm"`). ellipsis\uAC00 \uBA54\uB274\uB97C \uC5F4\uAC70\uB098 trail\uC744 \uD3BC\uCE60 \uB54C \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n'
816
843
  },
817
844
  {
818
845
  slug: "ko/components/bubble",
@@ -874,8 +901,8 @@ var docs_index_default = {
874
901
  title: "Chart",
875
902
  description: "\uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C.",
876
903
  category: "guides",
877
- content: '<div class="not-content my-6">\n <ChartPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartYAxisLabels values={data} />\n <ChartPlot aria-label="Weekly sales chart">\n <ChartGrid values={data} />\n <ChartBars values={data} seriesColor="blue" />\n </ChartPlot>\n <ChartAxisLabels labels={labels} />\n </ChartContent>\n </ChartBody>\n <ChartLegend>\n <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n </ChartLegend>\n</Chart>\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartPlot>\n <ChartGrid values={data} lines={5} />\n <ChartLine values={data} seriesColor="green" showArea showPoints />\n </ChartPlot>\n </ChartContent>\n </ChartBody>\n</Chart>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartBody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### ChartContent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### ChartPlot\n\nSVG \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### ChartGrid\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n ]}\n />\n</div>\n### ChartBars\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showTrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n### ChartLine\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showArea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n { prop: "showPoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n ]}\n />\n</div>\n### ChartYAxisLabels\n\nY\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n ]}\n />\n</div>\n### ChartAxisLabels\n\nX\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n ]}\n />\n</div>\n### ChartLegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartLegendItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n ]}\n />\n</div>',
878
- searchText: 'chart \uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C. <div class="not-content my-6">\n <chartpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartyaxislabels values={data} />\n <chartplot aria-label="weekly sales chart">\n <chartgrid values={data} />\n <chartbars values={data} seriescolor="blue" />\n </chartplot>\n <chartaxislabels labels={labels} />\n </chartcontent>\n </chartbody>\n <chartlegend>\n <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n </chartlegend>\n</chart>\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartplot>\n <chartgrid values={data} lines={5} />\n <chartline values={data} seriescolor="green" showarea showpoints />\n </chartplot>\n </chartcontent>\n </chartbody>\n</chart>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartbody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### chartcontent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### chartplot\n\nsvg \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### chartgrid\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n ]}\n />\n</div>\n### chartbars\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showtrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n### chartline\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showarea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n { prop: "showpoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n ]}\n />\n</div>\n### chartyaxislabels\n\ny\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n ]}\n />\n</div>\n### chartaxislabels\n\nx\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n ]}\n />\n</div>\n### chartlegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartlegenditem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n ]}\n />\n</div>\n'
904
+ content: '<div class="not-content my-6">\n <ChartPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartYAxisLabels values={data} />\n <ChartPlot aria-label="Weekly sales chart">\n <ChartGrid values={data} />\n <ChartBars values={data} seriesColor="blue" />\n </ChartPlot>\n <ChartAxisLabels labels={labels} />\n </ChartContent>\n </ChartBody>\n <ChartLegend>\n <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n </ChartLegend>\n</Chart>\n\n<Chart>\n <ChartBody>\n <ChartContent>\n <ChartPlot>\n <ChartGrid values={data} lines={5} />\n <ChartLine values={data} seriesColor="green" showArea showPoints />\n </ChartPlot>\n </ChartContent>\n </ChartBody>\n</Chart>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartBody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### ChartContent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### ChartPlot\n\nSVG \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### ChartGrid\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n ]}\n />\n</div>\n### ChartBars\n\n\uB9C9\uB300 \uC0C1\uB2E8\uC740 `roundedXLarge`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4(\uD3ED/\uB192\uC774\uC5D0 \uB9DE\uAC8C \uD074\uB7A8\uD504).\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showTrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n### ChartLine\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showArea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n { prop: "showPoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n ]}\n />\n</div>\n### ChartYAxisLabels\n\nY\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n ]}\n />\n</div>\n### ChartAxisLabels\n\nX\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n ]}\n />\n</div>\n### ChartLegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartLegendItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n ]}\n />\n</div>',
905
+ searchText: 'chart \uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C. <div class="not-content my-6">\n <chartpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartyaxislabels values={data} />\n <chartplot aria-label="weekly sales chart">\n <chartgrid values={data} />\n <chartbars values={data} seriescolor="blue" />\n </chartplot>\n <chartaxislabels labels={labels} />\n </chartcontent>\n </chartbody>\n <chartlegend>\n <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n </chartlegend>\n</chart>\n\n<chart>\n <chartbody>\n <chartcontent>\n <chartplot>\n <chartgrid values={data} lines={5} />\n <chartline values={data} seriescolor="green" showarea showpoints />\n </chartplot>\n </chartcontent>\n </chartbody>\n</chart>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartbody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### chartcontent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### chartplot\n\nsvg \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### chartgrid\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n ]}\n />\n</div>\n### chartbars\n\n\uB9C9\uB300 \uC0C1\uB2E8\uC740 `roundedxlarge`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4(\uD3ED/\uB192\uC774\uC5D0 \uB9DE\uAC8C \uD074\uB7A8\uD504).\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showtrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n### chartline\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n { prop: "showarea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n { prop: "showpoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n ]}\n />\n</div>\n### chartyaxislabels\n\ny\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n ]}\n />\n</div>\n### chartaxislabels\n\nx\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n ]}\n />\n</div>\n### chartlegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartlegenditem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n ]}\n />\n</div>\n'
879
906
  },
880
907
  {
881
908
  slug: "ko/components/checkbox",
@@ -883,8 +910,17 @@ var docs_index_default = {
883
910
  title: "Checkbox",
884
911
  description: "\uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864.",
885
912
  category: "guides",
886
- content: '<div class="not-content my-6">\n <CheckboxPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <TokenInspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n label="Enable notifications"\n description="Receive updates about your account"\n checked={notificationsEnabled}\n onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>',
887
- searchText: 'checkbox \uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n <checkboxpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <tokeninspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n label="enable notifications"\n description="receive updates about your account"\n checked={notificationsenabled}\n onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n'
913
+ content: '<div class="not-content my-6">\n <CheckboxPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <TokenInspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n label="Enable notifications"\n description="Receive updates about your account"\n checked={notificationsEnabled}\n onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n\uAE30\uBCF8(\uC0AC\uAC01)\uC740 `roundedLarge`, `circular` \uBCC0\uD615\uC740 `roundedCircle`\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>',
914
+ searchText: 'checkbox \uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n <checkboxpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <tokeninspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n label="enable notifications"\n description="receive updates about your account"\n checked={notificationsenabled}\n onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n\uAE30\uBCF8(\uC0AC\uAC01)\uC740 `roundedlarge`, `circular` \uBCC0\uD615\uC740 `roundedcircle`\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n'
915
+ },
916
+ {
917
+ slug: "ko/components/collapsible",
918
+ href: "/ko/components/collapsible/",
919
+ title: "Collapsible",
920
+ description: "\uD2B8\uB9AC\uAC70\uB85C \uC139\uC158\uC744 \uBCF4\uC774\uAC70\uB098 \uC228\uAE41\uB2C8\uB2E4.",
921
+ category: "guides",
922
+ content: '<div class="not-content my-6">\n <CollapsiblePreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Collapsible defaultOpen>\n <CollapsibleTrigger>Details</CollapsibleTrigger>\n <CollapsibleContent>\n Hidden until the trigger opens it.\n </CollapsibleContent>\n</Collapsible>\n```\n\n`open`\uACFC `onOpenChange`\uB85C \uC81C\uC5B4\uD615\uC73C\uB85C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. `CollapsibleTrigger`\uB294 `asChild`\uB97C \uBC1B\uC544 \uC790\uC2DD\uC5D0 props\uB97C \uBCD1\uD569\uD569\uB2C8\uB2E4. \uB2EB\uD78C content\uB294 \uB9C8\uC6B4\uD2B8\uB41C \uCC44 \uC228\uACA8\uC9D1\uB2C8\uB2E4.',
923
+ searchText: 'collapsible \uD2B8\uB9AC\uAC70\uB85C \uC139\uC158\uC744 \uBCF4\uC774\uAC70\uB098 \uC228\uAE41\uB2C8\uB2E4. <div class="not-content my-6">\n <collapsiblepreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<collapsible defaultopen>\n <collapsibletrigger>details</collapsibletrigger>\n <collapsiblecontent>\n hidden until the trigger opens it.\n </collapsiblecontent>\n</collapsible>\n```\n\n`open`\uACFC `onopenchange`\uB85C \uC81C\uC5B4\uD615\uC73C\uB85C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. `collapsibletrigger`\uB294 `aschild`\uB97C \uBC1B\uC544 \uC790\uC2DD\uC5D0 props\uB97C \uBCD1\uD569\uD569\uB2C8\uB2E4. \uB2EB\uD78C content\uB294 \uB9C8\uC6B4\uD2B8\uB41C \uCC44 \uC228\uACA8\uC9D1\uB2C8\uB2E4.\n'
888
924
  },
889
925
  {
890
926
  slug: "ko/components/command",
@@ -904,6 +940,15 @@ var docs_index_default = {
904
940
  content: '`Container`\uB294 \uC120\uD0DD\uC801 spacing \uD1A0\uD070 \uD328\uB529\uC73C\uB85C \uCF58\uD150\uCE20\uB97C \uAC00\uB85C \uAC00\uC6B4\uB370 \uC815\uB82C\uD569\uB2C8\uB2E4. \uD398\uC774\uC9C0 \uB610\uB294 \uC139\uC158 \uC178\uB85C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n <ContainerPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="container" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Container padding="sizeXXLarge">\n <Stack gap="sizeLarge">\n <Text variant="headingMd" as="h1">Page title</Text>\n <Text variant="bodyMd">Body</Text>\n </Stack>\n</Container>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "as", default: "\\"div\\"", type: "ElementType", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n { prop: "padding", default: "\u2014", type: "Spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." }\n ]}\n />\n</div>',
905
941
  searchText: 'container \uD1A0\uD070 \uD328\uB529\uACFC \uC804\uCCB4 max width\uB97C \uAC00\uC9C4 \uAC00\uC6B4\uB370 \uC815\uB82C \uD398\uC774\uC9C0 \uC178. `container`\uB294 \uC120\uD0DD\uC801 spacing \uD1A0\uD070 \uD328\uB529\uC73C\uB85C \uCF58\uD150\uCE20\uB97C \uAC00\uB85C \uAC00\uC6B4\uB370 \uC815\uB82C\uD569\uB2C8\uB2E4. \uD398\uC774\uC9C0 \uB610\uB294 \uC139\uC158 \uC178\uB85C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n <containerpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="container" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<container padding="sizexxlarge">\n <stack gap="sizelarge">\n <text variant="headingmd" as="h1">page title</text>\n <text variant="bodymd">body</text>\n </stack>\n</container>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "as", default: "\\"div\\"", type: "elementtype", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n { prop: "padding", default: "\u2014", type: "spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." }\n ]}\n />\n</div>\n'
906
942
  },
943
+ {
944
+ slug: "ko/components/context-menu",
945
+ href: "/ko/components/context-menu/",
946
+ title: "Context Menu",
947
+ description: "\uC6B0\uD074\uB9AD\uC73C\uB85C \uC5F4\uB9AC\uB294 \uBA54\uB274\uC785\uB2C8\uB2E4.",
948
+ category: "guides",
949
+ content: '<div class="not-content my-6">\n <ContextMenuPreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<ContextMenu>\n <ContextMenuTrigger asChild>\n <div>Right click</div>\n </ContextMenuTrigger>\n <ContextMenuPortal>\n <ContextMenuContent>\n <ContextMenuItem onSelect={() => copy()}>Copy</ContextMenuItem>\n <ContextMenuSeparator />\n <ContextMenuSub>\n <ContextMenuSubTrigger>More</ContextMenuSubTrigger>\n <ContextMenuPortal>\n <ContextMenuSubContent>\n <ContextMenuItem>Rename</ContextMenuItem>\n </ContextMenuSubContent>\n </ContextMenuPortal>\n </ContextMenuSub>\n </ContextMenuContent>\n </ContextMenuPortal>\n</ContextMenu>\n```\n\n`onSelect`\uB294 \uC774\uBCA4\uD2B8\uB97C \uBC1B\uC2B5\uB2C8\uB2E4. `preventDefault()`\uB97C \uD638\uCD9C\uD558\uBA74 \uBA54\uB274\uAC00 \uC5F4\uB9B0 \uCC44\uB85C \uC720\uC9C0\uB429\uB2C8\uB2E4. disabled \uD56D\uBAA9\uC740 \uC120\uD0DD\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.',
950
+ searchText: 'context menu \uC6B0\uD074\uB9AD\uC73C\uB85C \uC5F4\uB9AC\uB294 \uBA54\uB274\uC785\uB2C8\uB2E4. <div class="not-content my-6">\n <contextmenupreview client:load />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<contextmenu>\n <contextmenutrigger aschild>\n <div>right click</div>\n </contextmenutrigger>\n <contextmenuportal>\n <contextmenucontent>\n <contextmenuitem onselect={() => copy()}>copy</contextmenuitem>\n <contextmenuseparator />\n <contextmenusub>\n <contextmenusubtrigger>more</contextmenusubtrigger>\n <contextmenuportal>\n <contextmenusubcontent>\n <contextmenuitem>rename</contextmenuitem>\n </contextmenusubcontent>\n </contextmenuportal>\n </contextmenusub>\n </contextmenucontent>\n </contextmenuportal>\n</contextmenu>\n```\n\n`onselect`\uB294 \uC774\uBCA4\uD2B8\uB97C \uBC1B\uC2B5\uB2C8\uB2E4. `preventdefault()`\uB97C \uD638\uCD9C\uD558\uBA74 \uBA54\uB274\uAC00 \uC5F4\uB9B0 \uCC44\uB85C \uC720\uC9C0\uB429\uB2C8\uB2E4. disabled \uD56D\uBAA9\uC740 \uC120\uD0DD\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n'
951
+ },
907
952
  {
908
953
  slug: "ko/components/dialog",
909
954
  href: "/ko/components/dialog/",
@@ -982,8 +1027,8 @@ var docs_index_default = {
982
1027
  title: "Input OTP",
983
1028
  description: "\uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC.",
984
1029
  category: "guides",
985
- content: '<div class="not-content my-6">\n <InputOTPDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n maxLength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="Enter verification code"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### InputOTP\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 OTP \uBB38\uC790\uC5F4." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "maxLength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n { prop: "autoFocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n ]}\n />\n</div>',
986
- searchText: 'input otp \uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC. <div class="not-content my-6">\n <inputotpdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n <inputotpslot index={0} />\n <inputotpslot index={1} />\n <inputotpslot index={2} />\n <inputotpslot index={3} />\n <inputotpslot index={4} />\n <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n maxlength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="enter verification code"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### inputotp\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 otp \uBB38\uC790\uC5F4." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "maxlength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n { prop: "autofocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### inputotpslot\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n ]}\n />\n</div>\n'
1030
+ content: '<div class="not-content my-6">\n <InputOTPDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n maxLength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="Enter verification code"\n/>\n```\n\n\uBE48 \uC2AC\uB86F\uC740 Skeleton\uACFC \uAC19\uC740 opacity pulse\uB97C \uC4F0\uBA70(index \uC2DC\uCC28), \uC785\uB825\xB7\uD3EC\uCEE4\uC2A4\xB7disabled\xB7`prefers-reduced-motion`\uC5D0\uC11C\uB294 \uBA48\uCDA5\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### InputOTP\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 OTP \uBB38\uC790\uC5F4." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "maxLength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n { prop: "autoFocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n ]}\n />\n</div>',
1031
+ searchText: 'input otp \uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC. <div class="not-content my-6">\n <inputotpdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n <inputotpslot index={0} />\n <inputotpslot index={1} />\n <inputotpslot index={2} />\n <inputotpslot index={3} />\n <inputotpslot index={4} />\n <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n maxlength={4}\n pattern={/\\d/}\n size="lg"\n aria-label="enter verification code"\n/>\n```\n\n\uBE48 \uC2AC\uB86F\uC740 skeleton\uACFC \uAC19\uC740 opacity pulse\uB97C \uC4F0\uBA70(index \uC2DC\uCC28), \uC785\uB825\xB7\uD3EC\uCEE4\uC2A4\xB7disabled\xB7`prefers-reduced-motion`\uC5D0\uC11C\uB294 \uBA48\uCDA5\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### inputotp\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 otp \uBB38\uC790\uC5F4." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "maxlength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n { prop: "autofocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### inputotpslot\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n ]}\n />\n</div>\n'
987
1032
  },
988
1033
  {
989
1034
  slug: "ko/components/input",
@@ -1018,8 +1063,8 @@ var docs_index_default = {
1018
1063
  title: "Menu",
1019
1064
  description: "\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4.",
1020
1065
  category: "guides",
1021
- content: '<div class="not-content my-6">\n <MenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuItem onSelect={() => handleNew()}>\n New File\n </MenuItem>\n <MenuItem onSelect={() => handleOpen()}>\n Open\n </MenuItem>\n <MenuDivider />\n <MenuItem state="disabled">\n Save (disabled)\n </MenuItem>\n </MenuList>\n </MenuPopover>\n</Menu>\n\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuSection>\n <MenuItem\n startIcon={<Icon />}\n endIcon={<Badge />}\n description="Description text"\n shortcut="\u2318N"\n >\n Menu Item\n </MenuItem>\n <MenuSubTrigger>Submenu</MenuSubTrigger>\n <MenuSubContent>\n <MenuItem>Submenu Item</MenuItem>\n </MenuSubContent>\n </MenuSection>\n </MenuList>\n </MenuPopover>\n</Menu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Menu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n ]}\n />\n</div>\n### MenuPopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### MenuList\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### MenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### MenuSection\n\n\uAD00\uB828 \uBA54\uB274 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### MenuDivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### MenuSubTrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### MenuSubContent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.',
1022
- searchText: 'menu \uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4. <div class="not-content my-6">\n <menupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<menu>\n <menupopover>\n <menulist>\n <menuitem onselect={() => handlenew()}>\n new file\n </menuitem>\n <menuitem onselect={() => handleopen()}>\n open\n </menuitem>\n <menudivider />\n <menuitem state="disabled">\n save (disabled)\n </menuitem>\n </menulist>\n </menupopover>\n</menu>\n\n<menu>\n <menupopover>\n <menulist>\n <menusection>\n <menuitem\n starticon={<icon />}\n endicon={<badge />}\n description="description text"\n shortcut="\u2318n"\n >\n menu item\n </menuitem>\n <menusubtrigger>submenu</menusubtrigger>\n <menusubcontent>\n <menuitem>submenu item</menuitem>\n </menusubcontent>\n </menusection>\n </menulist>\n </menupopover>\n</menu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### menu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "menupositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n ]}\n />\n</div>\n### menupopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### menulist\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### menuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "shortcut", default: "\u2014", type: "reactnode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "endicon", default: "\u2014", type: "reactnode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### menusection\n\n\uAD00\uB828 \uBA54\uB274 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### menudivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### menusubtrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### menusubcontent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.\n\n'
1066
+ content: '<div class="not-content my-6">\n <MenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuItem onSelect={() => handleNew()}>\n New File\n </MenuItem>\n <MenuItem onSelect={() => handleOpen()}>\n Open\n </MenuItem>\n <MenuDivider />\n <MenuItem state="disabled">\n Save (disabled)\n </MenuItem>\n </MenuList>\n </MenuPopover>\n</Menu>\n\n<Menu>\n <MenuPopover>\n <MenuList>\n <MenuLabel>File</MenuLabel>\n <MenuItem\n startIcon={<Icon />}\n endIcon={<Badge />}\n description="Description text"\n shortcut="\u2318N"\n >\n Menu Item\n </MenuItem>\n <MenuSubTrigger>Submenu</MenuSubTrigger>\n <MenuSubContent>\n <MenuItem>Submenu Item</MenuItem>\n </MenuSubContent>\n </MenuList>\n </MenuPopover>\n</Menu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Menu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n ]}\n />\n</div>\n### MenuPopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### MenuList\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### MenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### MenuLabel\n\n\uAD00\uB828 \uD56D\uBAA9 \uADF8\uB8F9\uC758 \uD5E4\uB529 \uB77C\uBCA8.\n\n### MenuDivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### MenuSubTrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### MenuSubContent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.',
1067
+ searchText: 'menu \uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4. <div class="not-content my-6">\n <menupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<menu>\n <menupopover>\n <menulist>\n <menuitem onselect={() => handlenew()}>\n new file\n </menuitem>\n <menuitem onselect={() => handleopen()}>\n open\n </menuitem>\n <menudivider />\n <menuitem state="disabled">\n save (disabled)\n </menuitem>\n </menulist>\n </menupopover>\n</menu>\n\n<menu>\n <menupopover>\n <menulist>\n <menulabel>file</menulabel>\n <menuitem\n starticon={<icon />}\n endicon={<badge />}\n description="description text"\n shortcut="\u2318n"\n >\n menu item\n </menuitem>\n <menusubtrigger>submenu</menusubtrigger>\n <menusubcontent>\n <menuitem>submenu item</menuitem>\n </menusubcontent>\n </menulist>\n </menupopover>\n</menu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### menu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "positioning", default: "\u2014", type: "menupositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n ]}\n />\n</div>\n### menupopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### menulist\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### menuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "shortcut", default: "\u2014", type: "reactnode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "endicon", default: "\u2014", type: "reactnode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### menulabel\n\n\uAD00\uB828 \uD56D\uBAA9 \uADF8\uB8F9\uC758 \uD5E4\uB529 \uB77C\uBCA8.\n\n### menudivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### menusubtrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n ]}\n />\n</div>\n### menusubcontent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.\n'
1023
1068
  },
1024
1069
  {
1025
1070
  slug: "ko/components/navigation-menu",
@@ -1108,8 +1153,8 @@ var docs_index_default = {
1108
1153
  title: "Segmented Control",
1109
1154
  description: "\uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569.",
1110
1155
  category: "guides",
1111
- content: '<div class="not-content my-6">\n <SegmentedControlPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <TokenInspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### SegmentedControl\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n ]}\n />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>',
1112
- searchText: 'segmented control \uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569. <div class="not-content my-6">\n <segmentedcontrolpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <tokeninspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### segmentedcontrol\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n ]}\n />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n'
1156
+ content: '<div class="not-content my-6">\n <SegmentedControlPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <TokenInspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n\uC120\uD0DD thumb\uB294 \uC2AC\uB77C\uC774\uB529 brand indicator\uC785\uB2C8\uB2E4. geometry\uAC00 \uC900\uBE44\uB418\uAE30 \uC804(`data-ready`)\uC5D0\uB294 selected item\uC774 brand fill\uC744 \uC720\uC9C0\uD574 \uCCAB \uD398\uC778\uD2B8\uAC00 \uBE44\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uCCAB \uB808\uC774\uC544\uC6C3 \uC774\uD6C4\uC5D0\uB294 transform\uC774 width\uBCF4\uB2E4 \uC870\uAE08 \uC55E\uC11C \uC2AC\uB77C\uC774\uB4DC\uAC00 \uB35C \uAE30\uACC4\uC801\uC73C\uB85C \uBCF4\uC785\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### SegmentedControl\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n ]}\n />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>',
1157
+ searchText: 'segmented control \uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569. <div class="not-content my-6">\n <segmentedcontrolpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n <tokeninspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n\uC120\uD0DD thumb\uB294 \uC2AC\uB77C\uC774\uB529 brand indicator\uC785\uB2C8\uB2E4. geometry\uAC00 \uC900\uBE44\uB418\uAE30 \uC804(`data-ready`)\uC5D0\uB294 selected item\uC774 brand fill\uC744 \uC720\uC9C0\uD574 \uCCAB \uD398\uC778\uD2B8\uAC00 \uBE44\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uCCAB \uB808\uC774\uC544\uC6C3 \uC774\uD6C4\uC5D0\uB294 transform\uC774 width\uBCF4\uB2E4 \uC870\uAE08 \uC55E\uC11C \uC2AC\uB77C\uC774\uB4DC\uAC00 \uB35C \uAE30\uACC4\uC801\uC73C\uB85C \uBCF4\uC785\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### segmentedcontrol\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n ]}\n />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n ]}\n />\n</div>\n'
1113
1158
  },
1114
1159
  {
1115
1160
  slug: "ko/components/select",
@@ -1291,6 +1336,15 @@ var docs_index_default = {
1291
1336
  content: 'RefineUI \uD14C\uB9C8\uB294 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`--refineui-color-alias-*`)\uC73C\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uBB38\uC11C\uC640 \uB3D9\uC77C\uD558\uAC8C \uBB38\uC11C \uB8E8\uD2B8\uC5D0 `data-theme="dark"`(\uC120\uD0DD\uC801\uC73C\uB85C `.dark`)\uB97C \uC124\uC815\uD574 \uB2E4\uD06C\uB97C \uCF2D\uB2C8\uB2E4.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## \uADDC\uCE59\n\n- UI\uC5D0\uC11C\uB294 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uB2E8\uACC4\uAC00 \uC544\uB2C8\uB77C **\uBCC4\uCE6D**(`background-brand`, `foreground-primary`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694\n- \uCEF4\uD3EC\uB10C\uD2B8 \uD06C\uAE30\uB294 Foundation \uC0AC\uC774\uC988 \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4\n- \uC81C\uD488 CSS\uC5D0 \uD14C\uB9C8 \uC804\uC6A9 hex\uB97C \uC0C8\uB85C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694\n\n\uBE44\uC8FC\uC5BC \uD1A0\uD070 \uB9F5\uC740 [\uCEEC\uB7EC](/ko/foundations/color/)\uB97C \uCC38\uACE0\uD558\uC138\uC694.',
1292
1337
  searchText: '\uD14C\uB9C8 \uC2DC\uB9E8\uD2F1 \uCEEC\uB7EC \uBCC4\uCE6D\uC73C\uB85C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uC11C\uD53C\uC2A4\uB97C \uAD6C\uC131\uD569\uB2C8\uB2E4. \nrefineui \uD14C\uB9C8\uB294 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`--refineui-color-alias-*`)\uC73C\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uBB38\uC11C\uC640 \uB3D9\uC77C\uD558\uAC8C \uBB38\uC11C \uB8E8\uD2B8\uC5D0 `data-theme="dark"`(\uC120\uD0DD\uC801\uC73C\uB85C `.dark`)\uB97C \uC124\uC815\uD574 \uB2E4\uD06C\uB97C \uCF2D\uB2C8\uB2E4.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## \uADDC\uCE59\n\n- ui\uC5D0\uC11C\uB294 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uB2E8\uACC4\uAC00 \uC544\uB2C8\uB77C **\uBCC4\uCE6D**(`background-brand`, `foreground-primary`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694\n- \uCEF4\uD3EC\uB10C\uD2B8 \uD06C\uAE30\uB294 foundation \uC0AC\uC774\uC988 \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4\n- \uC81C\uD488 css\uC5D0 \uD14C\uB9C8 \uC804\uC6A9 hex\uB97C \uC0C8\uB85C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694\n\n\uBE44\uC8FC\uC5BC \uD1A0\uD070 \uB9F5\uC740 [\uCEEC\uB7EC](/ko/foundations/color/)\uB97C \uCC38\uACE0\uD558\uC138\uC694.\n'
1293
1338
  },
1339
+ {
1340
+ slug: "ko/foundations/blur",
1341
+ href: "/ko/foundations/blur/",
1342
+ title: "Blur",
1343
+ description: "\uD504\uB85C\uC2A4\uD2F0\uB4DC \uD06C\uB86C\uC6A9 backdrop / surface blur \uC2A4\uD15D.",
1344
+ category: "guides",
1345
+ content: '**\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`overlayScrim`, `surfaceFrost`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 CSS `--refineui-blur-overlay-scrim`. \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uC77C\uD68C\uC131 `blur(2px)`\uB97C \uC4F0\uC9C0 \uB9C8\uC138\uC694.\n\n## \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="\uC2DC\uB9E8\uD2F1 blur \uC5ED\uD560"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "css", header: "CSS \uBCC0\uC218", mono: true },\n { key: "foundation", header: "Foundation", mono: true },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n {\n token: "overlayScrim",\n css: "--refineui-blur-overlay-scrim",\n foundation: "blur2",\n use: "Dialog / Drawer scrim backdrop-filter",\n },\n {\n token: "surfaceFrost",\n css: "--refineui-blur-surface-frost",\n foundation: "blur16",\n use: "Menu / Dropdown / Select / Context Menu / SidebarPeek frosted \uD328\uB110",\n },\n ]}\n />\n</div>\n\nBlur\uB294 \uBC18\uD22C\uBA85 fill **`surfaceFrosted`**(`--refineui-color-alias-surface-frosted`)\uC640 \uD568\uAED8 \uC501\uB2C8\uB2E4. \uBD88\uD22C\uBA85 `backgroundPrimary`\uB9CC \uC788\uC73C\uBA74\uBA74 blur\uAC00 \uBCF4\uC774\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## Foundation \uC2A4\uD15D\n\n\uAC12 \uAE30\uBC18 \uD0A4\uB9CC \u2014 \uC0C8 \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\uC744 \uCD94\uAC00\uD558\uAE30 \uC804\uC5D0 \uC5EC\uAE30\uB97C \uD655\uC7A5\uD558\uC138\uC694.\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="Foundation blur \uC2A4\uD15D"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "value", header: "\uAC12", mono: true },\n ]}\n rows={[\n { token: "blurNone", value: "0" },\n { token: "blur2", value: "2px" },\n { token: "blur4", value: "4px" },\n { token: "blur8", value: "8px" },\n { token: "blur12", value: "12px" },\n { token: "blur16", value: "16px" },\n ]}\n />\n</div>\n\nScrim **\uD2F4\uD2B8**\uB294 `surfaceOverlay` / `--refineui-overlay-backdrop`\uC5D0 \uB461\uB2C8\uB2E4 ([\uD22C\uBA85\uB3C4](/ko/foundations/opacity/), [\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). Blur\uB294 \uD544\uD130 \uBC18\uACBD\uB9CC \uB2F4\uB2F9\uD569\uB2C8\uB2E4.\n\n`prefers-reduced-transparency: reduce`\uC77C \uB54C Dialog/Drawer `backdrop-filter`\uB294 `refineui.css`\uC5D0\uC11C `none`\uC73C\uB85C \uC811\uD799\uB2C8\uB2E4.\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.menu-panel {\n background: var(--refineui-color-alias-surface-frosted);\n backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n background: var(--refineui-overlay-backdrop);\n backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```',
1346
+ searchText: 'blur \uD504\uB85C\uC2A4\uD2F0\uB4DC \uD06C\uB86C\uC6A9 backdrop / surface blur \uC2A4\uD15D. \n**\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`overlayscrim`, `surfacefrost`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 css `--refineui-blur-overlay-scrim`. \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uC77C\uD68C\uC131 `blur(2px)`\uB97C \uC4F0\uC9C0 \uB9C8\uC138\uC694.\n\n## \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="\uC2DC\uB9E8\uD2F1 blur \uC5ED\uD560"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "css", header: "css \uBCC0\uC218", mono: true },\n { key: "foundation", header: "foundation", mono: true },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n {\n token: "overlayscrim",\n css: "--refineui-blur-overlay-scrim",\n foundation: "blur2",\n use: "dialog / drawer scrim backdrop-filter",\n },\n {\n token: "surfacefrost",\n css: "--refineui-blur-surface-frost",\n foundation: "blur16",\n use: "menu / dropdown / select / context menu / sidebarpeek frosted \uD328\uB110",\n },\n ]}\n />\n</div>\n\nblur\uB294 \uBC18\uD22C\uBA85 fill **`surfacefrosted`**(`--refineui-color-alias-surface-frosted`)\uC640 \uD568\uAED8 \uC501\uB2C8\uB2E4. \uBD88\uD22C\uBA85 `backgroundprimary`\uB9CC \uC788\uC73C\uBA74\uBA74 blur\uAC00 \uBCF4\uC774\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## foundation \uC2A4\uD15D\n\n\uAC12 \uAE30\uBC18 \uD0A4\uB9CC \u2014 \uC0C8 \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\uC744 \uCD94\uAC00\uD558\uAE30 \uC804\uC5D0 \uC5EC\uAE30\uB97C \uD655\uC7A5\uD558\uC138\uC694.\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="foundation blur \uC2A4\uD15D"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "value", header: "\uAC12", mono: true },\n ]}\n rows={[\n { token: "blurnone", value: "0" },\n { token: "blur2", value: "2px" },\n { token: "blur4", value: "4px" },\n { token: "blur8", value: "8px" },\n { token: "blur12", value: "12px" },\n { token: "blur16", value: "16px" },\n ]}\n />\n</div>\n\nscrim **\uD2F4\uD2B8**\uB294 `surfaceoverlay` / `--refineui-overlay-backdrop`\uC5D0 \uB461\uB2C8\uB2E4 ([\uD22C\uBA85\uB3C4](/ko/foundations/opacity/), [\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). blur\uB294 \uD544\uD130 \uBC18\uACBD\uB9CC \uB2F4\uB2F9\uD569\uB2C8\uB2E4.\n\n`prefers-reduced-transparency: reduce`\uC77C \uB54C dialog/drawer `backdrop-filter`\uB294 `refineui.css`\uC5D0\uC11C `none`\uC73C\uB85C \uC811\uD799\uB2C8\uB2E4.\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.menu-panel {\n background: var(--refineui-color-alias-surface-frosted);\n backdrop-filter: blur(var(--refineui-blur-surface-frost));\n}\n\n.scrim {\n background: var(--refineui-overlay-backdrop);\n backdrop-filter: blur(var(--refineui-blur-overlay-scrim));\n}\n```\n'
1347
+ },
1294
1348
  {
1295
1349
  slug: "ko/foundations/border",
1296
1350
  href: "/ko/foundations/border/",
@@ -1315,8 +1369,8 @@ var docs_index_default = {
1315
1369
  title: "\uB514\uC790\uC778 \uD1A0\uD070",
1316
1370
  description: "RefineUI\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9.",
1317
1371
  category: "guides",
1318
- content: '\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 Foundation \uC2A4\uCF00\uC77C\uC744 CSS \uBCC0\uC218\uC640 Tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 UI\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n columns={[\n { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefKey: "href" },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, Border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingMd, bodyMd, \u2026)" },\n { category: "Spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n { category: "Sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n { category: "Radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n { category: "Border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n { category: "Elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n { category: "Z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n ]}\n />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 Foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundSurface`, `sizeMedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 Foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.',
1319
- searchText: '\uB514\uC790\uC778 \uD1A0\uD070 refineui\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9. \n\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 foundation \uC2A4\uCF00\uC77C\uC744 css \uBCC0\uC218\uC640 tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 ui\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n columns={[\n { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefkey: "href" },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingmd, bodymd, \u2026)" },\n { category: "spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n { category: "sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n { category: "radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n { category: "border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n { category: "elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n { category: "z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n ]}\n />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundsurface`, `sizemedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.\n'
1372
+ content: '\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 Foundation \uC2A4\uCF00\uC77C\uC744 CSS \uBCC0\uC218\uC640 Tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 UI\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n columns={[\n { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefKey: "href" },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, Border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingMd, bodyMd, \u2026)" },\n { category: "Spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n { category: "Sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n { category: "Radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n { category: "Border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n { category: "Elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n { category: "Blur", href: "/ko/foundations/blur/", use: "Backdrop / surface frosted blur" },\n { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n { category: "Z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n ]}\n />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 Foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundSurface`, `sizeMedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 Foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.',
1373
+ searchText: '\uB514\uC790\uC778 \uD1A0\uD070 refineui\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9. \n\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 foundation \uC2A4\uCF00\uC77C\uC744 css \uBCC0\uC218\uC640 tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 ui\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n columns={[\n { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefkey: "href" },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingmd, bodymd, \u2026)" },\n { category: "spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n { category: "sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n { category: "radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n { category: "border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n { category: "elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n { category: "blur", href: "/ko/foundations/blur/", use: "backdrop / surface frosted blur" },\n { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n { category: "z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n ]}\n />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundsurface`, `sizemedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.\n'
1320
1374
  },
1321
1375
  {
1322
1376
  slug: "ko/foundations/elevation",
@@ -1360,8 +1414,8 @@ var docs_index_default = {
1360
1414
  title: "\uD22C\uBA85\uB3C4",
1361
1415
  description: "\uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C.",
1362
1416
  category: "guides",
1363
- content: '<div class="not-content">\n <SpecTable\n client:load\n aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "value", header: "\uAC12", mono: true },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { token: "opacityFull", value: "1", use: "\uAE30\uBCF8" },\n { token: "opacityDisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (\uB2E4\uD06C)" },\n ]}\n />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 \uCEE4\uC2A4\uD140 \uC54C\uD30C\uAC00 \uC544\uB2C8\uB77C `surfaceOverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0).\n\n<div class="not-content">\n <OpacityPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```',
1364
- searchText: '\uD22C\uBA85\uB3C4 \uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C. \n<div class="not-content">\n <spectable\n client:load\n aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "value", header: "\uAC12", mono: true },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { token: "opacityfull", value: "1", use: "\uAE30\uBCF8" },\n { token: "opacitydisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (\uB2E4\uD06C)" },\n ]}\n />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 \uCEE4\uC2A4\uD140 \uC54C\uD30C\uAC00 \uC544\uB2C8\uB77C `surfaceoverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0).\n\n<div class="not-content">\n <opacitypreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```\n'
1417
+ content: '<div class="not-content">\n <SpecTable\n client:load\n aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "value", header: "\uAC12", mono: true },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { token: "opacityFull", value: "1", use: "\uAE30\uBCF8" },\n { token: "opacityDisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (\uB2E4\uD06C)" },\n ]}\n />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 `surfaceOverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). Backdrop **blur** \uBC18\uACBD\uC740 [Blur](/ko/foundations/blur/)(`overlayScrim`)\uC5D0 \uC788\uC2B5\uB2C8\uB2E4.\n\n<div class="not-content">\n <OpacityPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```',
1418
+ searchText: '\uD22C\uBA85\uB3C4 \uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C. \n<div class="not-content">\n <spectable\n client:load\n aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n columns={[\n { key: "token", header: "\uD1A0\uD070", mono: true },\n { key: "value", header: "\uAC12", mono: true },\n { key: "use", header: "\uC6A9\uB3C4" },\n ]}\n rows={[\n { token: "opacityfull", value: "1", use: "\uAE30\uBCF8" },\n { token: "opacitydisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (\uB2E4\uD06C)" },\n ]}\n />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 `surfaceoverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0). backdrop **blur** \uBC18\uACBD\uC740 [blur](/ko/foundations/blur/)(`overlayscrim`)\uC5D0 \uC788\uC2B5\uB2C8\uB2E4.\n\n<div class="not-content">\n <opacitypreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n background: var(--refineui-overlay-backdrop);\n}\n```\n'
1365
1419
  },
1366
1420
  {
1367
1421
  slug: "ko/foundations/radius",
package/lib/index.js CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  listTokenCategories,
10
10
  normalizeSlug,
11
11
  searchDocs
12
- } from "./chunk-GY45SO6Y.js";
12
+ } from "./chunk-TAJF3ATB.js";
13
13
  export {
14
14
  DESIGN_RULES,
15
15
  getDesignMd,
package/lib/server.js CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  listTokenCategories,
10
10
  normalizeSlug,
11
11
  searchDocs
12
- } from "./chunk-GY45SO6Y.js";
12
+ } from "./chunk-TAJF3ATB.js";
13
13
 
14
14
  // src/server.ts
15
15
  import { McpServer } from "@modelcontextprotocol/server";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@refineui/mcp",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "MCP server for RefineUI docs, components, and design-system rules",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -30,8 +30,8 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@modelcontextprotocol/server": "2.0.0",
33
- "@refineui/doctor": "0.1.0",
34
- "@refineui/tokens": "1.0.0",
33
+ "@refineui/doctor": "0.1.1",
34
+ "@refineui/tokens": "1.0.2",
35
35
  "zod": "4.5.4"
36
36
  },
37
37
  "devDependencies": {