diff --git a/.changeset/big-terms-explain.md b/.changeset/big-terms-explain.md new file mode 100644 index 00000000..37b8ec23 --- /dev/null +++ b/.changeset/big-terms-explain.md @@ -0,0 +1,11 @@ +--- +"docs": minor +--- + +feat: Add 30 missing shadcn component documentation pages with examples + +- Add documentation for Calendar, Chart, Combobox, Command, Data Table, Date Picker, Direction, Empty, Form, Hover Card, Input OTP, Item, Kbd, Menubar, Native Select, Navigation Menu, Pagination, Popover, Progress, Resizable, Scroll Area, Separator, Sheet, Sidebar, Sonner, Table, Tabs, Toggle, Toggle Group +- Create 50+ example files demonstrating component usage +- Fix Badge Polymorphic prop error, Scroll Area scrollbar positioning, Calendar heading reactivity +- Apply Biome formatting to all component files +- Achieve 100% parity with shadcn-ui component offerings 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..0260b41c 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -13,14 +13,18 @@ "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", + "@tanstack/solid-table": "^8.21.3", + "chart.js": "^4.5.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "embla-carousel": "^8.6.0", @@ -29,6 +33,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..44e2f7a2 100644 --- a/apps/docs/src/config/docs.ts +++ b/apps/docs/src/config/docs.ts @@ -71,6 +71,11 @@ export const docsConfig: Config = { title: "Button Group", href: "/docs/components/button-group" }, + { + title: "Calendar", + href: "/docs/components/calendar", + status: "new" + }, { title: "Card", href: "/docs/components/card" @@ -80,6 +85,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,45 +99,174 @@ 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: "Data Table", + href: "/docs/components/data-table", + status: "new" + }, + { + title: "Date Picker", + href: "/docs/components/date-picker", + status: "new" + }, + { + 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" }, + { + title: "Separator", + href: "/docs/components/separator" + }, + { + title: "Sheet", + href: "/docs/components/sheet" + }, + { + title: "Sidebar", + href: "/docs/components/sidebar" + }, { 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: "Table", + href: "/docs/components/table" + }, + { + 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..93151032 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,195 @@ 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: { + "calendar": { + name: "calendar", + description: "", + type: "registry:ui", + registryDependencies: ["button"], + component: lazy(() => import("~/registry/ui/calendar.tsx")), + files: [{ + path: "registry/ui/calendar.tsx", + type: "registry:ui", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "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, + }, + "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 + meta: undefined, }, - checkbox: { + "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 + 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, }, "context-menu": { name: "context-menu", @@ -250,15 +262,55 @@ 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, + }, + "date-picker": { + name: "date-picker", + description: "", + type: "registry:ui", + registryDependencies: ["button","calendar","popover"], + component: lazy(() => import("~/registry/ui/date-picker.tsx")), + files: [{ + path: "registry/ui/date-picker.tsx", + type: "registry:ui", + target: "" + }], + categories: 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 + 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 +318,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, + }, + "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 + meta: undefined, }, - input: { + "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, + }, + "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 + 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 +556,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, + }, + "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 + meta: undefined, }, - select: { + "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, + }, + "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 + meta: undefined, }, "use-mobile": { name: "use-mobile", @@ -410,15 +724,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 +738,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 +752,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 +780,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 +794,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 +808,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 +864,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 +878,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: "" - } - ], + files: [{ + path: "registry/examples/breadcrumb-separator.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: "" - } - ], - categories: undefined, - meta: undefined + meta: undefined, }, "button-default": { name: "button-default", @@ -698,15 +892,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 +906,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 +920,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 +934,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 +1088,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 +1102,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 +1130,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 +1144,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 +1158,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 +1172,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 +1186,139 @@ 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, + }, + "calendar-demo": { + name: "calendar-demo", + description: "", + type: "registry:example", + registryDependencies: ["calendar"], + component: lazy(() => import("~/registry/examples/calendar-demo.tsx")), + files: [{ + path: "registry/examples/calendar-demo.tsx", + type: "registry:example", + target: "" + }], + categories: 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 +1326,237 @@ 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, + }, + "data-table-column-visibility-demo": { + name: "data-table-column-visibility-demo", + description: "", + type: "registry:example", + registryDependencies: ["table","button","input","dropdown-menu"], + component: lazy(() => import("~/registry/examples/data-table-column-visibility-demo.tsx")), + files: [{ + path: "registry/examples/data-table-column-visibility-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "data-table-demo": { + name: "data-table-demo", + description: "", + type: "registry:example", + registryDependencies: ["table","button"], + component: lazy(() => import("~/registry/examples/data-table-demo.tsx")), + files: [{ + path: "registry/examples/data-table-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "data-table-filtering-demo": { + name: "data-table-filtering-demo", + description: "", + type: "registry:example", + registryDependencies: ["table","button","input"], + component: lazy(() => import("~/registry/examples/data-table-filtering-demo.tsx")), + files: [{ + path: "registry/examples/data-table-filtering-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "data-table-pagination-demo": { + name: "data-table-pagination-demo", + description: "", + type: "registry:example", + registryDependencies: ["table","button"], + component: lazy(() => import("~/registry/examples/data-table-pagination-demo.tsx")), + files: [{ + path: "registry/examples/data-table-pagination-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "data-table-row-selection-demo": { + name: "data-table-row-selection-demo", + description: "", + type: "registry:example", + registryDependencies: ["table","button","checkbox"], + component: lazy(() => import("~/registry/examples/data-table-row-selection-demo.tsx")), + files: [{ + path: "registry/examples/data-table-row-selection-demo.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, + }, + "date-picker-demo": { + name: "date-picker-demo", + description: "", + type: "registry:example", + registryDependencies: ["date-picker"], + component: lazy(() => import("~/registry/examples/date-picker-demo.tsx")), + files: [{ + path: "registry/examples/date-picker-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "date-picker-form-demo": { + name: "date-picker-form-demo", + description: "", + type: "registry:example", + registryDependencies: ["date-picker","form","button"], + component: lazy(() => import("~/registry/examples/date-picker-form-demo.tsx")), + files: [{ + path: "registry/examples/date-picker-form-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "date-picker-range-demo": { + name: "date-picker-range-demo", + description: "", + type: "registry:example", + registryDependencies: ["date-picker"], + component: lazy(() => import("~/registry/examples/date-picker-range-demo.tsx")), + files: [{ + path: "registry/examples/date-picker-range-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "date-picker-with-presets-demo": { + name: "date-picker-with-presets-demo", + description: "", + type: "registry:example", + registryDependencies: ["date-picker"], + component: lazy(() => import("~/registry/examples/date-picker-with-presets-demo.tsx")), + files: [{ + path: "registry/examples/date-picker-with-presets-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "context-menu-checkboxes": { name: "context-menu-checkboxes", @@ -1146,15 +1564,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 +1578,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 +1592,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 +1620,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 +1634,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 +1648,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 +1704,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 + 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, }, "input-group-demo": { name: "input-group-demo", @@ -1434,47 +1872,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 + 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, + }, + "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 + 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, + }, + "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 +2068,125 @@ 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, + }, + "separator-demo": { + name: "separator-demo", + description: "", + type: "registry:example", + registryDependencies: ["separator"], + component: lazy(() => import("~/registry/examples/separator-demo.tsx")), + files: [{ + path: "registry/examples/separator-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "separator-vertical": { + name: "separator-vertical", + description: "", + type: "registry:example", + registryDependencies: ["separator"], + component: lazy(() => import("~/registry/examples/separator-vertical.tsx")), + files: [{ + path: "registry/examples/separator-vertical.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "separator-menu": { + name: "separator-menu", + description: "", + type: "registry:example", + registryDependencies: ["separator"], + component: lazy(() => import("~/registry/examples/separator-menu.tsx")), + files: [{ + path: "registry/examples/separator-menu.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "separator-list": { + name: "separator-list", + description: "", + type: "registry:example", + registryDependencies: ["separator"], + component: lazy(() => import("~/registry/examples/separator-list.tsx")), + files: [{ + path: "registry/examples/separator-list.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "sheet-demo": { + name: "sheet-demo", + description: "", + type: "registry:example", + registryDependencies: ["sheet"], + component: lazy(() => import("~/registry/examples/sheet-demo.tsx")), + files: [{ + path: "registry/examples/sheet-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "sheet-side": { + name: "sheet-side", + description: "", + type: "registry:example", + registryDependencies: ["sheet"], + component: lazy(() => import("~/registry/examples/sheet-side.tsx")), + files: [{ + path: "registry/examples/sheet-side.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "sheet-no-close-button": { + name: "sheet-no-close-button", + description: "", + type: "registry:example", + registryDependencies: ["sheet"], + component: lazy(() => import("~/registry/examples/sheet-no-close-button.tsx")), + files: [{ + path: "registry/examples/sheet-no-close-button.tsx", + type: "registry:example", + target: "" + }], categories: undefined, - meta: undefined + meta: undefined, + }, + "sidebar-demo": { + name: "sidebar-demo", + description: "", + type: "registry:example", + registryDependencies: ["sidebar"], + component: lazy(() => import("~/registry/examples/sidebar-demo.tsx")), + files: [{ + path: "registry/examples/sidebar-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, }, "slider-demo": { name: "slider-demo", @@ -1498,31 +2194,97 @@ 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 + 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, }, "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, + }, + "table-demo": { + name: "table-demo", + description: "", + type: "registry:example", + registryDependencies: ["table"], + component: lazy(() => import("~/registry/examples/table-demo.tsx")), + files: [{ + path: "registry/examples/table-demo.tsx", + type: "registry:example", + target: "" + }], + categories: undefined, + meta: undefined, + }, + "tabs-demo": { + name: "tabs-demo", + description: "", + type: "registry:example", + registryDependencies: ["tabs","card"], + component: lazy(() => import("~/registry/examples/tabs-demo.tsx")), + files: [{ + path: "registry/examples/tabs-demo.tsx", + type: "registry:example", + target: "" + }], + categories: 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 + 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 +2292,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..7cded728 100644 --- a/apps/docs/src/registry/examples/_registry.ts +++ b/apps/docs/src/registry/examples/_registry.ts @@ -364,6 +364,17 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "calendar-demo", + type: "registry:example", + registryDependencies: ["calendar"], + files: [ + { + path: "examples/calendar-demo.tsx", + type: "registry:example" + } + ] + }, { name: "card-demo", type: "registry:example", @@ -442,6 +453,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 +487,101 @@ 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: "data-table-column-visibility-demo", + type: "registry:example", + dependencies: ["@tanstack/solid-table", "lucide-solid"], + registryDependencies: ["table", "button", "input", "dropdown-menu"], + files: [ + { + path: "examples/data-table-column-visibility-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "data-table-demo", + type: "registry:example", + dependencies: ["@tanstack/solid-table", "lucide-solid"], + registryDependencies: ["table", "button"], + files: [ + { + path: "examples/data-table-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "data-table-filtering-demo", + type: "registry:example", + dependencies: ["@tanstack/solid-table", "lucide-solid"], + registryDependencies: ["table", "button", "input"], + files: [ + { + path: "examples/data-table-filtering-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "data-table-pagination-demo", + type: "registry:example", + dependencies: ["@tanstack/solid-table", "lucide-solid"], + registryDependencies: ["table", "button"], + files: [ + { + path: "examples/data-table-pagination-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "data-table-row-selection-demo", + type: "registry:example", + dependencies: ["@tanstack/solid-table", "lucide-solid"], + registryDependencies: ["table", "button", "checkbox"], + files: [ + { + path: "examples/data-table-row-selection-demo.tsx", + type: "registry:example" + } + ] + }, { name: "dialog-close-button", type: "registry:example", @@ -486,6 +604,62 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "direction-demo", + type: "registry:example", + registryDependencies: ["direction"], + files: [ + { + path: "examples/direction-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "date-picker-demo", + type: "registry:example", + registryDependencies: ["date-picker"], + files: [ + { + path: "examples/date-picker-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "date-picker-form-demo", + type: "registry:example", + dependencies: ["@modular-forms/solid"], + registryDependencies: ["date-picker", "form", "button"], + files: [ + { + path: "examples/date-picker-form-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "date-picker-range-demo", + type: "registry:example", + registryDependencies: ["date-picker"], + files: [ + { + path: "examples/date-picker-range-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "date-picker-with-presets-demo", + type: "registry:example", + registryDependencies: ["date-picker"], + files: [ + { + path: "examples/date-picker-with-presets-demo.tsx", + type: "registry:example" + } + ] + }, { name: "context-menu-checkboxes", type: "registry:example", @@ -563,6 +737,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 +881,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 +916,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 +960,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 +1037,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", @@ -739,6 +1070,94 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "separator-demo", + type: "registry:example", + registryDependencies: ["separator"], + files: [ + { + path: "examples/separator-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "separator-vertical", + type: "registry:example", + registryDependencies: ["separator"], + files: [ + { + path: "examples/separator-vertical.tsx", + type: "registry:example" + } + ] + }, + { + name: "separator-menu", + type: "registry:example", + registryDependencies: ["separator"], + files: [ + { + path: "examples/separator-menu.tsx", + type: "registry:example" + } + ] + }, + { + name: "separator-list", + type: "registry:example", + registryDependencies: ["separator"], + files: [ + { + path: "examples/separator-list.tsx", + type: "registry:example" + } + ] + }, + { + name: "sheet-demo", + type: "registry:example", + registryDependencies: ["sheet"], + files: [ + { + path: "examples/sheet-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "sheet-side", + type: "registry:example", + registryDependencies: ["sheet"], + files: [ + { + path: "examples/sheet-side.tsx", + type: "registry:example" + } + ] + }, + { + name: "sheet-no-close-button", + type: "registry:example", + registryDependencies: ["sheet"], + files: [ + { + path: "examples/sheet-no-close-button.tsx", + type: "registry:example" + } + ] + }, + { + name: "sidebar-demo", + type: "registry:example", + registryDependencies: ["sidebar"], + files: [ + { + path: "examples/sidebar-demo.tsx", + type: "registry:example" + } + ] + }, { name: "slider-demo", type: "registry:example", @@ -750,6 +1169,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 +1191,50 @@ export const examples: Registry["items"] = [ } ] }, + { + name: "table-demo", + type: "registry:example", + registryDependencies: ["table"], + files: [ + { + path: "examples/table-demo.tsx", + type: "registry:example" + } + ] + }, + { + name: "tabs-demo", + type: "registry:example", + registryDependencies: ["tabs", "card"], + files: [ + { + path: "examples/tabs-demo.tsx", + type: "registry:example" + } + ] + }, + { + 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/accordion-demo.tsx b/apps/docs/src/registry/examples/accordion-demo.tsx index a0349a21..737d3366 100644 --- a/apps/docs/src/registry/examples/accordion-demo.tsx +++ b/apps/docs/src/registry/examples/accordion-demo.tsx @@ -7,22 +7,17 @@ import { export default function AccordionDemo() { return ( - + Product Information

- Our flagship product combines cutting-edge technology with sleek - design. Built with premium materials, it offers unparalleled - performance and reliability. + Our flagship product combines cutting-edge technology with sleek design. Built with + premium materials, it offers unparalleled performance and reliability.

- Key features include advanced processing capabilities, and an - intuitive user interface designed for both beginners and experts. + Key features include advanced processing capabilities, and an intuitive user interface + designed for both beginners and experts.

@@ -30,13 +25,12 @@ export default function AccordionDemo() { Shipping Details

- We offer worldwide shipping through trusted courier partners. - Standard delivery takes 3-5 business days, while express shipping - ensures delivery within 1-2 business days. + We offer worldwide shipping through trusted courier partners. Standard delivery takes + 3-5 business days, while express shipping ensures delivery within 1-2 business days.

- All orders are carefully packaged and fully insured. Track your - shipment in real-time through our dedicated tracking portal. + All orders are carefully packaged and fully insured. Track your shipment in real-time + through our dedicated tracking portal.

@@ -44,14 +38,12 @@ export default function AccordionDemo() { Return Policy

- We stand behind our products with a comprehensive 30-day return - policy. If you're not completely satisfied, simply return the - item in its original condition. + We stand behind our products with a comprehensive 30-day return policy. If you're + not completely satisfied, simply return the item in its original condition.

- Our hassle-free return process includes free return shipping and - full refunds processed within 48 hours of receiving the returned - item. + Our hassle-free return process includes free return shipping and full refunds processed + within 48 hours of receiving the returned item.

diff --git a/apps/docs/src/registry/examples/calendar-demo.tsx b/apps/docs/src/registry/examples/calendar-demo.tsx new file mode 100644 index 00000000..90447fa9 --- /dev/null +++ b/apps/docs/src/registry/examples/calendar-demo.tsx @@ -0,0 +1,67 @@ +import { createSignal, For } from "solid-js" + +import { + Calendar, + CalendarGrid, + CalendarGridBody, + CalendarGridBodyCell, + CalendarGridBodyCellTrigger, + CalendarGridBodyRow, + CalendarGridHead, + CalendarGridHeadCell, + CalendarGridHeadRow, + CalendarHead, + CalendarHeading, + CalendarNextTrigger, + CalendarPrevTrigger +} from "~/registry/ui/calendar" + +export default function CalendarDemo() { + const [date, setDate] = createSignal(new Date()) + + return ( +
+ setDate(value)} value={date()}> + {(props) => ( + <> + + + + + + + + + + {(weekday) => ( + + {weekday.toLocaleDateString("en", { weekday: "short" }).slice(0, 2)} + + )} + + + + + + {(week) => ( + + + {(day) => ( + + + {day.getDate()} + + + )} + + + )} + + + + + )} + +
+ ) +} diff --git a/apps/docs/src/registry/examples/card-demo.tsx b/apps/docs/src/registry/examples/card-demo.tsx index 270c1e8b..9303aefb 100644 --- a/apps/docs/src/registry/examples/card-demo.tsx +++ b/apps/docs/src/registry/examples/card-demo.tsx @@ -16,9 +16,7 @@ export default function CardDemo() { Login to your account - - Enter your email below to login to your account - + Enter your email below to login to your account @@ -28,28 +26,25 @@ export default function CardDemo() {
- +
- + Forgot your password?
- +
- - diff --git a/apps/docs/src/registry/examples/carousel-api.tsx b/apps/docs/src/registry/examples/carousel-api.tsx index d0325573..405575cc 100644 --- a/apps/docs/src/registry/examples/carousel-api.tsx +++ b/apps/docs/src/registry/examples/carousel-api.tsx @@ -3,11 +3,11 @@ import { createEffect, createSignal, For, on } from "solid-js" import { Card, CardContent } from "~/registry/ui/card" import { Carousel, + type CarouselApi, CarouselContent, CarouselItem, CarouselNext, - CarouselPrevious, - type CarouselApi + CarouselPrevious } from "~/registry/ui/carousel" export default function CarouselApiDemo() { @@ -30,14 +30,14 @@ export default function CarouselApiDemo() { return (
- + {(_, index) => ( - {index() + 1} + {index() + 1} @@ -47,7 +47,7 @@ export default function CarouselApiDemo() { -
+
Slide {current()} of {count()}
diff --git a/apps/docs/src/registry/examples/carousel-demo.tsx b/apps/docs/src/registry/examples/carousel-demo.tsx index d74623e1..733e4a28 100644 --- a/apps/docs/src/registry/examples/carousel-demo.tsx +++ b/apps/docs/src/registry/examples/carousel-demo.tsx @@ -19,7 +19,7 @@ export default function CarouselDemo() {
- {index() + 1} + {index() + 1}
diff --git a/apps/docs/src/registry/examples/carousel-orientation.tsx b/apps/docs/src/registry/examples/carousel-orientation.tsx index 7c824028..00dc09cc 100644 --- a/apps/docs/src/registry/examples/carousel-orientation.tsx +++ b/apps/docs/src/registry/examples/carousel-orientation.tsx @@ -12,11 +12,11 @@ import { export default function CarouselOrientation() { return ( @@ -25,7 +25,7 @@ export default function CarouselOrientation() {
- {index() + 1} + {index() + 1}
diff --git a/apps/docs/src/registry/examples/carousel-plugin.tsx b/apps/docs/src/registry/examples/carousel-plugin.tsx index 68feea01..e0b7a2a5 100644 --- a/apps/docs/src/registry/examples/carousel-plugin.tsx +++ b/apps/docs/src/registry/examples/carousel-plugin.tsx @@ -1,4 +1,5 @@ import { For } from "solid-js" + import Autoplay from "embla-carousel-autoplay" import { Card, CardContent } from "~/registry/ui/card" @@ -15,10 +16,10 @@ export default function CarouselPlugin() { return ( plugin.play()} + plugins={[plugin]} > @@ -27,7 +28,7 @@ export default function CarouselPlugin() {
- {index() + 1} + {index() + 1}
diff --git a/apps/docs/src/registry/examples/carousel-size.tsx b/apps/docs/src/registry/examples/carousel-size.tsx index f146839c..c75ddd3c 100644 --- a/apps/docs/src/registry/examples/carousel-size.tsx +++ b/apps/docs/src/registry/examples/carousel-size.tsx @@ -12,10 +12,10 @@ import { export default function CarouselSize() { return ( @@ -24,7 +24,7 @@ export default function CarouselSize() {
- {index() + 1} + {index() + 1}
diff --git a/apps/docs/src/registry/examples/carousel-spacing.tsx b/apps/docs/src/registry/examples/carousel-spacing.tsx index b64ed357..9b3cbc18 100644 --- a/apps/docs/src/registry/examples/carousel-spacing.tsx +++ b/apps/docs/src/registry/examples/carousel-spacing.tsx @@ -19,7 +19,7 @@ export default function CarouselSpacing() {
- {index() + 1} + {index() + 1}
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..10949446 --- /dev/null +++ b/apps/docs/src/registry/examples/chart-demo.tsx @@ -0,0 +1,134 @@ +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/registry/ui/card" +import { + BarChart, + type ChartConfig, + ChartContainer, + DoughnutChart, + LineChart +} from "~/registry/ui/chart" + +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/collapsible-demo.tsx b/apps/docs/src/registry/examples/collapsible-demo.tsx index 7aca04fa..5fa07b22 100644 --- a/apps/docs/src/registry/examples/collapsible-demo.tsx +++ b/apps/docs/src/registry/examples/collapsible-demo.tsx @@ -1,39 +1,26 @@ import { createSignal } from "solid-js" + import { ChevronsUpDown } from "lucide-solid" import { Button } from "~/registry/ui/button" -import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger -} from "~/registry/ui/collapsible" +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/registry/ui/collapsible" export default function CollapsibleDemo() { const [isOpen, setIsOpen] = createSignal(false) return ( - +
-

@peduarte starred 3 repositories

- +

@peduarte starred 3 repositories

+ Toggle
-
- @radix-ui/primitives -
+
@radix-ui/primitives
-
- @radix-ui/colors -
-
- @stitches/react -
+
@radix-ui/colors
+
@stitches/react
 ) 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..b2c89019 --- /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} + )} + onChange={setValue} + optionLabel="label" + options={frameworks} + optionTextValue="label" + optionValue="value" + placeholder="Select a framework..." + value={value()} + > + + + + + + + ) +} 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..27d873ad --- /dev/null +++ b/apps/docs/src/registry/examples/command-demo.tsx @@ -0,0 +1,55 @@ +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..cd761d68 --- /dev/null +++ b/apps/docs/src/registry/examples/command-dialog.tsx @@ -0,0 +1,114 @@ +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) + }} + value="calendar" + > + + Calendar + + { + console.log("Search Emoji selected") + setOpen(false) + }} + value="search-emoji" + > + + Search Emoji + + { + console.log("Calculator selected") + setOpen(false) + }} + value="calculator" + > + + Calculator + + + + + { + console.log("Profile selected") + setOpen(false) + }} + value="profile" + > + + Profile + ⌘P + + { + console.log("Billing selected") + setOpen(false) + }} + value="billing" + > + + Billing + ⌘B + + { + console.log("Settings selected") + setOpen(false) + }} + value="settings" + > + + Settings + ⌘S + + + + + + ) +} diff --git a/apps/docs/src/registry/examples/context-menu-checkboxes.tsx b/apps/docs/src/registry/examples/context-menu-checkboxes.tsx index ef2f10e9..0dda7e6c 100644 --- a/apps/docs/src/registry/examples/context-menu-checkboxes.tsx +++ b/apps/docs/src/registry/examples/context-menu-checkboxes.tsx @@ -23,11 +23,7 @@ export default function ContextMenuCheckboxes() { Status Bar - + Activity Bar diff --git a/apps/docs/src/registry/examples/context-menu-demo.tsx b/apps/docs/src/registry/examples/context-menu-demo.tsx index c4d7f89e..5b0dcb52 100644 --- a/apps/docs/src/registry/examples/context-menu-demo.tsx +++ b/apps/docs/src/registry/examples/context-menu-demo.tsx @@ -1,3 +1,5 @@ +import { createSignal } from "solid-js" + import { ContextMenu, ContextMenuCheckboxItem, @@ -14,7 +16,6 @@ import { ContextMenuSubTrigger, ContextMenuTrigger } from "~/registry/ui/context-menu" -import { createSignal } from "solid-js" export default function ContextMenuDemo() { const [bookmarksChecked, setBookmarksChecked] = createSignal(true) @@ -62,7 +63,7 @@ export default function ContextMenuDemo() { People - + Pedro Duarte Colm Tuite diff --git a/apps/docs/src/registry/examples/data-table-column-visibility-demo.tsx b/apps/docs/src/registry/examples/data-table-column-visibility-demo.tsx new file mode 100644 index 00000000..c431c42a --- /dev/null +++ b/apps/docs/src/registry/examples/data-table-column-visibility-demo.tsx @@ -0,0 +1,202 @@ +import { createSignal, For } from "solid-js" + +import { + type ColumnDef, + type ColumnFiltersState, + createSolidTable, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + type SortingState, + type VisibilityState +} from "@tanstack/solid-table" +import { ArrowUpDown, ChevronDown } from "lucide-solid" + +import { Button } from "~/registry/ui/button" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuGroupLabel, + DropdownMenuTrigger +} from "~/registry/ui/dropdown-menu" +import { Input } from "~/registry/ui/input" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/registry/ui/table" + +type Payment = { + id: string + amount: number + status: "pending" | "processing" | "success" | "failed" + email: string +} + +const data: Payment[] = [ + { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@yahoo.com" }, + { id: "3u1reuv4", amount: 242, status: "success", email: "abe45@gmail.com" }, + { id: "derv1ws0", amount: 837, status: "processing", email: "monserrat44@gmail.com" }, + { id: "5kma53ae", amount: 874, status: "success", email: "silas22@gmail.com" }, + { id: "bhqecj4p", amount: 721, status: "failed", email: "carmella@hotmail.com" } +] + +const columns: ColumnDef[] = [ + { + accessorKey: "status", + header: "Status", + cell: (info) => {info.getValue()} + }, + { + accessorKey: "email", + header: (props) => ( + + ), + cell: (info) => {info.getValue()} + }, + { + accessorKey: "amount", + header: () =>
Amount
, + cell: (info) => { + const formatted = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD" + }).format(info.getValue()) + return
{formatted}
+ } + } +] + +export default function DataTableColumnVisibilityDemo() { + const [sorting, setSorting] = createSignal([]) + const [columnFilters, setColumnFilters] = createSignal([]) + const [columnVisibility, setColumnVisibility] = createSignal({}) + + const table = createSolidTable({ + get data() { + return data + }, + columns, + state: { + get sorting() { + return sorting() + }, + get columnFilters() { + return columnFilters() + }, + get columnVisibility() { + return columnVisibility() + } + }, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + getPaginationRowModel: getPaginationRowModel() + }) + + return ( +
+
+ table.getColumn("email")?.setFilterValue(e.currentTarget.value)} + placeholder="Filter emails..." + value={(table.getColumn("email")?.getFilterValue() as string) ?? ""} + /> + + + Columns + + + + + Toggle columns + column.getCanHide())}> + {(column) => ( + column.toggleVisibility(value)} + > + {column.id} + + )} + + + + +
+ + + + {(headerGroup) => ( + + + {(header) => ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + )} + + + )} + + + + {table.getRowModel().rows.length ? ( + + {(row) => ( + + + {(cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + )} + + + )} + + ) : ( + + + No results. + + + )} + +
+
+
+ + +
+
+
+ ) +} diff --git a/apps/docs/src/registry/examples/data-table-demo.tsx b/apps/docs/src/registry/examples/data-table-demo.tsx new file mode 100644 index 00000000..ffdd6bc8 --- /dev/null +++ b/apps/docs/src/registry/examples/data-table-demo.tsx @@ -0,0 +1,136 @@ +import { createSignal, For } from "solid-js" + +import { + type ColumnDef, + createSolidTable, + flexRender, + getCoreRowModel, + getSortedRowModel, + type SortingState +} from "@tanstack/solid-table" +import { ArrowUpDown } from "lucide-solid" + +import { Button } from "~/registry/ui/button" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/registry/ui/table" + +type Payment = { + id: string + amount: number + status: "pending" | "processing" | "success" | "failed" + email: string +} + +const data: Payment[] = [ + { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@yahoo.com" }, + { id: "3u1reuv4", amount: 242, status: "success", email: "abe45@gmail.com" }, + { id: "derv1ws0", amount: 837, status: "processing", email: "monserrat44@gmail.com" }, + { id: "5kma53ae", amount: 874, status: "success", email: "silas22@gmail.com" }, + { id: "bhqecj4p", amount: 721, status: "failed", email: "carmella@hotmail.com" } +] + +const columns: ColumnDef[] = [ + { + accessorKey: "status", + header: "Status", + cell: (info) => {info.getValue()} + }, + { + accessorKey: "email", + header: (props) => ( + + ), + cell: (info) => {info.getValue()} + }, + { + accessorKey: "amount", + header: (props) => ( + + ), + cell: (info) => { + const formatted = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD" + }).format(info.getValue()) + return
{formatted}
+ } + } +] + +export default function DataTableDemo() { + const [sorting, setSorting] = createSignal([]) + + const table = createSolidTable({ + get data() { + return data + }, + columns, + state: { + get sorting() { + return sorting() + } + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel() + }) + + return ( +
+ + + + {(headerGroup) => ( + + + {(header) => ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + )} + + + )} + + + + {table.getRowModel().rows.length ? ( + + {(row) => ( + + + {(cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + )} + + + )} + + ) : ( + + + No results. + + + )} + +
+
+ ) +} diff --git a/apps/docs/src/registry/examples/data-table-filtering-demo.tsx b/apps/docs/src/registry/examples/data-table-filtering-demo.tsx new file mode 100644 index 00000000..3ceba87e --- /dev/null +++ b/apps/docs/src/registry/examples/data-table-filtering-demo.tsx @@ -0,0 +1,166 @@ +import { createSignal, For } from "solid-js" + +import { + type ColumnDef, + type ColumnFiltersState, + createSolidTable, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + type SortingState +} from "@tanstack/solid-table" +import { ArrowUpDown } from "lucide-solid" + +import { Button } from "~/registry/ui/button" +import { Input } from "~/registry/ui/input" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/registry/ui/table" + +type Payment = { + id: string + amount: number + status: "pending" | "processing" | "success" | "failed" + email: string +} + +const data: Payment[] = [ + { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@yahoo.com" }, + { id: "3u1reuv4", amount: 242, status: "success", email: "abe45@gmail.com" }, + { id: "derv1ws0", amount: 837, status: "processing", email: "monserrat44@gmail.com" }, + { id: "5kma53ae", amount: 874, status: "success", email: "silas22@gmail.com" }, + { id: "bhqecj4p", amount: 721, status: "failed", email: "carmella@hotmail.com" } +] + +const columns: ColumnDef[] = [ + { + accessorKey: "status", + header: "Status", + cell: (info) => {info.getValue()} + }, + { + accessorKey: "email", + header: (props) => ( + + ), + cell: (info) => {info.getValue()} + }, + { + accessorKey: "amount", + header: () =>
Amount
, + cell: (info) => { + const formatted = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD" + }).format(info.getValue()) + return
{formatted}
+ } + } +] + +export default function DataTableFilteringDemo() { + const [sorting, setSorting] = createSignal([]) + const [columnFilters, setColumnFilters] = createSignal([]) + + const table = createSolidTable({ + get data() { + return data + }, + columns, + state: { + get sorting() { + return sorting() + }, + get columnFilters() { + return columnFilters() + } + }, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + getPaginationRowModel: getPaginationRowModel() + }) + + return ( +
+
+ table.getColumn("email")?.setFilterValue(e.currentTarget.value)} + placeholder="Filter emails..." + value={(table.getColumn("email")?.getFilterValue() as string) ?? ""} + /> +
+ + + + {(headerGroup) => ( + + + {(header) => ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + )} + + + )} + + + + {table.getRowModel().rows.length ? ( + + {(row) => ( + + + {(cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + )} + + + )} + + ) : ( + + + No results. + + + )} + +
+
+
+ + +
+
+
+ ) +} diff --git a/apps/docs/src/registry/examples/data-table-pagination-demo.tsx b/apps/docs/src/registry/examples/data-table-pagination-demo.tsx new file mode 100644 index 00000000..c80a2905 --- /dev/null +++ b/apps/docs/src/registry/examples/data-table-pagination-demo.tsx @@ -0,0 +1,168 @@ +import { createSignal, For } from "solid-js" + +import { + type ColumnDef, + createSolidTable, + flexRender, + getCoreRowModel, + getPaginationRowModel, + getSortedRowModel, + type PaginationState, + type SortingState +} from "@tanstack/solid-table" +import { ArrowUpDown } from "lucide-solid" + +import { Button } from "~/registry/ui/button" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/registry/ui/table" + +type Payment = { + id: string + amount: number + status: "pending" | "processing" | "success" | "failed" + email: string +} + +const data: Payment[] = [ + { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@yahoo.com" }, + { id: "3u1reuv4", amount: 242, status: "success", email: "abe45@gmail.com" }, + { id: "derv1ws0", amount: 837, status: "processing", email: "monserrat44@gmail.com" }, + { id: "5kma53ae", amount: 874, status: "success", email: "silas22@gmail.com" }, + { id: "bhqecj4p", amount: 721, status: "failed", email: "carmella@hotmail.com" }, + { id: "a1b2c3d4", amount: 125, status: "pending", email: "david@outlook.com" }, + { id: "e5f6g7h8", amount: 493, status: "success", email: "sara@gmail.com" }, + { id: "i9j0k1l2", amount: 158, status: "failed", email: "james@yahoo.com" }, + { id: "m3n4o5p6", amount: 612, status: "processing", email: "linda@hotmail.com" }, + { id: "q7r8s9t0", amount: 345, status: "success", email: "mike@gmail.com" }, + { id: "u1v2w3x4", amount: 789, status: "pending", email: "emma@outlook.com" }, + { id: "y5z6a7b8", amount: 234, status: "success", email: "chris@yahoo.com" } +] + +const columns: ColumnDef[] = [ + { + accessorKey: "status", + header: "Status", + cell: (info) => {info.getValue()} + }, + { + accessorKey: "email", + header: (props) => ( + + ), + cell: (info) => {info.getValue()} + }, + { + accessorKey: "amount", + header: () =>
Amount
, + cell: (info) => { + const formatted = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD" + }).format(info.getValue()) + return
{formatted}
+ } + } +] + +export default function DataTablePaginationDemo() { + const [sorting, setSorting] = createSignal([]) + const [pagination, setPagination] = createSignal({ + pageIndex: 0, + pageSize: 5 + }) + + const table = createSolidTable({ + get data() { + return data + }, + columns, + state: { + get sorting() { + return sorting() + }, + get pagination() { + return pagination() + } + }, + onSortingChange: setSorting, + onPaginationChange: setPagination, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + getPaginationRowModel: getPaginationRowModel() + }) + + return ( +
+ + + + {(headerGroup) => ( + + + {(header) => ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + )} + + + )} + + + + {table.getRowModel().rows.length ? ( + + {(row) => ( + + + {(cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + )} + + + )} + + ) : ( + + + No results. + + + )} + +
+
+
+ Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()} +
+
+ + +
+
+
+ ) +} diff --git a/apps/docs/src/registry/examples/data-table-row-selection-demo.tsx b/apps/docs/src/registry/examples/data-table-row-selection-demo.tsx new file mode 100644 index 00000000..e7e668e3 --- /dev/null +++ b/apps/docs/src/registry/examples/data-table-row-selection-demo.tsx @@ -0,0 +1,179 @@ +import { createSignal, For } from "solid-js" + +import { + type ColumnDef, + createSolidTable, + flexRender, + getCoreRowModel, + getPaginationRowModel, + getSortedRowModel, + type RowSelectionState, + type SortingState +} from "@tanstack/solid-table" +import { ArrowUpDown } from "lucide-solid" + +import { Button } from "~/registry/ui/button" +import { Checkbox } from "~/registry/ui/checkbox" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/registry/ui/table" + +type Payment = { + id: string + amount: number + status: "pending" | "processing" | "success" | "failed" + email: string +} + +const data: Payment[] = [ + { id: "m5gr84i9", amount: 316, status: "success", email: "ken99@yahoo.com" }, + { id: "3u1reuv4", amount: 242, status: "success", email: "abe45@gmail.com" }, + { id: "derv1ws0", amount: 837, status: "processing", email: "monserrat44@gmail.com" }, + { id: "5kma53ae", amount: 874, status: "success", email: "silas22@gmail.com" }, + { id: "bhqecj4p", amount: 721, status: "failed", email: "carmella@hotmail.com" } +] + +const columns: ColumnDef[] = [ + { + id: "select", + header: (props) => ( + props.table.toggleAllPageRowsSelected(value)} + /> + ), + cell: (props) => ( + props.row.toggleSelected(value)} + /> + ), + enableSorting: false, + enableHiding: false + }, + { + accessorKey: "status", + header: "Status", + cell: (info) => {info.getValue()} + }, + { + accessorKey: "email", + header: (props) => ( + + ), + cell: (info) => {info.getValue()} + }, + { + accessorKey: "amount", + header: () =>
Amount
, + cell: (info) => { + const formatted = new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD" + }).format(info.getValue()) + return
{formatted}
+ } + } +] + +export default function DataTableRowSelectionDemo() { + const [sorting, setSorting] = createSignal([]) + const [rowSelection, setRowSelection] = createSignal({}) + + const table = createSolidTable({ + get data() { + return data + }, + columns, + state: { + get sorting() { + return sorting() + }, + get rowSelection() { + return rowSelection() + } + }, + onSortingChange: setSorting, + onRowSelectionChange: setRowSelection, + enableRowSelection: true, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + getPaginationRowModel: getPaginationRowModel() + }) + + return ( +
+ + + + {(headerGroup) => ( + + + {(header) => ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + )} + + + )} + + + + {table.getRowModel().rows.length ? ( + + {(row) => ( + + + {(cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + )} + + + )} + + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + +
+
+
+ ) +} diff --git a/apps/docs/src/registry/examples/date-picker-demo.tsx b/apps/docs/src/registry/examples/date-picker-demo.tsx new file mode 100644 index 00000000..e275be8c --- /dev/null +++ b/apps/docs/src/registry/examples/date-picker-demo.tsx @@ -0,0 +1,31 @@ +import { createSignal, Show } from "solid-js" + +import { + DatePicker, + DatePickerCalendar, + DatePickerContent, + DatePickerInput, + DatePickerTrigger, + formatDate +} from "~/registry/ui/date-picker" + +export default function DatePickerDemo() { + const [date, setDate] = createSignal(null) + + return ( + + + + {date() ? formatDate(date()!) : null} + + + + setDate(value)} + value={date()} + /> + + + ) +} diff --git a/apps/docs/src/registry/examples/date-picker-form-demo.tsx b/apps/docs/src/registry/examples/date-picker-form-demo.tsx new file mode 100644 index 00000000..adfc5d87 --- /dev/null +++ b/apps/docs/src/registry/examples/date-picker-form-demo.tsx @@ -0,0 +1,70 @@ +import { createSignal, Show } from "solid-js" + +import { createForm, type SubmitHandler } from "@modular-forms/solid" + +import { Button } from "~/registry/ui/button" +import { + DatePicker, + DatePickerCalendar, + DatePickerContent, + DatePickerInput, + DatePickerTrigger, + formatDate +} from "~/registry/ui/date-picker" +import { FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/registry/ui/form" + +type EventFormValues = { + eventDate: string +} + +export default function DatePickerFormDemo() { + const [eventForm, { Form, Field }] = createForm({ + initialValues: { + eventDate: "" + } + }) + + const [date, setDate] = createSignal(null) + + const handleSubmit: SubmitHandler = (values) => { + alert(`Event date: ${values.eventDate}`) + } + + return ( +
+
+ + + Event date + + {(_field, props) => ( + <> + + + + + {(d) => {formatDate(d())}} + + + + { + setDate(value) + }} + value={date()} + /> + + + The date of the event you are creating. + + + )} + + + + +
+
+ ) +} diff --git a/apps/docs/src/registry/examples/date-picker-range-demo.tsx b/apps/docs/src/registry/examples/date-picker-range-demo.tsx new file mode 100644 index 00000000..bd7104e4 --- /dev/null +++ b/apps/docs/src/registry/examples/date-picker-range-demo.tsx @@ -0,0 +1,35 @@ +import { createSignal, Show } from "solid-js" + +import { + DatePicker, + DatePickerCalendar, + DatePickerContent, + DatePickerInput, + DatePickerTrigger, + formatDateRange +} from "~/registry/ui/date-picker" + +export default function DatePickerRangeDemo() { + const [range, setRange] = createSignal<{ from: Date | null; to: Date | null }>({ + from: null, + to: null + }) + + return ( + + + + {range().from ? formatDateRange(range().from, range().to) : null} + + + + setRange(value)} + value={range()} + /> + + + ) +} diff --git a/apps/docs/src/registry/examples/date-picker-with-presets-demo.tsx b/apps/docs/src/registry/examples/date-picker-with-presets-demo.tsx new file mode 100644 index 00000000..c75d9257 --- /dev/null +++ b/apps/docs/src/registry/examples/date-picker-with-presets-demo.tsx @@ -0,0 +1,48 @@ +import { createSignal, Show } from "solid-js" + +import { + DatePicker, + DatePickerCalendar, + DatePickerContent, + DatePickerInput, + DatePickerPreset, + DatePickerPresets, + DatePickerTrigger, + formatDate +} from "~/registry/ui/date-picker" + +export default function DatePickerWithPresetsDemo() { + const [date, setDate] = createSignal(null) + + const addDays = (days: number): Date => { + const d = new Date() + d.setDate(d.getDate() + days) + return d + } + + return ( + + + + {date() ? formatDate(date()!) : null} + + + +
+ setDate(value)} + value={date()} + /> + + setDate(new Date())}>Today + setDate(addDays(1))}>Tomorrow + setDate(addDays(3))}>In 3 days + setDate(addDays(7))}>In a week + setDate(addDays(30))}>In a month + +
+ + + ) +} diff --git a/apps/docs/src/registry/examples/dialog-close-button.tsx b/apps/docs/src/registry/examples/dialog-close-button.tsx index 8a62a33b..be8ddd8a 100644 --- a/apps/docs/src/registry/examples/dialog-close-button.tsx +++ b/apps/docs/src/registry/examples/dialog-close-button.tsx @@ -13,15 +13,13 @@ import { export default function DialogCloseButton() { return ( - } variant="outline"> - Share + + Share link - - Anyone who has this link will be able to view this. - + Anyone who has this link will be able to view this.
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..a5c28147 --- /dev/null +++ b/apps/docs/src/registry/examples/direction-demo.tsx @@ -0,0 +1,54 @@ +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")} + value={direction()} + > + + + +
+ + + +
+ ) +} 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..ef00c197 --- /dev/null +++ b/apps/docs/src/registry/examples/empty-demo.tsx @@ -0,0 +1,36 @@ +import { ArrowUpRight, FolderCode } 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..fdca5444 --- /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) => ( + <> +