diff --git a/.changeset/many-aliens-vanish.md b/.changeset/many-aliens-vanish.md new file mode 100644 index 0000000000..bb1d606756 --- /dev/null +++ b/.changeset/many-aliens-vanish.md @@ -0,0 +1,5 @@ +--- +"shadcn": patch +--- + +add style luma diff --git a/apps/v4/app/(app)/create/components/customizer.tsx b/apps/v4/app/(app)/create/components/customizer.tsx index 2061c4a1dc..8d6aee79e3 100644 --- a/apps/v4/app/(app)/create/components/customizer.tsx +++ b/apps/v4/app/(app)/create/components/customizer.tsx @@ -56,7 +56,6 @@ export function Customizer({ - {isMobile && } + {isMobile && } diff --git a/apps/v4/app/(app)/create/components/font-picker.tsx b/apps/v4/app/(app)/create/components/font-picker.tsx index 2afaec1868..04a76e463f 100644 --- a/apps/v4/app/(app)/create/components/font-picker.tsx +++ b/apps/v4/app/(app)/create/components/font-picker.tsx @@ -97,7 +97,7 @@ export function FontPicker({
{label}
-
+
{displayFontName}
diff --git a/apps/v4/app/(app)/create/components/picker.tsx b/apps/v4/app/(app)/create/components/picker.tsx index ad938901ba..44b647d859 100644 --- a/apps/v4/app/(app)/create/components/picker.tsx +++ b/apps/v4/app/(app)/create/components/picker.tsx @@ -19,7 +19,7 @@ function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
- {style?.icon && ( -
- {React.cloneElement(style.icon, { - className: "size-4", - })} -
- )} {preset.description}
diff --git a/apps/v4/app/(app)/create/components/preview-switcher.tsx b/apps/v4/app/(app)/create/components/preview-switcher.tsx new file mode 100644 index 0000000000..1daf933785 --- /dev/null +++ b/apps/v4/app/(app)/create/components/preview-switcher.tsx @@ -0,0 +1,37 @@ +"use client" + +import { Button } from "@/registry/new-york-v4/ui/button" +import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params" + +const PREVIEW_ITEMS = [ + { label: "01", value: "preview-02" }, + { label: "02", value: "preview" }, +] + +export function PreviewSwitcher() { + const [params, setParams] = useDesignSystemSearchParams() + + const isPreview = + params.item === "preview" || params.item.startsWith("preview-0") + + if (!isPreview) { + return null + } + + return ( +
+ {PREVIEW_ITEMS.map((item) => ( + + ))} +
+ ) +} diff --git a/apps/v4/app/(app)/create/components/preview.tsx b/apps/v4/app/(app)/create/components/preview.tsx index 0ae6f9c6f0..56ab4e6c5e 100644 --- a/apps/v4/app/(app)/create/components/preview.tsx +++ b/apps/v4/app/(app)/create/components/preview.tsx @@ -8,6 +8,7 @@ import { UNDO_FORWARD_TYPE, } from "@/app/(app)/create/components/history-buttons" import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switcher" +import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher" import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button" import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync" import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset" @@ -147,6 +148,7 @@ export function Preview() { title="Preview" />
+ ) } diff --git a/apps/v4/app/(app)/create/hooks/use-reset.tsx b/apps/v4/app/(app)/create/hooks/use-reset.tsx index 8af707e10f..52e6b78897 100644 --- a/apps/v4/app/(app)/create/hooks/use-reset.tsx +++ b/apps/v4/app/(app)/create/hooks/use-reset.tsx @@ -3,7 +3,7 @@ import * as React from "react" import useSWR from "swr" -import { DEFAULT_CONFIG } from "@/registry/config" +import { DEFAULT_CONFIG, PRESETS } from "@/registry/config" import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params" const RESET_DIALOG_KEY = "create:reset-dialog-open" @@ -20,22 +20,27 @@ export function useReset() { }) const reset = React.useCallback(() => { + const preset = + PRESETS.find( + (preset) => preset.base === params.base && preset.style === params.style + ) ?? DEFAULT_CONFIG + setParams({ base: params.base, - style: DEFAULT_CONFIG.style, - baseColor: DEFAULT_CONFIG.baseColor, - theme: DEFAULT_CONFIG.theme, - chartColor: DEFAULT_CONFIG.chartColor, - iconLibrary: DEFAULT_CONFIG.iconLibrary, - font: DEFAULT_CONFIG.font, - fontHeading: DEFAULT_CONFIG.fontHeading, - menuAccent: DEFAULT_CONFIG.menuAccent, - menuColor: DEFAULT_CONFIG.menuColor, - radius: DEFAULT_CONFIG.radius, + style: params.style, + baseColor: preset.baseColor, + theme: preset.theme, + chartColor: preset.chartColor, + iconLibrary: preset.iconLibrary, + font: preset.font, + fontHeading: preset.fontHeading, + menuAccent: preset.menuAccent, + menuColor: preset.menuColor, + radius: preset.radius, template: DEFAULT_CONFIG.template, item: params.item, }) - }, [setParams, params.base, params.item]) + }, [setParams, params.base, params.style, params.item]) const handleShowResetDialogChange = React.useCallback( (open: boolean) => { diff --git a/apps/v4/app/(app)/create/lib/search-params.ts b/apps/v4/app/(app)/create/lib/search-params.ts index 20aa794c53..bbaf7eff94 100644 --- a/apps/v4/app/(app)/create/lib/search-params.ts +++ b/apps/v4/app/(app)/create/lib/search-params.ts @@ -41,11 +41,11 @@ import { getPresetCode } from "@/app/(app)/create/lib/preset-code" import { resolvePresetOverrides } from "@/app/(app)/create/lib/preset-query" const designSystemSearchParams = { - preset: parseAsString.withDefault("b0"), + preset: parseAsString.withDefault("b2D0wqNxT"), base: parseAsStringLiteral(BASES.map((b) => b.name)).withDefault( DEFAULT_CONFIG.base ), - item: parseAsString.withDefault("preview").withOptions({ shallow: true }), + item: parseAsString.withDefault("preview-02").withOptions({ shallow: true }), iconLibrary: parseAsStringLiteral( Object.values(iconLibraries).map((i) => i.name) ).withDefault(DEFAULT_CONFIG.iconLibrary), diff --git a/apps/v4/app/(app)/create/page.tsx b/apps/v4/app/(app)/create/page.tsx index b9dbf1f53d..40f6053168 100644 --- a/apps/v4/app/(app)/create/page.tsx +++ b/apps/v4/app/(app)/create/page.tsx @@ -48,9 +48,9 @@ export default async function CreatePage() { > - - + + ) } diff --git a/apps/v4/app/(app)/layout.tsx b/apps/v4/app/(app)/layout.tsx index 04680fd2a8..ca5f8e1450 100644 --- a/apps/v4/app/(app)/layout.tsx +++ b/apps/v4/app/(app)/layout.tsx @@ -5,7 +5,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) { return (
{children}
diff --git a/apps/v4/app/globals.css b/apps/v4/app/globals.css index b7e2ac9c36..219e78ed58 100644 --- a/apps/v4/app/globals.css +++ b/apps/v4/app/globals.css @@ -8,12 +8,14 @@ @import "../registry/styles/style-lyra.css" layer(base); @import "../registry/styles/style-maia.css" layer(base); @import "../registry/styles/style-mira.css" layer(base); +@import "../registry/styles/style-luma.css" layer(base); @custom-variant style-vega (&:where(.style-vega *)); @custom-variant style-nova (&:where(.style-nova *)); @custom-variant style-lyra (&:where(.style-lyra *)); @custom-variant style-maia (&:where(.style-maia *)); @custom-variant style-mira (&:where(.style-mira *)); +@custom-variant style-luma (&:where(.style-luma *)); @custom-variant dark (&:is(.dark *)); @custom-variant fixed (&:is(.layout-fixed *)); diff --git a/apps/v4/components/announcement.tsx b/apps/v4/components/announcement.tsx index 4a84900d48..c87c1765b8 100644 --- a/apps/v4/components/announcement.tsx +++ b/apps/v4/components/announcement.tsx @@ -6,8 +6,8 @@ import { Badge } from "@/registry/new-york-v4/ui/badge" export function Announcement() { return ( - - shadcn/skills, presets and more + + Introducing Luma ) diff --git a/apps/v4/components/tailwind-indicator.tsx b/apps/v4/components/tailwind-indicator.tsx index 8219eb63bc..39419c68f8 100644 --- a/apps/v4/components/tailwind-indicator.tsx +++ b/apps/v4/components/tailwind-indicator.tsx @@ -1,4 +1,4 @@ -const SHOW = true +const SHOW = false export function TailwindIndicator({ forceMount = false, diff --git a/apps/v4/package.json b/apps/v4/package.json index 15098f1beb..d471e92d07 100644 --- a/apps/v4/package.json +++ b/apps/v4/package.json @@ -31,6 +31,7 @@ "@hookform/resolvers": "^3.10.0", "@hugeicons/core-free-icons": "^1.2.1", "@hugeicons/react": "^1.1.1", + "@paper-design/shaders-react": "^0.0.72", "@phosphor-icons/react": "^2.1.10", "@remixicon/react": "^4.7.0", "@tabler/icons-react": "^3.31.0", @@ -68,6 +69,7 @@ "react-day-picker": "^9.7.0", "react-dom": "19.2.3", "react-hook-form": "^7.62.0", + "react-qr-code": "^2.0.18", "react-resizable-panels": "^4", "react-textarea-autosize": "^8.5.9", "recharts": "3.8.0", diff --git a/apps/v4/public/r/config.json b/apps/v4/public/r/config.json index 764e6a52e0..6e50ff053c 100644 --- a/apps/v4/public/r/config.json +++ b/apps/v4/public/r/config.json @@ -179,6 +179,42 @@ "menuAccent": "subtle", "menuColor": "default", "radius": "default" + }, + { + "name": "radix-luma", + "title": "Luma (Radix)", + "description": "Luma / Lucide / Inter", + "base": "radix", + "style": "luma", + "baseColor": "neutral", + "theme": "neutral", + "chartColor": "neutral", + "iconLibrary": "lucide", + "font": "inter", + "fontHeading": "inherit", + "item": "Item", + "rtl": false, + "menuAccent": "subtle", + "menuColor": "default", + "radius": "default" + }, + { + "name": "base-luma", + "title": "Luma (Base)", + "description": "Luma / Lucide / Inter", + "base": "base", + "style": "luma", + "baseColor": "neutral", + "theme": "neutral", + "chartColor": "neutral", + "iconLibrary": "lucide", + "font": "inter", + "fontHeading": "inherit", + "item": "Item", + "rtl": false, + "menuAccent": "subtle", + "menuColor": "default", + "radius": "default" } ] } diff --git a/apps/v4/public/r/styles/base-luma/accordion-example.json b/apps/v4/public/r/styles/base-luma/accordion-example.json new file mode 100644 index 0000000000..52b1b12268 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/accordion-example.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "accordion-example", + "title": "Accordion", + "registryDependencies": [ + "accordion", + "button", + "card", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/accordion-example.tsx", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-luma/ui/accordion\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction AccordionBasic() {\n const items = [\n {\n value: \"item-1\",\n trigger: \"Is it accessible?\",\n content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n },\n {\n value: \"item-2\",\n trigger: \"Is it styled?\",\n content:\n \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n },\n {\n value: \"item-3\",\n trigger: \"Is it animated?\",\n content:\n \"Yes. It's animated by default, but you can disable it if you prefer.\",\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n )\n}\n\nfunction AccordionMultiple() {\n const items = [\n {\n value: \"item-1\",\n trigger:\n \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n content:\n \"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.\",\n },\n {\n value: \"item-2\",\n trigger:\n \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n content:\n \"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.\",\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n )\n}\n\nfunction AccordionWithBorders() {\n const items = [\n {\n value: \"billing\",\n trigger: \"How does billing work?\",\n content:\n \"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. There are no hidden fees or setup costs.\",\n },\n {\n value: \"security\",\n trigger: \"Is my data secure?\",\n content:\n \"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. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n },\n {\n value: \"integration\",\n trigger: \"What integrations do you support?\",\n content: (\n <>\n

\n We integrate with 500+ popular tools including Slack, Zapier,\n Salesforce, HubSpot, and more. You can also build custom\n integrations using our REST API and webhooks.{\" \"}\n

\n

\n Our API documentation includes code examples in 10+ programming\n languages.\n

\n \n ),\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n \n {item.trigger}\n \n \n {item.content}\n \n \n ))}\n \n \n )\n}\n\nfunction AccordionInCard() {\n const items = [\n {\n value: \"plans\",\n trigger: \"What subscription plans do you offer?\",\n content: (\n <>\n

\n We offer three subscription tiers: Starter ($9/month), Professional\n ($29/month), and Enterprise ($99/month). Each plan includes\n increasing storage limits, API access, priority support, and team\n collaboration features.\n

\n

\n Annual billing is available with a 20% discount. All\n plans include a 14-day free trial with no credit card required.\n

\n \n \n ),\n },\n {\n value: \"billing\",\n trigger: \"How does billing work?\",\n content: (\n <>\n

\n Billing occurs automatically at the start of each billing cycle. We\n accept all major credit cards, PayPal, and ACH transfers for\n enterprise customers.\n

\n

\n You'll receive an invoice via email after each payment. You can\n update your payment method or billing information anytime in your\n account settings. Failed payments will trigger automated retry\n attempts and email notifications.\n

\n \n ),\n },\n {\n value: \"upgrade\",\n trigger: \"Can I upgrade or downgrade my plan?\",\n content: (\n <>\n

\n Yes, you can change your plan at any time. When upgrading,\n you'll be charged a prorated amount for the remainder of your\n billing cycle and immediately gain access to new features.\n

\n

\n When downgrading, the change takes effect at the end of your current\n billing period, and you'll retain access to premium features\n until then. No refunds are provided for downgrades.\n

\n \n ),\n },\n {\n value: \"cancel\",\n trigger: \"How do I cancel my subscription?\",\n content: (\n <>\n

\n You can cancel your subscription anytime from your account settings.\n There are no cancellation fees or penalties. Your access will\n continue until the end of your current billing period.\n

\n

\n After cancellation, your data is retained for 30 days in case you\n want to reactivate. You can export all your data before or after\n canceling. We'd love to hear your feedback about why\n you're leaving.\n

\n \n ),\n },\n {\n value: \"refund\",\n trigger: \"What is your refund policy?\",\n content: (\n <>\n

\n We offer a 30-day money-back guarantee for new subscriptions. If\n you're not satisfied within the first 30 days, contact our\n support team for a full refund.\n

\n

\n After 30 days, we don't provide refunds for partial billing\n periods, but you can cancel anytime to avoid future charges.\n Enterprise customers have custom refund terms outlined in their\n contracts.\n

\n \n ),\n },\n ]\n\n return (\n \n \n \n Subscription & Billing\n \n Common questions about your account, plans, and payments\n \n \n \n \n {items.map((item) => (\n \n {item.trigger}\n {item.content}\n \n ))}\n \n \n \n \n )\n}\n\nfunction AccordionWithDisabled() {\n const items = [\n {\n value: \"item-1\",\n trigger: \"Can I access my account history?\",\n content:\n \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n disabled: false,\n },\n {\n value: \"item-2\",\n trigger: \"Premium feature information\",\n content:\n \"This section contains information about premium features. Upgrade your plan to access this content.\",\n disabled: true,\n },\n {\n value: \"item-3\",\n trigger: \"How do I update my email address?\",\n content:\n \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n disabled: false,\n },\n ]\n\n return (\n \n \n {items.map((item) => (\n \n \n {item.trigger}\n \n \n {item.content}\n \n \n ))}\n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/accordion.json b/apps/v4/public/r/styles/base-luma/accordion.json new file mode 100644 index 0000000000..861ebcaf3e --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/accordion.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "accordion", + "files": [ + { + "path": "registry/base-luma/ui/accordion.tsx", + "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n \n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n \n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n \n \n {children}\n \n \n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n \n \n {children}\n
\n \n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/accordion", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx", + "api": "https://base-ui.com/react/components/accordion.md" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/alert-dialog-example.json b/apps/v4/public/r/styles/base-luma/alert-dialog-example.json new file mode 100644 index 0000000000..0e3c18bc68 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/alert-dialog-example.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "alert-dialog-example", + "title": "Alert Dialog", + "registryDependencies": [ + "alert-dialog", + "button", + "dialog", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/alert-dialog-example.tsx", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/base-luma/ui/alert-dialog\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-luma/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nfunction AlertDialogBasic() {\n return (\n \n \n Default}\n />\n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n )\n}\n\nfunction AlertDialogSmall() {\n return (\n \n \n Small} />\n \n \n Allow accessory to connect?\n \n Do you want to allow the USB accessory to connect to this device?\n \n \n \n Don't allow\n Allow\n \n \n \n \n )\n}\n\nfunction AlertDialogWithMedia() {\n return (\n \n \n Default (Media)}\n />\n \n \n \n \n \n Are you absolutely sure?\n \n This will permanently delete your account and remove your data\n from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n )\n}\n\nfunction AlertDialogSmallWithMedia() {\n return (\n \n \n Small (Media)}\n />\n\n \n \n \n \n \n Allow accessory to connect?\n \n Do you want to allow the USB accessory to connect to this device?\n \n \n \n Don't allow\n Allow\n \n \n \n \n )\n}\n\nfunction AlertDialogDestructive() {\n return (\n \n \n Delete Chat}\n />\n \n \n \n \n \n Delete chat?\n \n This will permanently delete this chat conversation. View{\" \"}\n Settings delete any memories saved during this\n chat.\n \n \n \n Cancel\n Delete\n \n \n \n \n )\n}\n\nfunction AlertDialogInDialog() {\n return (\n \n \n }>\n Open Dialog\n \n \n \n Alert Dialog Example\n \n Click the button below to open an alert dialog.\n \n \n \n \n }>\n Open Alert Dialog\n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete\n your account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/alert-dialog.json b/apps/v4/public/r/styles/base-luma/alert-dialog.json new file mode 100644 index 0000000000..f647599858 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/alert-dialog.json @@ -0,0 +1,22 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "alert-dialog", + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-luma/ui/alert-dialog.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n return \n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Close.Props &\n Pick, \"variant\" | \"size\">) {\n return (\n }\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx", + "api": "https://base-ui.com/react/components/alert-dialog.md" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/alert-example.json b/apps/v4/public/r/styles/base-luma/alert-example.json new file mode 100644 index 0000000000..ace1648a08 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/alert-example.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "alert-example", + "title": "Alert", + "registryDependencies": [ + "alert", + "badge", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/alert-example.tsx", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n Alert,\n AlertAction,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/base-luma/ui/alert\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction AlertExample1() {\n return (\n \n
\n \n Success! Your changes have been saved.\n \n \n Success! Your changes have been saved.\n \n This is an alert with title and description.\n \n \n \n \n This one has a description only. No title. No icon.\n \n \n
\n \n )\n}\n\nfunction AlertExample2() {\n return (\n \n
\n \n \n \n Let's try one with icon, title and a link.\n \n \n \n \n \n This one has an icon and a description only. No title.{\" \"}\n But it has a link and a second link.\n \n \n\n \n \n Success! Your changes have been saved\n \n This is an alert with icon, title and description.\n \n \n \n \n \n This is a very long alert title that demonstrates how the component\n handles extended text content and potentially wraps across multiple\n lines\n \n \n \n \n \n This is a very long alert description that demonstrates how the\n component handles extended text content and potentially wraps across\n multiple lines\n \n \n \n \n \n This is an extremely long alert title that spans multiple lines to\n demonstrate how the component handles very lengthy headings while\n maintaining readability and proper text wrapping behavior\n \n \n This is an equally long description that contains detailed\n information about the alert. It shows how the component can\n accommodate extensive content while preserving proper spacing,\n alignment, and readability across different screen sizes and\n viewport widths. This helps ensure the user experience remains\n consistent regardless of the content length.\n \n \n
\n \n )\n}\n\nfunction AlertExample3() {\n return (\n \n
\n \n \n Something went wrong!\n \n Your session has expired. Please log in again.\n \n \n \n \n Unable to process your payment.\n \n

\n Please verify your billing information and try\n again.\n

\n
    \n
  • Check your card details
    • \n
  • Ensure sufficient funds
    • \n
  • Verify billing address
    • \n
\n \n \n
\n \n )\n}\n\nfunction AlertExample4() {\n return (\n \n
\n \n \n The selected emails have been marked as spam.\n \n \n \n \n \n \n The selected emails have been marked as spam.\n \n This is a very long alert title that demonstrates how the component\n handles extended text content.\n \n \n Badge\n \n \n
\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/alert.json b/apps/v4/public/r/styles/base-luma/alert.json new file mode 100644 index 0000000000..3feec9216e --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/alert.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "alert", + "files": [ + { + "path": "registry/base-luma/ui/alert.tsx", + "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nconst alertVariants = cva(\n \"group/alert relative grid w-full gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive:\n \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/alert", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/aspect-ratio-example.json b/apps/v4/public/r/styles/base-luma/aspect-ratio-example.json new file mode 100644 index 0000000000..5d046dbd82 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/aspect-ratio-example.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "aspect-ratio-example", + "title": "Aspect Ratio", + "registryDependencies": [ + "aspect-ratio", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/aspect-ratio-example.tsx", + "content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { AspectRatio } from \"@/registry/base-luma/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction AspectRatio16x9() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio1x1() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio9x16() {\n return (\n \n \n \n \n \n )\n}\n\nfunction AspectRatio21x9() {\n return (\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/aspect-ratio.json b/apps/v4/public/r/styles/base-luma/aspect-ratio.json new file mode 100644 index 0000000000..f437f1472b --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/aspect-ratio.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "aspect-ratio", + "files": [ + { + "path": "registry/base-luma/ui/aspect-ratio.tsx", + "content": "import { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction AspectRatio({\n ratio,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n return (\n \n )\n}\n\nexport { AspectRatio }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/avatar-example.json b/apps/v4/public/r/styles/base-luma/avatar-example.json new file mode 100644 index 0000000000..3ddeb315a0 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/avatar-example.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "avatar-example", + "title": "Avatar", + "registryDependencies": [ + "avatar", + "button", + "empty", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/avatar-example.tsx", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n Avatar,\n AvatarBadge,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarImage,\n} from \"@/registry/base-luma/ui/avatar\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/registry/base-luma/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction AvatarSizes() {\n return (\n \n
\n \n \n CN\n \n \n \n CN\n \n \n \n CN\n \n
\n
\n \n CN\n \n \n CN\n \n \n CN\n \n
\n \n )\n}\n\nfunction AvatarWithBadge() {\n return (\n \n
\n \n \n JZ\n \n \n \n \n JZ\n \n \n \n \n JZ\n \n \n
\n
\n \n JZ\n \n \n \n JZ\n \n \n \n JZ\n \n \n
\n \n )\n}\n\nfunction AvatarWithBadgeIcon() {\n return (\n \n
\n \n \n PP\n \n \n \n \n \n \n PP\n \n \n \n \n \n \n PP\n \n \n \n \n
\n
\n \n PP\n \n \n \n \n \n PP\n \n \n \n \n \n PP\n \n \n \n \n
\n \n )\n}\n\nfunction AvatarGroupExample() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n )\n}\n\nfunction AvatarGroupWithCount() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +3\n \n \n )\n}\n\nfunction AvatarGroupWithIconCount() {\n return (\n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n )\n}\n\nfunction AvatarInEmpty() {\n return (\n \n \n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n \n \n \n \n \n No Team Members\n \n Invite your team to collaborate on this project.\n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/avatar.json b/apps/v4/public/r/styles/base-luma/avatar.json new file mode 100644 index 0000000000..1f4c61cef5 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/avatar.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "avatar", + "files": [ + { + "path": "registry/base-luma/ui/avatar.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: AvatarPrimitive.Root.Props & {\n size?: \"default\" | \"sm\" | \"lg\"\n}) {\n return (\n \n )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n \n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/avatar", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx", + "api": "https://base-ui.com/react/components/avatar.md" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/badge-example.json b/apps/v4/public/r/styles/base-luma/badge-example.json new file mode 100644 index 0000000000..f7142092dd --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/badge-example.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "badge-example", + "title": "Badge", + "registryDependencies": [ + "badge", + "spinner", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/badge-example.tsx", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Spinner } from \"@/registry/base-luma/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction BadgeVariants() {\n return (\n \n
\n Default\n Secondary\n Destructive\n Outline\n Ghost\n Link\n
\n \n )\n}\n\nfunction BadgeWithIconLeft() {\n return (\n \n
\n \n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n
\n \n )\n}\n\nfunction BadgeWithIconRight() {\n return (\n \n
\n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n \n
\n \n )\n}\n\nfunction BadgeWithSpinner() {\n return (\n \n
\n \n \n Default\n \n \n \n Secondary\n \n \n \n Destructive\n \n \n \n Outline\n \n \n \n Ghost\n \n \n \n Link\n \n
\n \n )\n}\n\nfunction BadgeAsLink() {\n return (\n \n
\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n \n Link{\" \"}\n \n \n }\n />\n
\n \n )\n}\n\nfunction BadgeLongText() {\n return (\n \n
\n \n A badge with a lot of text to see how it wraps\n \n
\n \n )\n}\n\nfunction BadgeCustomColors() {\n return (\n \n
\n \n Blue\n \n \n Green\n \n \n Sky\n \n \n Purple\n \n \n Blue\n \n \n Green\n \n \n Sky\n \n \n Purple\n \n \n Red\n \n
\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/badge.json b/apps/v4/public/r/styles/base-luma/badge.json new file mode 100644 index 0000000000..cacc194cdd --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/badge.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "badge", + "files": [ + { + "path": "registry/base-luma/ui/badge.tsx", + "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nconst badgeVariants = cva(\n \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary:\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive:\n \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n outline:\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost:\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ variant }), className),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/badge", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/breadcrumb-example.json b/apps/v4/public/r/styles/base-luma/breadcrumb-example.json new file mode 100644 index 0000000000..ce1f0516e0 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/breadcrumb-example.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb-example", + "title": "Breadcrumb", + "registryDependencies": [ + "breadcrumb", + "dropdown-menu", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/breadcrumb-example.tsx", + "content": "import Link from \"next/link\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-luma/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n return (\n \n \n \n \n \n )\n}\n\nfunction BreadcrumbBasic() {\n return (\n \n \n \n \n Home\n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n\nfunction BreadcrumbWithDropdown() {\n return (\n \n \n \n \n Home\n \n \n \n \n }\n >\n \n Toggle menu\n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n\nfunction BreadcrumbWithLink() {\n return (\n \n \n \n \n Home} />\n \n \n \n \n \n \n \n Components} />\n \n \n \n Breadcrumb\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/breadcrumb.json b/apps/v4/public/r/styles/base-luma/breadcrumb.json new file mode 100644 index 0000000000..ce34c85fc0 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/breadcrumb.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "breadcrumb", + "files": [ + { + "path": "registry/base-luma/ui/breadcrumb.tsx", + "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbLink({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"a\">) {\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(\n {\n className: cn(\"transition-colors hover:text-foreground\", className),\n },\n props\n ),\n render,\n state: {\n slot: \"breadcrumb-link\",\n },\n })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? (\n \n )}\n \n )\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n svg]:size-4\",\n className\n )}\n {...props}\n >\n \n More\n \n )\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/button-example.json b/apps/v4/public/r/styles/base-luma/button-example.json new file mode 100644 index 0000000000..de806a641c --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/button-example.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-example", + "title": "Button", + "registryDependencies": [ + "button", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/button-example.tsx", + "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button, buttonVariants } from \"@/registry/base-luma/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonVariantsAndSizes() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconRight() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconLeft() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonIconOnly() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonExamples() {\n return (\n \n
\n
\n \n \n
\n
\n \n \n
\n \n Link\n \n
\n \n )\n}\n\nfunction ButtonInvalidStates() {\n return (\n \n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/button-group-example.json b/apps/v4/public/r/styles/base-luma/button-group-example.json new file mode 100644 index 0000000000..01e8922cff --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/button-group-example.json @@ -0,0 +1,26 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group-example", + "title": "Button Group", + "registryDependencies": [ + "button", + "button-group", + "dropdown-menu", + "field", + "input", + "input-group", + "label", + "popover", + "select", + "tooltip", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/button-group-example.tsx", + "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupText,\n} from \"@/registry/base-luma/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/base-luma/ui/input-group\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-luma/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupBasic() {\n return (\n \n
\n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithInput() {\n return (\n \n
\n \n \n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithText() {\n return (\n \n
\n \n Text\n \n \n \n }>\n GPU Size\n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithDropdown() {\n return (\n \n
\n \n \n \n }\n >\n \n \n \n Disable\n \n Uninstall\n \n \n \n \n \n \n \n }\n >\n \n \n \n \n \n \n Mute Conversation\n \n \n \n Mark as Read\n \n \n \n Report Conversation\n \n \n \n Block User\n \n \n \n Share Conversation\n \n \n \n Copy Conversation\n \n \n \n \n \n \n Delete Conversation\n \n \n \n \n \n
\n \n )\n}\n\nconst currencyItems = [\n { label: \"$\", value: \"$\" },\n { label: \"€\", value: \"€\" },\n { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n return (\n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupWithIcons() {\n return (\n \n
\n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithInputGroup() {\n return (\n \n
\n \n \n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupWithFields() {\n return (\n \n \n \n \n \n \n \n \n W\n \n \n px\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupWithLike() {\n return (\n \n \n \n }\n nativeButton={false}\n >\n 1.2K\n \n \n \n )\n}\n\nconst durationItems = [\n { label: \"Hours\", value: \"hours\" },\n { label: \"Days\", value: \"days\" },\n { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupNested() {\n return (\n \n \n \n \n \n \n \n \n \n }>\n \n \n Voice Mode\n \n \n \n \n \n )\n}\n\nfunction ButtonGroupPagination() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupPaginationSplit() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupNavigation() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupTextAlignment() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ButtonGroupVertical() {\n return (\n \n
\n \n \n \n \n
\n \n )\n}\n\nfunction ButtonGroupVerticalNested() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/button-group.json b/apps/v4/public/r/styles/base-luma/button-group.json new file mode 100644 index 0000000000..e509c31720 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/button-group.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button-group", + "registryDependencies": [ + "separator" + ], + "files": [ + { + "path": "registry/base-luma/ui/button-group.tsx", + "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\n\nconst buttonGroupVariants = cva(\n \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n {\n variants: {\n orientation: {\n horizontal:\n \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n vertical:\n \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction ButtonGroupText({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(\n \"flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"button-group-text\",\n },\n })\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/button-group", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/button.json b/apps/v4/public/r/styles/base-luma/button.json new file mode 100644 index 0000000000..5bd039784e --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/button.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "button", + "files": [ + { + "path": "registry/base-luma/ui/button.tsx", + "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-9\",\n \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps) {\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/button", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/calendar-example.json b/apps/v4/public/r/styles/base-luma/calendar-example.json new file mode 100644 index 0000000000..814dbdc32d --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/calendar-example.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "calendar-example", + "title": "Calendar", + "registryDependencies": [ + "button", + "calendar", + "card", + "field", + "input", + "label", + "popover", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/calendar-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-luma/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-luma/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-luma/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/base-luma/ui/input-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-luma/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarInCard() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarInPopover() {\n return (\n \n \n }\n >\n \n Open Calendar\n \n \n \n \n \n \n )\n}\n\nfunction CalendarSingle() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarMultiple() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarRange() {\n const [dateRange, setDateRange] = React.useState({\n from: new Date(new Date().getFullYear(), 0, 12),\n to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n })\n\n return (\n \n \n \n \n date > new Date() || date < new Date(\"1900-01-01\")\n }\n />\n \n \n \n )\n}\n\nfunction CalendarRangeMultipleMonths() {\n const [range, setRange] = React.useState({\n from: new Date(new Date().getFullYear(), 3, 12),\n to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n })\n\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarBookedDates() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 3)\n )\n const bookedDates = Array.from(\n { length: 15 },\n (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n )\n\n return (\n \n \n \n button]:line-through opacity-100\",\n }}\n />\n \n \n \n )\n}\n\nfunction CalendarWithTime() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n )\n\n return (\n \n \n \n \n \n \n \n \n Start Time\n \n \n \n \n \n \n \n \n End Time\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CalendarCustomDays() {\n const [range, setRange] = React.useState({\n from: new Date(new Date().getFullYear(), 11, 8),\n to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n })\n\n return (\n \n \n \n {\n return date.toLocaleString(\"default\", { month: \"long\" })\n },\n }}\n components={{\n DayButton: ({ children, modifiers, day, ...props }) => {\n const isWeekend =\n day.date.getDay() === 0 || day.date.getDay() === 6\n\n return (\n \n {children}\n {!modifiers.outside && (\n {isWeekend ? \"$120\" : \"$100\"}\n )}\n \n )\n },\n }}\n />\n \n \n \n )\n}\n\nfunction CalendarWithPresets() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 12)\n )\n const [currentMonth, setCurrentMonth] = React.useState(\n new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n )\n\n return (\n \n \n \n \n \n \n {[\n { label: \"Today\", value: 0 },\n { label: \"Tomorrow\", value: 1 },\n { label: \"In 3 days\", value: 3 },\n { label: \"In a week\", value: 7 },\n { label: \"In 2 weeks\", value: 14 },\n ].map((preset) => (\n {\n const newDate = addDays(new Date(), preset.value)\n setDate(newDate)\n setCurrentMonth(\n new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n )\n }}\n >\n {preset.label}\n \n ))}\n \n \n \n )\n}\n\nfunction DatePickerSimple() {\n const [date, setDate] = React.useState()\n\n return (\n \n \n Date\n \n \n }\n >\n \n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n \n \n \n \n )\n}\n\nfunction DatePickerWithRange() {\n const [date, setDate] = React.useState({\n from: new Date(new Date().getFullYear(), 0, 20),\n to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n })\n\n return (\n \n \n Date Picker Range\n \n \n }\n >\n \n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} -{\" \"}\n {format(date.to, \"LLL dd, y\")}\n \n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n \n )\n}\n\nfunction DataPickerWithDropdowns() {\n const [date, setDate] = React.useState()\n const [open, setOpen] = React.useState(false)\n\n return (\n \n \n \n \n Date\n \n \n }\n >\n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n \n
\n setOpen(false)}\n >\n Done\n \n
\n \n \n \n \n )\n}\n\nfunction CalendarWeekNumbers() {\n const [date, setDate] = React.useState(\n new Date(new Date().getFullYear(), 1, 3)\n )\n\n return (\n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/calendar.json b/apps/v4/public/r/styles/base-luma/calendar.json new file mode 100644 index 0000000000..9c1a11618c --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/calendar.json @@ -0,0 +1,26 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "calendar", + "dependencies": [ + "react-day-picker@latest", + "date-fns" + ], + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-luma/ui/calendar.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n DayPicker,\n getDefaultClassNames,\n type DayButton,\n type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-luma/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n locale,\n formatters,\n components,\n ...props\n}: React.ComponentProps & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n captionLayout={captionLayout}\n locale={locale}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString(locale?.code, { month: \"short\" }),\n ...formatters,\n }}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\n \"relative flex flex-col gap-4 md:flex-row\",\n defaultClassNames.months\n ),\n month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n nav: cn(\n \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n \"absolute inset-0 bg-popover opacity-0\",\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n \"font-medium select-none\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n defaultClassNames.caption_label\n ),\n table: \"w-full border-collapse\",\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n week_number_header: cn(\n \"w-(--cell-size) select-none\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-[0.8rem] text-muted-foreground select-none\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n props.showWeekNumber\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\n \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n defaultClassNames.range_end\n ),\n today: cn(\n \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-muted-foreground aria-selected:text-muted-foreground\",\n defaultClassNames.outside\n ),\n disabled: cn(\n \"text-muted-foreground opacity-50\",\n defaultClassNames.disabled\n ),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => {\n return (\n \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: ({ ...props }) => (\n \n ),\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n locale,\n ...props\n}: React.ComponentProps & { locale?: Partial }) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Calendar, CalendarDayButton }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/calendar", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx", + "api": "https://react-day-picker.js.org" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/card-example.json b/apps/v4/public/r/styles/base-luma/card-example.json new file mode 100644 index 0000000000..bfdaa35b82 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/card-example.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "card-example", + "title": "Card", + "registryDependencies": [ + "avatar", + "button", + "card", + "field", + "input", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/card-example.tsx", + "content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarImage,\n} from \"@/registry/base-luma/ui/avatar\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CardLogin() {\n return (\n \n \n \n Login to your account\n \n Enter your email below to login to your account\n \n \n \n
\n \n \n Email\n \n \n \n
\n Password\n \n Forgot your password?\n \n
\n \n \n \n
\n \n \n \n \n
\n Don't have an account?{\" \"}\n \n Sign up\n \n
\n \n \n \n )\n}\n\nfunction CardMeetingNotes() {\n return (\n \n \n \n Meeting Notes\n \n Transcript from the meeting with the client.\n \n \n \n \n \n \n

\n Client requested dashboard redesign with focus on mobile\n responsiveness.\n

\n
    \n
  1. New analytics widgets for daily/weekly metrics
    2. \n
  2. Simplified navigation menu
    3. \n
  3. Dark mode support
    4. \n
  4. Timeline: 6 weeks
    5. \n
  5. Follow-up meeting scheduled for next Tuesday
    6. \n
\n \n \n \n \n \n CN\n \n \n \n LR\n \n \n \n ER\n \n +8\n \n \n \n \n )\n}\n\nfunction CardWithImage() {\n return (\n \n \n
\n \n \n Beautiful Landscape\n \n A stunning view that captures the essence of natural beauty.\n \n \n \n \n \n \n \n )\n}\n\nfunction CardWithImageSmall() {\n return (\n \n \n
\n \n \n Beautiful Landscape\n \n A stunning view that captures the essence of natural beauty.\n \n \n \n \n \n \n \n )\n}\n\nfunction CardHeaderWithBorder() {\n return (\n \n \n \n Header with Border\n \n This is a card with a header that has a bottom border.\n \n \n \n

\n The header has a border-b class applied, creating a visual\n separation between the header and content sections.\n

\n \n \n \n )\n}\n\nfunction CardFooterWithBorder() {\n return (\n \n \n \n

\n The footer has a border-t class applied, creating a visual\n separation between the content and footer sections.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardDefault() {\n return (\n \n \n \n Default Card\n \n This card uses the default size variant.\n \n \n \n

\n The card component supports a size prop that defaults to\n "default" for standard spacing and sizing.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardSmall() {\n return (\n \n \n \n Small Card\n \n This card uses the small size variant.\n \n \n \n

\n The card component supports a size prop that can be set to\n "sm" for a more compact appearance.\n

\n \n \n \n \n \n \n )\n}\n\nfunction CardHeaderWithBorderSmall() {\n return (\n \n \n \n Header with Border\n \n This is a small card with a header that has a bottom border.\n \n \n \n

\n The header has a border-b class applied, creating a visual\n separation between the header and content sections.\n

\n \n \n \n )\n}\n\nfunction CardFooterWithBorderSmall() {\n return (\n \n \n \n

\n The footer has a border-t class applied, creating a visual\n separation between the content and footer sections.\n

\n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/card.json b/apps/v4/public/r/styles/base-luma/card.json new file mode 100644 index 0000000000..0b930ce695 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/card.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "card", + "files": [ + { + "path": "registry/base-luma/ui/card.tsx", + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 dark:ring-foreground/10 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/card", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/carousel-example.json b/apps/v4/public/r/styles/base-luma/carousel-example.json new file mode 100644 index 0000000000..00c8b200a5 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/carousel-example.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel-example", + "title": "Carousel", + "registryDependencies": [ + "card", + "carousel", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/carousel-example.tsx", + "content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Card, CardContent } from \"@/registry/base-luma/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-luma/ui/carousel\"\n\nexport default function CarouselExample() {\n return (\n \n \n \n \n \n )\n}\n\nfunction CarouselBasic() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n\nfunction CarouselMultiple() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n\nfunction CarouselWithGap() {\n return (\n \n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/carousel.json b/apps/v4/public/r/styles/base-luma/carousel.json new file mode 100644 index 0000000000..3ff8cfd8e5 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/carousel.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "carousel", + "dependencies": [ + "embla-carousel-react" + ], + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/base-luma/ui/carousel.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nfunction Carousel({\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) return\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) return\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) return\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n
\n \n )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n \n \n
\n )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const { orientation } = useCarousel()\n\n return (\n \n )\n}\n\nfunction CarouselPrevious({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n}\n\nfunction CarouselNext({\n className,\n variant = \"outline\",\n size = \"icon-sm\",\n ...props\n}: React.ComponentProps) {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n}\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n useCarousel,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/carousel", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx", + "api": "https://www.embla-carousel.com/get-started/react" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/chart-example.json b/apps/v4/public/r/styles/base-luma/chart-example.json new file mode 100644 index 0000000000..2dac36f3de --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/chart-example.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "chart-example", + "title": "Chart", + "registryDependencies": [ + "chart", + "card", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/chart-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n CartesianGrid,\n Label,\n Line,\n LineChart,\n Pie,\n PieChart,\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n RadialBar,\n RadialBarChart,\n XAxis,\n} from \"recharts\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-luma/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nfunction ChartAreaExample() {\n return (\n \n \n \n Area Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n January - June 2024\n
\n
\n
\n \n \n \n )\n}\n\nconst barChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n return (\n \n \n \n Bar Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n\nconst lineChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n return (\n \n \n \n Line Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n
\n
\n \n \n \n )\n}\n\nconst pieChartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n const totalVisitors = React.useMemo(() => {\n return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n \n \n \n Pie Chart - Donut with Text\n January - June 2024\n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n\nconst radarChartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n return (\n \n \n \n Radar Chart - Multiple\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n January - June 2024\n
\n \n \n \n )\n}\n\nconst radialChartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n return (\n \n \n \n Radial Chart - Shape\n January - June 2024\n \n \n \n \n \n \n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {radialChartData[0].visitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/chart.json b/apps/v4/public/r/styles/base-luma/chart.json new file mode 100644 index 0000000000..5d393eb9ca --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/chart.json @@ -0,0 +1,24 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "chart", + "dependencies": [ + "recharts@3.8.0" + ], + "registryDependencies": [ + "card" + ], + "files": [ + { + "path": "registry/base-luma/ui/chart.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/chart", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/checkbox-example.json b/apps/v4/public/r/styles/base-luma/checkbox-example.json new file mode 100644 index 0000000000..618a97bcc2 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/checkbox-example.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "checkbox-example", + "title": "Checkbox", + "registryDependencies": [ + "checkbox", + "field", + "table", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/checkbox-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldTitle,\n} from \"@/registry/base-luma/ui/field\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-luma/ui/table\"\n\nexport default function CheckboxExample() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction CheckboxBasic() {\n return (\n \n \n \n Accept terms and conditions\n \n \n )\n}\n\nfunction CheckboxWithDescription() {\n return (\n \n \n \n \n Accept terms and conditions\n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n \n \n )\n}\n\nfunction CheckboxInvalid() {\n return (\n \n \n \n Accept terms and conditions\n \n \n )\n}\n\nfunction CheckboxDisabled() {\n return (\n \n \n \n Enable notifications\n \n \n )\n}\n\nfunction CheckboxWithTitle() {\n return (\n \n \n \n \n \n \n Enable notifications\n \n You can enable or disable notifications at any time.\n \n \n \n \n \n \n \n \n Enable notifications\n \n You can enable or disable notifications at any time.\n \n \n \n \n \n \n )\n}\n\nconst tableData = [\n {\n id: \"1\",\n name: \"Sarah Chen\",\n email: \"sarah.chen@example.com\",\n role: \"Admin\",\n },\n {\n id: \"2\",\n name: \"Marcus Rodriguez\",\n email: \"marcus.rodriguez@example.com\",\n role: \"User\",\n },\n {\n id: \"3\",\n name: \"Priya Patel\",\n email: \"priya.patel@example.com\",\n role: \"User\",\n },\n {\n id: \"4\",\n name: \"David Kim\",\n email: \"david.kim@example.com\",\n role: \"Editor\",\n },\n]\n\nfunction CheckboxInTable() {\n const [selectedRows, setSelectedRows] = React.useState>(\n new Set([\"1\"])\n )\n\n const selectAll = selectedRows.size === tableData.length\n\n const handleSelectAll = (checked: boolean) => {\n if (checked) {\n setSelectedRows(new Set(tableData.map((row) => row.id)))\n } else {\n setSelectedRows(new Set())\n }\n }\n\n const handleSelectRow = (id: string, checked: boolean) => {\n const newSelected = new Set(selectedRows)\n if (checked) {\n newSelected.add(id)\n } else {\n newSelected.delete(id)\n }\n setSelectedRows(newSelected)\n }\n\n return (\n \n \n \n \n \n \n \n Name\n Email\n Role\n \n \n \n {tableData.map((row) => (\n \n \n \n handleSelectRow(row.id, checked === true)\n }\n />\n \n {row.name}\n {row.email}\n {row.role}\n \n ))}\n \n
\n \n )\n}\n\nfunction CheckboxGroup() {\n return (\n \n \n Show these items on the desktop:\n \n \n \n Hard disks\n \n \n \n \n \n External disks\n \n \n \n \n \n CDs, DVDs, and iPods\n \n \n \n \n \n Connected servers\n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/checkbox.json b/apps/v4/public/r/styles/base-luma/checkbox.json new file mode 100644 index 0000000000..6ae0cefaee --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/checkbox.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "checkbox", + "files": [ + { + "path": "registry/base-luma/ui/checkbox.tsx", + "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n \n svg]:size-3.5\"\n >\n \n \n \n )\n}\n\nexport { Checkbox }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/checkbox", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx", + "api": "https://base-ui.com/react/components/checkbox.md" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/collapsible-example.json b/apps/v4/public/r/styles/base-luma/collapsible-example.json new file mode 100644 index 0000000000..fc1f83bd26 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/collapsible-example.json @@ -0,0 +1,22 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "collapsible-example", + "title": "Collapsible", + "registryDependencies": [ + "button", + "card", + "collapsible", + "field", + "input", + "tabs", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/collapsible-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-luma/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n return (\n \n \n \n \n )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n const fileTree: FileTreeItem[] = [\n {\n name: \"components\",\n items: [\n {\n name: \"ui\",\n items: [\n { name: \"button.tsx\" },\n { name: \"card.tsx\" },\n { name: \"dialog.tsx\" },\n { name: \"input.tsx\" },\n { name: \"select.tsx\" },\n { name: \"table.tsx\" },\n ],\n },\n { name: \"login-form.tsx\" },\n { name: \"register-form.tsx\" },\n ],\n },\n {\n name: \"lib\",\n items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n },\n {\n name: \"hooks\",\n items: [\n { name: \"use-media-query.ts\" },\n { name: \"use-debounce.ts\" },\n { name: \"use-local-storage.ts\" },\n ],\n },\n {\n name: \"types\",\n items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n },\n {\n name: \"public\",\n items: [\n { name: \"favicon.ico\" },\n { name: \"logo.svg\" },\n { name: \"images\" },\n ],\n },\n { name: \"app.tsx\" },\n { name: \"layout.tsx\" },\n { name: \"globals.css\" },\n { name: \"package.json\" },\n { name: \"tsconfig.json\" },\n { name: \"README.md\" },\n { name: \".gitignore\" },\n ]\n\n const renderItem = (fileItem: FileTreeItem) => {\n if (\"items\" in fileItem) {\n return (\n \n \n }\n >\n \n \n {fileItem.name}\n \n \n
\n {fileItem.items.map((child) => renderItem(child))}\n
\n \n \n )\n }\n return (\n \n \n {fileItem.name}\n \n )\n }\n\n return (\n \n \n \n \n \n Explorer\n Outline\n \n \n \n \n
\n {fileTree.map((item) => renderItem(item))}\n
\n \n \n \n )\n}\n\nfunction CollapsibleSettings() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n \n \n \n Radius\n \n Set the corner radius of the element.\n \n \n \n \n \n \n \n Radius X\n \n \n \n \n \n Radius Y\n \n \n \n \n \n \n Radius X\n \n \n \n \n \n Radius Y\n \n \n \n \n \n }\n >\n {isOpen ? (\n \n ) : (\n \n )}\n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/collapsible.json b/apps/v4/public/r/styles/base-luma/collapsible.json new file mode 100644 index 0000000000..b2c835f61c --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/collapsible.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "collapsible", + "files": [ + { + "path": "registry/base-luma/ui/collapsible.tsx", + "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n return \n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n return (\n \n )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/collapsible", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx", + "api": "https://base-ui.com/react/components/collapsible.md" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/combobox-example.json b/apps/v4/public/r/styles/base-luma/combobox-example.json new file mode 100644 index 0000000000..30e2c548e1 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/combobox-example.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "combobox-example", + "title": "Combobox", + "registryDependencies": [ + "button", + "card", + "combobox", + "dialog", + "field", + "input", + "input-group", + "item", + "select", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/combobox-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-luma/ui/card\"\nimport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n} from \"@/registry/base-luma/ui/combobox\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-luma/ui/dialog\"\nimport {\n Field,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/base-luma/ui/input-group\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemTitle,\n} from \"@/registry/base-luma/ui/item\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst frameworks = [\n \"Next.js\",\n \"SvelteKit\",\n \"Nuxt.js\",\n \"Remix\",\n \"Astro\",\n] as const\n\nconst countries = [\n { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n {\n code: \"ar\",\n value: \"argentina\",\n label: \"Argentina\",\n continent: \"South America\",\n },\n { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n {\n code: \"bs\",\n value: \"bahamas\",\n label: \"Bahamas\",\n continent: \"North America\",\n },\n { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n {\n code: \"bb\",\n value: \"barbados\",\n label: \"Barbados\",\n continent: \"North America\",\n },\n { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n {\n code: \"bo\",\n value: \"bolivia\",\n label: \"Bolivia\",\n continent: \"South America\",\n },\n {\n code: \"ba\",\n value: \"bosnia-and-herzegovina\",\n label: \"Bosnia and Herzegovina\",\n continent: \"Europe\",\n },\n { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n {\n code: \"bf\",\n value: \"burkina-faso\",\n label: \"Burkina Faso\",\n continent: \"Africa\",\n },\n { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n {\n code: \"cf\",\n value: \"central-african-republic\",\n label: \"Central African Republic\",\n continent: \"Africa\",\n },\n { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n {\n code: \"co\",\n value: \"colombia\",\n label: \"Colombia\",\n continent: \"South America\",\n },\n { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n {\n code: \"cr\",\n value: \"costa-rica\",\n label: \"Costa Rica\",\n continent: \"North America\",\n },\n { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n {\n code: \"cz\",\n value: \"czech-republic\",\n label: \"Czech Republic\",\n continent: \"Europe\",\n },\n { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n {\n code: \"dm\",\n value: \"dominica\",\n label: \"Dominica\",\n continent: \"North America\",\n },\n {\n code: \"do\",\n value: \"dominican-republic\",\n label: \"Dominican Republic\",\n continent: \"North America\",\n },\n {\n code: \"ec\",\n value: \"ecuador\",\n label: \"Ecuador\",\n continent: \"South America\",\n },\n { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n {\n code: \"sv\",\n value: \"el-salvador\",\n label: \"El Salvador\",\n continent: \"North America\",\n },\n {\n code: \"gq\",\n value: \"equatorial-guinea\",\n label: \"Equatorial Guinea\",\n continent: \"Africa\",\n },\n { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n {\n code: \"gd\",\n value: \"grenada\",\n label: \"Grenada\",\n continent: \"North America\",\n },\n {\n code: \"gt\",\n value: \"guatemala\",\n label: \"Guatemala\",\n continent: \"North America\",\n },\n { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n {\n code: \"gw\",\n value: \"guinea-bissau\",\n label: \"Guinea-Bissau\",\n continent: \"Africa\",\n },\n { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n {\n code: \"hn\",\n value: \"honduras\",\n label: \"Honduras\",\n continent: \"North America\",\n },\n { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n {\n code: \"jm\",\n value: \"jamaica\",\n label: \"Jamaica\",\n continent: \"North America\",\n },\n { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n {\n code: \"li\",\n value: \"liechtenstein\",\n label: \"Liechtenstein\",\n continent: \"Europe\",\n },\n { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n {\n code: \"mh\",\n value: \"marshall-islands\",\n label: \"Marshall Islands\",\n continent: \"Oceania\",\n },\n { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n {\n code: \"fm\",\n value: \"micronesia\",\n label: \"Micronesia\",\n continent: \"Oceania\",\n },\n { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n {\n code: \"nl\",\n value: \"netherlands\",\n label: \"Netherlands\",\n continent: \"Europe\",\n },\n {\n code: \"nz\",\n value: \"new-zealand\",\n label: \"New Zealand\",\n continent: \"Oceania\",\n },\n {\n code: \"ni\",\n value: \"nicaragua\",\n label: \"Nicaragua\",\n continent: \"North America\",\n },\n { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n {\n code: \"mk\",\n value: \"north-macedonia\",\n label: \"North Macedonia\",\n continent: \"Europe\",\n },\n { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n {\n code: \"pg\",\n value: \"papua-new-guinea\",\n label: \"Papua New Guinea\",\n continent: \"Oceania\",\n },\n {\n code: \"py\",\n value: \"paraguay\",\n label: \"Paraguay\",\n continent: \"South America\",\n },\n { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n {\n code: \"sa\",\n value: \"saudi-arabia\",\n label: \"Saudi Arabia\",\n continent: \"Asia\",\n },\n { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n {\n code: \"sl\",\n value: \"sierra-leone\",\n label: \"Sierra Leone\",\n continent: \"Africa\",\n },\n { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n {\n code: \"sb\",\n value: \"solomon-islands\",\n label: \"Solomon Islands\",\n continent: \"Oceania\",\n },\n { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n {\n code: \"za\",\n value: \"south-africa\",\n label: \"South Africa\",\n continent: \"Africa\",\n },\n { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n {\n code: \"ss\",\n value: \"south-sudan\",\n label: \"South Sudan\",\n continent: \"Africa\",\n },\n { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n {\n code: \"sr\",\n value: \"suriname\",\n label: \"Suriname\",\n continent: \"South America\",\n },\n { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n {\n code: \"ch\",\n value: \"switzerland\",\n label: \"Switzerland\",\n continent: \"Europe\",\n },\n { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n {\n code: \"tt\",\n value: \"trinidad-and-tobago\",\n label: \"Trinidad and Tobago\",\n continent: \"North America\",\n },\n { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n {\n code: \"tm\",\n value: \"turkmenistan\",\n label: \"Turkmenistan\",\n continent: \"Asia\",\n },\n { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n {\n code: \"ae\",\n value: \"united-arab-emirates\",\n label: \"United Arab Emirates\",\n continent: \"Asia\",\n },\n {\n code: \"gb\",\n value: \"united-kingdom\",\n label: \"United Kingdom\",\n continent: \"Europe\",\n },\n {\n code: \"us\",\n value: \"united-states\",\n label: \"United States\",\n continent: \"North America\",\n },\n {\n code: \"uy\",\n value: \"uruguay\",\n label: \"Uruguay\",\n continent: \"South America\",\n },\n { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n {\n code: \"va\",\n value: \"vatican-city\",\n label: \"Vatican City\",\n continent: \"Europe\",\n },\n {\n code: \"ve\",\n value: \"venezuela\",\n label: \"Venezuela\",\n continent: \"South America\",\n },\n { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n {\n value: \"Americas\",\n items: [\n \"(GMT-5) New York\",\n \"(GMT-8) Los Angeles\",\n \"(GMT-6) Chicago\",\n \"(GMT-5) Toronto\",\n \"(GMT-8) Vancouver\",\n \"(GMT-3) São Paulo\",\n ],\n },\n {\n value: \"Europe\",\n items: [\n \"(GMT+0) London\",\n \"(GMT+1) Paris\",\n \"(GMT+1) Berlin\",\n \"(GMT+1) Rome\",\n \"(GMT+1) Madrid\",\n \"(GMT+1) Amsterdam\",\n ],\n },\n {\n value: \"Asia/Pacific\",\n items: [\n \"(GMT+9) Tokyo\",\n \"(GMT+8) Shanghai\",\n \"(GMT+8) Singapore\",\n \"(GMT+4) Dubai\",\n \"(GMT+11) Sydney\",\n \"(GMT+9) Seoul\",\n ],\n },\n] as const\n\nfunction ComboboxBasic() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxSides() {\n return (\n \n
\n {(\n [\n \"inline-start\",\n \"left\",\n \"top\",\n \"bottom\",\n \"right\",\n \"inline-end\",\n ] as const\n ).map((side) => (\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n ))}\n
\n \n )\n}\n\nfunction ComboboxDisabled() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInvalid() {\n return (\n \n
\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Framework\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n Please select a valid framework.\n \n \n
\n \n )\n}\n\nfunction ComboboxWithClear() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithGroups() {\n return (\n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n return (\n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithForm() {\n const handleSubmit = (event: React.FormEvent) => {\n event.preventDefault()\n const formData = new FormData(event.target as HTMLFormElement)\n const framework = formData.get(\"framework\") as string\n toast(`You selected ${framework} as your framework.`)\n }\n\n return (\n \n \n \n \n \n \n Framework\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxAutoHighlight() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboxboxInputAddon() {\n return (\n \n \n \n \n \n \n \n \n No timezones found.\n \n {(group) => (\n \n {group.value}\n \n {(item) => (\n \n {item}\n \n )}\n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInPopup() {\n return (\n \n \n \n }\n >\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item.label}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultiple() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultipleDisabled() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxMultipleInvalid() {\n const anchor1 = useComboboxAnchor()\n const anchor2 = useComboboxAnchor()\n\n return (\n \n
\n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Frameworks\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n {value}\n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n Please select at least one framework.\n \n \n \n
\n \n )\n}\n\nfunction ComboboxMultipleNoRemove() {\n const anchor = useComboboxAnchor()\n\n return (\n \n \n \n \n {(values) => (\n \n {values.map((value: string) => (\n \n {value}\n \n ))}\n \n \n )}\n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxWithCustomItems() {\n return (\n \n country.code !== \"\")}\n itemToStringValue={(country: (typeof countries)[number]) =>\n country.label\n }\n >\n \n \n No countries found.\n \n {(country) => (\n \n \n \n \n {country.label}\n \n \n {country.continent} ({country.code})\n \n \n \n \n )}\n \n \n \n \n )\n}\n\nfunction ComboboxInDialog() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n \n }>\n Open Dialog\n \n \n \n Select Framework\n \n Choose your preferred framework from the list below.\n \n \n \n \n Framework\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n setOpen(false)}\n >\n Cancel\n \n {\n toast(\"Framework selected.\")\n setOpen(false)\n }}\n >\n Confirm\n \n \n \n \n \n )\n}\n\nconst items = [\n {\n label: \"Select a framework\",\n value: null,\n },\n {\n label: \"React\",\n value: \"react\",\n },\n {\n label: \"Vue\",\n value: \"vue\",\n },\n {\n label: \"Angular\",\n value: \"angular\",\n },\n {\n label: \"Svelte\",\n value: \"svelte\",\n },\n {\n label: \"Solid\",\n value: \"solid\",\n },\n {\n label: \"Preact\",\n value: \"preact\",\n },\n {\n label: \"Next.js\",\n value: \"next.js\",\n },\n]\n\nfunction ComboboxWithOtherInputs() {\n return (\n \n \n \n \n No items found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Select a framework\n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/combobox.json b/apps/v4/public/r/styles/base-luma/combobox.json new file mode 100644 index 0000000000..736fbf6e30 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/combobox.json @@ -0,0 +1,26 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "combobox", + "dependencies": [ + "@base-ui/react" + ], + "registryDependencies": [ + "button", + "input-group" + ], + "files": [ + { + "path": "registry/base-luma/ui/combobox.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-luma/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n }\n className={cn(className)}\n {...props}\n >\n \n \n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean\n showClear?: boolean\n}) {\n return (\n \n }\n {...props}\n />\n \n {showTrigger && (\n }\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && }\n \n {children}\n \n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n \n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n {children}\n \n }\n >\n \n \n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n \n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n )\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef &\n ComboboxPrimitive.Chips.Props) {\n return (\n \n )\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean\n}) {\n return (\n \n {children}\n {showRemove && (\n }\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n \n \n )}\n \n )\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n \n )\n}\n\nfunction useComboboxAnchor() {\n return React.useRef(null)\n}\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxGroup,\n ComboboxLabel,\n ComboboxCollection,\n ComboboxEmpty,\n ComboboxSeparator,\n ComboboxChips,\n ComboboxChip,\n ComboboxChipsInput,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/combobox", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx", + "api": "https://base-ui.com/react/components/combobox.md" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/command-example.json b/apps/v4/public/r/styles/base-luma/command-example.json new file mode 100644 index 0000000000..a514627495 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/command-example.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "command-example", + "title": "Command", + "registryDependencies": [ + "button", + "command", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/command-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-luma/ui/card\"\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/base-luma/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n return (\n \n \n \n \n \n \n \n )\n}\n\nfunction CommandInline() {\n return (\n \n \n \n \n \n \n No results found.\n \n \n \n Calendar\n \n \n \n Search Emoji\n \n \n \n Calculator\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Billing\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n \n \n \n )\n}\n\nfunction CommandBasic() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n
\n setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n \n \n \n \n \n No results found.\n \n Calendar\n Search Emoji\n Calculator\n \n \n \n \n
\n \n )\n}\n\nfunction CommandWithShortcuts() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n
\n setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n \n \n \n \n \n No results found.\n \n \n \n Profile\n ⌘P\n \n \n \n Billing\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n \n
\n \n )\n}\n\nfunction CommandWithGroups() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n
\n setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n \n \n \n \n \n No results found.\n \n \n \n Calendar\n \n \n \n Search Emoji\n \n \n \n Calculator\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Billing\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n \n
\n \n )\n}\n\nfunction CommandManyItems() {\n const [open, setOpen] = React.useState(false)\n\n return (\n \n
\n setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n \n \n \n \n \n No results found.\n \n \n \n Home\n ⌘H\n \n \n \n Inbox\n ⌘I\n \n \n \n Documents\n ⌘D\n \n \n \n Folders\n ⌘F\n \n \n \n \n \n \n New File\n ⌘N\n \n \n \n New Folder\n ⇧⌘N\n \n \n \n Copy\n ⌘C\n \n \n \n Cut\n ⌘X\n \n \n \n Paste\n ⌘V\n \n \n \n Delete\n ⌫\n \n \n \n \n \n \n Grid View\n \n \n \n List View\n \n \n \n Zoom In\n ⌘+\n \n \n \n Zoom Out\n ⌘-\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Billing\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n Notifications\n \n \n \n Help & Support\n \n \n \n \n \n \n Calculator\n \n \n \n Calendar\n \n \n \n Image Editor\n \n \n \n Code Editor\n \n \n \n \n \n
\n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/command.json b/apps/v4/public/r/styles/base-luma/command.json new file mode 100644 index 0000000000..56f23cbc6e --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/command.json @@ -0,0 +1,26 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "command", + "dependencies": [ + "cmdk" + ], + "registryDependencies": [ + "dialog", + "input-group" + ], + "files": [ + { + "path": "registry/base-luma/ui/command.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"@/registry/base-luma/ui/dialog\"\nimport {\n InputGroup,\n InputGroupAddon,\n} from \"@/registry/base-luma/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandDialog({\n title = \"Command Palette\",\n description = \"Search for a command to run...\",\n children,\n className,\n showCloseButton = false,\n ...props\n}: Omit, \"children\"> & {\n title?: string\n description?: string\n className?: string\n showCloseButton?: boolean\n children: React.ReactNode\n}) {\n return (\n \n \n {title}\n {description}\n \n \n {children}\n \n \n )\n}\n\nfunction CommandInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n
\n \n \n \n \n \n \n
\n )\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandEmpty({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/command", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx", + "api": "https://github.com/dip/cmdk" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/component-example.json b/apps/v4/public/r/styles/base-luma/component-example.json new file mode 100644 index 0000000000..11935eee25 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/component-example.json @@ -0,0 +1,26 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "component-example", + "title": "Example", + "registryDependencies": [ + "alert-dialog", + "badge", + "button", + "card", + "combobox", + "dropdown-menu", + "field", + "input", + "select", + "textarea", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/component-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/base-luma/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport {\n Combobox,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n} from \"@/registry/base-luma/ui/combobox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { Textarea } from \"@/registry/base-luma/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n return (\n \n \n \n \n )\n}\n\nfunction CardExample() {\n return (\n \n \n
\n \n \n Observability Plus is replacing Monitoring\n \n Switch to the improved way to explore your data, with natural\n language. Monitoring will no longer be available on the Pro plan in\n November, 2025\n \n \n \n \n }>\n \n Show Dialog\n \n \n \n \n \n \n Allow accessory to connect?\n \n Do you want to allow the USB accessory to connect to this\n device?\n \n \n \n Don't allow\n Allow\n \n \n \n \n Warning\n \n \n \n \n )\n}\n\nconst frameworks = [\n \"Next.js\",\n \"SvelteKit\",\n \"Nuxt.js\",\n \"Remix\",\n \"Astro\",\n] as const\n\nconst roleItems = [\n { label: \"Developer\", value: \"developer\" },\n { label: \"Designer\", value: \"designer\" },\n { label: \"Manager\", value: \"manager\" },\n { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n const [notifications, setNotifications] = React.useState({\n email: true,\n sms: false,\n push: true,\n })\n const [theme, setTheme] = React.useState(\"light\")\n\n return (\n \n \n \n User Information\n Please fill in your details below\n \n \n }\n >\n \n More options\n \n \n \n File\n \n \n New File\n ⌘N\n \n \n \n New Folder\n ⇧⌘N\n \n \n \n \n Open Recent\n \n \n \n \n Recent Projects\n \n \n Project Alpha\n \n \n \n Project Beta\n \n \n \n \n More Projects\n \n \n \n \n \n Project Gamma\n \n \n \n Project Delta\n \n \n \n \n \n \n \n \n \n Browse...\n \n \n \n \n \n \n \n \n Save\n ⌘S\n \n \n \n Export\n ⇧⌘E\n \n \n \n \n View\n \n setNotifications({\n ...notifications,\n email: checked === true,\n })\n }\n >\n \n Show Sidebar\n \n \n setNotifications({\n ...notifications,\n sms: checked === true,\n })\n }\n >\n \n Show Status Bar\n \n \n \n \n Theme\n \n \n \n \n Appearance\n \n \n \n Light\n \n \n \n Dark\n \n \n \n System\n \n \n \n \n \n \n \n \n \n Account\n \n \n Profile\n ⇧⌘P\n \n \n \n Billing\n \n \n \n \n Settings\n \n \n \n \n Preferences\n \n \n Keyboard Shortcuts\n \n \n \n Language\n \n \n \n \n Notifications\n \n \n \n \n \n Notification Types\n \n \n setNotifications({\n ...notifications,\n push: checked === true,\n })\n }\n >\n \n Push Notifications\n \n \n setNotifications({\n ...notifications,\n email: checked === true,\n })\n }\n >\n \n Email Notifications\n \n \n \n \n \n \n \n \n \n \n Privacy & Security\n \n \n \n \n \n \n \n \n \n \n Help & Support\n \n \n \n Documentation\n \n \n \n \n \n \n Sign Out\n ⇧⌘Q\n \n \n \n \n \n \n \n
\n \n
\n \n Name\n \n \n \n Role\n \n \n
\n \n \n Framework\n \n \n \n \n No frameworks found.\n \n {(item) => (\n \n {item}\n \n )}\n \n \n \n \n \n Comments\n \n \n \n \n \n \n \n
\n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/context-menu-example.json b/apps/v4/public/r/styles/base-luma/context-menu-example.json new file mode 100644 index 0000000000..55b7ec0d0a --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/context-menu-example.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "context-menu-example", + "title": "Context Menu", + "registryDependencies": [ + "button", + "context-menu", + "dialog", + "example" + ], + "files": [ + { + "path": "registry/base-luma/examples/context-menu-example.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from \"@/registry/base-luma/ui/context-menu\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-luma/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ContextMenuBasic() {\n return (\n \n \n \n Right click here\n \n \n \n Back\n Forward\n Reload\n \n \n \n \n )\n}\n\nfunction ContextMenuWithIcons() {\n return (\n \n \n \n Right click here\n \n \n \n \n \n Copy\n \n \n \n Cut\n \n \n \n Paste\n \n \n \n \n \n \n Delete\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithShortcuts() {\n return (\n \n \n \n Right click here\n \n \n \n \n Back\n ⌘[\n \n \n Forward\n ⌘]\n \n \n Reload\n ⌘R\n \n \n \n \n \n Save\n ⌘S\n \n \n Save As...\n ⇧⌘S\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithSubmenu() {\n return (\n \n \n \n Right click here\n \n \n \n \n Copy\n ⌘C\n \n \n Cut\n ⌘X\n \n \n \n More Tools\n \n \n Save Page...\n Create Shortcut...\n Name Window...\n \n \n \n Developer Tools\n \n \n \n Delete\n \n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithGroups() {\n return (\n \n \n \n Right click here\n \n \n \n File\n \n New File\n ⌘N\n \n \n Open File\n ⌘O\n \n \n Save\n ⌘S\n \n \n \n \n Edit\n \n Undo\n ⌘Z\n \n \n Redo\n ⇧⌘Z\n \n \n \n \n \n Cut\n ⌘X\n \n \n Copy\n ⌘C\n \n \n Paste\n ⌘V\n \n \n \n \n \n Delete\n ⌫\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithCheckboxes() {\n return (\n \n \n \n Right click here\n \n \n \n \n Show Bookmarks Bar\n \n Show Full URLs\n \n Show Developer Tools\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithRadio() {\n const [user, setUser] = React.useState(\"pedro\")\n const [theme, setTheme] = React.useState(\"light\")\n\n return (\n \n \n \n Right click here\n \n \n \n People\n \n \n Pedro Duarte\n \n \n Colm Tuite\n \n \n \n \n \n Theme\n \n Light\n Dark\n System\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithDestructive() {\n return (\n \n \n \n Right click here\n \n \n \n \n \n Edit\n \n \n \n Share\n \n \n \n \n \n \n Archive\n \n \n \n Delete\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithSides() {\n return (\n \n
\n {(\n [\n \"inline-start\",\n \"left\",\n \"top\",\n \"bottom\",\n \"right\",\n \"inline-end\",\n ] as const\n ).map((side) => (\n \n \n {side.replace(\"-\", \" \")}\n \n \n \n Back\n Forward\n Reload\n \n \n \n ))}\n
\n \n )\n}\n\nfunction ContextMenuInDialog() {\n return (\n \n \n }>\n Open Dialog\n \n \n \n Context Menu Example\n \n Right click on the area below to see the context menu.\n \n \n \n \n Right click here\n \n \n \n \n \n Copy\n \n \n \n Cut\n \n \n \n Paste\n \n \n \n \n More Options\n \n \n Save Page...\n Create Shortcut...\n Name Window...\n \n \n \n Developer Tools\n \n \n \n \n \n \n \n Delete\n \n \n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithInset() {\n const [showBookmarks, setShowBookmarks] = React.useState(true)\n const [showUrls, setShowUrls] = React.useState(false)\n const [theme, setTheme] = React.useState(\"system\")\n\n return (\n \n \n \n Right click here\n \n \n \n Actions\n \n \n Copy\n \n \n \n Cut\n \n Paste\n \n \n \n Appearance\n \n Bookmarks\n \n \n Full URLs\n \n \n \n \n Theme\n \n \n Light\n \n \n Dark\n \n \n System\n \n \n \n \n \n More Options\n \n \n Save Page...\n Create Shortcut...\n \n \n \n \n \n \n )\n}\n", + "type": "registry:example" + } + ], + "type": "registry:example" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/context-menu.json b/apps/v4/public/r/styles/base-luma/context-menu.json new file mode 100644 index 0000000000..8b287807d0 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/context-menu.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "context-menu", + "files": [ + { + "path": "registry/base-luma/ui/context-menu.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n return \n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuTrigger({\n className,\n ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuContent({\n className,\n align = \"start\",\n alignOffset = 4,\n side = \"right\",\n sideOffset = 0,\n ...props\n}: ContextMenuPrimitive.Popup.Props &\n Pick<\n ContextMenuPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n return (\n \n \n \n \n \n )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: ContextMenuPrimitive.Item.Props & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ContextMenuSubContent({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuRadioGroup({\n ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction ContextMenuSeparator({\n className,\n ...props\n}: ContextMenuPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n", + "type": "registry:ui" + } + ], + "meta": { + "links": { + "docs": "https://ui.shadcn.com/docs/components/base/context-menu", + "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx", + "api": "https://base-ui.com/react/components/context-menu.md" + } + }, + "type": "registry:ui" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/dashboard-01.json b/apps/v4/public/r/styles/base-luma/dashboard-01.json new file mode 100644 index 0000000000..210b6a6fec --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/dashboard-01.json @@ -0,0 +1,101 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "dashboard-01", + "title": "Dashboard 01", + "description": "A dashboard with sidebar, charts and data table.", + "dependencies": [ + "@dnd-kit/core", + "@dnd-kit/modifiers", + "@dnd-kit/sortable", + "@dnd-kit/utilities", + "@tanstack/react-table", + "zod" + ], + "registryDependencies": [ + "sidebar", + "breadcrumb", + "separator", + "label", + "chart", + "card", + "select", + "tabs", + "table", + "toggle-group", + "badge", + "button", + "checkbox", + "dropdown-menu", + "drawer", + "input", + "avatar", + "sheet", + "sonner" + ], + "files": [ + { + "path": "registry/base-luma/blocks/dashboard-01/page.tsx", + "content": "import { AppSidebar } from \"@/registry/base-luma/blocks/dashboard-01/components/app-sidebar\"\nimport { ChartAreaInteractive } from \"@/registry/base-luma/blocks/dashboard-01/components/chart-area-interactive\"\nimport { DataTable } from \"@/registry/base-luma/blocks/dashboard-01/components/data-table\"\nimport { SectionCards } from \"@/registry/base-luma/blocks/dashboard-01/components/section-cards\"\nimport { SiteHeader } from \"@/registry/base-luma/blocks/dashboard-01/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-luma/ui/sidebar\"\n\nimport data from \"./data.json\"\n\nexport default function Page() {\n return (\n \n \n \n \n
\n
\n
\n \n
\n \n
\n \n
\n
\n
\n \n \n )\n}\n", + "type": "registry:page", + "target": "app/dashboard/page.tsx" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/data.json", + "content": "[\n {\n \"id\": 1,\n \"header\": \"Cover page\",\n \"type\": \"Cover page\",\n \"status\": \"In Process\",\n \"target\": \"18\",\n \"limit\": \"5\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 2,\n \"header\": \"Table of contents\",\n \"type\": \"Table of contents\",\n \"status\": \"Done\",\n \"target\": \"29\",\n \"limit\": \"24\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 3,\n \"header\": \"Executive summary\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"10\",\n \"limit\": \"13\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 4,\n \"header\": \"Technical approach\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"27\",\n \"limit\": \"23\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 5,\n \"header\": \"Design\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"2\",\n \"limit\": \"16\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 6,\n \"header\": \"Capabilities\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"20\",\n \"limit\": \"8\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 7,\n \"header\": \"Integration with existing systems\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"21\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 8,\n \"header\": \"Innovation and Advantages\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"25\",\n \"limit\": \"26\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 9,\n \"header\": \"Overview of EMR's Innovative Solutions\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"7\",\n \"limit\": \"23\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 10,\n \"header\": \"Advanced Algorithms and Machine Learning\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"30\",\n \"limit\": \"28\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 11,\n \"header\": \"Adaptive Communication Protocols\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"9\",\n \"limit\": \"31\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 12,\n \"header\": \"Advantages Over Current Technologies\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"12\",\n \"limit\": \"0\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 13,\n \"header\": \"Past Performance\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"33\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 14,\n \"header\": \"Customer Feedback and Satisfaction Levels\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"15\",\n \"limit\": \"34\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 15,\n \"header\": \"Implementation Challenges and Solutions\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"3\",\n \"limit\": \"35\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 16,\n \"header\": \"Security Measures and Data Protection Policies\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"6\",\n \"limit\": \"36\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 17,\n \"header\": \"Scalability and Future Proofing\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"4\",\n \"limit\": \"37\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 18,\n \"header\": \"Cost-Benefit Analysis\",\n \"type\": \"Plain language\",\n \"status\": \"Done\",\n \"target\": \"14\",\n \"limit\": \"38\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 19,\n \"header\": \"User Training and Onboarding Experience\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"17\",\n \"limit\": \"39\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 20,\n \"header\": \"Future Development Roadmap\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"11\",\n \"limit\": \"40\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 21,\n \"header\": \"System Architecture Overview\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"24\",\n \"limit\": \"18\",\n \"reviewer\": \"Maya Johnson\"\n },\n {\n \"id\": 22,\n \"header\": \"Risk Management Plan\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"15\",\n \"limit\": \"22\",\n \"reviewer\": \"Carlos Rodriguez\"\n },\n {\n \"id\": 23,\n \"header\": \"Compliance Documentation\",\n \"type\": \"Legal\",\n \"status\": \"In Process\",\n \"target\": \"31\",\n \"limit\": \"27\",\n \"reviewer\": \"Sarah Chen\"\n },\n {\n \"id\": 24,\n \"header\": \"API Documentation\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"8\",\n \"limit\": \"12\",\n \"reviewer\": \"Raj Patel\"\n },\n {\n \"id\": 25,\n \"header\": \"User Interface Mockups\",\n \"type\": \"Visual\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"25\",\n \"reviewer\": \"Leila Ahmadi\"\n },\n {\n \"id\": 26,\n \"header\": \"Database Schema\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"20\",\n \"reviewer\": \"Thomas Wilson\"\n },\n {\n \"id\": 27,\n \"header\": \"Testing Methodology\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"17\",\n \"limit\": \"14\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 28,\n \"header\": \"Deployment Strategy\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"26\",\n \"limit\": \"30\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 29,\n \"header\": \"Budget Breakdown\",\n \"type\": \"Financial\",\n \"status\": \"In Process\",\n \"target\": \"13\",\n \"limit\": \"16\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 30,\n \"header\": \"Market Analysis\",\n \"type\": \"Research\",\n \"status\": \"Done\",\n \"target\": \"29\",\n \"limit\": \"32\",\n \"reviewer\": \"Sophia Martinez\"\n },\n {\n \"id\": 31,\n \"header\": \"Competitor Comparison\",\n \"type\": \"Research\",\n \"status\": \"In Process\",\n \"target\": \"21\",\n \"limit\": \"19\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 32,\n \"header\": \"Maintenance Plan\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"16\",\n \"limit\": \"23\",\n \"reviewer\": \"Alex Thompson\"\n },\n {\n \"id\": 33,\n \"header\": \"User Personas\",\n \"type\": \"Research\",\n \"status\": \"In Process\",\n \"target\": \"27\",\n \"limit\": \"24\",\n \"reviewer\": \"Nina Patel\"\n },\n {\n \"id\": 34,\n \"header\": \"Accessibility Compliance\",\n \"type\": \"Legal\",\n \"status\": \"Done\",\n \"target\": \"18\",\n \"limit\": \"21\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 35,\n \"header\": \"Performance Metrics\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"23\",\n \"limit\": \"26\",\n \"reviewer\": \"David Kim\"\n },\n {\n \"id\": 36,\n \"header\": \"Disaster Recovery Plan\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"14\",\n \"limit\": \"17\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 37,\n \"header\": \"Third-party Integrations\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"25\",\n \"limit\": \"28\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 38,\n \"header\": \"User Feedback Summary\",\n \"type\": \"Research\",\n \"status\": \"Done\",\n \"target\": \"20\",\n \"limit\": \"15\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 39,\n \"header\": \"Localization Strategy\",\n \"type\": \"Narrative\",\n \"status\": \"In Process\",\n \"target\": \"12\",\n \"limit\": \"19\",\n \"reviewer\": \"Maria Garcia\"\n },\n {\n \"id\": 40,\n \"header\": \"Mobile Compatibility\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"28\",\n \"limit\": \"31\",\n \"reviewer\": \"James Wilson\"\n },\n {\n \"id\": 41,\n \"header\": \"Data Migration Plan\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"22\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 42,\n \"header\": \"Quality Assurance Protocols\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"30\",\n \"limit\": \"33\",\n \"reviewer\": \"Priya Singh\"\n },\n {\n \"id\": 43,\n \"header\": \"Stakeholder Analysis\",\n \"type\": \"Research\",\n \"status\": \"In Process\",\n \"target\": \"11\",\n \"limit\": \"14\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 44,\n \"header\": \"Environmental Impact Assessment\",\n \"type\": \"Research\",\n \"status\": \"Done\",\n \"target\": \"24\",\n \"limit\": \"27\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 45,\n \"header\": \"Intellectual Property Rights\",\n \"type\": \"Legal\",\n \"status\": \"In Process\",\n \"target\": \"17\",\n \"limit\": \"20\",\n \"reviewer\": \"Sarah Johnson\"\n },\n {\n \"id\": 46,\n \"header\": \"Customer Support Framework\",\n \"type\": \"Narrative\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"25\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 47,\n \"header\": \"Version Control Strategy\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"15\",\n \"limit\": \"18\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 48,\n \"header\": \"Continuous Integration Pipeline\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"26\",\n \"limit\": \"29\",\n \"reviewer\": \"Michael Chen\"\n },\n {\n \"id\": 49,\n \"header\": \"Regulatory Compliance\",\n \"type\": \"Legal\",\n \"status\": \"In Process\",\n \"target\": \"13\",\n \"limit\": \"16\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 50,\n \"header\": \"User Authentication System\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"28\",\n \"limit\": \"31\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 51,\n \"header\": \"Data Analytics Framework\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"21\",\n \"limit\": \"24\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 52,\n \"header\": \"Cloud Infrastructure\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"16\",\n \"limit\": \"19\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 53,\n \"header\": \"Network Security Measures\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"29\",\n \"limit\": \"32\",\n \"reviewer\": \"Lisa Wong\"\n },\n {\n \"id\": 54,\n \"header\": \"Project Timeline\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"14\",\n \"limit\": \"17\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 55,\n \"header\": \"Resource Allocation\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"27\",\n \"limit\": \"30\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 56,\n \"header\": \"Team Structure and Roles\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"20\",\n \"limit\": \"23\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 57,\n \"header\": \"Communication Protocols\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"15\",\n \"limit\": \"18\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 58,\n \"header\": \"Success Metrics\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"30\",\n \"limit\": \"33\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 59,\n \"header\": \"Internationalization Support\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"23\",\n \"limit\": \"26\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 60,\n \"header\": \"Backup and Recovery Procedures\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"18\",\n \"limit\": \"21\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 61,\n \"header\": \"Monitoring and Alerting System\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"25\",\n \"limit\": \"28\",\n \"reviewer\": \"Daniel Park\"\n },\n {\n \"id\": 62,\n \"header\": \"Code Review Guidelines\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"12\",\n \"limit\": \"15\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 63,\n \"header\": \"Documentation Standards\",\n \"type\": \"Technical content\",\n \"status\": \"In Process\",\n \"target\": \"27\",\n \"limit\": \"30\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 64,\n \"header\": \"Release Management Process\",\n \"type\": \"Planning\",\n \"status\": \"Done\",\n \"target\": \"22\",\n \"limit\": \"25\",\n \"reviewer\": \"Assign reviewer\"\n },\n {\n \"id\": 65,\n \"header\": \"Feature Prioritization Matrix\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"19\",\n \"limit\": \"22\",\n \"reviewer\": \"Emma Davis\"\n },\n {\n \"id\": 66,\n \"header\": \"Technical Debt Assessment\",\n \"type\": \"Technical content\",\n \"status\": \"Done\",\n \"target\": \"24\",\n \"limit\": \"27\",\n \"reviewer\": \"Eddie Lake\"\n },\n {\n \"id\": 67,\n \"header\": \"Capacity Planning\",\n \"type\": \"Planning\",\n \"status\": \"In Process\",\n \"target\": \"21\",\n \"limit\": \"24\",\n \"reviewer\": \"Jamik Tashpulatov\"\n },\n {\n \"id\": 68,\n \"header\": \"Service Level Agreements\",\n \"type\": \"Legal\",\n \"status\": \"Done\",\n \"target\": \"26\",\n \"limit\": \"29\",\n \"reviewer\": \"Assign reviewer\"\n }\n]\n", + "type": "registry:file", + "target": "app/dashboard/data.json" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/components/app-sidebar.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavDocuments } from \"@/registry/base-luma/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/base-luma/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/base-luma/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-luma/blocks/dashboard-01/components/nav-user\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n navMain: [\n {\n title: \"Dashboard\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Lifecycle\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Analytics\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Projects\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Team\",\n url: \"#\",\n icon: (\n \n ),\n },\n ],\n navClouds: [\n {\n title: \"Capture\",\n icon: (\n \n ),\n isActive: true,\n url: \"#\",\n items: [\n {\n title: \"Active Proposals\",\n url: \"#\",\n },\n {\n title: \"Archived\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Proposal\",\n icon: (\n \n ),\n url: \"#\",\n items: [\n {\n title: \"Active Proposals\",\n url: \"#\",\n },\n {\n title: \"Archived\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Prompts\",\n icon: (\n \n ),\n url: \"#\",\n items: [\n {\n title: \"Active Proposals\",\n url: \"#\",\n },\n {\n title: \"Archived\",\n url: \"#\",\n },\n ],\n },\n ],\n navSecondary: [\n {\n title: \"Settings\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Get Help\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n title: \"Search\",\n url: \"#\",\n icon: (\n \n ),\n },\n ],\n documents: [\n {\n name: \"Data Library\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n name: \"Reports\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n name: \"Word Assistant\",\n url: \"#\",\n icon: (\n \n ),\n },\n ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n }\n >\n \n Acme Inc.\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/components/chart-area-interactive.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/base-luma/hooks/use-mobile\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-luma/ui/chart\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/base-luma/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n const isMobile = useIsMobile()\n const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n React.useEffect(() => {\n if (isMobile) {\n setTimeRange(\"7d\")\n }\n }, [isMobile])\n\n const filteredData = chartData.filter((item) => {\n const date = new Date(item.date)\n const referenceDate = new Date(\"2024-06-30\")\n let daysToSubtract = 90\n if (timeRange === \"30d\") {\n daysToSubtract = 30\n } else if (timeRange === \"7d\") {\n daysToSubtract = 7\n }\n const startDate = new Date(referenceDate)\n startDate.setDate(startDate.getDate() - daysToSubtract)\n return date >= startDate\n })\n\n return (\n \n \n Total Visitors\n \n \n Total for the last 3 months\n \n Last 3 months\n \n \n {\n setTimeRange(value[0] ?? \"90d\")\n }}\n variant=\"outline\"\n className=\"hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex\"\n >\n Last 3 months\n Last 30 days\n Last 7 days\n \n {\n if (value !== null) {\n setTimeRange(value)\n }\n }}\n >\n \n \n \n \n \n Last 3 months\n \n \n Last 30 days\n \n \n Last 7 days\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n const date = new Date(value)\n return date.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n })\n }}\n />\n {\n return new Date(value).toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n })\n }}\n indicator=\"dot\"\n />\n }\n />\n \n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/components/data-table.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-luma/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-luma/ui/chart\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-luma/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n \n {items.map((item) => (\n \n \n {item.icon}\n {item.title}\n \n \n ))}\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/components/nav-secondary.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-luma/ui/sidebar\"\n\nexport function NavSecondary({\n items,\n ...props\n}: {\n items: {\n title: string\n url: string\n icon: React.ReactNode\n }[]\n} & React.ComponentPropsWithoutRef) {\n return (\n \n \n \n {items.map((item) => (\n \n }>\n {item.icon}\n {item.title}\n \n \n ))}\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/components/nav-user.tsx", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/base-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n return (\n \n \n \n \n }\n >\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/components/section-cards.tsx", + "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport {\n Card,\n CardAction,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n return (\n
\n \n \n Total Revenue\n \n $1,250.00\n \n \n \n \n +12.5%\n \n \n \n \n
\n Trending up this month{\" \"}\n \n
\n
\n Visitors for the last 6 months\n
\n \n \n \n \n New Customers\n \n 1,234\n \n \n \n \n -20%\n \n \n \n \n
\n Down 20% this period{\" \"}\n \n
\n
\n Acquisition needs attention\n
\n \n \n \n \n Active Accounts\n \n 45,678\n \n \n \n \n +12.5%\n \n \n \n \n
\n Strong user retention{\" \"}\n \n
\n
Engagement exceed targets
\n \n \n \n \n Growth Rate\n \n 4.5%\n \n \n \n \n +4.5%\n \n \n \n \n
\n Steady performance increase{\" \"}\n \n
\n
Meets growth projections
\n \n \n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "registry/base-luma/blocks/dashboard-01/components/site-header.tsx", + "content": "import { Separator } from \"@/registry/base-luma/ui/separator\"\nimport { SidebarTrigger } from \"@/registry/base-luma/ui/sidebar\"\n\nexport function SiteHeader() {\n return (\n
\n
\n \n \n

Documents

\n
\n
\n )\n}\n", + "type": "registry:component" + } + ], + "meta": { + "iframeHeight": "1000px" + }, + "categories": [ + "dashboard" + ], + "type": "registry:block" +} \ No newline at end of file diff --git a/apps/v4/public/r/styles/base-luma/demo.json b/apps/v4/public/r/styles/base-luma/demo.json new file mode 100644 index 0000000000..bcac2d98e0 --- /dev/null +++ b/apps/v4/public/r/styles/base-luma/demo.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "demo", + "title": "Demo", + "registryDependencies": [ + "alert-dialog", + "badge", + "button", + "button-group", + "card", + "checkbox", + "dropdown-menu", + "field", + "input-group", + "item", + "radio-group", + "slider", + "switch", + "textarea" + ], + "files": [ + { + "path": "registry/base-luma/examples/demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/base-luma/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-luma/ui/button-group\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-luma/ui/card\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-luma/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n InputGroupText,\n} from \"@/registry/base-luma/ui/input-group\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n ItemTitle,\n} from \"@/registry/base-luma/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-luma/ui/radio-group\"\nimport { Slider } from \"@/registry/base-luma/ui/slider\"\nimport { Switch } from \"@/registry/base-luma/ui/switch\"\nimport { Textarea } from \"@/registry/base-luma/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n const [sliderValue, setSliderValue] = React.useState([500])\n const handleSliderValueChange = React.useCallback(\n (value: number | readonly number[]) => {\n if (typeof value === \"number\") {\n setSliderValue([value])\n } else {\n setSliderValue([...value])\n }\n },\n []\n )\n\n return (\n
\n
\n
\n \n \n Style Overview\n \n Designers love packing quirky glyphs into test phrases. This is\n a preview of the typography styles.\n \n \n \n
\n {[\n \"--background\",\n \"--foreground\",\n \"--primary\",\n \"--secondary\",\n \"--muted\",\n \"--accent\",\n \"--border\",\n \"--chart-1\",\n \"--chart-2\",\n \"--chart-3\",\n \"--chart-4\",\n \"--chart-5\",\n ].map((variant) => (\n \n \n
\n {variant}\n
\n
\n ))}\n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n \n
\n \n \n Two-factor authentication\n \n Verify via email or phone number.\n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n