From e7470812d7c40b8c51b2210750da636d96c4348d Mon Sep 17 00:00:00 2001 From: Binnodon Date: Fri, 13 Feb 2026 16:56:48 -0600 Subject: [PATCH 1/6] Add 20 new components achieving 100% parity with shadcn-ui Implemented all 5 phases from IMPLEMENTATION_PLAN.md adding 20 components to achieve complete feature parity with shadcn-ui. Phase 1 - Foundation Components (4): - direction: RTL/LTR provider with language switching - kbd: Keyboard shortcut display component - empty: Empty state component with variants - native-select: Styled native select element Phase 2 - Core Primitives (5): - progress: Animated progress bar (Kobalte) - hover-card: Rich hover tooltips (Kobalte) - popover: Popup content container (Kobalte) - scroll-area: Custom scrollable area with draggable scrollbar - menubar: Horizontal menu bar (Kobalte) Phase 3 - Dependent Components (3): - toggle-group: Multiple toggle buttons (Kobalte) - item: Flexible list item component - pagination: Page navigation with ellipsis Phase 4 - Complex Components (4): - navigation-menu: Multi-level navigation with animations - form: Form integration with @modular-forms/solid - combobox: Searchable select with filtering (Kobalte) - command: Command palette with fuzzy search Phase 5 - Third-Party Integrations (4): - input-otp: OTP/PIN input with auto-focus and paste support - resizable: Resizable panels with @corvu/resizable - sonner: Toast notifications with solid-sonner - chart: 6 chart types with Chart.js integration Component Fixes: - Fixed Progress animation using CSS transforms - Fixed Scroll Area scrollbar dragging with cursor tracking - Fixed Direction component with proper RTL demo - Fixed Toggle Group visual feedback with data-[pressed] styles - Fixed Form accessibility (label for/id, autocomplete) - Fixed Combobox positioning and structure - Added Toggle component documentation Configuration Changes: - Added static HMR port (24678) for WSL devcontainer - Disabled SSR in app.config.ts - Added dependencies: @corvu/resizable, chart.js, solid-sonner All components: - Follow solid-ui conventions (splitProps, cn, data-slot) - Use Kobalte/Corvu primitives where available - Support dark/light themes - Include accessibility features - Have comprehensive examples and MDX documentation - Registered in _registry.ts with proper dependencies Total registry items: 142 Component library status: 56/56 (100% parity with shadcn-ui) Co-Authored-By: Claude Sonnet 4.5 --- apps/docs/app.config.ts | 18 +- apps/docs/package.json | 4 + apps/docs/src/config/docs.ts | 112 +- apps/docs/src/registry/__index__.tsx | 2240 ++++++++++------- apps/docs/src/registry/examples/_registry.ts | 248 ++ .../docs/src/registry/examples/chart-demo.tsx | 134 + .../src/registry/examples/combobox-demo.tsx | 58 + .../src/registry/examples/command-demo.tsx | 62 + .../src/registry/examples/command-dialog.tsx | 120 + .../registry/examples/dialog-close-button.tsx | 4 +- .../src/registry/examples/dialog-demo.tsx | 4 +- .../src/registry/examples/direction-demo.tsx | 56 + .../docs/src/registry/examples/empty-demo.tsx | 37 + apps/docs/src/registry/examples/form-demo.tsx | 134 + .../src/registry/examples/hover-card-demo.tsx | 39 + .../src/registry/examples/input-otp-demo.tsx | 10 + apps/docs/src/registry/examples/item-demo.tsx | 42 + apps/docs/src/registry/examples/kbd-demo.tsx | 29 + .../src/registry/examples/menubar-demo.tsx | 115 + .../registry/examples/native-select-demo.tsx | 23 + .../examples/navigation-menu-demo.tsx | 121 + .../src/registry/examples/pagination-demo.tsx | 35 + .../src/registry/examples/popover-demo.tsx | 42 + .../src/registry/examples/progress-demo.tsx | 22 + .../src/registry/examples/resizable-demo.tsx | 29 + .../registry/examples/scroll-area-demo.tsx | 40 + .../src/registry/examples/sonner-demo.tsx | 46 + .../src/registry/examples/toggle-demo.tsx | 11 + .../registry/examples/toggle-group-demo.tsx | 19 + apps/docs/src/registry/ui/_registry.ts | 274 +- apps/docs/src/registry/ui/chart.tsx | 268 ++ apps/docs/src/registry/ui/combobox.tsx | 182 ++ apps/docs/src/registry/ui/command.tsx | 347 +++ apps/docs/src/registry/ui/direction.tsx | 26 + apps/docs/src/registry/ui/empty.tsx | 111 + apps/docs/src/registry/ui/form.tsx | 165 ++ apps/docs/src/registry/ui/hover-card.tsx | 41 + apps/docs/src/registry/ui/input-otp.tsx | 202 ++ apps/docs/src/registry/ui/item.tsx | 198 ++ apps/docs/src/registry/ui/kbd.tsx | 28 + apps/docs/src/registry/ui/menubar.tsx | 286 +++ apps/docs/src/registry/ui/native-select.tsx | 53 + apps/docs/src/registry/ui/navigation-menu.tsx | 191 ++ apps/docs/src/registry/ui/pagination.tsx | 179 ++ apps/docs/src/registry/ui/popover.tsx | 90 + apps/docs/src/registry/ui/progress.tsx | 38 + apps/docs/src/registry/ui/resizable.tsx | 90 + apps/docs/src/registry/ui/scroll-area.tsx | 303 +++ apps/docs/src/registry/ui/sonner.tsx | 36 + apps/docs/src/registry/ui/toggle-group.tsx | 112 + apps/docs/src/registry/ui/toggle.tsx | 2 +- .../docs/src/routes/docs/components/chart.mdx | 194 ++ .../src/routes/docs/components/combobox.mdx | 68 + .../src/routes/docs/components/command.mdx | 70 + .../src/routes/docs/components/direction.mdx | 48 + .../docs/src/routes/docs/components/empty.mdx | 58 + apps/docs/src/routes/docs/components/form.mdx | 70 + .../src/routes/docs/components/hover-card.mdx | 64 + .../src/routes/docs/components/input-otp.mdx | 46 + apps/docs/src/routes/docs/components/item.mdx | 57 + apps/docs/src/routes/docs/components/kbd.mdx | 47 + .../src/routes/docs/components/menubar.mdx | 69 + .../routes/docs/components/native-select.mdx | 56 + .../docs/components/navigation-menu.mdx | 67 + .../src/routes/docs/components/pagination.mdx | 68 + .../src/routes/docs/components/popover.mdx | 62 + .../src/routes/docs/components/progress.mdx | 55 + .../src/routes/docs/components/resizable.mdx | 93 + .../routes/docs/components/scroll-area.mdx | 50 + .../src/routes/docs/components/sonner.mdx | 93 + .../routes/docs/components/toggle-group.mdx | 61 + .../src/routes/docs/components/toggle.mdx | 85 + .../src/solidbase-theme/mdx-components.tsx | 34 +- pnpm-lock.yaml | 62 + 74 files changed, 7742 insertions(+), 911 deletions(-) create mode 100644 apps/docs/src/registry/examples/chart-demo.tsx create mode 100644 apps/docs/src/registry/examples/combobox-demo.tsx create mode 100644 apps/docs/src/registry/examples/command-demo.tsx create mode 100644 apps/docs/src/registry/examples/command-dialog.tsx create mode 100644 apps/docs/src/registry/examples/direction-demo.tsx create mode 100644 apps/docs/src/registry/examples/empty-demo.tsx create mode 100644 apps/docs/src/registry/examples/form-demo.tsx create mode 100644 apps/docs/src/registry/examples/hover-card-demo.tsx create mode 100644 apps/docs/src/registry/examples/input-otp-demo.tsx create mode 100644 apps/docs/src/registry/examples/item-demo.tsx create mode 100644 apps/docs/src/registry/examples/kbd-demo.tsx create mode 100644 apps/docs/src/registry/examples/menubar-demo.tsx create mode 100644 apps/docs/src/registry/examples/native-select-demo.tsx create mode 100644 apps/docs/src/registry/examples/navigation-menu-demo.tsx create mode 100644 apps/docs/src/registry/examples/pagination-demo.tsx create mode 100644 apps/docs/src/registry/examples/popover-demo.tsx create mode 100644 apps/docs/src/registry/examples/progress-demo.tsx create mode 100644 apps/docs/src/registry/examples/resizable-demo.tsx create mode 100644 apps/docs/src/registry/examples/scroll-area-demo.tsx create mode 100644 apps/docs/src/registry/examples/sonner-demo.tsx create mode 100644 apps/docs/src/registry/examples/toggle-demo.tsx create mode 100644 apps/docs/src/registry/examples/toggle-group-demo.tsx create mode 100644 apps/docs/src/registry/ui/chart.tsx create mode 100644 apps/docs/src/registry/ui/combobox.tsx create mode 100644 apps/docs/src/registry/ui/command.tsx create mode 100644 apps/docs/src/registry/ui/direction.tsx create mode 100644 apps/docs/src/registry/ui/empty.tsx create mode 100644 apps/docs/src/registry/ui/form.tsx create mode 100644 apps/docs/src/registry/ui/hover-card.tsx create mode 100644 apps/docs/src/registry/ui/input-otp.tsx create mode 100644 apps/docs/src/registry/ui/item.tsx create mode 100644 apps/docs/src/registry/ui/kbd.tsx create mode 100644 apps/docs/src/registry/ui/menubar.tsx create mode 100644 apps/docs/src/registry/ui/native-select.tsx create mode 100644 apps/docs/src/registry/ui/navigation-menu.tsx create mode 100644 apps/docs/src/registry/ui/pagination.tsx create mode 100644 apps/docs/src/registry/ui/popover.tsx create mode 100644 apps/docs/src/registry/ui/progress.tsx create mode 100644 apps/docs/src/registry/ui/resizable.tsx create mode 100644 apps/docs/src/registry/ui/scroll-area.tsx create mode 100644 apps/docs/src/registry/ui/sonner.tsx create mode 100644 apps/docs/src/registry/ui/toggle-group.tsx create mode 100644 apps/docs/src/routes/docs/components/chart.mdx create mode 100644 apps/docs/src/routes/docs/components/combobox.mdx create mode 100644 apps/docs/src/routes/docs/components/command.mdx create mode 100644 apps/docs/src/routes/docs/components/direction.mdx create mode 100644 apps/docs/src/routes/docs/components/empty.mdx create mode 100644 apps/docs/src/routes/docs/components/form.mdx create mode 100644 apps/docs/src/routes/docs/components/hover-card.mdx create mode 100644 apps/docs/src/routes/docs/components/input-otp.mdx create mode 100644 apps/docs/src/routes/docs/components/item.mdx create mode 100644 apps/docs/src/routes/docs/components/kbd.mdx create mode 100644 apps/docs/src/routes/docs/components/menubar.mdx create mode 100644 apps/docs/src/routes/docs/components/native-select.mdx create mode 100644 apps/docs/src/routes/docs/components/navigation-menu.mdx create mode 100644 apps/docs/src/routes/docs/components/pagination.mdx create mode 100644 apps/docs/src/routes/docs/components/popover.mdx create mode 100644 apps/docs/src/routes/docs/components/progress.mdx create mode 100644 apps/docs/src/routes/docs/components/resizable.mdx create mode 100644 apps/docs/src/routes/docs/components/scroll-area.mdx create mode 100644 apps/docs/src/routes/docs/components/sonner.mdx create mode 100644 apps/docs/src/routes/docs/components/toggle-group.mdx create mode 100644 apps/docs/src/routes/docs/components/toggle.mdx diff --git a/apps/docs/app.config.ts b/apps/docs/app.config.ts index fa4254d6..8a7d4736 100644 --- a/apps/docs/app.config.ts +++ b/apps/docs/app.config.ts @@ -12,7 +12,7 @@ const theme = defineTheme({ export default defineConfig( createWithSolidBase(theme)( { - ssr: true, + ssr: false, server: { preset: "vercel", prerender: { @@ -21,8 +21,22 @@ export default defineConfig( }, vite: { plugins: [tailwindcss()], + resolve: { + conditions: ["solid", "browser", "development"] + }, + optimizeDeps: { + exclude: [ + "@modular-forms/solid" + ] + }, server: { - port: parseInt(process.env.FRONTEND_PORT || "5173", 10) + port: parseInt(process.env.FRONTEND_PORT || "5173", 10), + hmr: { + protocol: 'ws', + host: 'localhost', + port: 24678, + clientPort: 24678 + } } } }, diff --git a/apps/docs/package.json b/apps/docs/package.json index b23ab906..8dee4abb 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -13,14 +13,17 @@ "dependencies": { "@corvu/calendar": "^0.1.2", "@corvu/drawer": "^0.2.4", + "@corvu/resizable": "^0.2.5", "@fontsource-variable/geist": "^5.2.8", "@fontsource-variable/geist-mono": "^5.2.7", "@kobalte/core": "^0.13.11", "@kobalte/solidbase": "^0.2.20", + "@modular-forms/solid": "^0.25.1", "@solid-primitives/storage": "^4.3.3", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.3", "@solidjs/start": "^1.2.0", + "chart.js": "^4.5.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "embla-carousel": "^8.6.0", @@ -29,6 +32,7 @@ "lucide-solid": "^0.562.0", "rimraf": "^6.0.1", "solid-js": "^1.9.9", + "solid-sonner": "^0.2.8", "tailwind-merge": "^3.3.1", "vinxi": "^0.5.7", "zod": "^4.1.12" diff --git a/apps/docs/src/config/docs.ts b/apps/docs/src/config/docs.ts index 6aadbb55..4e06f85b 100644 --- a/apps/docs/src/config/docs.ts +++ b/apps/docs/src/config/docs.ts @@ -80,6 +80,11 @@ export const docsConfig: Config = { href: "/docs/components/carousel", status: "new" }, + { + title: "Chart", + href: "/docs/components/chart", + status: "new" + }, { title: "Checkbox", href: "/docs/components/checkbox" @@ -89,33 +94,118 @@ export const docsConfig: Config = { href: "/docs/components/collapsible" }, { - title: "Dialog", - href: "/docs/components/dialog" + title: "Combobox", + href: "/docs/components/combobox", + status: "new" + }, + { + title: "Command", + href: "/docs/components/command", + status: "new" }, { title: "Context Menu", href: "/docs/components/context-menu" }, + { + title: "Dialog", + href: "/docs/components/dialog" + }, + { + title: "Direction", + href: "/docs/components/direction", + status: "new" + }, { title: "Dropdown Menu", href: "/docs/components/dropdown-menu" }, + { + title: "Empty", + href: "/docs/components/empty", + status: "new" + }, { title: "Field", href: "/docs/components/field" }, + { + title: "Form", + href: "/docs/components/form", + status: "new" + }, + { + title: "Hover Card", + href: "/docs/components/hover-card", + status: "new" + }, { title: "Input Group", href: "/docs/components/input-group" }, + { + title: "Input OTP", + href: "/docs/components/input-otp", + status: "new" + }, + { + title: "Item", + href: "/docs/components/item", + status: "new" + }, + { + title: "Kbd", + href: "/docs/components/kbd", + status: "new" + }, { title: "Label", href: "/docs/components/label" }, + { + title: "Menubar", + href: "/docs/components/menubar", + status: "new" + }, + { + title: "Native Select", + href: "/docs/components/native-select", + status: "new" + }, + { + title: "Navigation Menu", + href: "/docs/components/navigation-menu", + status: "new" + }, + { + title: "Pagination", + href: "/docs/components/pagination", + status: "new" + }, + { + title: "Popover", + href: "/docs/components/popover", + status: "new" + }, + { + title: "Progress", + href: "/docs/components/progress", + status: "new" + }, { title: "Radio Group", href: "/docs/components/radio-group" }, + { + title: "Resizable", + href: "/docs/components/resizable", + status: "new" + }, + { + title: "Scroll Area", + href: "/docs/components/scroll-area", + status: "new" + }, { title: "Select", href: "/docs/components/select" @@ -124,10 +214,28 @@ export const docsConfig: Config = { title: "Slider", href: "/docs/components/slider" }, + { + title: "Sonner", + href: "/docs/components/sonner", + status: "new" + }, { title: "Switch", href: "/docs/components/switch" }, + { + title: "Tabs", + href: "/docs/components/tabs" + }, + { + title: "Toggle", + href: "/docs/components/toggle" + }, + { + title: "Toggle Group", + href: "/docs/components/toggle-group", + status: "new" + }, { title: "Tooltip", href: "/docs/components/tooltip" diff --git a/apps/docs/src/registry/__index__.tsx b/apps/docs/src/registry/__index__.tsx index 423deab2..0e1b78ec 100644 --- a/apps/docs/src/registry/__index__.tsx +++ b/apps/docs/src/registry/__index__.tsx @@ -4,53 +4,47 @@ import { lazy } from "solid-js" export const Index: Record = { - utils: { + "utils": { name: "utils", description: "", type: "registry:lib", registryDependencies: undefined, component: lazy(() => import("~/registry/lib/utils.ts")), - files: [ - { - path: "registry/lib/utils.ts", - type: "registry:lib", - target: "" - } - ], + files: [{ + path: "registry/lib/utils.ts", + type: "registry:lib", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - accordion: { + "accordion": { name: "accordion", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/accordion.tsx")), - files: [ - { - path: "registry/ui/accordion.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/accordion.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - alert: { + "alert": { name: "alert", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/alert.tsx")), - files: [ - { - path: "registry/ui/alert.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/alert.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "alert-dialog": { name: "alert-dialog", @@ -58,15 +52,13 @@ export const Index: Record = { type: "registry:ui", registryDependencies: ["button"], component: lazy(() => import("~/registry/ui/alert-dialog.tsx")), - files: [ - { - path: "registry/ui/alert-dialog.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/alert-dialog.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "aspect-ratio": { name: "aspect-ratio", @@ -74,175 +66,181 @@ export const Index: Record = { type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/aspect-ratio.tsx")), - files: [ - { - path: "registry/ui/aspect-ratio.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/aspect-ratio.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - avatar: { + "avatar": { name: "avatar", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/avatar.tsx")), - files: [ - { - path: "registry/ui/avatar.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/avatar.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - badge: { + "badge": { name: "badge", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/badge.tsx")), - files: [ - { - path: "registry/ui/badge.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/badge.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - breadcrumb: { + "breadcrumb": { name: "breadcrumb", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/breadcrumb.tsx")), - files: [ - { - path: "registry/ui/breadcrumb.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/breadcrumb.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - button: { + "button": { name: "button", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/button.tsx")), - files: [ - { - path: "registry/ui/button.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/button.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - card: { + "card": { name: "card", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/card.tsx")), - files: [ - { - path: "registry/ui/card.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/card.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group": { name: "button-group", description: "", type: "registry:ui", - registryDependencies: ["button", "separator"], + registryDependencies: ["button","separator"], component: lazy(() => import("~/registry/ui/button-group.tsx")), - files: [ - { - path: "registry/ui/button-group.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/button-group.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - carousel: { + "carousel": { name: "carousel", description: "", type: "registry:ui", registryDependencies: ["button"], component: lazy(() => import("~/registry/ui/carousel.tsx")), - files: [ - { - path: "registry/ui/carousel.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/carousel.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - checkbox: { + "chart": { + name: "chart", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/chart.tsx")), + files: [{ + path: "registry/ui/chart.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "checkbox": { name: "checkbox", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/checkbox.tsx")), - files: [ - { - path: "registry/ui/checkbox.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/checkbox.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - collapsible: { + "collapsible": { name: "collapsible", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/collapsible.tsx")), - files: [ - { - path: "registry/ui/collapsible.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/collapsible.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - dialog: { - name: "dialog", + "combobox": { + name: "combobox", description: "", type: "registry:ui", registryDependencies: undefined, - component: lazy(() => import("~/registry/ui/dialog.tsx")), - files: [ - { - path: "registry/ui/dialog.tsx", - type: "registry:ui", - target: "" - } - ], + component: lazy(() => import("~/registry/ui/combobox.tsx")), + files: [{ + path: "registry/ui/combobox.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "command": { + name: "command", + description: "", + type: "registry:ui", + registryDependencies: ["dialog"], + component: lazy(() => import("~/registry/ui/command.tsx")), + files: [{ + path: "registry/ui/command.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "context-menu": { name: "context-menu", @@ -250,15 +248,41 @@ export const Index: Record = { type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/context-menu.tsx")), - files: [ - { - path: "registry/ui/context-menu.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/context-menu.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "dialog": { + name: "dialog", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/dialog.tsx")), + files: [{ + path: "registry/ui/dialog.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "direction": { + name: "direction", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/direction.tsx")), + files: [{ + path: "registry/ui/direction.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, }, "dropdown-menu": { name: "dropdown-menu", @@ -266,79 +290,237 @@ export const Index: Record = { type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/dropdown-menu.tsx")), - files: [ - { - path: "registry/ui/dropdown-menu.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/dropdown-menu.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "empty": { + name: "empty", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/empty.tsx")), + files: [{ + path: "registry/ui/empty.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - field: { + "field": { name: "field", description: "", type: "registry:ui", - registryDependencies: ["label", "separator"], + registryDependencies: ["label","separator"], component: lazy(() => import("~/registry/ui/field.tsx")), - files: [ - { - path: "registry/ui/field.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/field.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - input: { + "form": { + name: "form", + description: "", + type: "registry:ui", + registryDependencies: ["label"], + component: lazy(() => import("~/registry/ui/form.tsx")), + files: [{ + path: "registry/ui/form.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "hover-card": { + name: "hover-card", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/hover-card.tsx")), + files: [{ + path: "registry/ui/hover-card.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "input": { name: "input", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/input.tsx")), - files: [ - { - path: "registry/ui/input.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/input.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - label: { + "input-group": { + name: "input-group", + description: "", + type: "registry:ui", + registryDependencies: ["button","input","textarea"], + component: lazy(() => import("~/registry/ui/input-group.tsx")), + files: [{ + path: "registry/ui/input-group.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "input-otp": { + name: "input-otp", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/input-otp.tsx")), + files: [{ + path: "registry/ui/input-otp.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "item": { + name: "item", + description: "", + type: "registry:ui", + registryDependencies: ["separator"], + component: lazy(() => import("~/registry/ui/item.tsx")), + files: [{ + path: "registry/ui/item.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "kbd": { + name: "kbd", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/kbd.tsx")), + files: [{ + path: "registry/ui/kbd.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "label": { name: "label", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/label.tsx")), - files: [ - { - path: "registry/ui/label.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/label.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - "input-group": { - name: "input-group", + "menubar": { + name: "menubar", description: "", type: "registry:ui", - registryDependencies: ["button", "input", "textarea"], - component: lazy(() => import("~/registry/ui/input-group.tsx")), - files: [ - { - path: "registry/ui/input-group.tsx", - type: "registry:ui", - target: "" - } - ], + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/menubar.tsx")), + files: [{ + path: "registry/ui/menubar.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "navigation-menu": { + name: "navigation-menu", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/navigation-menu.tsx")), + files: [{ + path: "registry/ui/navigation-menu.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "native-select": { + name: "native-select", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/native-select.tsx")), + files: [{ + path: "registry/ui/native-select.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "pagination": { + name: "pagination", + description: "", + type: "registry:ui", + registryDependencies: ["button"], + component: lazy(() => import("~/registry/ui/pagination.tsx")), + files: [{ + path: "registry/ui/pagination.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "popover": { + name: "popover", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/popover.tsx")), + files: [{ + path: "registry/ui/popover.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "progress": { + name: "progress", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/progress.tsx")), + files: [{ + path: "registry/ui/progress.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, }, "radio-group": { name: "radio-group", @@ -346,63 +528,167 @@ export const Index: Record = { type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/radio-group.tsx")), - files: [ - { - path: "registry/ui/radio-group.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/radio-group.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - select: { + "resizable": { + name: "resizable", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/resizable.tsx")), + files: [{ + path: "registry/ui/resizable.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "scroll-area": { + name: "scroll-area", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/scroll-area.tsx")), + files: [{ + path: "registry/ui/scroll-area.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "select": { name: "select", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/select.tsx")), - files: [ - { - path: "registry/ui/select.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/select.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - slider: { + "slider": { name: "slider", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/slider.tsx")), - files: [ - { - path: "registry/ui/slider.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/slider.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "sonner": { + name: "sonner", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/sonner.tsx")), + files: [{ + path: "registry/ui/sonner.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - switch: { + "switch": { name: "switch", description: "", type: "registry:ui", registryDependencies: undefined, component: lazy(() => import("~/registry/ui/switch.tsx")), - files: [ - { - path: "registry/ui/switch.tsx", - type: "registry:ui", - target: "" - } - ], + files: [{ + path: "registry/ui/switch.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "tabs": { + name: "tabs", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/tabs.tsx")), + files: [{ + path: "registry/ui/tabs.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "textarea": { + name: "textarea", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/textarea.tsx")), + files: [{ + path: "registry/ui/textarea.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "toggle": { + name: "toggle", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/toggle.tsx")), + files: [{ + path: "registry/ui/toggle.tsx", + type: "registry:ui", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "toggle-group": { + name: "toggle-group", + description: "", + type: "registry:ui", + registryDependencies: ["toggle"], + component: lazy(() => import("~/registry/ui/toggle-group.tsx")), + files: [{ + path: "registry/ui/toggle-group.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "tooltip": { + name: "tooltip", + description: "", + type: "registry:ui", + registryDependencies: undefined, + component: lazy(() => import("~/registry/ui/tooltip.tsx")), + files: [{ + path: "registry/ui/tooltip.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, }, "use-mobile": { name: "use-mobile", @@ -410,15 +696,13 @@ export const Index: Record = { type: "registry:hook", registryDependencies: undefined, component: lazy(() => import("~/registry/hooks/use-mobile.ts")), - files: [ - { - path: "registry/hooks/use-mobile.ts", - type: "registry:hook", - target: "" - } - ], + files: [{ + path: "registry/hooks/use-mobile.ts", + type: "registry:hook", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "accordion-demo": { name: "accordion-demo", @@ -426,15 +710,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["accordion"], component: lazy(() => import("~/registry/examples/accordion-demo.tsx")), - files: [ - { - path: "registry/examples/accordion-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/accordion-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "alert-demo": { name: "alert-demo", @@ -442,31 +724,27 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["alert"], component: lazy(() => import("~/registry/examples/alert-demo.tsx")), - files: [ - { - path: "registry/examples/alert-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/alert-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "alert-dialog-demo": { name: "alert-dialog-demo", description: "", type: "registry:example", - registryDependencies: ["alert-dialog", "button"], + registryDependencies: ["alert-dialog","button"], component: lazy(() => import("~/registry/examples/alert-dialog-demo.tsx")), - files: [ - { - path: "registry/examples/alert-dialog-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/alert-dialog-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "aspect-ratio-demo": { name: "aspect-ratio-demo", @@ -474,15 +752,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["aspect-ratio"], component: lazy(() => import("~/registry/examples/aspect-ratio-demo.tsx")), - files: [ - { - path: "registry/examples/aspect-ratio-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/aspect-ratio-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "avatar-demo": { name: "avatar-demo", @@ -490,15 +766,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["avatar"], component: lazy(() => import("~/registry/examples/avatar-demo.tsx")), - files: [ - { - path: "registry/examples/avatar-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/avatar-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "badge-demo": { name: "badge-demo", @@ -506,63 +780,55 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["badge"], component: lazy(() => import("~/registry/examples/badge-demo.tsx")), - files: [ - { - path: "registry/examples/badge-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/badge-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - "breadcrumb-demo": { - name: "breadcrumb-demo", + "breadcrumb-collapsed": { + name: "breadcrumb-collapsed", description: "", type: "registry:example", registryDependencies: ["breadcrumb"], - component: lazy(() => import("~/registry/examples/breadcrumb-demo.tsx")), - files: [ - { - path: "registry/examples/breadcrumb-demo.tsx", - type: "registry:example", - target: "" - } - ], + component: lazy(() => import("~/registry/examples/breadcrumb-collapsed.tsx")), + files: [{ + path: "registry/examples/breadcrumb-collapsed.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - "breadcrumb-collapsed": { - name: "breadcrumb-collapsed", + "breadcrumb-demo": { + name: "breadcrumb-demo", description: "", type: "registry:example", registryDependencies: ["breadcrumb"], - component: lazy(() => import("~/registry/examples/breadcrumb-collapsed.tsx")), - files: [ - { - path: "registry/examples/breadcrumb-collapsed.tsx", - type: "registry:example", - target: "" - } - ], + component: lazy(() => import("~/registry/examples/breadcrumb-demo.tsx")), + files: [{ + path: "registry/examples/breadcrumb-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "breadcrumb-dropdown": { name: "breadcrumb-dropdown", description: "", type: "registry:example", - registryDependencies: ["breadcrumb", "dropdown-menu", "button"], + registryDependencies: ["breadcrumb","dropdown-menu","button"], component: lazy(() => import("~/registry/examples/breadcrumb-dropdown.tsx")), - files: [ - { - path: "registry/examples/breadcrumb-dropdown.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/breadcrumb-dropdown.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "breadcrumb-link": { name: "breadcrumb-link", @@ -570,15 +836,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["breadcrumb"], component: lazy(() => import("~/registry/examples/breadcrumb-link.tsx")), - files: [ - { - path: "registry/examples/breadcrumb-link.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/breadcrumb-link.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "breadcrumb-separator": { name: "breadcrumb-separator", @@ -586,111 +850,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["breadcrumb"], component: lazy(() => import("~/registry/examples/breadcrumb-separator.tsx")), - files: [ - { - path: "registry/examples/breadcrumb-separator.tsx", - type: "registry:example", - target: "" - } - ], - categories: undefined, - meta: undefined - }, - "carousel-demo": { - name: "carousel-demo", - description: "", - type: "registry:example", - registryDependencies: ["carousel", "card"], - component: lazy(() => import("~/registry/examples/carousel-demo.tsx")), - files: [ - { - path: "registry/examples/carousel-demo.tsx", - type: "registry:example", - target: "" - } - ], - categories: undefined, - meta: undefined - }, - "carousel-size": { - name: "carousel-size", - description: "", - type: "registry:example", - registryDependencies: ["carousel", "card"], - component: lazy(() => import("~/registry/examples/carousel-size.tsx")), - files: [ - { - path: "registry/examples/carousel-size.tsx", - type: "registry:example", - target: "" - } - ], - categories: undefined, - meta: undefined - }, - "carousel-spacing": { - name: "carousel-spacing", - description: "", - type: "registry:example", - registryDependencies: ["carousel", "card"], - component: lazy(() => import("~/registry/examples/carousel-spacing.tsx")), - files: [ - { - path: "registry/examples/carousel-spacing.tsx", - type: "registry:example", - target: "" - } - ], - categories: undefined, - meta: undefined - }, - "carousel-orientation": { - name: "carousel-orientation", - description: "", - type: "registry:example", - registryDependencies: ["carousel", "card"], - component: lazy(() => import("~/registry/examples/carousel-orientation.tsx")), - files: [ - { - path: "registry/examples/carousel-orientation.tsx", - type: "registry:example", - target: "" - } - ], - categories: undefined, - meta: undefined - }, - "carousel-api": { - name: "carousel-api", - description: "", - type: "registry:example", - registryDependencies: ["carousel", "card"], - component: lazy(() => import("~/registry/examples/carousel-api.tsx")), - files: [ - { - path: "registry/examples/carousel-api.tsx", - type: "registry:example", - target: "" - } - ], - categories: undefined, - meta: undefined - }, - "carousel-plugin": { - name: "carousel-plugin", - description: "", - type: "registry:example", - registryDependencies: ["carousel", "card"], - component: lazy(() => import("~/registry/examples/carousel-plugin.tsx")), - files: [ - { - path: "registry/examples/carousel-plugin.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/breadcrumb-separator.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-default": { name: "button-default", @@ -698,15 +864,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-default.tsx")), - files: [ - { - path: "registry/examples/button-default.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-default.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-demo": { name: "button-demo", @@ -714,15 +878,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-demo.tsx")), - files: [ - { - path: "registry/examples/button-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-destructive": { name: "button-destructive", @@ -730,15 +892,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-destructive.tsx")), - files: [ - { - path: "registry/examples/button-destructive.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-destructive.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-ghost": { name: "button-ghost", @@ -746,175 +906,153 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-ghost.tsx")), - files: [ - { - path: "registry/examples/button-ghost.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-ghost.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-demo": { name: "button-group-demo", description: "", type: "registry:example", - registryDependencies: ["button", "button-group", "dropdown-menu"], + registryDependencies: ["button","button-group","dropdown-menu"], component: lazy(() => import("~/registry/examples/button-group-demo.tsx")), - files: [ - { - path: "registry/examples/button-group-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-dropdown-menu": { name: "button-group-dropdown-menu", description: "", type: "registry:example", - registryDependencies: ["button", "button-group", "dropdown-menu"], + registryDependencies: ["button","button-group","dropdown-menu"], component: lazy(() => import("~/registry/examples/button-group-dropdown-menu.tsx")), - files: [ - { - path: "registry/examples/button-group-dropdown-menu.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-dropdown-menu.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - "button-group-input-group": { - name: "button-group-input-group", + "button-group-input": { + name: "button-group-input", description: "", type: "registry:example", - registryDependencies: ["button", "button-group", "input-group"], - component: lazy(() => import("~/registry/examples/button-group-input-group.tsx")), - files: [ - { - path: "registry/examples/button-group-input-group.tsx", - type: "registry:example", - target: "" - } - ], + registryDependencies: ["button","button-group","input"], + component: lazy(() => import("~/registry/examples/button-group-input.tsx")), + files: [{ + path: "registry/examples/button-group-input.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - "button-group-input": { - name: "button-group-input", + "button-group-input-group": { + name: "button-group-input-group", description: "", type: "registry:example", - registryDependencies: ["button", "button-group", "input"], - component: lazy(() => import("~/registry/examples/button-group-input.tsx")), - files: [ - { - path: "registry/examples/button-group-input.tsx", - type: "registry:example", - target: "" - } - ], + registryDependencies: ["button","button-group","input-group"], + component: lazy(() => import("~/registry/examples/button-group-input-group.tsx")), + files: [{ + path: "registry/examples/button-group-input-group.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-nested": { name: "button-group-nested", description: "", type: "registry:example", - registryDependencies: ["button", "button-group"], + registryDependencies: ["button","button-group"], component: lazy(() => import("~/registry/examples/button-group-nested.tsx")), - files: [ - { - path: "registry/examples/button-group-nested.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-nested.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-orientation": { name: "button-group-orientation", description: "", type: "registry:example", - registryDependencies: ["button", "button-group"], + registryDependencies: ["button","button-group"], component: lazy(() => import("~/registry/examples/button-group-orientation.tsx")), - files: [ - { - path: "registry/examples/button-group-orientation.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-orientation.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-select": { name: "button-group-select", description: "", type: "registry:example", - registryDependencies: ["button", "button-group", "select"], + registryDependencies: ["button","button-group","select"], component: lazy(() => import("~/registry/examples/button-group-select.tsx")), - files: [ - { - path: "registry/examples/button-group-select.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-select.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-separator": { name: "button-group-separator", description: "", type: "registry:example", - registryDependencies: ["button", "button-group"], + registryDependencies: ["button","button-group"], component: lazy(() => import("~/registry/examples/button-group-separator.tsx")), - files: [ - { - path: "registry/examples/button-group-separator.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-separator.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-size": { name: "button-group-size", description: "", type: "registry:example", - registryDependencies: ["button", "button-group"], + registryDependencies: ["button","button-group"], component: lazy(() => import("~/registry/examples/button-group-size.tsx")), - files: [ - { - path: "registry/examples/button-group-size.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-size.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-group-split": { name: "button-group-split", description: "", type: "registry:example", - registryDependencies: ["button", "button-group"], + registryDependencies: ["button","button-group"], component: lazy(() => import("~/registry/examples/button-group-split.tsx")), - files: [ - { - path: "registry/examples/button-group-split.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-group-split.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-icon": { name: "button-icon", @@ -922,15 +1060,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-icon.tsx")), - files: [ - { - path: "registry/examples/button-icon.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-icon.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-link": { name: "button-link", @@ -938,31 +1074,27 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-link.tsx")), - files: [ - { - path: "registry/examples/button-link.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-link.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-loading": { name: "button-loading", description: "", type: "registry:example", - registryDependencies: ["button", "spinner"], + registryDependencies: ["button","spinner"], component: lazy(() => import("~/registry/examples/button-loading.tsx")), - files: [ - { - path: "registry/examples/button-loading.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-loading.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-outline": { name: "button-outline", @@ -970,15 +1102,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-outline.tsx")), - files: [ - { - path: "registry/examples/button-outline.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-outline.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-rounded": { name: "button-rounded", @@ -986,15 +1116,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-rounded.tsx")), - files: [ - { - path: "registry/examples/button-rounded.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-rounded.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-secondary": { name: "button-secondary", @@ -1002,15 +1130,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-secondary.tsx")), - files: [ - { - path: "registry/examples/button-secondary.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-secondary.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-sizes": { name: "button-sizes", @@ -1018,15 +1144,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-sizes.tsx")), - files: [ - { - path: "registry/examples/button-sizes.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-sizes.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "button-with-icon": { name: "button-with-icon", @@ -1034,47 +1158,125 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["button"], component: lazy(() => import("~/registry/examples/button-with-icon.tsx")), - files: [ - { - path: "registry/examples/button-with-icon.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/button-with-icon.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "card-demo": { name: "card-demo", description: "", type: "registry:example", - registryDependencies: ["card", "button", "input", "label"], + registryDependencies: ["card","button","input","label"], component: lazy(() => import("~/registry/examples/card-demo.tsx")), - files: [ - { - path: "registry/examples/card-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/card-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - "dropdown-menu-checkboxes": { - name: "dropdown-menu-checkboxes", + "carousel-api": { + name: "carousel-api", description: "", type: "registry:example", - registryDependencies: ["dropdown-menu"], - component: lazy(() => import("~/registry/examples/dropdown-menu-checkboxes.tsx")), - files: [ - { - path: "registry/examples/dropdown-menu-checkboxes.tsx", - type: "registry:example", - target: "" - } - ], + registryDependencies: ["carousel","card"], + component: lazy(() => import("~/registry/examples/carousel-api.tsx")), + files: [{ + path: "registry/examples/carousel-api.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "carousel-demo": { + name: "carousel-demo", + description: "", + type: "registry:example", + registryDependencies: ["carousel","card"], + component: lazy(() => import("~/registry/examples/carousel-demo.tsx")), + files: [{ + path: "registry/examples/carousel-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "carousel-orientation": { + name: "carousel-orientation", + description: "", + type: "registry:example", + registryDependencies: ["carousel","card"], + component: lazy(() => import("~/registry/examples/carousel-orientation.tsx")), + files: [{ + path: "registry/examples/carousel-orientation.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "carousel-plugin": { + name: "carousel-plugin", + description: "", + type: "registry:example", + registryDependencies: ["carousel","card"], + component: lazy(() => import("~/registry/examples/carousel-plugin.tsx")), + files: [{ + path: "registry/examples/carousel-plugin.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "carousel-size": { + name: "carousel-size", + description: "", + type: "registry:example", + registryDependencies: ["carousel","card"], + component: lazy(() => import("~/registry/examples/carousel-size.tsx")), + files: [{ + path: "registry/examples/carousel-size.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "carousel-spacing": { + name: "carousel-spacing", + description: "", + type: "registry:example", + registryDependencies: ["carousel","card"], + component: lazy(() => import("~/registry/examples/carousel-spacing.tsx")), + files: [{ + path: "registry/examples/carousel-spacing.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "chart-demo": { + name: "chart-demo", + description: "", + type: "registry:example", + registryDependencies: ["chart","card"], + component: lazy(() => import("~/registry/examples/chart-demo.tsx")), + files: [{ + path: "registry/examples/chart-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "checkbox-demo": { name: "checkbox-demo", @@ -1082,63 +1284,111 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["checkbox"], component: lazy(() => import("~/registry/examples/checkbox-demo.tsx")), - files: [ - { - path: "registry/examples/checkbox-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/checkbox-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "collapsible-demo": { name: "collapsible-demo", description: "", type: "registry:example", - registryDependencies: ["collapsible", "button"], + registryDependencies: ["collapsible","button"], component: lazy(() => import("~/registry/examples/collapsible-demo.tsx")), - files: [ - { - path: "registry/examples/collapsible-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/collapsible-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, - "dialog-demo": { - name: "dialog-demo", + "combobox-demo": { + name: "combobox-demo", description: "", type: "registry:example", - registryDependencies: ["dialog", "button", "field", "input"], - component: lazy(() => import("~/registry/examples/dialog-demo.tsx")), - files: [ - { - path: "registry/examples/dialog-demo.tsx", - type: "registry:example", - target: "" - } - ], + registryDependencies: ["combobox"], + component: lazy(() => import("~/registry/examples/combobox-demo.tsx")), + files: [{ + path: "registry/examples/combobox-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "command-demo": { + name: "command-demo", + description: "", + type: "registry:example", + registryDependencies: ["command"], + component: lazy(() => import("~/registry/examples/command-demo.tsx")), + files: [{ + path: "registry/examples/command-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "command-dialog": { + name: "command-dialog", + description: "", + type: "registry:example", + registryDependencies: ["command","button"], + component: lazy(() => import("~/registry/examples/command-dialog.tsx")), + files: [{ + path: "registry/examples/command-dialog.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "dialog-close-button": { name: "dialog-close-button", description: "", type: "registry:example", - registryDependencies: ["dialog", "button"], + registryDependencies: ["dialog","button"], component: lazy(() => import("~/registry/examples/dialog-close-button.tsx")), - files: [ - { - path: "registry/examples/dialog-close-button.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/dialog-close-button.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "dialog-demo": { + name: "dialog-demo", + description: "", + type: "registry:example", + registryDependencies: ["dialog","button","field","input"], + component: lazy(() => import("~/registry/examples/dialog-demo.tsx")), + files: [{ + path: "registry/examples/dialog-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "direction-demo": { + name: "direction-demo", + description: "", + type: "registry:example", + registryDependencies: ["direction"], + component: lazy(() => import("~/registry/examples/direction-demo.tsx")), + files: [{ + path: "registry/examples/direction-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "context-menu-checkboxes": { name: "context-menu-checkboxes", @@ -1146,15 +1396,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["context-menu"], component: lazy(() => import("~/registry/examples/context-menu-checkboxes.tsx")), - files: [ - { - path: "registry/examples/context-menu-checkboxes.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/context-menu-checkboxes.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "context-menu-demo": { name: "context-menu-demo", @@ -1162,15 +1410,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["context-menu"], component: lazy(() => import("~/registry/examples/context-menu-demo.tsx")), - files: [ - { - path: "registry/examples/context-menu-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/context-menu-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "context-menu-radio-group": { name: "context-menu-radio-group", @@ -1178,15 +1424,27 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["context-menu"], component: lazy(() => import("~/registry/examples/context-menu-radio-group.tsx")), - files: [ - { - path: "registry/examples/context-menu-radio-group.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/context-menu-radio-group.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "dropdown-menu-checkboxes": { + name: "dropdown-menu-checkboxes", + description: "", + type: "registry:example", + registryDependencies: ["dropdown-menu"], + component: lazy(() => import("~/registry/examples/dropdown-menu-checkboxes.tsx")), + files: [{ + path: "registry/examples/dropdown-menu-checkboxes.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "dropdown-menu-demo": { name: "dropdown-menu-demo", @@ -1194,15 +1452,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["dropdown-menu"], component: lazy(() => import("~/registry/examples/dropdown-menu-demo.tsx")), - files: [ - { - path: "registry/examples/dropdown-menu-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/dropdown-menu-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "dropdown-menu-dialog": { name: "dropdown-menu-dialog", @@ -1210,15 +1466,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["dropdown-menu"], component: lazy(() => import("~/registry/examples/dropdown-menu-dialog.tsx")), - files: [ - { - path: "registry/examples/dropdown-menu-dialog.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/dropdown-menu-dialog.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "dropdown-menu-radio-group": { name: "dropdown-menu-radio-group", @@ -1226,47 +1480,55 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["dropdown-menu"], component: lazy(() => import("~/registry/examples/dropdown-menu-radio-group.tsx")), - files: [ - { - path: "registry/examples/dropdown-menu-radio-group.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/dropdown-menu-radio-group.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "empty-demo": { + name: "empty-demo", + description: "", + type: "registry:example", + registryDependencies: ["empty","button"], + component: lazy(() => import("~/registry/examples/empty-demo.tsx")), + files: [{ + path: "registry/examples/empty-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-checkbox": { name: "field-checkbox", description: "", type: "registry:example", - registryDependencies: ["field", "checkbox"], + registryDependencies: ["field","checkbox"], component: lazy(() => import("~/registry/examples/field-checkbox.tsx")), - files: [ - { - path: "registry/examples/field-checkbox.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-checkbox.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-choice-card": { name: "field-choice-card", description: "", type: "registry:example", - registryDependencies: ["field", "radio-group"], + registryDependencies: ["field","radio-group"], component: lazy(() => import("~/registry/examples/field-choice-card.tsx")), - files: [ - { - path: "registry/examples/field-choice-card.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-choice-card.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-demo": { name: "field-demo", @@ -1274,159 +1536,167 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["field"], component: lazy(() => import("~/registry/examples/field-demo.tsx")), - files: [ - { - path: "registry/examples/field-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-fieldset": { name: "field-fieldset", description: "", type: "registry:example", - registryDependencies: ["field", "input"], + registryDependencies: ["field","input"], component: lazy(() => import("~/registry/examples/field-fieldset.tsx")), - files: [ - { - path: "registry/examples/field-fieldset.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-fieldset.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-group-example": { name: "field-group-example", description: "", type: "registry:example", - registryDependencies: ["field", "checkbox"], + registryDependencies: ["field","checkbox"], component: lazy(() => import("~/registry/examples/field-group-example.tsx")), - files: [ - { - path: "registry/examples/field-group-example.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-group-example.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-input": { name: "field-input", description: "", type: "registry:example", - registryDependencies: ["field", "input"], + registryDependencies: ["field","input"], component: lazy(() => import("~/registry/examples/field-input.tsx")), - files: [ - { - path: "registry/examples/field-input.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-input.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-radio": { name: "field-radio", description: "", type: "registry:example", - registryDependencies: ["field", "radio-group"], + registryDependencies: ["field","radio-group"], component: lazy(() => import("~/registry/examples/field-radio.tsx")), - files: [ - { - path: "registry/examples/field-radio.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-radio.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-responsive": { name: "field-responsive", description: "", type: "registry:example", - registryDependencies: ["field", "button", "input", "textarea"], + registryDependencies: ["field","button","input","textarea"], component: lazy(() => import("~/registry/examples/field-responsive.tsx")), - files: [ - { - path: "registry/examples/field-responsive.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-responsive.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-select": { name: "field-select", description: "", type: "registry:example", - registryDependencies: ["field", "select"], + registryDependencies: ["field","select"], component: lazy(() => import("~/registry/examples/field-select.tsx")), - files: [ - { - path: "registry/examples/field-select.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-select.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-slider": { name: "field-slider", description: "", type: "registry:example", - registryDependencies: ["field", "slider"], + registryDependencies: ["field","slider"], component: lazy(() => import("~/registry/examples/field-slider.tsx")), - files: [ - { - path: "registry/examples/field-slider.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-slider.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-switch": { name: "field-switch", description: "", type: "registry:example", - registryDependencies: ["field", "switch"], + registryDependencies: ["field","switch"], component: lazy(() => import("~/registry/examples/field-switch.tsx")), - files: [ - { - path: "registry/examples/field-switch.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-switch.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "field-textarea": { name: "field-textarea", description: "", type: "registry:example", - registryDependencies: ["field", "textarea"], + registryDependencies: ["field","textarea"], component: lazy(() => import("~/registry/examples/field-textarea.tsx")), - files: [ - { - path: "registry/examples/field-textarea.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/field-textarea.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "form-demo": { + name: "form-demo", + description: "", + type: "registry:example", + registryDependencies: ["form","button","input","textarea"], + component: lazy(() => import("~/registry/examples/form-demo.tsx")), + files: [{ + path: "registry/examples/form-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "hover-card-demo": { + name: "hover-card-demo", + description: "", + type: "registry:example", + registryDependencies: ["hover-card","avatar","button"], + component: lazy(() => import("~/registry/examples/hover-card-demo.tsx")), + files: [{ + path: "registry/examples/hover-card-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "input-group-demo": { name: "input-group-demo", @@ -1434,47 +1704,195 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["input-group"], component: lazy(() => import("~/registry/examples/input-group-demo.tsx")), - files: [ - { - path: "registry/examples/input-group-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/input-group-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "input-otp-demo": { + name: "input-otp-demo", + description: "", + type: "registry:example", + registryDependencies: ["input-otp"], + component: lazy(() => import("~/registry/examples/input-otp-demo.tsx")), + files: [{ + path: "registry/examples/input-otp-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "item-demo": { + name: "item-demo", + description: "", + type: "registry:example", + registryDependencies: ["item","button"], + component: lazy(() => import("~/registry/examples/item-demo.tsx")), + files: [{ + path: "registry/examples/item-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "kbd-demo": { + name: "kbd-demo", + description: "", + type: "registry:example", + registryDependencies: ["kbd"], + component: lazy(() => import("~/registry/examples/kbd-demo.tsx")), + files: [{ + path: "registry/examples/kbd-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "label-demo": { name: "label-demo", description: "", type: "registry:example", - registryDependencies: ["label", "checkbox"], + registryDependencies: ["label","checkbox"], component: lazy(() => import("~/registry/examples/label-demo.tsx")), - files: [ - { - path: "registry/examples/label-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/label-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "menubar-demo": { + name: "menubar-demo", + description: "", + type: "registry:example", + registryDependencies: ["menubar"], + component: lazy(() => import("~/registry/examples/menubar-demo.tsx")), + files: [{ + path: "registry/examples/menubar-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "navigation-menu-demo": { + name: "navigation-menu-demo", + description: "", + type: "registry:example", + registryDependencies: ["navigation-menu"], + component: lazy(() => import("~/registry/examples/navigation-menu-demo.tsx")), + files: [{ + path: "registry/examples/navigation-menu-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "native-select-demo": { + name: "native-select-demo", + description: "", + type: "registry:example", + registryDependencies: ["native-select"], + component: lazy(() => import("~/registry/examples/native-select-demo.tsx")), + files: [{ + path: "registry/examples/native-select-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "pagination-demo": { + name: "pagination-demo", + description: "", + type: "registry:example", + registryDependencies: ["pagination"], + component: lazy(() => import("~/registry/examples/pagination-demo.tsx")), + files: [{ + path: "registry/examples/pagination-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "popover-demo": { + name: "popover-demo", + description: "", + type: "registry:example", + registryDependencies: ["popover","button","input","label"], + component: lazy(() => import("~/registry/examples/popover-demo.tsx")), + files: [{ + path: "registry/examples/popover-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "progress-demo": { + name: "progress-demo", + description: "", + type: "registry:example", + registryDependencies: ["progress"], + component: lazy(() => import("~/registry/examples/progress-demo.tsx")), + files: [{ + path: "registry/examples/progress-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "radio-group-demo": { name: "radio-group-demo", description: "", type: "registry:example", - registryDependencies: ["radio-group", "label"], + registryDependencies: ["radio-group","label"], component: lazy(() => import("~/registry/examples/radio-group-demo.tsx")), - files: [ - { - path: "registry/examples/radio-group-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/radio-group-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "resizable-demo": { + name: "resizable-demo", + description: "", + type: "registry:example", + registryDependencies: ["resizable"], + component: lazy(() => import("~/registry/examples/resizable-demo.tsx")), + files: [{ + path: "registry/examples/resizable-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "scroll-area-demo": { + name: "scroll-area-demo", + description: "", + type: "registry:example", + registryDependencies: ["scroll-area","separator"], + component: lazy(() => import("~/registry/examples/scroll-area-demo.tsx")), + files: [{ + path: "registry/examples/scroll-area-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "select-demo": { name: "select-demo", @@ -1482,15 +1900,13 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["select"], component: lazy(() => import("~/registry/examples/select-demo.tsx")), - files: [ - { - path: "registry/examples/select-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/select-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "slider-demo": { name: "slider-demo", @@ -1498,31 +1914,69 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["slider"], component: lazy(() => import("~/registry/examples/slider-demo.tsx")), - files: [ - { - path: "registry/examples/slider-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/slider-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "sonner-demo": { + name: "sonner-demo", + description: "", + type: "registry:example", + registryDependencies: ["sonner","button"], + component: lazy(() => import("~/registry/examples/sonner-demo.tsx")), + files: [{ + path: "registry/examples/sonner-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, }, "switch-demo": { name: "switch-demo", description: "", type: "registry:example", - registryDependencies: ["switch", "label"], + registryDependencies: ["switch","label"], component: lazy(() => import("~/registry/examples/switch-demo.tsx")), - files: [ - { - path: "registry/examples/switch-demo.tsx", - type: "registry:example", - target: "" - } - ], + files: [{ + path: "registry/examples/switch-demo.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "toggle-demo": { + name: "toggle-demo", + description: "", + type: "registry:example", + registryDependencies: ["toggle"], + component: lazy(() => import("~/registry/examples/toggle-demo.tsx")), + files: [{ + path: "registry/examples/toggle-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "toggle-group-demo": { + name: "toggle-group-demo", + description: "", + type: "registry:example", + registryDependencies: ["toggle-group"], + component: lazy(() => import("~/registry/examples/toggle-group-demo.tsx")), + files: [{ + path: "registry/examples/toggle-group-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "tooltip-demo": { name: "tooltip-demo", @@ -1530,14 +1984,12 @@ export const Index: Record = { type: "registry:example", registryDependencies: ["tooltip"], component: lazy(() => import("~/registry/examples/tooltip-demo.tsx")), - files: [ - { - path: "registry/examples/tooltip-demo.tsx", - type: "registry:example", - target: "" - } - ], - categories: undefined, - meta: undefined - } + files: [{ + path: "registry/examples/tooltip-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, } diff --git a/apps/docs/src/registry/examples/_registry.ts b/apps/docs/src/registry/examples/_registry.ts index e2ce346e..0d50b311 100644 --- a/apps/docs/src/registry/examples/_registry.ts +++ b/apps/docs/src/registry/examples/_registry.ts @@ -442,6 +442,18 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "chart-demo", + type: "registry:example", + dependencies: ["chart.js"], + registryDependencies: ["chart", "card"], + files: [ + { + path: "examples/chart-demo.tsx", + type: "registry:example" + } + ] + }, { name: "checkbox-demo", type: "registry:example", @@ -464,6 +476,41 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "combobox-demo", + type: "registry:example", + registryDependencies: ["combobox"], + files: [ + { + path: "examples/combobox-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "command-demo", + type: "registry:example", + dependencies: ["lucide-solid"], + registryDependencies: ["command"], + files: [ + { + path: "examples/command-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "command-dialog", + type: "registry:example", + dependencies: ["lucide-solid"], + registryDependencies: ["command", "button"], + files: [ + { + path: "examples/command-dialog.tsx", + type: "registry:example" + } + ] + }, { name: "dialog-close-button", type: "registry:example", @@ -486,6 +533,17 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "direction-demo", + type: "registry:example", + registryDependencies: ["direction"], + files: [ + { + path: "examples/direction-demo.tsx", + type: "registry:example" + } + ] + }, { name: "context-menu-checkboxes", type: "registry:example", @@ -563,6 +621,18 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "empty-demo", + type: "registry:example", + registryDependencies: ["empty", "button"], + dependencies: ["lucide-solid"], + files: [ + { + path: "examples/empty-demo.tsx", + type: "registry:example" + } + ] + }, { name: "field-checkbox", type: "registry:example", @@ -695,6 +765,30 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "form-demo", + type: "registry:example", + dependencies: ["@modular-forms/solid"], + registryDependencies: ["form", "button", "input", "textarea"], + files: [ + { + path: "examples/form-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "hover-card-demo", + type: "registry:example", + dependencies: ["lucide-solid"], + registryDependencies: ["hover-card", "avatar", "button"], + files: [ + { + path: "examples/hover-card-demo.tsx", + type: "registry:example" + } + ] + }, { name: "input-group-demo", type: "registry:example", @@ -706,6 +800,39 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "input-otp-demo", + type: "registry:example", + registryDependencies: ["input-otp"], + files: [ + { + path: "examples/input-otp-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "item-demo", + type: "registry:example", + registryDependencies: ["item", "button"], + files: [ + { + path: "examples/item-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "kbd-demo", + type: "registry:example", + registryDependencies: ["kbd"], + files: [ + { + path: "examples/kbd-demo.tsx", + type: "registry:example" + } + ] + }, { name: "label-demo", type: "registry:example", @@ -717,6 +844,72 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "menubar-demo", + type: "registry:example", + registryDependencies: ["menubar"], + files: [ + { + path: "examples/menubar-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "navigation-menu-demo", + type: "registry:example", + registryDependencies: ["navigation-menu"], + files: [ + { + path: "examples/navigation-menu-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "native-select-demo", + type: "registry:example", + registryDependencies: ["native-select"], + files: [ + { + path: "examples/native-select-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "pagination-demo", + type: "registry:example", + registryDependencies: ["pagination"], + files: [ + { + path: "examples/pagination-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "popover-demo", + type: "registry:example", + registryDependencies: ["popover", "button", "input", "label"], + files: [ + { + path: "examples/popover-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "progress-demo", + type: "registry:example", + registryDependencies: ["progress"], + files: [ + { + path: "examples/progress-demo.tsx", + type: "registry:example" + } + ] + }, { name: "radio-group-demo", type: "registry:example", @@ -728,6 +921,28 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "resizable-demo", + type: "registry:example", + registryDependencies: ["resizable"], + files: [ + { + path: "examples/resizable-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "scroll-area-demo", + type: "registry:example", + registryDependencies: ["scroll-area", "separator"], + files: [ + { + path: "examples/scroll-area-demo.tsx", + type: "registry:example" + } + ] + }, { name: "select-demo", type: "registry:example", @@ -750,6 +965,17 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "sonner-demo", + type: "registry:example", + registryDependencies: ["sonner", "button"], + files: [ + { + path: "examples/sonner-demo.tsx", + type: "registry:example" + } + ] + }, { name: "switch-demo", type: "registry:example", @@ -761,6 +987,28 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "toggle-demo", + type: "registry:example", + registryDependencies: ["toggle"], + files: [ + { + path: "examples/toggle-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "toggle-group-demo", + type: "registry:example", + registryDependencies: ["toggle-group"], + files: [ + { + path: "examples/toggle-group-demo.tsx", + type: "registry:example" + } + ] + }, { name: "tooltip-demo", type: "registry:example", diff --git a/apps/docs/src/registry/examples/chart-demo.tsx b/apps/docs/src/registry/examples/chart-demo.tsx new file mode 100644 index 00000000..b268d912 --- /dev/null +++ b/apps/docs/src/registry/examples/chart-demo.tsx @@ -0,0 +1,134 @@ +import { + BarChart, + ChartContainer, + DoughnutChart, + LineChart, + type ChartConfig +} from "~/registry/ui/chart" +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/registry/ui/card" + +const lineConfig: ChartConfig = { + desktop: { label: "Desktop", color: "hsl(var(--primary))" }, + mobile: { label: "Mobile", color: "hsl(var(--muted-foreground))" } +} + +const barConfig: ChartConfig = { + revenue: { label: "Revenue", color: "hsl(var(--primary))" }, + expenses: { label: "Expenses", color: "hsl(var(--muted-foreground))" } +} + +const doughnutConfig: ChartConfig = { + chrome: { label: "Chrome", color: "hsl(221 83% 53%)" }, + safari: { label: "Safari", color: "hsl(262 83% 58%)" }, + firefox: { label: "Firefox", color: "hsl(142 71% 45%)" }, + edge: { label: "Edge", color: "hsl(25 95% 53%)" }, + other: { label: "Other", color: "hsl(0 84% 60%)" } +} + +const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] + +export default function ChartDemo() { + return ( +
+ + + Line Chart + Visitors over time + + + + + + + + + + + Bar Chart + Revenue vs Expenses + + + + + + + + + + + Doughnut Chart + Browser market share + + + + + + + +
+ ) +} diff --git a/apps/docs/src/registry/examples/combobox-demo.tsx b/apps/docs/src/registry/examples/combobox-demo.tsx new file mode 100644 index 00000000..4b375650 --- /dev/null +++ b/apps/docs/src/registry/examples/combobox-demo.tsx @@ -0,0 +1,58 @@ +import { createSignal } from "solid-js" + +import { + Combobox, + ComboboxContent, + ComboboxControl, + ComboboxInput, + ComboboxItem, + ComboboxTrigger +} from "~/registry/ui/combobox" + +const frameworks = [ + { + value: "solidjs", + label: "SolidJS" + }, + { + value: "react", + label: "React" + }, + { + value: "vue", + label: "Vue" + }, + { + value: "svelte", + label: "Svelte" + }, + { + value: "angular", + label: "Angular" + } +] + +export default function ComboboxDemo() { + const [value, setValue] = createSignal("") + + return ( + ( + {props.item.rawValue.label} + )} + > + + + + + + + ) +} diff --git a/apps/docs/src/registry/examples/command-demo.tsx b/apps/docs/src/registry/examples/command-demo.tsx new file mode 100644 index 00000000..89d7d8fe --- /dev/null +++ b/apps/docs/src/registry/examples/command-demo.tsx @@ -0,0 +1,62 @@ +import { + Calculator, + Calendar, + CreditCard, + Settings, + Smile, + User +} from "lucide-solid" + +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut +} from "~/registry/ui/command" + +export default function CommandDemo() { + return ( + + + + No results found. + + + + Calendar + + + + Search Emoji + + + + Calculator + + + + + + + Profile + ⌘P + + + + Billing + ⌘B + + + + Settings + ⌘S + + + + + ) +} diff --git a/apps/docs/src/registry/examples/command-dialog.tsx b/apps/docs/src/registry/examples/command-dialog.tsx new file mode 100644 index 00000000..9ed908f6 --- /dev/null +++ b/apps/docs/src/registry/examples/command-dialog.tsx @@ -0,0 +1,120 @@ +import { createSignal } from "solid-js" +import { + Calculator, + Calendar, + CreditCard, + Settings, + Smile, + User +} from "lucide-solid" + +import { Button } from "~/registry/ui/button" +import { + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut +} from "~/registry/ui/command" + +export default function CommandDialogDemo() { + const [open, setOpen] = createSignal(false) + + return ( + <> +

+ Press{" "} + + ⌘K + +

+ + + + + + No results found. + + { + console.log("Calendar selected") + setOpen(false) + }} + > + + Calendar + + { + console.log("Search Emoji selected") + setOpen(false) + }} + > + + Search Emoji + + { + console.log("Calculator selected") + setOpen(false) + }} + > + + Calculator + + + + + { + console.log("Profile selected") + setOpen(false) + }} + > + + Profile + ⌘P + + { + console.log("Billing selected") + setOpen(false) + }} + > + + Billing + ⌘B + + { + console.log("Settings selected") + setOpen(false) + }} + > + + Settings + ⌘S + + + + + + ) +} diff --git a/apps/docs/src/registry/examples/dialog-close-button.tsx b/apps/docs/src/registry/examples/dialog-close-button.tsx index 8a62a33b..aa456d8b 100644 --- a/apps/docs/src/registry/examples/dialog-close-button.tsx +++ b/apps/docs/src/registry/examples/dialog-close-button.tsx @@ -13,8 +13,8 @@ import { export default function DialogCloseButton() { return ( - } variant="outline"> - Share + + diff --git a/apps/docs/src/registry/examples/dialog-demo.tsx b/apps/docs/src/registry/examples/dialog-demo.tsx index 7cac026a..1c51471a 100644 --- a/apps/docs/src/registry/examples/dialog-demo.tsx +++ b/apps/docs/src/registry/examples/dialog-demo.tsx @@ -14,8 +14,8 @@ import { Input } from "~/registry/ui/input" export default function DialogDemo() { return ( - } variant="outline"> - Edit Profile + + diff --git a/apps/docs/src/registry/examples/direction-demo.tsx b/apps/docs/src/registry/examples/direction-demo.tsx new file mode 100644 index 00000000..8beb7e39 --- /dev/null +++ b/apps/docs/src/registry/examples/direction-demo.tsx @@ -0,0 +1,56 @@ +import { createSignal } from "solid-js" +import { DirectionProvider, useDirection } from "~/registry/ui/direction" +import { NativeSelect } from "~/registry/ui/native-select" + +function DirectionDisplay() { + const dir = useDirection() + + return ( +
+
+ Current direction: + {dir()} +
+
+
+

+ {dir() === "rtl" + ? "هذا النص باللغة العربية يظهر من اليمين إلى اليسار" + : "This is English text that flows from left to right"} +

+
+
+
+
+
+
+
+
+ ) +} + +export default function DirectionDemo() { + const [direction, setDirection] = createSignal<"ltr" | "rtl">("ltr") + + return ( +
+
+ + setDirection(e.currentTarget.value as "ltr" | "rtl")} + class="w-[200px]" + > + + + +
+ + + +
+ ) +} diff --git a/apps/docs/src/registry/examples/empty-demo.tsx b/apps/docs/src/registry/examples/empty-demo.tsx new file mode 100644 index 00000000..30d23f3e --- /dev/null +++ b/apps/docs/src/registry/examples/empty-demo.tsx @@ -0,0 +1,37 @@ +import { FolderCode, ArrowUpRight } from "lucide-solid" + +import { Button } from "~/registry/ui/button" +import { + Empty, + EmptyContent, + EmptyDescription, + EmptyHeader, + EmptyMedia, + EmptyTitle, +} from "~/registry/ui/empty" + +export default function EmptyDemo() { + return ( + + + + + + No Projects Yet + + You haven't created any projects yet. Get started by creating your + first project. + + + +
+ + +
+ + + + ) +} diff --git a/apps/docs/src/registry/examples/form-demo.tsx b/apps/docs/src/registry/examples/form-demo.tsx new file mode 100644 index 00000000..41a27bfa --- /dev/null +++ b/apps/docs/src/registry/examples/form-demo.tsx @@ -0,0 +1,134 @@ +import { createForm, email, minLength, required, type SubmitHandler } from "@modular-forms/solid" +import { Button } from "~/registry/ui/button" +import { + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage +} from "~/registry/ui/form" +import { Input } from "~/registry/ui/input" +import { Textarea } from "~/registry/ui/textarea" + +type ProfileFormValues = { + username: string + email: string + bio: string +} + +export default function FormDemo() { + const [profileForm, { Form, Field }] = createForm({ + initialValues: { + username: "", + email: "", + bio: "" + } + }) + + const handleSubmit: SubmitHandler = (values) => { + console.log("Form submitted:", values) + alert(`Form submitted!\nUsername: ${values.username}\nEmail: ${values.email}\nBio: ${values.bio}`) + } + + return ( +
+
+ + + Username + + {(field, props) => ( + <> + + + This is your public display name. It can be your real name or a pseudonym. + + + + )} + + + + + + + Email + + {(field, props) => ( + <> + + + We'll use this email to contact you about your account. + + + + )} + + + + + + + Bio + { + if (value && value.length > 160) { + return "Bio must not exceed 160 characters" + } + return "" + } + ]} + > + {(field, props) => ( + <> +