@refineui/mcp 0.1.0 → 0.1.2
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.
- package/README.md +5 -2
- package/lib/{chunk-BIQ6ODHB.js → chunk-GY45SO6Y.js} +9 -9
- package/lib/index.js +1 -1
- package/lib/server.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,9 +5,10 @@ MCP server for [RefineUI](https://ui.pelagornis.com) — search docs, fetch comp
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
bun add -d @refineui/mcp
|
|
9
|
-
# or
|
|
10
8
|
npm install -D @refineui/mcp
|
|
9
|
+
yarn add -D @refineui/mcp
|
|
10
|
+
pnpm add -D @refineui/mcp
|
|
11
|
+
bun add -d @refineui/mcp
|
|
11
12
|
```
|
|
12
13
|
|
|
13
14
|
## MCP configuration
|
|
@@ -25,6 +26,8 @@ Add to your MCP host config:
|
|
|
25
26
|
}
|
|
26
27
|
```
|
|
27
28
|
|
|
29
|
+
Swap `bunx` for `npx`, `yarn dlx`, or `pnpm dlx` to match your toolchain.
|
|
30
|
+
|
|
28
31
|
From the monorepo after build:
|
|
29
32
|
|
|
30
33
|
```json
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/generated/docs-index.json
|
|
2
2
|
var docs_index_default = {
|
|
3
|
-
generatedAt: "2026-09-
|
|
3
|
+
generatedAt: "2026-09-17T18:54:11.450Z",
|
|
4
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
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',
|
|
6
6
|
pages: [
|
|
@@ -316,8 +316,8 @@ var docs_index_default = {
|
|
|
316
316
|
title: "Navigation Menu",
|
|
317
317
|
description: "Top-level responsive header navigation menu.",
|
|
318
318
|
category: "components",
|
|
319
|
-
content: '<div class="not-content my-6">\n <NavigationMenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuLink href="/" active>\n Home\n </NavigationMenuLink>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n <NavigationMenuContent>\n <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n </NavigationMenuContent>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink href="/about">About</NavigationMenuLink>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API Reference\n\n### NavigationMenu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Controlled open item value (empty string = closed)." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial open item." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when open item changes." },\n { prop: "delayDuration", default: "\u2014", type: "number", description: "Delay (ms) before opening on pointer enter." },\n { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "Delay when moving between items while open." },\n { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "Accessible name for the navigation landmark." }\n ]}\n />\n</div>\n### NavigationMenuList\n\nList of navigation items.\n\n### NavigationMenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Stable id for open state (auto-generated when omitted)." }\n ]}\n />\n</div>\n### NavigationMenuTrigger\n\nTrigger button for dropdown content.\n\n### NavigationMenuContent\n\nDropdown panel content.\n\n### NavigationMenuLink\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "Marks the current page (`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### NavigationMenuIndicator\n\nActive item indicator (visual underline).',
|
|
320
|
-
searchText: 'navigation menu top-level responsive header navigation menu. <div class="not-content my-6">\n <navigationmenupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="navigation-menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<navigationmenu>\n <navigationmenulist>\n <navigationmenuitem>\n <navigationmenulink href="/" active>\n home\n </navigationmenulink>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenutrigger>products</navigationmenutrigger>\n <navigationmenucontent>\n <navigationmenulink href="/products/web">web</navigationmenulink>\n <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n </navigationmenucontent>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenulink href="/about">about</navigationmenulink>\n </navigationmenuitem>\n </navigationmenulist>\n</navigationmenu>\n```\n\n## api reference\n\n### navigationmenu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "controlled open item value (empty string = closed)." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial open item." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when open item changes." },\n { prop: "delayduration", default: "\u2014", type: "number", description: "delay (ms) before opening on pointer enter." },\n { prop: "skipdelayduration", default: "\u2014", type: "number", description: "delay when moving between items while open." },\n { prop: "aria-label", default: "\\"main\\"", type: "string", description: "accessible name for the navigation landmark." }\n ]}\n />\n</div>\n### navigationmenulist\n\nlist of navigation items.\n\n### navigationmenuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "stable id for open state (auto-generated when omitted)." }\n ]}\n />\n</div>\n### navigationmenutrigger\n\ntrigger button for dropdown content.\n\n### navigationmenucontent\n\ndropdown panel content.\n\n### navigationmenulink\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "marks the current page (`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### navigationmenuindicator\n\nactive item indicator (visual underline).\n
|
|
319
|
+
content: '<div class="not-content my-6">\n <NavigationMenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuLink href="/" active>\n Home\n </NavigationMenuLink>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n <NavigationMenuContent>\n <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n </NavigationMenuContent>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink href="/about">About</NavigationMenuLink>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API Reference\n\n### NavigationMenu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Controlled open item value (empty string = closed)." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial open item." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when open item changes." },\n { prop: "delayDuration", default: "\u2014", type: "number", description: "Delay (ms) before opening on pointer enter." },\n { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "Delay when moving between items while open." },\n { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "Accessible name for the navigation landmark." }\n ]}\n />\n</div>\n### NavigationMenuList\n\nList of navigation items.\n\n### NavigationMenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "Stable id for open state (auto-generated when omitted)." }\n ]}\n />\n</div>\n### NavigationMenuTrigger\n\nTrigger button for dropdown content.\n\n### NavigationMenuContent\n\nDropdown panel content.\n\n### NavigationMenuLink\n\nDirect top-level links do not reserve space for a dropdown chevron. Every top-level item shares an 80px minimum width and a 28px minimum height, so typical labels remain the same size regardless of whether they have a chevron. Longer labels expand rather than truncate.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "Marks the current page (`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### NavigationMenuIndicator\n\nActive item indicator (visual underline).',
|
|
320
|
+
searchText: 'navigation menu top-level responsive header navigation menu. <div class="not-content my-6">\n <navigationmenupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n <specrenderer client:load component="navigation-menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<navigationmenu>\n <navigationmenulist>\n <navigationmenuitem>\n <navigationmenulink href="/" active>\n home\n </navigationmenulink>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenutrigger>products</navigationmenutrigger>\n <navigationmenucontent>\n <navigationmenulink href="/products/web">web</navigationmenulink>\n <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n </navigationmenucontent>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenulink href="/about">about</navigationmenulink>\n </navigationmenuitem>\n </navigationmenulist>\n</navigationmenu>\n```\n\n## api reference\n\n### navigationmenu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "controlled open item value (empty string = closed)." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial open item." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when open item changes." },\n { prop: "delayduration", default: "\u2014", type: "number", description: "delay (ms) before opening on pointer enter." },\n { prop: "skipdelayduration", default: "\u2014", type: "number", description: "delay when moving between items while open." },\n { prop: "aria-label", default: "\\"main\\"", type: "string", description: "accessible name for the navigation landmark." }\n ]}\n />\n</div>\n### navigationmenulist\n\nlist of navigation items.\n\n### navigationmenuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "stable id for open state (auto-generated when omitted)." }\n ]}\n />\n</div>\n### navigationmenutrigger\n\ntrigger button for dropdown content.\n\n### navigationmenucontent\n\ndropdown panel content.\n\n### navigationmenulink\n\ndirect top-level links do not reserve space for a dropdown chevron. every top-level item shares an 80px minimum width and a 28px minimum height, so typical labels remain the same size regardless of whether they have a chevron. longer labels expand rather than truncate.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "marks the current page (`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### navigationmenuindicator\n\nactive item indicator (visual underline).\n'
|
|
321
321
|
},
|
|
322
322
|
{
|
|
323
323
|
slug: "components/pagination",
|
|
@@ -613,8 +613,8 @@ var docs_index_default = {
|
|
|
613
613
|
title: "Elevation",
|
|
614
614
|
description: "Shadow recipes for cards, popovers, and floating surfaces.",
|
|
615
615
|
category: "foundations",
|
|
616
|
-
content: 'Each
|
|
617
|
-
searchText: 'elevation shadow recipes for cards, popovers, and floating surfaces. \neach
|
|
616
|
+
content: 'Each Foundation step (`--refineui-elevation-N`) automatically switches between light and dark values based on the active theme. Components should prefer the intent-level aliases below, which remain mapped to those Foundation steps. Use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="Elevation CSS variables"\n columns={[\n { key: "use", header: "Use" },\n { key: "css", header: "CSS", mono: true },\n ]}\n rows={[\n { use: "Surface / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n { use: "Overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n { use: "Foundation step", css: "--refineui-elevation-8" },\n { use: "Force light", css: "--refineui-elevation-8light" },\n { use: "Force dark", css: "--refineui-elevation-8dark" },\n ]}\n />\n</div>\n\n<div class="not-content">\n <ElevationPreview client:load />\n</div>\n\n## Usage\n\n```css\n.panel {\n box-shadow: var(--refineui-elevation-floating);\n}\n```',
|
|
617
|
+
searchText: 'elevation shadow recipes for cards, popovers, and floating surfaces. \neach foundation step (`--refineui-elevation-n`) automatically switches between light and dark values based on the active theme. components should prefer the intent-level aliases below, which remain mapped to those foundation steps. use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="elevation css variables"\n columns={[\n { key: "use", header: "use" },\n { key: "css", header: "css", mono: true },\n ]}\n rows={[\n { use: "surface / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n { use: "overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n { use: "foundation step", css: "--refineui-elevation-8" },\n { use: "force light", css: "--refineui-elevation-8light" },\n { use: "force dark", css: "--refineui-elevation-8dark" },\n ]}\n />\n</div>\n\n<div class="not-content">\n <elevationpreview client:load />\n</div>\n\n## usage\n\n```css\n.panel {\n box-shadow: var(--refineui-elevation-floating);\n}\n```\n'
|
|
618
618
|
},
|
|
619
619
|
{
|
|
620
620
|
slug: "foundations/index",
|
|
@@ -1027,8 +1027,8 @@ var docs_index_default = {
|
|
|
1027
1027
|
title: "Navigation Menu",
|
|
1028
1028
|
description: "\uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274.",
|
|
1029
1029
|
category: "guides",
|
|
1030
|
-
content: '<div class="not-content my-6">\n <NavigationMenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuLink href="/" active>\n Home\n </NavigationMenuLink>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n <NavigationMenuContent>\n <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n </NavigationMenuContent>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink href="/about">About</NavigationMenuLink>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### NavigationMenu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "delayDuration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### NavigationMenuList\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### NavigationMenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n ]}\n />\n</div>\n### NavigationMenuTrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### NavigationMenuContent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### NavigationMenuLink\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### NavigationMenuIndicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).',
|
|
1031
|
-
searchText: 'navigation menu \uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274. <div class="not-content my-6">\n <navigationmenupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<navigationmenu>\n <navigationmenulist>\n <navigationmenuitem>\n <navigationmenulink href="/" active>\n home\n </navigationmenulink>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenutrigger>products</navigationmenutrigger>\n <navigationmenucontent>\n <navigationmenulink href="/products/web">web</navigationmenulink>\n <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n </navigationmenucontent>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenulink href="/about">about</navigationmenulink>\n </navigationmenuitem>\n </navigationmenulist>\n</navigationmenu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### navigationmenu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "delayduration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n { prop: "skipdelayduration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n { prop: "aria-label", default: "\\"main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### navigationmenulist\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### navigationmenuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n ]}\n />\n</div>\n### navigationmenutrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### navigationmenucontent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### navigationmenulink\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### navigationmenuindicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).\n
|
|
1030
|
+
content: '<div class="not-content my-6">\n <NavigationMenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<NavigationMenu>\n <NavigationMenuList>\n <NavigationMenuItem>\n <NavigationMenuLink href="/" active>\n Home\n </NavigationMenuLink>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n <NavigationMenuContent>\n <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n </NavigationMenuContent>\n </NavigationMenuItem>\n <NavigationMenuItem>\n <NavigationMenuLink href="/about">About</NavigationMenuLink>\n </NavigationMenuItem>\n </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### NavigationMenu\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "delayDuration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### NavigationMenuList\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### NavigationMenuItem\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n ]}\n />\n</div>\n### NavigationMenuTrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### NavigationMenuContent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### NavigationMenuLink\n\n\uC0C1\uB2E8 \uC9C1\uC811 \uB9C1\uD06C\uC5D0\uB294 \uB4DC\uB86D\uB2E4\uC6B4 \uD654\uC0B4\uD45C\uC6A9 \uBE48 \uACF5\uAC04\uC744 \uB0A8\uAE30\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uBAA8\uB4E0 \uC0C1\uB2E8 \uD56D\uBAA9\uC740 \uCD5C\uC18C 80px \uB108\uBE44\uC640 28px \uB192\uC774\uB97C \uACF5\uC720\uD558\uBBC0\uB85C, \uC77C\uBC18\uC801\uC778 \uB808\uC774\uBE14 \uAE38\uC774\uC5D0\uC11C\uB294 chevron \uC720\uBB34\uC640 \uAD00\uACC4\uC5C6\uC774 \uAC19\uC740 \uD06C\uAE30\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4. \uB354 \uAE34 \uB808\uC774\uBE14\uC740 \uC798\uB9AC\uC9C0 \uC54A\uB3C4\uB85D \uD655\uC7A5\uB429\uB2C8\uB2E4.\n\n<div class="not-content">\n <PropSpec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### NavigationMenuIndicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).',
|
|
1031
|
+
searchText: 'navigation menu \uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274. <div class="not-content my-6">\n <navigationmenupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n <specrenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<navigationmenu>\n <navigationmenulist>\n <navigationmenuitem>\n <navigationmenulink href="/" active>\n home\n </navigationmenulink>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenutrigger>products</navigationmenutrigger>\n <navigationmenucontent>\n <navigationmenulink href="/products/web">web</navigationmenulink>\n <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n </navigationmenucontent>\n </navigationmenuitem>\n <navigationmenuitem>\n <navigationmenulink href="/about">about</navigationmenulink>\n </navigationmenuitem>\n </navigationmenulist>\n</navigationmenu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### navigationmenu\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n { prop: "delayduration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n { prop: "skipdelayduration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n { prop: "aria-label", default: "\\"main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n ]}\n />\n</div>\n### navigationmenulist\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### navigationmenuitem\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n ]}\n />\n</div>\n### navigationmenutrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### navigationmenucontent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### navigationmenulink\n\n\uC0C1\uB2E8 \uC9C1\uC811 \uB9C1\uD06C\uC5D0\uB294 \uB4DC\uB86D\uB2E4\uC6B4 \uD654\uC0B4\uD45C\uC6A9 \uBE48 \uACF5\uAC04\uC744 \uB0A8\uAE30\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uBAA8\uB4E0 \uC0C1\uB2E8 \uD56D\uBAA9\uC740 \uCD5C\uC18C 80px \uB108\uBE44\uC640 28px \uB192\uC774\uB97C \uACF5\uC720\uD558\uBBC0\uB85C, \uC77C\uBC18\uC801\uC778 \uB808\uC774\uBE14 \uAE38\uC774\uC5D0\uC11C\uB294 chevron \uC720\uBB34\uC640 \uAD00\uACC4\uC5C6\uC774 \uAC19\uC740 \uD06C\uAE30\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4. \uB354 \uAE34 \uB808\uC774\uBE14\uC740 \uC798\uB9AC\uC9C0 \uC54A\uB3C4\uB85D \uD655\uC7A5\uB429\uB2C8\uB2E4.\n\n<div class="not-content">\n <propspec\n client:load\n rows={[\n { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n ]}\n />\n</div>\n### navigationmenuindicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).\n'
|
|
1032
1032
|
},
|
|
1033
1033
|
{
|
|
1034
1034
|
slug: "ko/components/pagination",
|
|
@@ -1324,8 +1324,8 @@ var docs_index_default = {
|
|
|
1324
1324
|
title: "Elevation",
|
|
1325
1325
|
description: "\uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C.",
|
|
1326
1326
|
category: "guides",
|
|
1327
|
-
content: '\uAC01
|
|
1328
|
-
searchText: 'elevation \uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C. \n\uAC01
|
|
1327
|
+
content: '\uAC01 Foundation \uC2A4\uD15D(`--refineui-elevation-N`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uB294 Foundation \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC544\uB798 \uC758\uB3C4\uD615 alias\uB97C \uC6B0\uC120 \uC0AC\uC6A9\uD558\uC138\uC694. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n <SpecTable\n client:load\n aria-label="Elevation CSS \uBCC0\uC218"\n columns={[\n { key: "use", header: "\uC6A9\uB3C4" },\n { key: "css", header: "CSS", mono: true },\n ]}\n rows={[\n { use: "\uC11C\uD53C\uC2A4 / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n { use: "overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n { use: "Foundation \uC2A4\uD15D", css: "--refineui-elevation-8" },\n { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n ]}\n />\n</div>\n\n<div class="not-content">\n <ElevationPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n box-shadow: var(--refineui-elevation-floating);\n}\n```',
|
|
1328
|
+
searchText: 'elevation \uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C. \n\uAC01 foundation \uC2A4\uD15D(`--refineui-elevation-n`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uB294 foundation \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC544\uB798 \uC758\uB3C4\uD615 alias\uB97C \uC6B0\uC120 \uC0AC\uC6A9\uD558\uC138\uC694. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n <spectable\n client:load\n aria-label="elevation css \uBCC0\uC218"\n columns={[\n { key: "use", header: "\uC6A9\uB3C4" },\n { key: "css", header: "css", mono: true },\n ]}\n rows={[\n { use: "\uC11C\uD53C\uC2A4 / raised / floating", css: "--refineui-elevation-surface | -raised | -floating" },\n { use: "overlay / modal / toast", css: "--refineui-elevation-overlay | -modal | -toast" },\n { use: "foundation \uC2A4\uD15D", css: "--refineui-elevation-8" },\n { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n ]}\n />\n</div>\n\n<div class="not-content">\n <elevationpreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n box-shadow: var(--refineui-elevation-floating);\n}\n```\n'
|
|
1329
1329
|
},
|
|
1330
1330
|
{
|
|
1331
1331
|
slug: "ko/foundations/index",
|
package/lib/index.js
CHANGED
package/lib/server.js
CHANGED