[{"data":1,"prerenderedAt":346},["ShallowReactive",2],{"registry-index":3},{"items":4},[5,9,15,18,23,26,29,32,35,38,41,46,49,52,55,58,61,64,67,70,73,76,79,83,86,91,94,99,102,105,108,111,114,117,120,123,126,129,133,137,140,143,146,149,152,155,158,161,164,167,170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,228,231,234,237,242,246,250,254,258,262,266,269,272,275,278,281,284,287,290,293,297,300,303,306,309,312,315,318,321,324,327,330,333,337,340,343],{"name":6,"type":7,"description":8},"accordion","registry:ui","Vertically stacked, collapsible panels — one or many open at a time. Use for FAQs, settings groups, and any place where space is tight but content needs to stay browsable. Built on reka-ui with smooth animation and full keyboard support.",{"name":10,"type":11,"description":12,"categories":13},"activity-feed","registry:block","Recent activity feed inside a SectionCard. Items take icon + action + detail + time.",[14],"dashboard",{"name":16,"type":7,"description":17},"advance-select","Searchable, async-capable select with keyboard navigation, multi-select, and option grouping. Drop in when the native `\u003Cselect>` or the basic Select primitive runs out of room — large lists, debounced server-side filtering, custom rendered items.",{"name":19,"type":7,"description":20,"categories":21},"alert","Static, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.",[22],"feedback",{"name":24,"type":7,"description":25},"alert-modal","Props-driven shortcut for confirm and destructive prompts — pass `title`, `description`, `actionLabel`, and a `tone` and you get a fully styled modal with a leading icon ring, action button, and optional async loading state. Skip it and use Dialog when you need a free-form modal instead.",{"name":27,"type":7,"description":28},"anchor","In-page navigation list with scroll-spy. Renders a vertical list of links; the active item highlights as the user scrolls through anchored sections.",{"name":30,"type":7,"description":31},"aspect-ratio","Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16\u002F9 for video, 1\u002F1 for avatars, 4\u002F3 for cards.",{"name":33,"type":7,"description":34},"avatar","Round or rounded-square user image with a fallback that shows initials or an icon when the image is missing or fails to load. Sizes from xs to 2xl, optional status dot, and a group composition for stacked avatar lists.",{"name":36,"type":7,"description":37},"badge","Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.",{"name":39,"type":7,"description":40},"breadcrumb","Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `\u003CBreadcrumbList>` and `\u003CBreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.",{"name":42,"type":7,"description":43,"categories":44},"button","The primary clickable primitive — six variants (default, destructive, outline, secondary, ghost, link), seven sizes (default, sm, lg, xs, icon, icon-sm, icon-lg), and an as-child mode that lets you render a router-link or anchor with full button styling.",[45],"control",{"name":47,"type":7,"description":48},"calendar","Single-month calendar grid for date selection, built on reka-ui’s Calendar primitive. Pair it with a Popover or use it inline. Supports min\u002Fmax bounds, disabled dates, and locale formatting.",{"name":50,"type":7,"description":51},"card","Bordered container with an opinionated header \u002F content \u002F footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.",{"name":53,"type":7,"description":54},"carousel","Horizontal or vertical scroller with previous\u002Fnext controls. Hand-rolled `useCarousel` composable backed by native CSS scroll-snap — no external carousel library, just the browser. Drop in images, cards, or any custom slide content.",{"name":56,"type":7,"description":57},"charts","Area, bar, line, pie, radar, scatter, heatmap, and sparkline charts wrapped around Apache ECharts with sensible defaults: registry tokens for theming, tooltip styling, and dark mode wired up. Drop a `data` array in and go.",{"name":59,"type":7,"description":60},"checkbox","Standalone or in-form binary toggle, built on reka-ui. Supports indeterminate state for tri-state lists, sizes, and proper keyboard \u002F screen-reader behavior. Pair with Label for clickable text.",{"name":62,"type":7,"description":63},"chip","Compact, removable tag — typically used inside `tags-input` or as a filter pill. Seven variants (`default`, `filled`, `outlined`, `elevated`, `success`, `warning`, `destructive`), three sizes, and an optional close button.",{"name":65,"type":7,"description":66},"code-block","Read-only code preview with a header, optional filename, copy button, and `\u003Cpre>`-rendered content. Use for installation snippets, API examples, and snippets you want users to copy verbatim.",{"name":68,"type":7,"description":69},"collapsible","Headless single-region show\u002Fhide primitive. Use it when Accordion is overkill — a single toggle reveals one panel of content. Smooth height animation built in.",{"name":71,"type":7,"description":72},"color-picker","Hex \u002F RGB color input with a popover swatch grid. Supports controlled and uncontrolled modes, alpha channel, and a recent-colors row.",{"name":74,"type":7,"description":75},"command","Searchable command palette à la Cmd-K — keyboard-driven menu with grouped items, icons, shortcuts, and fuzzy filtering. Use as a global launcher (mounted in a Dialog) or inline as a typeahead select.",{"name":77,"type":7,"description":78},"context-menu","Right-click menu — same primitives as Dropdown Menu but triggered by `contextmenu` events. Drop on any element you want to attach row actions, file-system style operations, or copy\u002Fpaste menus to.",{"name":80,"type":11,"description":81,"categories":82},"dashboard-kpis","Dashboard KPI section — six tiles composed from raw Card primitives inside a KpiGrid container. Mix of data shapes: numeric KPI with trend pill, value + sparkline, mini bar chart, conic-gradient donut with legend, progress-bar stack, and a recent-activity list. Tiles span 1 or 2 grid columns. Edit the file directly to add\u002Fremove\u002Freshape tiles or swap data.",[14],{"name":84,"type":7,"description":85},"data-list","Vertical key\u002Fvalue list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label\u002Fvalue rows; supports inline edit triggers and trailing actions per row.",{"name":87,"type":7,"description":88,"categories":89},"data-table","Full-feature table with sorting, filtering, column pinning, pagination, row selection, and an opinionated header\u002Ftoolbar. Built on TanStack Table — pass `columns` + `data` and configure as needed.",[90],"data",{"name":92,"type":7,"description":93},"date-picker","Date input that opens a Calendar in a Popover. Handles parsing, formatting, min\u002Fmax bounds, and disabled dates. Use the Range Calendar version for from\u002Fto selections.",{"name":95,"type":7,"description":96,"categories":97},"dialog","Free-form modal primitive — composable from `Dialog`, `DialogTrigger`, `DialogContent`, and friends. Use for forms, info cards, pickers, and any custom modal layout. For confirm\u002Fdestructive prompts, prefer the prebuilt `AlertModal` shortcut.",[98],"overlay",{"name":100,"type":7,"description":101},"dropdown-menu","Floating menu launched from a trigger button — for account switchers, row actions, editor menus, and any short list of commands. Supports labels, icons, separators, keyboard shortcuts, checkbox\u002Fradio items, and nested submenus. Built on reka-ui; ARIA + keyboard navigation handled.",{"name":103,"type":7,"description":104},"empty-state","Centered placeholder with icon, headline, supporting text, and one or two actions. Drop into empty lists, blank dashboards, and unauthenticated views — the standard \"nothing here yet\" pattern.",{"name":106,"type":11,"description":107},"event-list","List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.",{"name":109,"type":7,"description":110},"file-upload","Drag-and-drop file dropzone with click-to-browse fallback, file-type filtering, multi-file support, and per-file progress + remove controls. Wraps native `\u003Cinput type=\"file\">` with proper a11y.",{"name":112,"type":7,"description":113},"form","Zod-first form block built on TanStack Vue Form. Wires field labels, descriptions, error messages, and validation together; bind a field once and the rest is automatic.",{"name":115,"type":7,"description":116},"grid","Responsive CSS grid container with `cols`, `gap`, and breakpoint props. A small but useful primitive for laying out card grids, KPI tiles, and form sections without writing repetitive Tailwind classes.",{"name":118,"type":7,"description":119},"hover-card","Rich popover triggered by hover\u002Ffocus instead of click. Use for inline previews — user cards on @mentions, link previews, KPI explanations. Built on reka-ui with a configurable open\u002Fclose delay.",{"name":121,"type":7,"description":122},"icon-box","Small framed icon used inside cards, list items, and stat tiles. Three variants (`primary`, `muted`, `custom`), two shapes (`rounded`, `circle`), and three sizes. Drop a Lucide icon in, get a polished badge.",{"name":124,"type":7,"description":125},"icon-transition","Animated icon swap for click acknowledgements — copy → check, bookmark → bookmark-filled, follow → follower. Pass two icon components and an async `action`; clicking runs the action then springs the active icon in. Auto-reverts after `resetAfter` ms (default 1500), or pass `0` to keep the active icon and call the exposed `reset()` method to flip it back. Renders as a `\u003Cbutton>` by default; use `as=\"span\"` plus the `:active` prop when you want an externally controlled, non-interactive icon swap inside another control. Honors `prefers-reduced-motion`.",{"name":127,"type":7,"description":128},"icons","Showcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and copy-paste imports.",{"name":130,"type":131,"description":132},"init","registry:lib","One-shot bootstrap. Pulls tailwind tokens, the cn() helper, and the useTheme composable in a single command. Run this first when starting a new app.",{"name":134,"type":7,"description":135,"categories":136},"input","Text input — single-line. Same sizing and ring treatment as the rest of the form primitives. Pair with Label, attach an icon via the `start` \u002F `end` slots, or compose into a search input.",[45],{"name":138,"type":7,"description":139},"knob","Circular dial input. Drag to rotate, keyboard accessible, SVG-rendered. Useful for compact numeric controls (volume, brightness, gauges).",{"name":141,"type":7,"description":142},"kpi-grid","Bare responsive grid wrapper (2 \u002F 3 \u002F 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.",{"name":144,"type":7,"description":145},"label","Accessible label primitive — wraps text and binds to its child input via `for`. Disabled-state styling, optional required-asterisk, and proper screen-reader behavior.",{"name":147,"type":7,"description":148},"labeled-value","Read-only label\u002Fvalue pair for surface details — \"Email: jane@…\" or \"Status: Active\". Compose them in a Data List, a Stat Card, or a Section Card detail row.",{"name":150,"type":7,"description":151},"lazy-image","Lazy-loaded image with aspect-ratio reservation, skeleton placeholder, fade-in transition, and error fallback. Composes loading=\"lazy\" with IntersectionObserver for off-viewport hold and pairs with the skeleton primitive for the placeholder state.",{"name":153,"type":7,"description":154},"list","Plain content list with `\u003Cul>` \u002F `\u003Cli>` semantics and a few preset gap and divider modes. Use for menu items, navigation lists, or any vertical sequence of small rows.",{"name":156,"type":7,"description":157},"masked-input","Input with a fixed format mask — phone numbers, credit cards, dates, postal codes. Pass a mask string (e.g. `(###) ###-####`) and the input enforces it as the user types. Customizable placeholder character and replacement marker.",{"name":159,"type":7,"description":160},"mentions","Textarea with trigger-character autocomplete. Type a configured trigger (default @) to open a filtered popover; pick to insert. Static or async options.",{"name":162,"type":7,"description":163},"menubar","Top-level menu bar — File \u002F Edit \u002F View — for desktop-style apps. Same primitives as Dropdown Menu but laid out horizontally and keyboard-navigable across siblings (left\u002Fright arrows).",{"name":165,"type":7,"description":166},"navigation-menu","Top-of-page horizontal navigation with hover\u002Fclick triggered megamenus. Use for marketing sites and product navs that need rich content — featured links, mini-cards, and submenu columns.",{"name":168,"type":7,"description":169},"number-field","Numeric input with stepper buttons, min\u002Fmax bounds, step size, and decimal precision. Use for quantities, prices, and any field that should be a number rather than free text.",{"name":171,"type":7,"description":172},"page","Page-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for `routes\u002F*.vue` pages so every screen looks consistent.",{"name":174,"type":7,"description":175},"pagination","Page-number bar with previous\u002Fnext, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.",{"name":177,"type":7,"description":178},"pin-input","One-time-code input — N separate boxes that auto-advance and accept paste. Use for SMS verification, 2FA, and short numeric codes. Length, masking, and per-slot status all configurable.",{"name":180,"type":7,"description":181},"popover","Click-triggered floating panel anchored to a trigger element. Supports optional localStorage persistence and configurable dismissal (click-outside, escape, manual). Built on reka-ui with collision detection.",{"name":183,"type":7,"description":184},"progress","Linear progress bar — determinate or indeterminate. Two visual densities (slim, default), four tones, and an optional inline percentage label.",{"name":186,"type":11,"description":187},"progress-breakdown","Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.",{"name":189,"type":7,"description":190},"progress-item","Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.",{"name":192,"type":7,"description":193},"progress-linear","Top-of-screen page-loading bar (à la NProgress \u002F nuxt loading-indicator). Auto-advances while a navigation or fetch is in flight, then completes. Drop into the app shell once.",{"name":195,"type":7,"description":196},"qr-code","Static QR code renderer — pass `value` and a size, get an SVG. Useful for sign-in links, share URLs, and Wi-Fi credentials. No dependencies on a heavy QR library.",{"name":198,"type":11,"description":199},"quick-actions","Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (NuxtLink or RouterLink) for SPA routing.",{"name":201,"type":7,"description":202},"radio-group","Single-selection group of radio inputs. Vertical or horizontal layout, optional descriptions per item, and full keyboard navigation. Pair with Form for validation messages.",{"name":204,"type":7,"description":205},"range-calendar","Calendar variant for from\u002Fto date selection — click two dates and the range fills in between. Same min\u002Fmax and disabled-date support as the single-date Calendar.",{"name":207,"type":7,"description":208},"range-slider","Two-thumb range slider for \"between X and Y\" inputs — price filters, age ranges, time windows. Built on reka-ui with proper keyboard handling and aria-valuetext.",{"name":210,"type":7,"description":211},"rating","Star (or custom icon) rating control — pick a value from 1 to N. Read-only mode for displaying review averages, with half-step support.",{"name":213,"type":7,"description":214},"resizable","Drag-to-resize panel layout — horizontal or vertical splits with persistent sizes. Use for IDE-style sidebars, split views, and any layout the user should be able to reshape.",{"name":216,"type":7,"description":217},"rich-text-editor","WYSIWYG editor wrapped around TipTap — bold\u002Fitalic\u002Flinks\u002Flists\u002Fheadings\u002Fblockquote\u002Fcode, plus a configurable toolbar. Drop into forms where Markdown is too low-level.",{"name":219,"type":7,"description":220},"scroll-area","Custom scrollbar that always renders the same way across OSes (no flashing native scrollbars on Windows). Use for sidebars, dropdown content, and any overflow region you want to feel consistent.",{"name":222,"type":7,"description":223},"section-card","Card variant tuned for settings pages — title, description, and content slots, with optional footer for save\u002Fcancel actions. The block-level building block for `...\u002Fsettings\u002F*` routes.",{"name":225,"type":7,"description":226,"categories":227},"select","Dropdown select primitive — single-select, with optional groups, descriptions per item, and a search input via the AdvanceSelect variant. Built on reka-ui.",[45],{"name":229,"type":7,"description":230},"separator","Horizontal or vertical visual divider — a `\u003Cdiv>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.",{"name":232,"type":7,"description":233},"sheet","Side-mounted modal that slides in from the top, right, bottom, or left edge. Use for filter panels, edit drawers, and mobile menus.",{"name":235,"type":7,"description":236},"sidebar","Full-height app sidebar — collapsible to icons, with grouping, sub-grouping, and integrated search. The navigation surface for product apps with many sections.",{"name":238,"type":11,"description":239,"categories":240},"sidebar-01","Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure template, no props -- edit Sidebar01.vue to change routes and NavUser.vue to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.",[235,241],"layout",{"name":243,"type":11,"description":244,"categories":245},"sidebar-02","Full-featured app sidebar -- collapsible=\"icon\" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.",[235,241],{"name":247,"type":11,"description":248,"categories":249},"sidebar-03","Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.",[235,241],{"name":251,"type":11,"description":252,"categories":253},"sidebar-04","Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant=\"floating\" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.",[235,241],{"name":255,"type":11,"description":256,"categories":257},"sidebar-05","Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible=\"icon\": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: :style=\"{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }\". Modeled on the GR8R HRMS admin shell.",[235,241],{"name":259,"type":11,"description":260,"categories":261},"sidebar-06","Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.",[235,241],{"name":263,"type":11,"description":264,"categories":265},"sidebar-07","App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard \u002F Management \u002F Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.",[235,241],{"name":267,"type":7,"description":268},"skeleton","Animated placeholder rectangles for loading states — drop one in shape of the content that’s about to render. Variants for text lines, avatars, rounded rectangles, and circles.",{"name":270,"type":7,"description":271},"slider","Single-thumb slider — pick a value within a range. Optional tick marks, step size, and inline value display.",{"name":273,"type":7,"description":274},"sonner","Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `vue-sonner` library with the registry’s tokens applied.",{"name":276,"type":7,"description":277},"spinner","Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.",{"name":279,"type":7,"description":280},"stepper","Multi-step indicator — horizontal or vertical, with completed \u002F current \u002F upcoming states and optional descriptions per step. Use for onboarding wizards and checkout flows.",{"name":282,"type":7,"description":283},"switch","On\u002Foff toggle — visual analog of a hardware switch. Use for binary settings where the change takes effect immediately, not for form fields that submit later (use Checkbox there).",{"name":285,"type":7,"description":286},"table","Plain HTML table primitives — `\u003CTable>`, `\u003CTableHeader>`, `\u003CTableRow>`, `\u003CTableCell>` — with the registry’s borders, padding, and tokens already applied. Use this when Data Table is too heavy.",{"name":288,"type":7,"description":289},"tabs","Horizontal tab navigation with content panels — pick one panel at a time. Underline or pills variants. Built on reka-ui with full keyboard navigation.",{"name":291,"type":7,"description":292},"tags-input","Multi-tag input — type a value, hit Enter, get a Chip. Backspace removes the last tag. Use for email recipient lists, tag sets, and free-form keyword inputs.",{"name":294,"type":295,"description":296},"tailwind","registry:style","Tailwind v4 OKLCH color tokens (light + dark), motion tokens, base layer styling, and shadow utilities for the uipkge design system. Ships as structured cssVars + css fields so the shadcn-vue CLI merges them into the consumer's tailwind.css instead of overwriting.",{"name":298,"type":7,"description":299},"textarea","Multi-line text input. Auto-resize variant, character counter, and the same ring\u002Fborder treatment as the rest of the form primitives.",{"name":301,"type":11,"description":302},"theme-customize","Full color-token customization panel: edit base\u002Fsemantic colors with presets, copy\u002Fpaste, and live preview.",{"name":304,"type":7,"description":305},"theme-switch","Light \u002F dark \u002F system theme toggle — drop in the header. Seven visual variants: `cards`, `icons`, `icon-only`, `dropdown`, `pill`, `pill-4`, and `switch`. Persists choice to `localStorage` and respects `prefers-color-scheme` for `system`.",{"name":307,"type":7,"description":308},"time-picker","Standalone time input — hours, minutes, optional seconds, and 12h\u002F24h modes. Pairs with Date Picker for full datetime entry.",{"name":310,"type":7,"description":311},"timeline","Vertical or horizontal sequence of events with connectors and node markers. Statuses (pending, current, completed, failed) tint the connector. Use for activity feeds, audit logs, and progress tracking.",{"name":313,"type":7,"description":314},"toggle","On\u002Foff button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for \"press to enable\" buttons like bold \u002F italic.",{"name":316,"type":7,"description":317},"toggle-group","Group of `Toggle` buttons that act as a single-select or multi-select control. Use for view-mode pickers (grid\u002Flist), text-format toolbars, and any \"pick one of N\" button bar.",{"name":319,"type":11,"description":320},"toggle-setting-list","List of toggle-able settings in a SectionCard. v-model binds a Record\u003Cstring, boolean> keyed by item.key.",{"name":322,"type":7,"description":323},"tooltip","Small popover triggered by hover\u002Ffocus, used for short labels — icon-button names, abbreviation expansions, keyboard shortcuts. Auto-positions and respects `prefers-reduced-motion`.",{"name":325,"type":7,"description":326},"tour","Multi-step guided overlay walkthrough. Highlights a target element with a dim mask cutout and shows a card next to it. Steps support targets by selector, ref, or function; centered (no-target) steps work as modal-style intros.",{"name":328,"type":7,"description":329},"transfer","Dual-list move-between control. Two columns plus a center pair of move buttons. Optional search, pagination, and one-way mode.",{"name":331,"type":7,"description":332},"tree-view","Indented tree of expandable nodes — file browsers, taxonomy editors, nested settings. Discord-style elbow connectors, lazy-load branches, and full keyboard navigation.",{"name":334,"type":335,"description":336},"use-theme","registry:hook","useTheme composable + a Nuxt boot plugin that inlines the dark-class assignment in \u003Chead>, so initial paint matches the saved theme (no white flash on reload).",{"name":338,"type":131,"description":339},"utils","Tailwind class merge helper: cn(). Combines clsx and tailwind-merge.",{"name":341,"type":7,"description":342},"vertical-tabs","Settings-page navigation pattern — labels stack on the left, content panel on the right. Same API as Tabs but with a vertical orientation. Use for dense, multi-section settings UIs.",{"name":344,"type":7,"description":345},"virtual-list","Generic windowed scroller. Renders only visible items plus a small overscan, with fixed or dynamic item sizes. Use for long lists where most rows are off-screen.",1778567939484]