diff --git a/apps/v4/components/component-source.tsx b/apps/v4/components/component-source.tsx index 81bfc7f1ea..32254e4b79 100644 --- a/apps/v4/components/component-source.tsx +++ b/apps/v4/components/component-source.tsx @@ -3,7 +3,7 @@ import path from "node:path" import * as React from "react" import { highlightCode } from "@/lib/highlight-code" -import { getRegistryItem } from "@/lib/registry" +import { getDemoItem, getRegistryItem } from "@/lib/registry" import { transformForDisplay } from "@/lib/rehype" import { cn } from "@/lib/utils" import { CodeCollapsibleWrapper } from "@/components/code-collapsible-wrapper" @@ -33,7 +33,10 @@ export async function ComponentSource({ let code: string | undefined if (name) { - const item = await getRegistryItem(name, styleName) + // Try demo item first, then fall back to registry item. + const item = + (await getDemoItem(name, styleName)) ?? + (await getRegistryItem(name, styleName)) code = item?.files?.[0]?.content } diff --git a/apps/v4/examples/README.md b/apps/v4/examples/README.md new file mode 100644 index 0000000000..93c326243a --- /dev/null +++ b/apps/v4/examples/README.md @@ -0,0 +1,53 @@ +# Examples + +This directory contains demo components for the component documentation. + +## Directory Structure + +``` +examples +├── base +│ ├── ui # Auto-generated by build-registry.mts +│ ├── lib # Auto-generated by build-registry.mts +│ ├── hooks # Auto-generated by build-registry.mts +│ ├── button-demo.tsx +│ └── ... +├── radix +│ ├── ui # Auto-generated by build-registry.mts +│ ├── lib # Auto-generated by build-registry.mts +│ ├── hooks # Auto-generated by build-registry.mts +│ └── ... +└── __index__.tsx # Auto-generated by build-registry.mts +``` + +## Adding a New Example + +1. Create a new `.tsx` file in `examples/base` or `examples/radix`: + +```tsx +// examples/base/button-loading.tsx +import { Button } from "@/examples/base/ui/button" + +export function ButtonLoading() { + return +} +``` + +2. Run the examples build to regenerate the index: + +```bash +pnpm examples:build +``` + +3. Use the example in documentation by referencing its name (filename without `.tsx`): + +```tsx + +``` + +## Notes + +- The `ui`, `lib`, and `hooks` directories are auto-generated during `pnpm registry:build`. Do not edit files in these directories directly. +- Example files should be placed directly in `examples/base` or `examples/radix`, not in subdirectories. +- Both named exports and default exports are supported. +- After adding or removing examples, run `pnpm examples:build` to update the index. diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx new file mode 100644 index 0000000000..01e466e5a5 --- /dev/null +++ b/apps/v4/examples/__index__.tsx @@ -0,0 +1,3809 @@ +// @ts-nocheck +// This file is autogenerated by scripts/build-examples-index.mts +// Do not edit this file directly. +import * as React from "react" + +export const ExamplesIndex: Record> = { + "base": { + "accordion-borders": { + name: "accordion-borders", + filePath: "examples/base/accordion-borders.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-borders") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-borders" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-card": { + name: "accordion-card", + filePath: "examples/base/accordion-card.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-card") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-card" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-demo": { + name: "accordion-demo", + filePath: "examples/base/accordion-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-disabled": { + name: "accordion-disabled", + filePath: "examples/base/accordion-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-multiple": { + name: "accordion-multiple", + filePath: "examples/base/accordion-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-multiple") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-demo": { + name: "alert-demo", + filePath: "examples/base/alert-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "alert-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-destructive": { + name: "alert-destructive", + filePath: "examples/base/alert-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-destructive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "alert-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-demo": { + name: "alert-dialog-demo", + filePath: "examples/base/alert-dialog-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-dialog-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "alert-dialog-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio-demo": { + name: "aspect-ratio-demo", + filePath: "examples/base/aspect-ratio-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/aspect-ratio-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "aspect-ratio-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-demo": { + name: "avatar-demo", + filePath: "examples/base/avatar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "avatar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-demo": { + name: "badge-demo", + filePath: "examples/base/badge-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-destructive": { + name: "badge-destructive", + filePath: "examples/base/badge-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-destructive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-outline": { + name: "badge-outline", + filePath: "examples/base/badge-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-secondary": { + name: "badge-secondary", + filePath: "examples/base/badge-secondary.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-secondary") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-secondary" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-demo": { + name: "breadcrumb-demo", + filePath: "examples/base/breadcrumb-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-dropdown": { + name: "breadcrumb-dropdown", + filePath: "examples/base/breadcrumb-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-ellipsis": { + name: "breadcrumb-ellipsis", + filePath: "examples/base/breadcrumb-ellipsis.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-ellipsis") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-ellipsis" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-link": { + name: "breadcrumb-link", + filePath: "examples/base/breadcrumb-link.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-link") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-link" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-responsive": { + name: "breadcrumb-responsive", + filePath: "examples/base/breadcrumb-responsive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-responsive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-responsive" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-separator": { + name: "breadcrumb-separator", + filePath: "examples/base/breadcrumb-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-separator") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "button-as-child": { + name: "button-as-child", + filePath: "examples/base/button-as-child.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-as-child") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-as-child" + return { default: mod.default || mod[exportName] } + }), + }, + "button-default": { + name: "button-default", + filePath: "examples/base/button-default.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-default") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-default" + return { default: mod.default || mod[exportName] } + }), + }, + "button-demo": { + name: "button-demo", + filePath: "examples/base/button-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "button-destructive": { + name: "button-destructive", + filePath: "examples/base/button-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-destructive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "button-ghost": { + name: "button-ghost", + filePath: "examples/base/button-ghost.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-ghost") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-ghost" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-demo": { + name: "button-group-demo", + filePath: "examples/base/button-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-dropdown": { + name: "button-group-dropdown", + filePath: "examples/base/button-group-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-input-group": { + name: "button-group-input-group", + filePath: "examples/base/button-group-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-input": { + name: "button-group-input", + filePath: "examples/base/button-group-input.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-input") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-input" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-nested": { + name: "button-group-nested", + filePath: "examples/base/button-group-nested.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-nested") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-nested" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-orientation": { + name: "button-group-orientation", + filePath: "examples/base/button-group-orientation.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-orientation") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-orientation" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-popover": { + name: "button-group-popover", + filePath: "examples/base/button-group-popover.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-popover") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-popover" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-select": { + name: "button-group-select", + filePath: "examples/base/button-group-select.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-select") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-select" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-separator": { + name: "button-group-separator", + filePath: "examples/base/button-group-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-separator") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-size": { + name: "button-group-size", + filePath: "examples/base/button-group-size.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-size" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-split": { + name: "button-group-split", + filePath: "examples/base/button-group-split.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-split") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-split" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon": { + name: "button-icon", + filePath: "examples/base/button-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "button-link": { + name: "button-link", + filePath: "examples/base/button-link.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-link") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-link" + return { default: mod.default || mod[exportName] } + }), + }, + "button-loading": { + name: "button-loading", + filePath: "examples/base/button-loading.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-loading") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-loading" + return { default: mod.default || mod[exportName] } + }), + }, + "button-outline": { + name: "button-outline", + filePath: "examples/base/button-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "button-rounded": { + name: "button-rounded", + filePath: "examples/base/button-rounded.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-rounded") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-rounded" + return { default: mod.default || mod[exportName] } + }), + }, + "button-secondary": { + name: "button-secondary", + filePath: "examples/base/button-secondary.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-secondary") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-secondary" + return { default: mod.default || mod[exportName] } + }), + }, + "button-size": { + name: "button-size", + filePath: "examples/base/button-size.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-size" + return { default: mod.default || mod[exportName] } + }), + }, + "button-with-icon": { + name: "button-with-icon", + filePath: "examples/base/button-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-with-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-demo": { + name: "calendar-demo", + filePath: "examples/base/calendar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "calendar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-hijri": { + name: "calendar-hijri", + filePath: "examples/base/calendar-hijri.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-hijri") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "calendar-hijri" + return { default: mod.default || mod[exportName] } + }), + }, + "card-demo": { + name: "card-demo", + filePath: "examples/base/card-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "card-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-api": { + name: "carousel-api", + filePath: "examples/base/carousel-api.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-api") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-api" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-demo": { + name: "carousel-demo", + filePath: "examples/base/carousel-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-orientation": { + name: "carousel-orientation", + filePath: "examples/base/carousel-orientation.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-orientation") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-orientation" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-plugin": { + name: "carousel-plugin", + filePath: "examples/base/carousel-plugin.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-plugin") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-plugin" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-size": { + name: "carousel-size", + filePath: "examples/base/carousel-size.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-size" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-spacing": { + name: "carousel-spacing", + filePath: "examples/base/carousel-spacing.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-spacing") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-spacing" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-axis": { + name: "chart-bar-demo-axis", + filePath: "examples/base/chart-bar-demo-axis.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-bar-demo-axis") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-axis" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-grid": { + name: "chart-bar-demo-grid", + filePath: "examples/base/chart-bar-demo-grid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-bar-demo-grid") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-grid" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-legend": { + name: "chart-bar-demo-legend", + filePath: "examples/base/chart-bar-demo-legend.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-bar-demo-legend") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-legend" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-tooltip": { + name: "chart-bar-demo-tooltip", + filePath: "examples/base/chart-bar-demo-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-bar-demo-tooltip") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo": { + name: "chart-bar-demo", + filePath: "examples/base/chart-bar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-bar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-tooltip-demo": { + name: "chart-tooltip-demo", + filePath: "examples/base/chart-tooltip-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-tooltip-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-tooltip-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-demo": { + name: "checkbox-demo", + filePath: "examples/base/checkbox-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "checkbox-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-disabled": { + name: "checkbox-disabled", + filePath: "examples/base/checkbox-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "checkbox-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-with-text": { + name: "checkbox-with-text", + filePath: "examples/base/checkbox-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "checkbox-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "collapsible-demo": { + name: "collapsible-demo", + filePath: "examples/base/collapsible-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/collapsible-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "collapsible-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-demo": { + name: "combobox-demo", + filePath: "examples/base/combobox-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-dropdown-menu": { + name: "combobox-dropdown-menu", + filePath: "examples/base/combobox-dropdown-menu.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-dropdown-menu") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-dropdown-menu" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-popover": { + name: "combobox-popover", + filePath: "examples/base/combobox-popover.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-popover") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-popover" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-responsive": { + name: "combobox-responsive", + filePath: "examples/base/combobox-responsive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-responsive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-responsive" + return { default: mod.default || mod[exportName] } + }), + }, + "command-demo": { + name: "command-demo", + filePath: "examples/base/command-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/command-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "command-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "command-dialog": { + name: "command-dialog", + filePath: "examples/base/command-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/command-dialog") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "command-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-demo": { + name: "context-menu-demo", + filePath: "examples/base/context-menu-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "context-menu-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "data-table-demo": { + name: "data-table-demo", + filePath: "examples/base/data-table-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/data-table-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "data-table-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "date-picker-demo": { + name: "date-picker-demo", + filePath: "examples/base/date-picker-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/date-picker-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "date-picker-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "date-picker-with-presets": { + name: "date-picker-with-presets", + filePath: "examples/base/date-picker-with-presets.tsx", + component: React.lazy(async () => { + const mod = await import("./base/date-picker-with-presets") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "date-picker-with-presets" + return { default: mod.default || mod[exportName] } + }), + }, + "date-picker-with-range": { + name: "date-picker-with-range", + filePath: "examples/base/date-picker-with-range.tsx", + component: React.lazy(async () => { + const mod = await import("./base/date-picker-with-range") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "date-picker-with-range" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-close-button": { + name: "dialog-close-button", + filePath: "examples/base/dialog-close-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dialog-close-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dialog-close-button" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-demo": { + name: "dialog-demo", + filePath: "examples/base/dialog-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dialog-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dialog-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "drawer-demo": { + name: "drawer-demo", + filePath: "examples/base/drawer-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/drawer-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "drawer-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "drawer-dialog": { + name: "drawer-dialog", + filePath: "examples/base/drawer-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/drawer-dialog") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "drawer-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-checkboxes": { + name: "dropdown-menu-checkboxes", + filePath: "examples/base/dropdown-menu-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-checkboxes") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-demo": { + name: "dropdown-menu-demo", + filePath: "examples/base/dropdown-menu-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-dialog": { + name: "dropdown-menu-dialog", + filePath: "examples/base/dropdown-menu-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-dialog") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-radio-group": { + name: "dropdown-menu-radio-group", + filePath: "examples/base/dropdown-menu-radio-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-radio-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-radio-group" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-avatar-group": { + name: "empty-avatar-group", + filePath: "examples/base/empty-avatar-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-avatar-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-avatar-group" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-avatar": { + name: "empty-avatar", + filePath: "examples/base/empty-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-avatar") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-avatar" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-background": { + name: "empty-background", + filePath: "examples/base/empty-background.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-background") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-background" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-demo": { + name: "empty-demo", + filePath: "examples/base/empty-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-icon": { + name: "empty-icon", + filePath: "examples/base/empty-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-input-group": { + name: "empty-input-group", + filePath: "examples/base/empty-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-outline": { + name: "empty-outline", + filePath: "examples/base/empty-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "field-checkbox": { + name: "field-checkbox", + filePath: "examples/base/field-checkbox.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-checkbox") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-checkbox" + return { default: mod.default || mod[exportName] } + }), + }, + "field-choice-card": { + name: "field-choice-card", + filePath: "examples/base/field-choice-card.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-choice-card") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-choice-card" + return { default: mod.default || mod[exportName] } + }), + }, + "field-demo": { + name: "field-demo", + filePath: "examples/base/field-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "field-fieldset": { + name: "field-fieldset", + filePath: "examples/base/field-fieldset.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-fieldset") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-fieldset" + return { default: mod.default || mod[exportName] } + }), + }, + "field-group": { + name: "field-group", + filePath: "examples/base/field-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-group" + return { default: mod.default || mod[exportName] } + }), + }, + "field-input": { + name: "field-input", + filePath: "examples/base/field-input.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-input") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-input" + return { default: mod.default || mod[exportName] } + }), + }, + "field-radio": { + name: "field-radio", + filePath: "examples/base/field-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-radio") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "field-responsive": { + name: "field-responsive", + filePath: "examples/base/field-responsive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-responsive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-responsive" + return { default: mod.default || mod[exportName] } + }), + }, + "field-select": { + name: "field-select", + filePath: "examples/base/field-select.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-select") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-select" + return { default: mod.default || mod[exportName] } + }), + }, + "field-slider": { + name: "field-slider", + filePath: "examples/base/field-slider.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-slider") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-slider" + return { default: mod.default || mod[exportName] } + }), + }, + "field-switch": { + name: "field-switch", + filePath: "examples/base/field-switch.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-switch") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-switch" + return { default: mod.default || mod[exportName] } + }), + }, + "field-textarea": { + name: "field-textarea", + filePath: "examples/base/field-textarea.tsx", + component: React.lazy(async () => { + const mod = await import("./base/field-textarea") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-textarea" + return { default: mod.default || mod[exportName] } + }), + }, + "hover-card-demo": { + name: "hover-card-demo", + filePath: "examples/base/hover-card-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/hover-card-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "hover-card-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-demo": { + name: "input-demo", + filePath: "examples/base/input-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-disabled": { + name: "input-disabled", + filePath: "examples/base/input-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "input-file": { + name: "input-file", + filePath: "examples/base/input-file.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-file") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-file" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-button-group": { + name: "input-group-button-group", + filePath: "examples/base/input-group-button-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-button-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-button-group" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-button": { + name: "input-group-button", + filePath: "examples/base/input-group-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-button" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-custom": { + name: "input-group-custom", + filePath: "examples/base/input-group-custom.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-custom") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-custom" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-demo": { + name: "input-group-demo", + filePath: "examples/base/input-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-dropdown": { + name: "input-group-dropdown", + filePath: "examples/base/input-group-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-icon": { + name: "input-group-icon", + filePath: "examples/base/input-group-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-label": { + name: "input-group-label", + filePath: "examples/base/input-group-label.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-label") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-label" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-spinner": { + name: "input-group-spinner", + filePath: "examples/base/input-group-spinner.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-spinner") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-spinner" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-text": { + name: "input-group-text", + filePath: "examples/base/input-group-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-text" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-textarea": { + name: "input-group-textarea", + filePath: "examples/base/input-group-textarea.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-textarea") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-textarea" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-tooltip": { + name: "input-group-tooltip", + filePath: "examples/base/input-group-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-tooltip") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-controlled": { + name: "input-otp-controlled", + filePath: "examples/base/input-otp-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-controlled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-controlled" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-demo": { + name: "input-otp-demo", + filePath: "examples/base/input-otp-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-pattern": { + name: "input-otp-pattern", + filePath: "examples/base/input-otp-pattern.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-pattern") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-pattern" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-separator": { + name: "input-otp-separator", + filePath: "examples/base/input-otp-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-separator") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-button": { + name: "input-with-button", + filePath: "examples/base/input-with-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-with-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-with-button" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-label": { + name: "input-with-label", + filePath: "examples/base/input-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-with-label") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-text": { + name: "input-with-text", + filePath: "examples/base/input-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "item-avatar": { + name: "item-avatar", + filePath: "examples/base/item-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-avatar") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-avatar" + return { default: mod.default || mod[exportName] } + }), + }, + "item-demo": { + name: "item-demo", + filePath: "examples/base/item-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "item-dropdown": { + name: "item-dropdown", + filePath: "examples/base/item-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "item-group": { + name: "item-group", + filePath: "examples/base/item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "item-header": { + name: "item-header", + filePath: "examples/base/item-header.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-header") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-header" + return { default: mod.default || mod[exportName] } + }), + }, + "item-icon": { + name: "item-icon", + filePath: "examples/base/item-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "item-image": { + name: "item-image", + filePath: "examples/base/item-image.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-image") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-link": { + name: "item-link", + filePath: "examples/base/item-link.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-link") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-link" + return { default: mod.default || mod[exportName] } + }), + }, + "item-size": { + name: "item-size", + filePath: "examples/base/item-size.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-size" + return { default: mod.default || mod[exportName] } + }), + }, + "item-variant": { + name: "item-variant", + filePath: "examples/base/item-variant.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-variant") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-variant" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-button": { + name: "kbd-button", + filePath: "examples/base/kbd-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-button" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-demo": { + name: "kbd-demo", + filePath: "examples/base/kbd-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-group": { + name: "kbd-group", + filePath: "examples/base/kbd-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-group" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-input-group": { + name: "kbd-input-group", + filePath: "examples/base/kbd-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-tooltip": { + name: "kbd-tooltip", + filePath: "examples/base/kbd-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-tooltip") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "label-demo": { + name: "label-demo", + filePath: "examples/base/label-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/label-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "label-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-demo": { + name: "menubar-demo", + filePath: "examples/base/menubar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "menubar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-demo": { + name: "native-select-demo", + filePath: "examples/base/native-select-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-disabled": { + name: "native-select-disabled", + filePath: "examples/base/native-select-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-groups": { + name: "native-select-groups", + filePath: "examples/base/native-select-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-groups") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-invalid": { + name: "native-select-invalid", + filePath: "examples/base/native-select-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-invalid") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "navigation-menu-demo": { + name: "navigation-menu-demo", + filePath: "examples/base/navigation-menu-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/navigation-menu-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "navigation-menu-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "pagination-demo": { + name: "pagination-demo", + filePath: "examples/base/pagination-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/pagination-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "pagination-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-demo": { + name: "popover-demo", + filePath: "examples/base/popover-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/popover-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "popover-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "progress-demo": { + name: "progress-demo", + filePath: "examples/base/progress-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/progress-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "progress-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-demo": { + name: "radio-group-demo", + filePath: "examples/base/radio-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "radio-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-demo-with-handle": { + name: "resizable-demo-with-handle", + filePath: "examples/base/resizable-demo-with-handle.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-demo-with-handle") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-demo-with-handle" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-demo": { + name: "resizable-demo", + filePath: "examples/base/resizable-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-handle": { + name: "resizable-handle", + filePath: "examples/base/resizable-handle.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-handle") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-handle" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-vertical": { + name: "resizable-vertical", + filePath: "examples/base/resizable-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-vertical") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "scroll-area-demo": { + name: "scroll-area-demo", + filePath: "examples/base/scroll-area-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/scroll-area-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "scroll-area-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "scroll-area-horizontal-demo": { + name: "scroll-area-horizontal-demo", + filePath: "examples/base/scroll-area-horizontal-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/scroll-area-horizontal-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "scroll-area-horizontal-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "select-demo": { + name: "select-demo", + filePath: "examples/base/select-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "select-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "select-scrollable": { + name: "select-scrollable", + filePath: "examples/base/select-scrollable.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-scrollable") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "select-scrollable" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-demo": { + name: "separator-demo", + filePath: "examples/base/separator-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/separator-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "separator-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sheet-demo": { + name: "sheet-demo", + filePath: "examples/base/sheet-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sheet-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sheet-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sheet-side": { + name: "sheet-side", + filePath: "examples/base/sheet-side.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sheet-side") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sheet-side" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-card": { + name: "skeleton-card", + filePath: "examples/base/skeleton-card.tsx", + component: React.lazy(async () => { + const mod = await import("./base/skeleton-card") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "skeleton-card" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-demo": { + name: "skeleton-demo", + filePath: "examples/base/skeleton-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/skeleton-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "skeleton-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-demo": { + name: "slider-demo", + filePath: "examples/base/slider-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "slider-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-demo": { + name: "sonner-demo", + filePath: "examples/base/sonner-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sonner-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sonner-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-types": { + name: "sonner-types", + filePath: "examples/base/sonner-types.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sonner-types") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sonner-types" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-badge": { + name: "spinner-badge", + filePath: "examples/base/spinner-badge.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-badge") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-badge" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-basic": { + name: "spinner-basic", + filePath: "examples/base/spinner-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-basic") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-button": { + name: "spinner-button", + filePath: "examples/base/spinner-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-button" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-color": { + name: "spinner-color", + filePath: "examples/base/spinner-color.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-color") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-color" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-custom": { + name: "spinner-custom", + filePath: "examples/base/spinner-custom.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-custom") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-custom" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-demo": { + name: "spinner-demo", + filePath: "examples/base/spinner-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-empty": { + name: "spinner-empty", + filePath: "examples/base/spinner-empty.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-empty") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-empty" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-input-group": { + name: "spinner-input-group", + filePath: "examples/base/spinner-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-item": { + name: "spinner-item", + filePath: "examples/base/spinner-item.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-item") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-item" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-size": { + name: "spinner-size", + filePath: "examples/base/spinner-size.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-size" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-demo": { + name: "switch-demo", + filePath: "examples/base/switch-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/switch-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "switch-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "table-demo": { + name: "table-demo", + filePath: "examples/base/table-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "table-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-demo": { + name: "tabs-demo", + filePath: "examples/base/tabs-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "tabs-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-demo": { + name: "textarea-demo", + filePath: "examples/base/textarea-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-disabled": { + name: "textarea-disabled", + filePath: "examples/base/textarea-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-with-button": { + name: "textarea-with-button", + filePath: "examples/base/textarea-with-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-with-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-with-button" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-with-label": { + name: "textarea-with-label", + filePath: "examples/base/textarea-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-with-label") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-with-text": { + name: "textarea-with-text", + filePath: "examples/base/textarea-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-demo": { + name: "toggle-demo", + filePath: "examples/base/toggle-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-disabled": { + name: "toggle-disabled", + filePath: "examples/base/toggle-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-demo": { + name: "toggle-group-demo", + filePath: "examples/base/toggle-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-disabled": { + name: "toggle-group-disabled", + filePath: "examples/base/toggle-group-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-lg": { + name: "toggle-group-lg", + filePath: "examples/base/toggle-group-lg.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-lg") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-lg" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-outline": { + name: "toggle-group-outline", + filePath: "examples/base/toggle-group-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-single": { + name: "toggle-group-single", + filePath: "examples/base/toggle-group-single.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-single") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-single" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-sm": { + name: "toggle-group-sm", + filePath: "examples/base/toggle-group-sm.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-sm") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-sm" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-spacing": { + name: "toggle-group-spacing", + filePath: "examples/base/toggle-group-spacing.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-spacing") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-spacing" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-lg": { + name: "toggle-lg", + filePath: "examples/base/toggle-lg.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-lg") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-lg" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-outline": { + name: "toggle-outline", + filePath: "examples/base/toggle-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-sm": { + name: "toggle-sm", + filePath: "examples/base/toggle-sm.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-sm") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-sm" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-text": { + name: "toggle-with-text", + filePath: "examples/base/toggle-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-demo": { + name: "tooltip-demo", + filePath: "examples/base/tooltip-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "tooltip-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-blockquote": { + name: "typography-blockquote", + filePath: "examples/base/typography-blockquote.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-blockquote") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-blockquote" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-demo": { + name: "typography-demo", + filePath: "examples/base/typography-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h1": { + name: "typography-h1", + filePath: "examples/base/typography-h1.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-h1") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h1" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h2": { + name: "typography-h2", + filePath: "examples/base/typography-h2.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-h2") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h2" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h3": { + name: "typography-h3", + filePath: "examples/base/typography-h3.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-h3") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h3" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h4": { + name: "typography-h4", + filePath: "examples/base/typography-h4.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-h4") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h4" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-inline-code": { + name: "typography-inline-code", + filePath: "examples/base/typography-inline-code.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-inline-code") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-inline-code" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-large": { + name: "typography-large", + filePath: "examples/base/typography-large.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-large") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-large" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-lead": { + name: "typography-lead", + filePath: "examples/base/typography-lead.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-lead") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-lead" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-list": { + name: "typography-list", + filePath: "examples/base/typography-list.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-list") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-list" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-muted": { + name: "typography-muted", + filePath: "examples/base/typography-muted.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-muted") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-muted" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-p": { + name: "typography-p", + filePath: "examples/base/typography-p.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-p") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-p" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-small": { + name: "typography-small", + filePath: "examples/base/typography-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-small") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-small" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-table": { + name: "typography-table", + filePath: "examples/base/typography-table.tsx", + component: React.lazy(async () => { + const mod = await import("./base/typography-table") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-table" + return { default: mod.default || mod[exportName] } + }), + }, + }, + "radix": { + "accordion-borders": { + name: "accordion-borders", + filePath: "examples/radix/accordion-borders.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-borders") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-borders" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-card": { + name: "accordion-card", + filePath: "examples/radix/accordion-card.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-card") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-card" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-demo": { + name: "accordion-demo", + filePath: "examples/radix/accordion-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-disabled": { + name: "accordion-disabled", + filePath: "examples/radix/accordion-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-multiple": { + name: "accordion-multiple", + filePath: "examples/radix/accordion-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-multiple") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "accordion-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-demo": { + name: "alert-demo", + filePath: "examples/radix/alert-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "alert-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-destructive": { + name: "alert-destructive", + filePath: "examples/radix/alert-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-destructive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "alert-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-demo": { + name: "alert-dialog-demo", + filePath: "examples/radix/alert-dialog-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-dialog-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "alert-dialog-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio-demo": { + name: "aspect-ratio-demo", + filePath: "examples/radix/aspect-ratio-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/aspect-ratio-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "aspect-ratio-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-demo": { + name: "avatar-demo", + filePath: "examples/radix/avatar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "avatar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-demo": { + name: "badge-demo", + filePath: "examples/radix/badge-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-destructive": { + name: "badge-destructive", + filePath: "examples/radix/badge-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-destructive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-outline": { + name: "badge-outline", + filePath: "examples/radix/badge-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-secondary": { + name: "badge-secondary", + filePath: "examples/radix/badge-secondary.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-secondary") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "badge-secondary" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-demo": { + name: "breadcrumb-demo", + filePath: "examples/radix/breadcrumb-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-dropdown": { + name: "breadcrumb-dropdown", + filePath: "examples/radix/breadcrumb-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-ellipsis": { + name: "breadcrumb-ellipsis", + filePath: "examples/radix/breadcrumb-ellipsis.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-ellipsis") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-ellipsis" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-link": { + name: "breadcrumb-link", + filePath: "examples/radix/breadcrumb-link.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-link") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-link" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-responsive": { + name: "breadcrumb-responsive", + filePath: "examples/radix/breadcrumb-responsive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-responsive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-responsive" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-separator": { + name: "breadcrumb-separator", + filePath: "examples/radix/breadcrumb-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-separator") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "breadcrumb-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "button-as-child": { + name: "button-as-child", + filePath: "examples/radix/button-as-child.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-as-child") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-as-child" + return { default: mod.default || mod[exportName] } + }), + }, + "button-default": { + name: "button-default", + filePath: "examples/radix/button-default.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-default") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-default" + return { default: mod.default || mod[exportName] } + }), + }, + "button-demo": { + name: "button-demo", + filePath: "examples/radix/button-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "button-destructive": { + name: "button-destructive", + filePath: "examples/radix/button-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-destructive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "button-ghost": { + name: "button-ghost", + filePath: "examples/radix/button-ghost.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-ghost") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-ghost" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-demo": { + name: "button-group-demo", + filePath: "examples/radix/button-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-dropdown": { + name: "button-group-dropdown", + filePath: "examples/radix/button-group-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-input-group": { + name: "button-group-input-group", + filePath: "examples/radix/button-group-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-input": { + name: "button-group-input", + filePath: "examples/radix/button-group-input.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-input") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-input" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-nested": { + name: "button-group-nested", + filePath: "examples/radix/button-group-nested.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-nested") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-nested" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-orientation": { + name: "button-group-orientation", + filePath: "examples/radix/button-group-orientation.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-orientation") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-orientation" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-popover": { + name: "button-group-popover", + filePath: "examples/radix/button-group-popover.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-popover") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-popover" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-select": { + name: "button-group-select", + filePath: "examples/radix/button-group-select.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-select") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-select" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-separator": { + name: "button-group-separator", + filePath: "examples/radix/button-group-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-separator") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-size": { + name: "button-group-size", + filePath: "examples/radix/button-group-size.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-size" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-split": { + name: "button-group-split", + filePath: "examples/radix/button-group-split.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-split") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-group-split" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon": { + name: "button-icon", + filePath: "examples/radix/button-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "button-link": { + name: "button-link", + filePath: "examples/radix/button-link.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-link") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-link" + return { default: mod.default || mod[exportName] } + }), + }, + "button-loading": { + name: "button-loading", + filePath: "examples/radix/button-loading.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-loading") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-loading" + return { default: mod.default || mod[exportName] } + }), + }, + "button-outline": { + name: "button-outline", + filePath: "examples/radix/button-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "button-rounded": { + name: "button-rounded", + filePath: "examples/radix/button-rounded.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-rounded") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-rounded" + return { default: mod.default || mod[exportName] } + }), + }, + "button-secondary": { + name: "button-secondary", + filePath: "examples/radix/button-secondary.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-secondary") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-secondary" + return { default: mod.default || mod[exportName] } + }), + }, + "button-size": { + name: "button-size", + filePath: "examples/radix/button-size.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-size" + return { default: mod.default || mod[exportName] } + }), + }, + "button-with-icon": { + name: "button-with-icon", + filePath: "examples/radix/button-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-with-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "button-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-demo": { + name: "calendar-demo", + filePath: "examples/radix/calendar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "calendar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-hijri": { + name: "calendar-hijri", + filePath: "examples/radix/calendar-hijri.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-hijri") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "calendar-hijri" + return { default: mod.default || mod[exportName] } + }), + }, + "card-demo": { + name: "card-demo", + filePath: "examples/radix/card-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "card-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-api": { + name: "carousel-api", + filePath: "examples/radix/carousel-api.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-api") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-api" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-demo": { + name: "carousel-demo", + filePath: "examples/radix/carousel-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-orientation": { + name: "carousel-orientation", + filePath: "examples/radix/carousel-orientation.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-orientation") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-orientation" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-plugin": { + name: "carousel-plugin", + filePath: "examples/radix/carousel-plugin.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-plugin") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-plugin" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-size": { + name: "carousel-size", + filePath: "examples/radix/carousel-size.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-size" + return { default: mod.default || mod[exportName] } + }), + }, + "carousel-spacing": { + name: "carousel-spacing", + filePath: "examples/radix/carousel-spacing.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-spacing") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "carousel-spacing" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-axis": { + name: "chart-bar-demo-axis", + filePath: "examples/radix/chart-bar-demo-axis.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-bar-demo-axis") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-axis" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-grid": { + name: "chart-bar-demo-grid", + filePath: "examples/radix/chart-bar-demo-grid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-bar-demo-grid") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-grid" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-legend": { + name: "chart-bar-demo-legend", + filePath: "examples/radix/chart-bar-demo-legend.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-bar-demo-legend") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-legend" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo-tooltip": { + name: "chart-bar-demo-tooltip", + filePath: "examples/radix/chart-bar-demo-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-bar-demo-tooltip") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-bar-demo": { + name: "chart-bar-demo", + filePath: "examples/radix/chart-bar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-bar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-bar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-tooltip-demo": { + name: "chart-tooltip-demo", + filePath: "examples/radix/chart-tooltip-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-tooltip-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "chart-tooltip-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-demo": { + name: "checkbox-demo", + filePath: "examples/radix/checkbox-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "checkbox-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-disabled": { + name: "checkbox-disabled", + filePath: "examples/radix/checkbox-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "checkbox-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-with-text": { + name: "checkbox-with-text", + filePath: "examples/radix/checkbox-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "checkbox-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "collapsible-demo": { + name: "collapsible-demo", + filePath: "examples/radix/collapsible-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/collapsible-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "collapsible-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-demo": { + name: "combobox-demo", + filePath: "examples/radix/combobox-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-dropdown-menu": { + name: "combobox-dropdown-menu", + filePath: "examples/radix/combobox-dropdown-menu.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-dropdown-menu") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-dropdown-menu" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-popover": { + name: "combobox-popover", + filePath: "examples/radix/combobox-popover.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-popover") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-popover" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-responsive": { + name: "combobox-responsive", + filePath: "examples/radix/combobox-responsive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-responsive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "combobox-responsive" + return { default: mod.default || mod[exportName] } + }), + }, + "command-demo": { + name: "command-demo", + filePath: "examples/radix/command-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/command-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "command-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "command-dialog": { + name: "command-dialog", + filePath: "examples/radix/command-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/command-dialog") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "command-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-demo": { + name: "context-menu-demo", + filePath: "examples/radix/context-menu-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "context-menu-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "data-table-demo": { + name: "data-table-demo", + filePath: "examples/radix/data-table-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/data-table-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "data-table-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "date-picker-demo": { + name: "date-picker-demo", + filePath: "examples/radix/date-picker-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/date-picker-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "date-picker-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "date-picker-with-presets": { + name: "date-picker-with-presets", + filePath: "examples/radix/date-picker-with-presets.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/date-picker-with-presets") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "date-picker-with-presets" + return { default: mod.default || mod[exportName] } + }), + }, + "date-picker-with-range": { + name: "date-picker-with-range", + filePath: "examples/radix/date-picker-with-range.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/date-picker-with-range") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "date-picker-with-range" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-close-button": { + name: "dialog-close-button", + filePath: "examples/radix/dialog-close-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dialog-close-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dialog-close-button" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-demo": { + name: "dialog-demo", + filePath: "examples/radix/dialog-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dialog-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dialog-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "drawer-demo": { + name: "drawer-demo", + filePath: "examples/radix/drawer-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/drawer-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "drawer-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "drawer-dialog": { + name: "drawer-dialog", + filePath: "examples/radix/drawer-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/drawer-dialog") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "drawer-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-checkboxes": { + name: "dropdown-menu-checkboxes", + filePath: "examples/radix/dropdown-menu-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-checkboxes") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-demo": { + name: "dropdown-menu-demo", + filePath: "examples/radix/dropdown-menu-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-dialog": { + name: "dropdown-menu-dialog", + filePath: "examples/radix/dropdown-menu-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-dialog") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-radio-group": { + name: "dropdown-menu-radio-group", + filePath: "examples/radix/dropdown-menu-radio-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-radio-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "dropdown-menu-radio-group" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-avatar-group": { + name: "empty-avatar-group", + filePath: "examples/radix/empty-avatar-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-avatar-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-avatar-group" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-avatar": { + name: "empty-avatar", + filePath: "examples/radix/empty-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-avatar") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-avatar" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-background": { + name: "empty-background", + filePath: "examples/radix/empty-background.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-background") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-background" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-demo": { + name: "empty-demo", + filePath: "examples/radix/empty-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-icon": { + name: "empty-icon", + filePath: "examples/radix/empty-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-input-group": { + name: "empty-input-group", + filePath: "examples/radix/empty-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-outline": { + name: "empty-outline", + filePath: "examples/radix/empty-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "empty-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "field-checkbox": { + name: "field-checkbox", + filePath: "examples/radix/field-checkbox.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-checkbox") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-checkbox" + return { default: mod.default || mod[exportName] } + }), + }, + "field-choice-card": { + name: "field-choice-card", + filePath: "examples/radix/field-choice-card.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-choice-card") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-choice-card" + return { default: mod.default || mod[exportName] } + }), + }, + "field-demo": { + name: "field-demo", + filePath: "examples/radix/field-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "field-fieldset": { + name: "field-fieldset", + filePath: "examples/radix/field-fieldset.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-fieldset") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-fieldset" + return { default: mod.default || mod[exportName] } + }), + }, + "field-group": { + name: "field-group", + filePath: "examples/radix/field-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-group" + return { default: mod.default || mod[exportName] } + }), + }, + "field-input": { + name: "field-input", + filePath: "examples/radix/field-input.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-input") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-input" + return { default: mod.default || mod[exportName] } + }), + }, + "field-radio": { + name: "field-radio", + filePath: "examples/radix/field-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-radio") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "field-responsive": { + name: "field-responsive", + filePath: "examples/radix/field-responsive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-responsive") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-responsive" + return { default: mod.default || mod[exportName] } + }), + }, + "field-select": { + name: "field-select", + filePath: "examples/radix/field-select.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-select") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-select" + return { default: mod.default || mod[exportName] } + }), + }, + "field-slider": { + name: "field-slider", + filePath: "examples/radix/field-slider.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-slider") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-slider" + return { default: mod.default || mod[exportName] } + }), + }, + "field-switch": { + name: "field-switch", + filePath: "examples/radix/field-switch.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-switch") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-switch" + return { default: mod.default || mod[exportName] } + }), + }, + "field-textarea": { + name: "field-textarea", + filePath: "examples/radix/field-textarea.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/field-textarea") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "field-textarea" + return { default: mod.default || mod[exportName] } + }), + }, + "hover-card-demo": { + name: "hover-card-demo", + filePath: "examples/radix/hover-card-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/hover-card-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "hover-card-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-demo": { + name: "input-demo", + filePath: "examples/radix/input-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-disabled": { + name: "input-disabled", + filePath: "examples/radix/input-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "input-file": { + name: "input-file", + filePath: "examples/radix/input-file.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-file") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-file" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-button-group": { + name: "input-group-button-group", + filePath: "examples/radix/input-group-button-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-button-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-button-group" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-button": { + name: "input-group-button", + filePath: "examples/radix/input-group-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-button" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-custom": { + name: "input-group-custom", + filePath: "examples/radix/input-group-custom.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-custom") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-custom" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-demo": { + name: "input-group-demo", + filePath: "examples/radix/input-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-dropdown": { + name: "input-group-dropdown", + filePath: "examples/radix/input-group-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-icon": { + name: "input-group-icon", + filePath: "examples/radix/input-group-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-label": { + name: "input-group-label", + filePath: "examples/radix/input-group-label.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-label") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-label" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-spinner": { + name: "input-group-spinner", + filePath: "examples/radix/input-group-spinner.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-spinner") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-spinner" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-text": { + name: "input-group-text", + filePath: "examples/radix/input-group-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-text" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-textarea": { + name: "input-group-textarea", + filePath: "examples/radix/input-group-textarea.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-textarea") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-textarea" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-tooltip": { + name: "input-group-tooltip", + filePath: "examples/radix/input-group-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-tooltip") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-group-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-controlled": { + name: "input-otp-controlled", + filePath: "examples/radix/input-otp-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-controlled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-controlled" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-demo": { + name: "input-otp-demo", + filePath: "examples/radix/input-otp-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-pattern": { + name: "input-otp-pattern", + filePath: "examples/radix/input-otp-pattern.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-pattern") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-pattern" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-separator": { + name: "input-otp-separator", + filePath: "examples/radix/input-otp-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-separator") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-otp-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-button": { + name: "input-with-button", + filePath: "examples/radix/input-with-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-with-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-with-button" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-label": { + name: "input-with-label", + filePath: "examples/radix/input-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-with-label") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-text": { + name: "input-with-text", + filePath: "examples/radix/input-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "input-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "item-avatar": { + name: "item-avatar", + filePath: "examples/radix/item-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-avatar") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-avatar" + return { default: mod.default || mod[exportName] } + }), + }, + "item-demo": { + name: "item-demo", + filePath: "examples/radix/item-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "item-dropdown": { + name: "item-dropdown", + filePath: "examples/radix/item-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-dropdown") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "item-group": { + name: "item-group", + filePath: "examples/radix/item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "item-header": { + name: "item-header", + filePath: "examples/radix/item-header.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-header") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-header" + return { default: mod.default || mod[exportName] } + }), + }, + "item-icon": { + name: "item-icon", + filePath: "examples/radix/item-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-icon") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "item-image": { + name: "item-image", + filePath: "examples/radix/item-image.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-image") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-link": { + name: "item-link", + filePath: "examples/radix/item-link.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-link") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-link" + return { default: mod.default || mod[exportName] } + }), + }, + "item-size": { + name: "item-size", + filePath: "examples/radix/item-size.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-size" + return { default: mod.default || mod[exportName] } + }), + }, + "item-variant": { + name: "item-variant", + filePath: "examples/radix/item-variant.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-variant") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "item-variant" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-button": { + name: "kbd-button", + filePath: "examples/radix/kbd-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-button" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-demo": { + name: "kbd-demo", + filePath: "examples/radix/kbd-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-group": { + name: "kbd-group", + filePath: "examples/radix/kbd-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-group" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-input-group": { + name: "kbd-input-group", + filePath: "examples/radix/kbd-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-tooltip": { + name: "kbd-tooltip", + filePath: "examples/radix/kbd-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-tooltip") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "kbd-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "label-demo": { + name: "label-demo", + filePath: "examples/radix/label-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/label-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "label-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-demo": { + name: "menubar-demo", + filePath: "examples/radix/menubar-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "menubar-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-demo": { + name: "native-select-demo", + filePath: "examples/radix/native-select-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-disabled": { + name: "native-select-disabled", + filePath: "examples/radix/native-select-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-groups": { + name: "native-select-groups", + filePath: "examples/radix/native-select-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-groups") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-invalid": { + name: "native-select-invalid", + filePath: "examples/radix/native-select-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-invalid") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "native-select-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "navigation-menu-demo": { + name: "navigation-menu-demo", + filePath: "examples/radix/navigation-menu-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/navigation-menu-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "navigation-menu-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "pagination-demo": { + name: "pagination-demo", + filePath: "examples/radix/pagination-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/pagination-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "pagination-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-demo": { + name: "popover-demo", + filePath: "examples/radix/popover-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/popover-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "popover-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "progress-demo": { + name: "progress-demo", + filePath: "examples/radix/progress-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/progress-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "progress-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-demo": { + name: "radio-group-demo", + filePath: "examples/radix/radio-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "radio-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-demo-with-handle": { + name: "resizable-demo-with-handle", + filePath: "examples/radix/resizable-demo-with-handle.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-demo-with-handle") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-demo-with-handle" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-demo": { + name: "resizable-demo", + filePath: "examples/radix/resizable-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-handle": { + name: "resizable-handle", + filePath: "examples/radix/resizable-handle.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-handle") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-handle" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-vertical": { + name: "resizable-vertical", + filePath: "examples/radix/resizable-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-vertical") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "resizable-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "scroll-area-demo": { + name: "scroll-area-demo", + filePath: "examples/radix/scroll-area-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/scroll-area-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "scroll-area-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "scroll-area-horizontal-demo": { + name: "scroll-area-horizontal-demo", + filePath: "examples/radix/scroll-area-horizontal-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/scroll-area-horizontal-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "scroll-area-horizontal-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "select-demo": { + name: "select-demo", + filePath: "examples/radix/select-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "select-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "select-scrollable": { + name: "select-scrollable", + filePath: "examples/radix/select-scrollable.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-scrollable") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "select-scrollable" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-demo": { + name: "separator-demo", + filePath: "examples/radix/separator-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/separator-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "separator-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sheet-demo": { + name: "sheet-demo", + filePath: "examples/radix/sheet-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sheet-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sheet-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sheet-side": { + name: "sheet-side", + filePath: "examples/radix/sheet-side.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sheet-side") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sheet-side" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-card": { + name: "skeleton-card", + filePath: "examples/radix/skeleton-card.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/skeleton-card") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "skeleton-card" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-demo": { + name: "skeleton-demo", + filePath: "examples/radix/skeleton-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/skeleton-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "skeleton-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-demo": { + name: "slider-demo", + filePath: "examples/radix/slider-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "slider-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-demo": { + name: "sonner-demo", + filePath: "examples/radix/sonner-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sonner-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sonner-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-types": { + name: "sonner-types", + filePath: "examples/radix/sonner-types.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sonner-types") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "sonner-types" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-badge": { + name: "spinner-badge", + filePath: "examples/radix/spinner-badge.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-badge") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-badge" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-basic": { + name: "spinner-basic", + filePath: "examples/radix/spinner-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-basic") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-button": { + name: "spinner-button", + filePath: "examples/radix/spinner-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-button" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-color": { + name: "spinner-color", + filePath: "examples/radix/spinner-color.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-color") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-color" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-custom": { + name: "spinner-custom", + filePath: "examples/radix/spinner-custom.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-custom") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-custom" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-demo": { + name: "spinner-demo", + filePath: "examples/radix/spinner-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-empty": { + name: "spinner-empty", + filePath: "examples/radix/spinner-empty.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-empty") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-empty" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-input-group": { + name: "spinner-input-group", + filePath: "examples/radix/spinner-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-input-group") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-item": { + name: "spinner-item", + filePath: "examples/radix/spinner-item.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-item") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-item" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-size": { + name: "spinner-size", + filePath: "examples/radix/spinner-size.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-size") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "spinner-size" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-demo": { + name: "switch-demo", + filePath: "examples/radix/switch-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/switch-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "switch-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "table-demo": { + name: "table-demo", + filePath: "examples/radix/table-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "table-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-demo": { + name: "tabs-demo", + filePath: "examples/radix/tabs-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "tabs-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-demo": { + name: "textarea-demo", + filePath: "examples/radix/textarea-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-disabled": { + name: "textarea-disabled", + filePath: "examples/radix/textarea-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-with-button": { + name: "textarea-with-button", + filePath: "examples/radix/textarea-with-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-with-button") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-with-button" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-with-label": { + name: "textarea-with-label", + filePath: "examples/radix/textarea-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-with-label") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-with-text": { + name: "textarea-with-text", + filePath: "examples/radix/textarea-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "textarea-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-demo": { + name: "toggle-demo", + filePath: "examples/radix/toggle-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-disabled": { + name: "toggle-disabled", + filePath: "examples/radix/toggle-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-demo": { + name: "toggle-group-demo", + filePath: "examples/radix/toggle-group-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-disabled": { + name: "toggle-group-disabled", + filePath: "examples/radix/toggle-group-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-disabled") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-lg": { + name: "toggle-group-lg", + filePath: "examples/radix/toggle-group-lg.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-lg") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-lg" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-outline": { + name: "toggle-group-outline", + filePath: "examples/radix/toggle-group-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-single": { + name: "toggle-group-single", + filePath: "examples/radix/toggle-group-single.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-single") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-single" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-sm": { + name: "toggle-group-sm", + filePath: "examples/radix/toggle-group-sm.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-sm") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-sm" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-spacing": { + name: "toggle-group-spacing", + filePath: "examples/radix/toggle-group-spacing.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-spacing") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-group-spacing" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-lg": { + name: "toggle-lg", + filePath: "examples/radix/toggle-lg.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-lg") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-lg" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-outline": { + name: "toggle-outline", + filePath: "examples/radix/toggle-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-outline") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-sm": { + name: "toggle-sm", + filePath: "examples/radix/toggle-sm.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-sm") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-sm" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-text": { + name: "toggle-with-text", + filePath: "examples/radix/toggle-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-with-text") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "toggle-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-demo": { + name: "tooltip-demo", + filePath: "examples/radix/tooltip-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "tooltip-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-blockquote": { + name: "typography-blockquote", + filePath: "examples/radix/typography-blockquote.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-blockquote") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-blockquote" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-demo": { + name: "typography-demo", + filePath: "examples/radix/typography-demo.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-demo") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-demo" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h1": { + name: "typography-h1", + filePath: "examples/radix/typography-h1.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-h1") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h1" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h2": { + name: "typography-h2", + filePath: "examples/radix/typography-h2.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-h2") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h2" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h3": { + name: "typography-h3", + filePath: "examples/radix/typography-h3.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-h3") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h3" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-h4": { + name: "typography-h4", + filePath: "examples/radix/typography-h4.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-h4") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-h4" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-inline-code": { + name: "typography-inline-code", + filePath: "examples/radix/typography-inline-code.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-inline-code") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-inline-code" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-large": { + name: "typography-large", + filePath: "examples/radix/typography-large.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-large") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-large" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-lead": { + name: "typography-lead", + filePath: "examples/radix/typography-lead.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-lead") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-lead" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-list": { + name: "typography-list", + filePath: "examples/radix/typography-list.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-list") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-list" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-muted": { + name: "typography-muted", + filePath: "examples/radix/typography-muted.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-muted") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-muted" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-p": { + name: "typography-p", + filePath: "examples/radix/typography-p.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-p") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-p" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-small": { + name: "typography-small", + filePath: "examples/radix/typography-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-small") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-small" + return { default: mod.default || mod[exportName] } + }), + }, + "typography-table": { + name: "typography-table", + filePath: "examples/radix/typography-table.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/typography-table") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || "typography-table" + return { default: mod.default || mod[exportName] } + }), + }, + }, +} diff --git a/apps/v4/examples/base/accordion-borders.tsx b/apps/v4/examples/base/accordion-borders.tsx new file mode 100644 index 0000000000..71f55504e0 --- /dev/null +++ b/apps/v4/examples/base/accordion-borders.tsx @@ -0,0 +1,46 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" + +export default function AccordionBorders() { + return ( + + + How does billing work? + + We offer monthly and annual subscription plans. Billing is charged at + the beginning of each cycle, and you can cancel anytime. All plans + include automatic backups, 24/7 support, and unlimited team members. + + + + Is my data secure? + + Yes. We use end-to-end encryption, SOC 2 Type II compliance, and + regular third-party security audits. All data is encrypted at rest and + in transit using industry-standard protocols. + + + + What integrations do you support? + + We integrate with 500+ popular tools including Slack, Zapier, + Salesforce, HubSpot, and more. You can also build custom integrations + using our REST API and webhooks. + + + + ) +} diff --git a/apps/v4/examples/base/accordion-card.tsx b/apps/v4/examples/base/accordion-card.tsx new file mode 100644 index 0000000000..569cdf8523 --- /dev/null +++ b/apps/v4/examples/base/accordion-card.tsx @@ -0,0 +1,60 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" + +export default function AccordionCard() { + return ( + + + Subscription & Billing + + Common questions about your account, plans, and payments + + + + + + + What subscription plans do you offer? + + + We offer three subscription tiers: Starter ($9/month), + Professional ($29/month), and Enterprise ($99/month). Each plan + includes increasing storage limits, API access, priority support, + and team collaboration features. + + + + How does billing work? + + Billing occurs automatically at the start of each billing cycle. + We accept all major credit cards, PayPal, and ACH transfers for + enterprise customers. You'll receive an invoice via email + after each payment. + + + + + How do I cancel my subscription? + + + You can cancel your subscription anytime from your account + settings. There are no cancellation fees or penalties. Your access + will continue until the end of your current billing period. + + + + + + ) +} diff --git a/apps/v4/examples/base/accordion-demo.tsx b/apps/v4/examples/base/accordion-demo.tsx new file mode 100644 index 0000000000..486feb75dc --- /dev/null +++ b/apps/v4/examples/base/accordion-demo.tsx @@ -0,0 +1,33 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" + +export default function AccordionDemo() { + return ( + + + Is it accessible? + + Yes. It adheres to the WAI-ARIA design pattern. + + + + Is it styled? + + Yes. It comes with default styles that matches the other + components' aesthetic. + + + + Is it animated? + + Yes. It's animated by default, but you can disable it if you + prefer. + + + + ) +} diff --git a/apps/v4/examples/base/accordion-disabled.tsx b/apps/v4/examples/base/accordion-disabled.tsx new file mode 100644 index 0000000000..26a3fe12b4 --- /dev/null +++ b/apps/v4/examples/base/accordion-disabled.tsx @@ -0,0 +1,36 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" + +export default function AccordionDisabled() { + return ( + + + Can I access my account history? + + Yes, you can view your complete account history including all + transactions, plan changes, and support tickets in the Account History + section of your dashboard. + + + + Premium feature information + + This section contains information about premium features. Upgrade your + plan to access this content. + + + + How do I update my email address? + + You can update your email address in your account settings. + You'll receive a verification email at your new address to + confirm the change. + + + + ) +} diff --git a/apps/v4/examples/base/accordion-multiple.tsx b/apps/v4/examples/base/accordion-multiple.tsx new file mode 100644 index 0000000000..8cda0015b5 --- /dev/null +++ b/apps/v4/examples/base/accordion-multiple.tsx @@ -0,0 +1,46 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" + +export default function AccordionMultiple() { + return ( + + + + What are the key considerations when implementing a comprehensive + enterprise-level authentication system? + + + Implementing a robust enterprise authentication system requires + careful consideration of multiple factors. This includes secure + password hashing and storage, multi-factor authentication (MFA) + implementation, session management, OAuth2 and SSO integration, + regular security audits, rate limiting to prevent brute force attacks, + and maintaining detailed audit logs. Additionally, you'll need to + consider scalability, performance impact, and compliance with relevant + data protection regulations such as GDPR or HIPAA. + + + + + How does modern distributed system architecture handle eventual + consistency and data synchronization across multiple regions? + + + Modern distributed systems employ various strategies to maintain data + consistency across regions. This often involves using techniques like + CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip + protocols. Systems might implement event sourcing patterns, utilize + message queues for asynchronous updates, and employ sophisticated + conflict resolution strategies. Popular solutions like Amazon's + DynamoDB and Google's Spanner demonstrate different approaches to + solving these challenges, balancing between consistency, availability, + and partition tolerance as described in the CAP theorem. + + + + ) +} diff --git a/apps/v4/examples/base/alert-demo.tsx b/apps/v4/examples/base/alert-demo.tsx new file mode 100644 index 0000000000..e0229b5587 --- /dev/null +++ b/apps/v4/examples/base/alert-demo.tsx @@ -0,0 +1,34 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" +import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react" + +export default function AlertDemo() { + return ( +
+ + + Success! Your changes have been saved + + This is an alert with icon, title and description. + + + + + + This Alert has a title and an icon. No description. + + + + + Unable to process your payment. + +

Please verify your billing information and try again.

+
    +
  • Check your card details
    • +
  • Ensure sufficient funds
    • +
  • Verify billing address
    • +
+ + +
+ ) +} diff --git a/apps/v4/examples/base/alert-destructive.tsx b/apps/v4/examples/base/alert-destructive.tsx new file mode 100644 index 0000000000..ad3a1307c4 --- /dev/null +++ b/apps/v4/examples/base/alert-destructive.tsx @@ -0,0 +1,14 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" +import { AlertCircleIcon } from "lucide-react" + +export default function AlertDestructive() { + return ( + + + Error + + Your session has expired. Please log in again. + + + ) +} diff --git a/apps/v4/examples/base/alert-dialog-demo.tsx b/apps/v4/examples/base/alert-dialog-demo.tsx new file mode 100644 index 0000000000..f700856fab --- /dev/null +++ b/apps/v4/examples/base/alert-dialog-demo.tsx @@ -0,0 +1,35 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/examples/base/ui/alert-dialog" +import { Button } from "@/examples/base/ui/button" + +export default function AlertDialogDemo() { + return ( + + }> + Show Dialog + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + Cancel + Continue + + + + ) +} diff --git a/apps/v4/examples/base/aspect-ratio-demo.tsx b/apps/v4/examples/base/aspect-ratio-demo.tsx new file mode 100644 index 0000000000..01ff119fd4 --- /dev/null +++ b/apps/v4/examples/base/aspect-ratio-demo.tsx @@ -0,0 +1,15 @@ +import Image from "next/image" +import { AspectRatio } from "@/examples/base/ui/aspect-ratio" + +export default function AspectRatioDemo() { + return ( + + Photo by Drew Beamer + + ) +} diff --git a/apps/v4/examples/base/avatar-demo.tsx b/apps/v4/examples/base/avatar-demo.tsx new file mode 100644 index 0000000000..e9433e53c4 --- /dev/null +++ b/apps/v4/examples/base/avatar-demo.tsx @@ -0,0 +1,39 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar" + +export default function AvatarDemo() { + return ( +
+ + + CN + + + + ER + +
+ + + CN + + + + LR + + + + ER + +
+
+ ) +} diff --git a/apps/v4/examples/base/badge-demo.tsx b/apps/v4/examples/base/badge-demo.tsx new file mode 100644 index 0000000000..1200c739e8 --- /dev/null +++ b/apps/v4/examples/base/badge-demo.tsx @@ -0,0 +1,39 @@ +import { Badge } from "@/examples/base/ui/badge" +import { BadgeCheckIcon } from "lucide-react" + +export default function BadgeDemo() { + return ( +
+
+ Badge + Secondary + Destructive + Outline +
+
+ + + Verified + + + 8 + + + 99 + + + 20+ + +
+
+ ) +} diff --git a/apps/v4/examples/base/badge-destructive.tsx b/apps/v4/examples/base/badge-destructive.tsx new file mode 100644 index 0000000000..441570452a --- /dev/null +++ b/apps/v4/examples/base/badge-destructive.tsx @@ -0,0 +1,5 @@ +import { Badge } from "@/examples/base/ui/badge" + +export default function BadgeDestructive() { + return Destructive +} diff --git a/apps/v4/examples/base/badge-outline.tsx b/apps/v4/examples/base/badge-outline.tsx new file mode 100644 index 0000000000..0b4bb9831a --- /dev/null +++ b/apps/v4/examples/base/badge-outline.tsx @@ -0,0 +1,5 @@ +import { Badge } from "@/examples/base/ui/badge" + +export default function BadgeOutline() { + return Outline +} diff --git a/apps/v4/examples/base/badge-secondary.tsx b/apps/v4/examples/base/badge-secondary.tsx new file mode 100644 index 0000000000..1788f434ef --- /dev/null +++ b/apps/v4/examples/base/badge-secondary.tsx @@ -0,0 +1,5 @@ +import { Badge } from "@/examples/base/ui/badge" + +export default function BadgeSecondary() { + return Secondary +} diff --git a/apps/v4/examples/base/breadcrumb-demo.tsx b/apps/v4/examples/base/breadcrumb-demo.tsx new file mode 100644 index 0000000000..506b6ea135 --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-demo.tsx @@ -0,0 +1,55 @@ +import Link from "next/link" +import { + Breadcrumb, + BreadcrumbEllipsis, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" + +export function BreadcrumbDemo() { + return ( + + + + }>Home + + + + + + + Toggle menu + + + + Documentation + Themes + GitHub + + + + + + + }> + Components + + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/breadcrumb-dropdown.tsx b/apps/v4/examples/base/breadcrumb-dropdown.tsx new file mode 100644 index 0000000000..0b89a7b5cc --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-dropdown.tsx @@ -0,0 +1,53 @@ +import Link from "next/link" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" +import { ChevronDownIcon, SlashIcon } from "lucide-react" + +export function BreadcrumbDropdown() { + return ( + + + + }>Home + + + + + + + + Components + + + + + Documentation + Themes + GitHub + + + + + + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/breadcrumb-ellipsis.tsx b/apps/v4/examples/base/breadcrumb-ellipsis.tsx new file mode 100644 index 0000000000..50bebd6c71 --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-ellipsis.tsx @@ -0,0 +1,36 @@ +import Link from "next/link" +import { + Breadcrumb, + BreadcrumbEllipsis, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" + +export function BreadcrumbEllipsisDemo() { + return ( + + + + }>Home + + + + + + + + }> + Components + + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/breadcrumb-link.tsx b/apps/v4/examples/base/breadcrumb-link.tsx new file mode 100644 index 0000000000..d0159aba1c --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-link.tsx @@ -0,0 +1,31 @@ +import Link from "next/link" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" + +export function BreadcrumbLinkDemo() { + return ( + + + + }>Home + + + + }> + Components + + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/breadcrumb-responsive.tsx b/apps/v4/examples/base/breadcrumb-responsive.tsx new file mode 100644 index 0000000000..d3d2521fa6 --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-responsive.tsx @@ -0,0 +1,139 @@ +"use client" + +import * as React from "react" +import Link from "next/link" +import { + Breadcrumb, + BreadcrumbEllipsis, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" +import { Button } from "@/examples/base/ui/button" +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from "@/examples/base/ui/drawer" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" + +import { useMediaQuery } from "@/hooks/use-media-query" + +const items = [ + { href: "#", label: "Home" }, + { href: "#", label: "Documentation" }, + { href: "#", label: "Building Your Application" }, + { href: "#", label: "Data Fetching" }, + { label: "Caching and Revalidating" }, +] + +const ITEMS_TO_DISPLAY = 3 + +export function BreadcrumbResponsive() { + const [open, setOpen] = React.useState(false) + const isDesktop = useMediaQuery("(min-width: 768px)") + + return ( + + + + }> + {items[0].label} + + + + {items.length > ITEMS_TO_DISPLAY ? ( + <> + + {isDesktop ? ( + + + + + + + {items.slice(1, -2).map((item, index) => ( + + + {item.label} + + + ))} + + + + ) : ( + + + + + + + Navigate to + + Select a page to navigate to. + + +
+ {items.slice(1, -2).map((item, index) => ( + + {item.label} + + ))} +
+ + + + Close + + + + + )} + + + + ) : null} + {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => ( + + {item.href ? ( + <> + } + className="max-w-20 truncate md:max-w-none" + > + {item.label} + + + + ) : ( + + {item.label} + + )} + + ))} + + + ) +} diff --git a/apps/v4/examples/base/breadcrumb-separator.tsx b/apps/v4/examples/base/breadcrumb-separator.tsx new file mode 100644 index 0000000000..b46ea72923 --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-separator.tsx @@ -0,0 +1,36 @@ +import Link from "next/link" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" +import { SlashIcon } from "lucide-react" + +export function BreadcrumbSeparatorDemo() { + return ( + + + + }>Home + + + + + + }> + Components + + + + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/button-as-child.tsx b/apps/v4/examples/base/button-as-child.tsx new file mode 100644 index 0000000000..d10675ed2f --- /dev/null +++ b/apps/v4/examples/base/button-as-child.tsx @@ -0,0 +1,6 @@ +import Link from "next/link" +import { Button } from "@/examples/base/ui/button" + +export default function ButtonAsChild() { + return +} diff --git a/apps/v4/examples/base/button-default.tsx b/apps/v4/examples/base/button-default.tsx new file mode 100644 index 0000000000..ae793ba77b --- /dev/null +++ b/apps/v4/examples/base/button-default.tsx @@ -0,0 +1,5 @@ +import { Button } from "@/examples/base/ui/button" + +export default function ButtonDefault() { + return +} diff --git a/apps/v4/examples/base/button-demo.tsx b/apps/v4/examples/base/button-demo.tsx new file mode 100644 index 0000000000..319b0ed827 --- /dev/null +++ b/apps/v4/examples/base/button-demo.tsx @@ -0,0 +1,13 @@ +import { Button } from "@/examples/base/ui/button" +import { ArrowUpIcon } from "lucide-react" + +export default function ButtonDemo() { + return ( +
+ + +
+ ) +} diff --git a/apps/v4/examples/base/button-destructive.tsx b/apps/v4/examples/base/button-destructive.tsx new file mode 100644 index 0000000000..fea2de2164 --- /dev/null +++ b/apps/v4/examples/base/button-destructive.tsx @@ -0,0 +1,5 @@ +import { Button } from "@/examples/base/ui/button" + +export default function ButtonDestructive() { + return +} diff --git a/apps/v4/examples/base/button-ghost.tsx b/apps/v4/examples/base/button-ghost.tsx new file mode 100644 index 0000000000..76870d0ebb --- /dev/null +++ b/apps/v4/examples/base/button-ghost.tsx @@ -0,0 +1,5 @@ +import { Button } from "@/examples/base/ui/button" + +export default function ButtonGhost() { + return +} diff --git a/apps/v4/examples/base/button-group-demo.tsx b/apps/v4/examples/base/button-group-demo.tsx new file mode 100644 index 0000000000..f5c42c2a71 --- /dev/null +++ b/apps/v4/examples/base/button-group-demo.tsx @@ -0,0 +1,115 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" +import { + ArchiveIcon, + ArrowLeftIcon, + CalendarPlusIcon, + ClockIcon, + ListFilterIcon, + MailCheckIcon, + MoreHorizontalIcon, + TagIcon, + Trash2Icon, +} from "lucide-react" + +export default function ButtonGroupDemo() { + const [label, setLabel] = React.useState("personal") + + return ( + + + + + + + + + + + + + } + > + + + + + + + Mark as Read + + + + Archive + + + + + + + Snooze + + + + Add to Calendar + + + + Add to List + + + + + Label As... + + + + + Personal + + + Work + + + Other + + + + + + + + + + Trash + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-dropdown.tsx b/apps/v4/examples/base/button-group-dropdown.tsx new file mode 100644 index 0000000000..08a40a6796 --- /dev/null +++ b/apps/v4/examples/base/button-group-dropdown.tsx @@ -0,0 +1,72 @@ +"use client" + +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" +import { + AlertTriangleIcon, + CheckIcon, + ChevronDownIcon, + CopyIcon, + ShareIcon, + TrashIcon, + UserRoundXIcon, + VolumeOffIcon, +} from "lucide-react" + +export default function ButtonGroupDropdown() { + return ( + + + + } + > + + + + + + + Mute Conversation + + + + Mark as Read + + + + Report Conversation + + + + Block User + + + + Share Conversation + + + + Copy Conversation + + + + + + + Delete Conversation + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-input-group.tsx b/apps/v4/examples/base/button-group-input-group.tsx new file mode 100644 index 0000000000..61d65dec8f --- /dev/null +++ b/apps/v4/examples/base/button-group-input-group.tsx @@ -0,0 +1,59 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { + InputGroup, + InputGroupAddon, + InputGroupButton, + InputGroupInput, +} from "@/examples/base/ui/input-group" +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/examples/base/ui/tooltip" +import { AudioLinesIcon, PlusIcon } from "lucide-react" + +export default function ButtonGroupInputGroup() { + const [voiceEnabled, setVoiceEnabled] = React.useState(false) + + return ( + + + + + + + + + + setVoiceEnabled(!voiceEnabled)} + size="icon-xs" + data-active={voiceEnabled} + className="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100" + aria-pressed={voiceEnabled} + /> + } + > + + + Voice Mode + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-input.tsx b/apps/v4/examples/base/button-group-input.tsx new file mode 100644 index 0000000000..ae6a7ad425 --- /dev/null +++ b/apps/v4/examples/base/button-group-input.tsx @@ -0,0 +1,15 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { Input } from "@/examples/base/ui/input" +import { SearchIcon } from "lucide-react" + +export default function ButtonGroupInput() { + return ( + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-nested.tsx b/apps/v4/examples/base/button-group-nested.tsx new file mode 100644 index 0000000000..8aeeee9ab0 --- /dev/null +++ b/apps/v4/examples/base/button-group-nested.tsx @@ -0,0 +1,37 @@ +"use client" + +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" + +export default function ButtonGroupNested() { + return ( + + + + + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-orientation.tsx b/apps/v4/examples/base/button-group-orientation.tsx new file mode 100644 index 0000000000..c882bfb4c0 --- /dev/null +++ b/apps/v4/examples/base/button-group-orientation.tsx @@ -0,0 +1,20 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { MinusIcon, PlusIcon } from "lucide-react" + +export default function ButtonGroupOrientation() { + return ( + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-popover.tsx b/apps/v4/examples/base/button-group-popover.tsx new file mode 100644 index 0000000000..3a24f66ade --- /dev/null +++ b/apps/v4/examples/base/button-group-popover.tsx @@ -0,0 +1,46 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/examples/base/ui/popover" +import { Separator } from "@/examples/base/ui/separator" +import { Textarea } from "@/examples/base/ui/textarea" +import { BotIcon, ChevronDownIcon } from "lucide-react" + +export default function ButtonGroupPopover() { + return ( + + + + + } + > + + + +
+
Agent Tasks
+
+ +
+