mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-25 05:35:48 +00:00
fix
This commit is contained in:
shadcn
@@ -8,8 +8,16 @@ import { type z } from "zod"
|
||||
import { Index as StylesIndex } from "@/registry/__index__"
|
||||
import { Index as BasesIndex } from "@/registry/bases/__index__"
|
||||
|
||||
// Styles that have their own index in StylesIndex (built with style transforms).
|
||||
const INDEXED_STYLES = ["new-york-v4", "radix-nova", "base-nova"]
|
||||
|
||||
// Map style names to their corresponding index and key.
|
||||
function getIndexForStyle(styleName: string) {
|
||||
// Use StylesIndex for styles that are built with transforms.
|
||||
if (INDEXED_STYLES.includes(styleName)) {
|
||||
return { index: StylesIndex, key: styleName }
|
||||
}
|
||||
// Fall back to BasesIndex for other base-style combinations.
|
||||
if (styleName.startsWith("radix-")) {
|
||||
return { index: BasesIndex, key: "radix" }
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/accordion-demo.tsx",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\n\nexport default function AccordionDemo() {\n return (\n <Accordion className=\"w-full\" defaultValue={[\"item-1\"]}>\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>Is Base it accessible?</AccordionTrigger>\n <AccordionContent>\n Yes. It adheres to the WAI-ARIA design pattern.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\">\n <AccordionTrigger>Is it styled?</AccordionTrigger>\n <AccordionContent>\n Yes. It comes with default styles that matches the other\n components' aesthetic.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-3\">\n <AccordionTrigger>Is it animated?</AccordionTrigger>\n <AccordionContent>\n Yes. It's animated by default, but you can disable it if you\n prefer.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\n\nexport default function AccordionDemo() {\n return (\n <Accordion className=\"w-full\" defaultValue={[\"item-1\"]}>\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>Is Base it accessible?</AccordionTrigger>\n <AccordionContent>\n Yes. It adheres to the WAI-ARIA design pattern.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\">\n <AccordionTrigger>Is it styled?</AccordionTrigger>\n <AccordionContent>\n Yes. It comes with default styles that matches the other\n components' aesthetic.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-3\">\n <AccordionTrigger>Is it animated?</AccordionTrigger>\n <AccordionContent>\n Yes. It's animated by default, but you can disable it if you\n prefer.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/accordion-disabled.tsx",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\n\nexport default function AccordionDisabled() {\n return (\n <Accordion className=\"w-full\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>Can I access my account history?</AccordionTrigger>\n <AccordionContent>\n Yes, you can view your complete account history including all\n transactions, plan changes, and support tickets in the Account History\n section of your dashboard.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\" disabled>\n <AccordionTrigger>Premium feature information</AccordionTrigger>\n <AccordionContent>\n This section contains information about premium features. Upgrade your\n plan to access this content.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-3\">\n <AccordionTrigger>How do I update my email address?</AccordionTrigger>\n <AccordionContent>\n You can update your email address in your account settings.\n You'll receive a verification email at your new address to\n confirm the change.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\n\nexport default function AccordionDisabled() {\n return (\n <Accordion className=\"w-full\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>Can I access my account history?</AccordionTrigger>\n <AccordionContent>\n Yes, you can view your complete account history including all\n transactions, plan changes, and support tickets in the Account History\n section of your dashboard.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\" disabled>\n <AccordionTrigger>Premium feature information</AccordionTrigger>\n <AccordionContent>\n This section contains information about premium features. Upgrade your\n plan to access this content.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-3\">\n <AccordionTrigger>How do I update my email address?</AccordionTrigger>\n <AccordionContent>\n You can update your email address in your account settings.\n You'll receive a verification email at your new address to\n confirm the change.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -8,7 +8,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/accordion-multiple.tsx",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\n\nexport default function AccordionMultiple() {\n return (\n <Accordion multiple className=\"w-full\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>\n What are the key considerations when implementing a comprehensive\n enterprise-level authentication system?\n </AccordionTrigger>\n <AccordionContent>\n Implementing a robust enterprise authentication system requires\n careful consideration of multiple factors. This includes secure\n password hashing and storage, multi-factor authentication (MFA)\n implementation, session management, OAuth2 and SSO integration,\n regular security audits, rate limiting to prevent brute force attacks,\n and maintaining detailed audit logs. Additionally, you'll need to\n consider scalability, performance impact, and compliance with relevant\n data protection regulations such as GDPR or HIPAA.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\">\n <AccordionTrigger>\n How does modern distributed system architecture handle eventual\n consistency and data synchronization across multiple regions?\n </AccordionTrigger>\n <AccordionContent>\n Modern distributed systems employ various strategies to maintain data\n consistency across regions. This often involves using techniques like\n CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip\n protocols. Systems might implement event sourcing patterns, utilize\n message queues for asynchronous updates, and employ sophisticated\n conflict resolution strategies. Popular solutions like Amazon's\n DynamoDB and Google's Spanner demonstrate different approaches to\n solving these challenges, balancing between consistency, availability,\n and partition tolerance as described in the CAP theorem.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\n\nexport default function AccordionMultiple() {\n return (\n <Accordion multiple className=\"w-full\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger>\n What are the key considerations when implementing a comprehensive\n enterprise-level authentication system?\n </AccordionTrigger>\n <AccordionContent>\n Implementing a robust enterprise authentication system requires\n careful consideration of multiple factors. This includes secure\n password hashing and storage, multi-factor authentication (MFA)\n implementation, session management, OAuth2 and SSO integration,\n regular security audits, rate limiting to prevent brute force attacks,\n and maintaining detailed audit logs. Additionally, you'll need to\n consider scalability, performance impact, and compliance with relevant\n data protection regulations such as GDPR or HIPAA.\n </AccordionContent>\n </AccordionItem>\n <AccordionItem value=\"item-2\">\n <AccordionTrigger>\n How does modern distributed system architecture handle eventual\n consistency and data synchronization across multiple regions?\n </AccordionTrigger>\n <AccordionContent>\n Modern distributed systems employ various strategies to maintain data\n consistency across regions. This often involves using techniques like\n CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip\n protocols. Systems might implement event sourcing patterns, utilize\n message queues for asynchronous updates, and employ sophisticated\n conflict resolution strategies. Popular solutions like Amazon's\n DynamoDB and Google's Spanner demonstrate different approaches to\n solving these challenges, balancing between consistency, availability,\n and partition tolerance as described in the CAP theorem.\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/ui/accordion.tsx",
|
||||
"content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn(\"flex w-full flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn(\"not-last:border-b\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n className\n )}\n {...props}\n >\n {children}\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n data-slot=\"accordion-trigger-icon\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n />\n <IconPlaceholder\n lucide=\"ChevronUpIcon\"\n tabler=\"IconChevronUp\"\n data-slot=\"accordion-trigger-icon\"\n hugeicons=\"ArrowUp01Icon\"\n phosphor=\"CaretUpIcon\"\n className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n <AccordionPrimitive.Panel\n data-slot=\"accordion-content\"\n className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n {...props}\n >\n <div\n className={cn(\n \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n className\n )}\n >\n {children}\n </div>\n </AccordionPrimitive.Panel>\n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
|
||||
"content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn(\"flex w-full flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn(\"not-last:border-b\", className)}\n {...props}\n />\n )\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: AccordionPrimitive.Trigger.Props) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n className\n )}\n {...props}\n >\n {children}\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n data-slot=\"accordion-trigger-icon\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n />\n <IconPlaceholder\n lucide=\"ChevronUpIcon\"\n tabler=\"IconChevronUp\"\n data-slot=\"accordion-trigger-icon\"\n hugeicons=\"ArrowUp01Icon\"\n phosphor=\"CaretUpIcon\"\n className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n )\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: AccordionPrimitive.Panel.Props) {\n return (\n <AccordionPrimitive.Panel\n data-slot=\"accordion-content\"\n className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n {...props}\n >\n <div\n className={cn(\n \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n className\n )}\n >\n {children}\n </div>\n </AccordionPrimitive.Panel>\n )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/alert-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/alert-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-demo",
|
||||
"title": "Alert Demo",
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/alert-demo.tsx",
|
||||
"content": "import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/base-lyra/ui/alert\"\n\nexport default function AlertDemo() {\n return (\n <div className=\"grid w-full max-w-xl items-start gap-4\">\n <Alert>\n <CheckCircle2Icon />\n <AlertTitle>Success! Your changes have been saved</AlertTitle>\n <AlertDescription>\n This is an alert with icon, title and description.\n </AlertDescription>\n </Alert>\n <Alert>\n <PopcornIcon />\n <AlertTitle>\n This Alert has a title and an icon. No description.\n </AlertTitle>\n </Alert>\n <Alert variant=\"destructive\">\n <AlertCircleIcon />\n <AlertTitle>Unable to process your payment.</AlertTitle>\n <AlertDescription>\n <p>Please verify your billing information and try again.</p>\n <ul className=\"list-inside list-disc text-sm\">\n <li>Check your card details</li>\n <li>Ensure sufficient funds</li>\n <li>Verify billing address</li>\n </ul>\n </AlertDescription>\n </Alert>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/alert-destructive.json
Normal file
16
apps/v4/public/r/styles/base-lyra/alert-destructive.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-destructive",
|
||||
"title": "Alert Destructive",
|
||||
"registryDependencies": [
|
||||
"alert"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/alert-destructive.tsx",
|
||||
"content": "import { AlertCircleIcon } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/base-lyra/ui/alert\"\n\nexport default function AlertDestructive() {\n return (\n <Alert variant=\"destructive\">\n <AlertCircleIcon />\n <AlertTitle>Error</AlertTitle>\n <AlertDescription>\n Your session has expired. Please log in again.\n </AlertDescription>\n </Alert>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/alert-dialog-demo.json
Normal file
17
apps/v4/public/r/styles/base-lyra/alert-dialog-demo.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "alert-dialog-demo",
|
||||
"title": "Alert Dialog Demo",
|
||||
"registryDependencies": [
|
||||
"alert-dialog",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/alert-dialog-demo.tsx",
|
||||
"content": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function AlertDialogDemo() {\n return (\n <AlertDialog>\n <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n Show Dialog\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction>Continue</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/ui/alert.tsx",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nconst alertVariants = cva(\"grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\", {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive: \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n})\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n return (\n <div\n data-slot=\"alert\"\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-title\"\n className={cn(\n \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-description\"\n className={cn(\n \"text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-action\"\n className={cn(\"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\", className)}\n {...props}\n />\n )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
|
||||
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst alertVariants = cva(\"grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\", {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive: \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n})\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n return (\n <div\n data-slot=\"alert\"\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-title\"\n className={cn(\n \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-description\"\n className={cn(\n \"text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-action\"\n className={cn(\"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\", className)}\n {...props}\n />\n )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/aspect-ratio-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/aspect-ratio-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "aspect-ratio-demo",
|
||||
"title": "Aspect Ratio Demo",
|
||||
"registryDependencies": [
|
||||
"aspect-ratio"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/aspect-ratio-demo.tsx",
|
||||
"content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/base-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n return (\n <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n alt=\"Photo by Drew Beamer\"\n fill\n className=\"h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale\"\n />\n </AspectRatio>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/examples/aspect-ratio-example.tsx",
|
||||
"content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { AspectRatio } from \"@/registry/bases/base/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n return (\n <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n <AspectRatio16x9 />\n <AspectRatio21x9 />\n <AspectRatio1x1 />\n <AspectRatio9x16 />\n </ExampleWrapper>\n )\n}\n\nfunction AspectRatio16x9() {\n return (\n <Example title=\"16:9\" className=\"items-center justify-center\">\n <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio1x1() {\n return (\n <Example title=\"1:1\" className=\"items-start\">\n <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio9x16() {\n return (\n <Example title=\"9:16\" className=\"items-center justify-center\">\n <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio21x9() {\n return (\n <Example title=\"21:9\" className=\"items-center justify-center\">\n <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n",
|
||||
"content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/base-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n return (\n <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n <AspectRatio16x9 />\n <AspectRatio21x9 />\n <AspectRatio1x1 />\n <AspectRatio9x16 />\n </ExampleWrapper>\n )\n}\n\nfunction AspectRatio16x9() {\n return (\n <Example title=\"16:9\" className=\"items-center justify-center\">\n <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio1x1() {\n return (\n <Example title=\"1:1\" className=\"items-start\">\n <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio9x16() {\n return (\n <Example title=\"9:16\" className=\"items-center justify-center\">\n <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n\nfunction AspectRatio21x9() {\n return (\n <Example title=\"21:9\" className=\"items-center justify-center\">\n <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n <Image\n src=\"https://avatar.vercel.sh/shadcn1\"\n alt=\"Photo\"\n fill\n className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n />\n </AspectRatio>\n </Example>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/ui/aspect-ratio.tsx",
|
||||
"content": "import { cn } from \"@/registry/bases/base/lib/utils\"\n\nfunction AspectRatio({\n ratio,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n return (\n <div\n data-slot=\"aspect-ratio\"\n style={\n {\n \"--ratio\": ratio,\n } as React.CSSProperties\n }\n className={cn(\"relative aspect-(--ratio)\", className)}\n {...props}\n />\n )\n}\n\nexport { AspectRatio }\n",
|
||||
"content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction AspectRatio({\n ratio,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n return (\n <div\n data-slot=\"aspect-ratio\"\n style={\n {\n \"--ratio\": ratio,\n } as React.CSSProperties\n }\n className={cn(\"relative aspect-(--ratio)\", className)}\n {...props}\n />\n )\n}\n\nexport { AspectRatio }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/avatar-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/avatar-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "avatar-demo",
|
||||
"title": "Avatar Demo",
|
||||
"registryDependencies": [
|
||||
"avatar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/avatar-demo.tsx",
|
||||
"content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\n\nexport default function AvatarDemo() {\n return (\n <div className=\"flex flex-row flex-wrap items-center gap-12\">\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <Avatar className=\"rounded-lg\">\n <AvatarImage\n src=\"https://github.com/evilrabbit.png\"\n alt=\"@evilrabbit\"\n />\n <AvatarFallback>ER</AvatarFallback>\n </Avatar>\n <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <Avatar>\n <AvatarImage\n src=\"https://github.com/maxleiter.png\"\n alt=\"@maxleiter\"\n />\n <AvatarFallback>LR</AvatarFallback>\n </Avatar>\n <Avatar>\n <AvatarImage\n src=\"https://github.com/evilrabbit.png\"\n alt=\"@evilrabbit\"\n />\n <AvatarFallback>ER</AvatarFallback>\n </Avatar>\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/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/bases/base/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 <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(\n \"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\n \"rounded-full aspect-square size-full object-cover\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"avatar-badge\"\n className={cn(\n \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>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 <div\n data-slot=\"avatar-group\"\n className={cn(\n \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"avatar-group-count\"\n className={cn(\"bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n}\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-lyra/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 <AvatarPrimitive.Root\n data-slot=\"avatar\"\n data-size={size}\n className={cn(\n \"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\n \"rounded-full aspect-square size-full object-cover\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"avatar-badge\"\n className={cn(\n \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>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 <div\n data-slot=\"avatar-group\"\n className={cn(\n \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"avatar-group-count\"\n className={cn(\"bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n}\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/badge-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/badge-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-demo",
|
||||
"title": "Badge Demo",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/badge-demo.tsx",
|
||||
"content": "import { BadgeCheckIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeDemo() {\n return (\n <div className=\"flex flex-col items-center gap-2\">\n <div className=\"flex w-full flex-wrap gap-2\">\n <Badge>Badge</Badge>\n <Badge variant=\"secondary\">Secondary</Badge>\n <Badge variant=\"destructive\">Destructive</Badge>\n <Badge variant=\"outline\">Outline</Badge>\n </div>\n <div className=\"flex w-full flex-wrap gap-2\">\n <Badge\n variant=\"secondary\"\n className=\"bg-blue-500 text-white dark:bg-blue-600\"\n >\n <BadgeCheckIcon />\n Verified\n </Badge>\n <Badge className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\">\n 8\n </Badge>\n <Badge\n className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n variant=\"destructive\"\n >\n 99\n </Badge>\n <Badge\n className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n variant=\"outline\"\n >\n 20+\n </Badge>\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/badge-destructive.json
Normal file
16
apps/v4/public/r/styles/base-lyra/badge-destructive.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-destructive",
|
||||
"title": "Badge Destructive",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/badge-destructive.tsx",
|
||||
"content": "import { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeDestructive() {\n return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
16
apps/v4/public/r/styles/base-lyra/badge-outline.json
Normal file
16
apps/v4/public/r/styles/base-lyra/badge-outline.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-outline",
|
||||
"title": "Badge Outline",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/badge-outline.tsx",
|
||||
"content": "import { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeOutline() {\n return <Badge variant=\"outline\">Outline</Badge>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/badge-secondary.json
Normal file
16
apps/v4/public/r/styles/base-lyra/badge-secondary.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "badge-secondary",
|
||||
"title": "Badge Secondary",
|
||||
"registryDependencies": [
|
||||
"badge"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/badge-secondary.tsx",
|
||||
"content": "import { Badge } from \"@/registry/base-lyra/ui/badge\"\n\nexport default function BadgeSecondary() {\n return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/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/bases/base/lib/utils\"\n\nconst badgeVariants = cva(\n \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost: \"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<typeof badgeVariants>) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n",
|
||||
"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-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost: \"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<typeof badgeVariants>) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
17
apps/v4/public/r/styles/base-lyra/breadcrumb-demo.json
Normal file
17
apps/v4/public/r/styles/base-lyra/breadcrumb-demo.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "breadcrumb-demo",
|
||||
"title": "Breadcrumb Demo",
|
||||
"registryDependencies": [
|
||||
"breadcrumb",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/breadcrumb-demo.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger className=\"flex items-center gap-1\">\n <BreadcrumbEllipsis className=\"size-4\" />\n <span className=\"sr-only\">Toggle menu</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/docs/components\" />}>\n Components\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/breadcrumb-dropdown.json
Normal file
17
apps/v4/public/r/styles/base-lyra/breadcrumb-dropdown.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "breadcrumb-dropdown",
|
||||
"title": "Breadcrumb Dropdown",
|
||||
"registryDependencies": [
|
||||
"breadcrumb",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/breadcrumb-dropdown.tsx",
|
||||
"content": "import Link from \"next/link\"\nimport { ChevronDownIcon, SlashIcon } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport function BreadcrumbDropdown() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <SlashIcon />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger className=\"flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\">\n Components\n <ChevronDownIcon />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <SlashIcon />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/breadcrumb-ellipsis.json
Normal file
16
apps/v4/public/r/styles/base-lyra/breadcrumb-ellipsis.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "breadcrumb-ellipsis",
|
||||
"title": "Breadcrumb Ellipsis",
|
||||
"registryDependencies": [
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/breadcrumb-ellipsis.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\n\nexport function BreadcrumbEllipsisDemo() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/docs/components\" />}>\n Components\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/examples/breadcrumb-example.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/bases/base/ui/breadcrumb\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n return (\n <ExampleWrapper>\n <BreadcrumbBasic />\n <BreadcrumbWithDropdown />\n <BreadcrumbWithLink />\n </ExampleWrapper>\n )\n}\n\nfunction BreadcrumbBasic() {\n return (\n <Example title=\"Basic\" className=\"items-center justify-center\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </Example>\n )\n}\n\nfunction BreadcrumbWithDropdown() {\n return (\n <Example title=\"With Dropdown\" className=\"items-center justify-center\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button size=\"icon-sm\" variant=\"ghost\" />}\n >\n <BreadcrumbEllipsis />\n <span className=\"sr-only\">Toggle menu</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </Example>\n )\n}\n\nfunction BreadcrumbWithLink() {\n return (\n <Example title=\"With Link\" className=\"items-center justify-center\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"#\">Home</Link>} />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"#\">Components</Link>} />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </Example>\n )\n}\n",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n return (\n <ExampleWrapper>\n <BreadcrumbBasic />\n <BreadcrumbWithDropdown />\n <BreadcrumbWithLink />\n </ExampleWrapper>\n )\n}\n\nfunction BreadcrumbBasic() {\n return (\n <Example title=\"Basic\" className=\"items-center justify-center\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </Example>\n )\n}\n\nfunction BreadcrumbWithDropdown() {\n return (\n <Example title=\"With Dropdown\" className=\"items-center justify-center\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button size=\"icon-sm\" variant=\"ghost\" />}\n >\n <BreadcrumbEllipsis />\n <span className=\"sr-only\">Toggle menu</span>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem>Documentation</DropdownMenuItem>\n <DropdownMenuItem>Themes</DropdownMenuItem>\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </Example>\n )\n}\n\nfunction BreadcrumbWithLink() {\n return (\n <Example title=\"With Link\" className=\"items-center justify-center\">\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"#\">Home</Link>} />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbEllipsis />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"#\">Components</Link>} />\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </Example>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/breadcrumb-link.json
Normal file
16
apps/v4/public/r/styles/base-lyra/breadcrumb-link.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "breadcrumb-link",
|
||||
"title": "Breadcrumb Link",
|
||||
"registryDependencies": [
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/breadcrumb-link.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\n\nexport function BreadcrumbLinkDemo() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/components\" />}>\n Components\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
19
apps/v4/public/r/styles/base-lyra/breadcrumb-responsive.json
Normal file
19
apps/v4/public/r/styles/base-lyra/breadcrumb-responsive.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "breadcrumb-responsive",
|
||||
"title": "Breadcrumb Responsive",
|
||||
"registryDependencies": [
|
||||
"breadcrumb",
|
||||
"button",
|
||||
"drawer",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/breadcrumb-responsive.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nconst items = [\n { href: \"#\", label: \"Home\" },\n { href: \"#\", label: \"Documentation\" },\n { href: \"#\", label: \"Building Your Application\" },\n { href: \"#\", label: \"Data Fetching\" },\n { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport function BreadcrumbResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href={items[0].href ?? \"/\"} />}>\n {items[0].label}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n {items.length > ITEMS_TO_DISPLAY ? (\n <>\n <BreadcrumbItem>\n {isDesktop ? (\n <DropdownMenu open={open} onOpenChange={setOpen}>\n <DropdownMenuTrigger\n className=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis className=\"size-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n {items.slice(1, -2).map((item, index) => (\n <DropdownMenuItem key={index}>\n <Link href={item.href ? item.href : \"#\"}>\n {item.label}\n </Link>\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n ) : (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis className=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader className=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div className=\"grid gap-1 px-4\">\n {items.slice(1, -2).map((item, index) => (\n <Link\n key={index}\n href={item.href ? item.href : \"#\"}\n className=\"py-1 text-sm\"\n >\n {item.label}\n </Link>\n ))}\n </div>\n <DrawerFooter className=\"pt-4\">\n <DrawerClose asChild>\n <Button variant=\"outline\">Close</Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n )}\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </>\n ) : null}\n {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n <BreadcrumbItem key={index}>\n {item.href ? (\n <>\n <BreadcrumbLink\n render={<Link href={item.href} />}\n className=\"max-w-20 truncate md:max-w-none\"\n >\n {item.label}\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </>\n ) : (\n <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n {item.label}\n </BreadcrumbPage>\n )}\n </BreadcrumbItem>\n ))}\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/breadcrumb-separator.json
Normal file
16
apps/v4/public/r/styles/base-lyra/breadcrumb-separator.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "breadcrumb-separator",
|
||||
"title": "Breadcrumb Separator",
|
||||
"registryDependencies": [
|
||||
"breadcrumb"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/breadcrumb-separator.tsx",
|
||||
"content": "import Link from \"next/link\"\nimport { SlashIcon } from \"lucide-react\"\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\n\nexport function BreadcrumbSeparatorDemo() {\n return (\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <SlashIcon />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbLink render={<Link href=\"/components\" />}>\n Components\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator>\n <SlashIcon />\n </BreadcrumbSeparator>\n <BreadcrumbItem>\n <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/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/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n <nav\n aria-label=\"breadcrumb\"\n data-slot=\"breadcrumb\"\n className={cn(className)}\n {...props}\n />\n )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n return (\n <ol\n data-slot=\"breadcrumb-list\"\n className={cn(\n \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"breadcrumb-item\"\n className={cn(\"gap-1 inline-flex items-center\", className)}\n {...props}\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(\"hover:text-foreground transition-colors\", 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 <span\n data-slot=\"breadcrumb-page\"\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn(\"text-foreground font-normal\", className)}\n {...props}\n />\n )\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"breadcrumb-separator\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\"[&>svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? (\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n />\n )}\n </li>\n )\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"breadcrumb-ellipsis\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\n \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n className\n )}\n {...props}\n >\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeIcon\"\n />\n <span className=\"sr-only\">More</span>\n </span>\n )\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n",
|
||||
"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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n <nav\n aria-label=\"breadcrumb\"\n data-slot=\"breadcrumb\"\n className={cn(className)}\n {...props}\n />\n )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n return (\n <ol\n data-slot=\"breadcrumb-list\"\n className={cn(\n \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"breadcrumb-item\"\n className={cn(\"gap-1 inline-flex items-center\", className)}\n {...props}\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(\"hover:text-foreground transition-colors\", 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 <span\n data-slot=\"breadcrumb-page\"\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn(\"text-foreground font-normal\", className)}\n {...props}\n />\n )\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"breadcrumb-separator\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\"[&>svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? (\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n />\n )}\n </li>\n )\n}\n\nfunction BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"breadcrumb-ellipsis\"\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn(\n \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n className\n )}\n {...props}\n >\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeIcon\"\n />\n <span className=\"sr-only\">More</span>\n </span>\n )\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n}\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/button-as-child.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-as-child.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-as-child",
|
||||
"title": "Button As Child",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-as-child.tsx",
|
||||
"content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonAsChild() {\n return (\n <Button render={<Link href=\"/login\" />}>Login</Button>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-default.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-default.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-default",
|
||||
"title": "Button Default",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-default.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonDefault() {\n return <Button>Button</Button>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-demo",
|
||||
"title": "Button Demo",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-demo.tsx",
|
||||
"content": "import { ArrowUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonDemo() {\n return (\n <div className=\"flex flex-wrap items-center gap-2 md:flex-row\">\n <Button variant=\"outline\">Button</Button>\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\n <ArrowUpIcon />\n </Button>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-destructive.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-destructive.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-destructive",
|
||||
"title": "Button Destructive",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-destructive.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonDestructive() {\n return <Button variant=\"destructive\">Destructive</Button>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
16
apps/v4/public/r/styles/base-lyra/button-ghost.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-ghost.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-ghost",
|
||||
"title": "Button Ghost",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-ghost.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonGhost() {\n return <Button variant=\"ghost\">Ghost</Button>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
18
apps/v4/public/r/styles/base-lyra/button-group-demo.json
Normal file
18
apps/v4/public/r/styles/base-lyra/button-group-demo.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-demo",
|
||||
"title": "Button Group Demo",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArchiveIcon,\n ArrowLeftIcon,\n CalendarPlusIcon,\n ClockIcon,\n ListFilterIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n <ArrowLeftIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Archive</Button>\n <Button variant=\"outline\">Report</Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Snooze</Button>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\">\n <MoreHorizontalIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <MailCheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArchiveIcon />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <ClockIcon />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CalendarPlusIcon />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ListFilterIcon />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <TagIcon />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <Trash2Icon />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
18
apps/v4/public/r/styles/base-lyra/button-group-dropdown.json
Normal file
18
apps/v4/public/r/styles/base-lyra/button-group-dropdown.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-dropdown",
|
||||
"title": "Button Group Dropdown",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-dropdown.tsx",
|
||||
"content": "\"use client\"\n\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" className=\"!pl-2\">\n <ChevronDownIcon />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <VolumeOffIcon />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CheckIcon />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <AlertTriangleIcon />\n Report Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <UserRoundXIcon />\n Block User\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ShareIcon />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CopyIcon />\n Copy Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <TrashIcon />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-input-group",
|
||||
"title": "Button Group Input Group",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group",
|
||||
"input-group",
|
||||
"tooltip"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-input-group.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AudioLinesIcon, PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\n\nexport default function ButtonGroupInputGroup() {\n const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n return (\n <ButtonGroup className=\"[--radius:9999rem]\">\n <ButtonGroup>\n <Button variant=\"outline\" size=\"icon\">\n <PlusIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <InputGroup>\n <InputGroupInput\n placeholder={\n voiceEnabled ? \"Record and send audio...\" : \"Send a message...\"\n }\n disabled={voiceEnabled}\n />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger asChild>\n <InputGroupButton\n onClick={() => setVoiceEnabled(!voiceEnabled)}\n size=\"icon-xs\"\n data-active={voiceEnabled}\n className=\"data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100\"\n aria-pressed={voiceEnabled}\n >\n <AudioLinesIcon />\n </InputGroupButton>\n </TooltipTrigger>\n <TooltipContent>Voice Mode</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
18
apps/v4/public/r/styles/base-lyra/button-group-input.json
Normal file
18
apps/v4/public/r/styles/base-lyra/button-group-input.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-input",
|
||||
"title": "Button Group Input",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group",
|
||||
"input"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-input.tsx",
|
||||
"content": "import { SearchIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport default function ButtonGroupInput() {\n return (\n <ButtonGroup>\n <Input placeholder=\"Search...\" />\n <Button variant=\"outline\" aria-label=\"Search\">\n <SearchIcon />\n </Button>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/button-group-nested.json
Normal file
17
apps/v4/public/r/styles/base-lyra/button-group-nested.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-nested",
|
||||
"title": "Button Group Nested",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-nested.tsx",
|
||||
"content": "\"use client\"\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupNested() {\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"sm\">\n 1\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 2\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 3\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 4\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n 5\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n <ArrowLeftIcon />\n </Button>\n <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-orientation",
|
||||
"title": "Button Group Orientation",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-orientation.tsx",
|
||||
"content": "import { MinusIcon, PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupOrientation() {\n return (\n <ButtonGroup\n orientation=\"vertical\"\n aria-label=\"Media controls\"\n className=\"h-fit\"\n >\n <Button variant=\"outline\" size=\"icon\">\n <PlusIcon />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <MinusIcon />\n </Button>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
20
apps/v4/public/r/styles/base-lyra/button-group-popover.json
Normal file
20
apps/v4/public/r/styles/base-lyra/button-group-popover.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-popover",
|
||||
"title": "Button Group Popover",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group",
|
||||
"popover",
|
||||
"separator",
|
||||
"textarea"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-popover.tsx",
|
||||
"content": "import { BotIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function ButtonGroupPopover() {\n return (\n <ButtonGroup>\n <Button variant=\"outline\">\n <BotIcon /> Copilot\n </Button>\n <Popover>\n <PopoverTrigger asChild>\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\">\n <ChevronDownIcon />\n </Button>\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n <div className=\"px-4 py-3\">\n <div className=\"text-sm font-medium\">Agent Tasks</div>\n </div>\n <Separator />\n <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"mb-4 resize-none\"\n />\n <p className=\"font-medium\">Start a new task with Copilot</p>\n <p className=\"text-muted-foreground\">\n Describe your task in natural language. Copilot will work in the\n background and open a pull request for your review.\n </p>\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
19
apps/v4/public/r/styles/base-lyra/button-group-select.json
Normal file
19
apps/v4/public/r/styles/base-lyra/button-group-select.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-select",
|
||||
"title": "Button Group Select",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group",
|
||||
"input",
|
||||
"select"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-select.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n} from \"@/registry/base-lyra/ui/select\"\n\nconst CURRENCIES = [\n {\n value: \"$\",\n label: \"US Dollar\",\n },\n {\n value: \"€\",\n label: \"Euro\",\n },\n {\n value: \"£\",\n label: \"British Pound\",\n },\n]\n\nexport default function ButtonGroupSelect() {\n const [currency, setCurrency] = React.useState(\"$\")\n\n return (\n <ButtonGroup>\n <ButtonGroup>\n <Select value={currency} onValueChange={setCurrency}>\n <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n <SelectContent className=\"min-w-24\">\n {CURRENCIES.map((currency) => (\n <SelectItem key={currency.value} value={currency.value}>\n {currency.value}{\" \"}\n <span className=\"text-muted-foreground\">{currency.label}</span>\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n </ButtonGroup>\n <ButtonGroup>\n <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n <ArrowRightIcon />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-separator",
|
||||
"title": "Button Group Separator",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-separator.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupSeparator,\n} from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupSeparatorDemo() {\n return (\n <ButtonGroup>\n <Button variant=\"secondary\" size=\"sm\">\n Copy\n </Button>\n <ButtonGroupSeparator />\n <Button variant=\"secondary\" size=\"sm\">\n Paste\n </Button>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/button-group-size.json
Normal file
17
apps/v4/public/r/styles/base-lyra/button-group-size.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-size",
|
||||
"title": "Button Group Size",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-size.tsx",
|
||||
"content": "import { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupSize() {\n return (\n <div className=\"flex flex-col items-start gap-8\">\n <ButtonGroup>\n <Button variant=\"outline\" size=\"sm\">\n Small\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n Button\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n Group\n </Button>\n <Button variant=\"outline\" size=\"icon-sm\">\n <PlusIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Default</Button>\n <Button variant=\"outline\">Button</Button>\n <Button variant=\"outline\">Group</Button>\n <Button variant=\"outline\" size=\"icon\">\n <PlusIcon />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"lg\">\n Large\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n Button\n </Button>\n <Button variant=\"outline\" size=\"lg\">\n Group\n </Button>\n <Button variant=\"outline\" size=\"icon-lg\">\n <PlusIcon />\n </Button>\n </ButtonGroup>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/button-group-split.json
Normal file
17
apps/v4/public/r/styles/base-lyra/button-group-split.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-group-split",
|
||||
"title": "Button Group Split",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"button-group"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-group-split.tsx",
|
||||
"content": "import { IconPlus } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupSeparator,\n} from \"@/registry/base-lyra/ui/button-group\"\n\nexport default function ButtonGroupSplit() {\n return (\n <ButtonGroup>\n <Button variant=\"secondary\">Button</Button>\n <ButtonGroupSeparator />\n <Button size=\"icon\" variant=\"secondary\">\n <IconPlus />\n </Button>\n </ButtonGroup>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/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/bases/base/lib/utils\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\n\nconst buttonGroupVariants = cva(\n \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n vertical:\n \"flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation}\n className={cn(buttonGroupVariants({ orientation }), className)}\n {...props}\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 \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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<typeof Separator>) {\n return (\n <Separator\n data-slot=\"button-group-separator\"\n orientation={orientation}\n className={cn(\n \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n",
|
||||
"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-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n vertical:\n \"flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation}\n className={cn(buttonGroupVariants({ orientation }), className)}\n {...props}\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 \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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<typeof Separator>) {\n return (\n <Separator\n data-slot=\"button-group-separator\"\n orientation={orientation}\n className={cn(\n \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/button-icon.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-icon.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-icon",
|
||||
"title": "Button Icon",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-icon.tsx",
|
||||
"content": "import { CircleFadingArrowUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonIcon() {\n return (\n <Button variant=\"outline\" size=\"icon\">\n <CircleFadingArrowUpIcon />\n </Button>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-link.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-link.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-link",
|
||||
"title": "Button Link",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-link.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonLink() {\n return <Button variant=\"link\">Link</Button>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/button-loading.json
Normal file
17
apps/v4/public/r/styles/base-lyra/button-loading.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-loading",
|
||||
"title": "Button Loading",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"spinner"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-loading.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\n\nexport default function ButtonLoading() {\n return (\n <Button size=\"sm\" variant=\"outline\" disabled>\n <Spinner />\n Submit\n </Button>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-outline.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-outline.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-outline",
|
||||
"title": "Button Outline",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-outline.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonOutline() {\n return <Button variant=\"outline\">Outline</Button>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-rounded.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-rounded.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-rounded",
|
||||
"title": "Button Rounded",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-rounded.tsx",
|
||||
"content": "import { ArrowUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonRounded() {\n return (\n <div className=\"flex flex-col gap-8\">\n <Button variant=\"outline\" size=\"icon\" className=\"rounded-full\">\n <ArrowUpIcon />\n </Button>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-secondary.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-secondary.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-secondary",
|
||||
"title": "Button Secondary",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-secondary.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonSecondary() {\n return <Button variant=\"secondary\">Secondary</Button>\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-size.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-size.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-size",
|
||||
"title": "Button Size",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-size.tsx",
|
||||
"content": "import { ArrowUpRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonSize() {\n return (\n <div className=\"flex flex-col items-start gap-8 sm:flex-row\">\n <div className=\"flex items-start gap-2\">\n <Button size=\"sm\" variant=\"outline\">\n Small\n </Button>\n <Button size=\"icon-sm\" aria-label=\"Submit\" variant=\"outline\">\n <ArrowUpRightIcon />\n </Button>\n </div>\n <div className=\"flex items-start gap-2\">\n <Button variant=\"outline\">Default</Button>\n <Button size=\"icon\" aria-label=\"Submit\" variant=\"outline\">\n <ArrowUpRightIcon />\n </Button>\n </div>\n <div className=\"flex items-start gap-2\">\n <Button variant=\"outline\" size=\"lg\">\n Large\n </Button>\n <Button size=\"icon-lg\" aria-label=\"Submit\" variant=\"outline\">\n <ArrowUpRightIcon />\n </Button>\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/button-with-icon.json
Normal file
16
apps/v4/public/r/styles/base-lyra/button-with-icon.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "button-with-icon",
|
||||
"title": "Button With Icon",
|
||||
"registryDependencies": [
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/button-with-icon.tsx",
|
||||
"content": "import { IconGitBranch } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nexport default function ButtonWithIcon() {\n return (\n <Button variant=\"outline\" size=\"sm\">\n <IconGitBranch /> New Branch\n </Button>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/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/bases/base/lib/utils\"\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-7 rounded-none\",\n \"icon-lg\": \"size-9\",\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<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"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-lyra/lib/utils\"\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-7 rounded-none\",\n \"icon-lg\": \"size-9\",\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<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
16
apps/v4/public/r/styles/base-lyra/calendar-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/calendar-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "calendar-demo",
|
||||
"title": "Calendar Demo",
|
||||
"registryDependencies": [
|
||||
"calendar"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/calendar-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/base-lyra/ui/calendar\"\n\nexport default function CalendarDemo() {\n const [date, setDate] = React.useState<Date | undefined>(new Date())\n\n return (\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={setDate}\n className=\"rounded-md border shadow-sm\"\n captionLayout=\"dropdown\"\n />\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
16
apps/v4/public/r/styles/base-lyra/calendar-hijri.json
Normal file
16
apps/v4/public/r/styles/base-lyra/calendar-hijri.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
19
apps/v4/public/r/styles/base-lyra/card-demo.json
Normal file
19
apps/v4/public/r/styles/base-lyra/card-demo.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "card-demo",
|
||||
"title": "Card Demo",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"card",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/card-demo.tsx",
|
||||
"content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport default function CardDemo() {\n return (\n <Card className=\"w-full max-w-sm\">\n <CardHeader>\n <CardTitle>Login to your account</CardTitle>\n <CardDescription>\n Enter your email below to login to your account\n </CardDescription>\n <CardAction>\n <Button variant=\"link\">Sign Up</Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <form>\n <div className=\"flex flex-col gap-6\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div className=\"grid gap-2\">\n <div className=\"flex items-center\">\n <Label htmlFor=\"password\">Password</Label>\n <a\n href=\"#\"\n className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </div>\n </div>\n </form>\n </CardContent>\n <CardFooter className=\"flex-col gap-2\">\n <Button type=\"submit\" className=\"w-full\">\n Login\n </Button>\n <Button variant=\"outline\" className=\"w-full\">\n Login with Google\n </Button>\n </CardFooter>\n </Card>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/ui/card.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n <div\n data-slot=\"card\"\n data-size={size}\n className={cn(\"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\n \"gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\"text-sm font-medium group-data-[size=sm]/card:text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n {...props}\n />\n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\n \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n {...props}\n />\n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\"rounded-none border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n",
|
||||
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n <div\n data-slot=\"card\"\n data-size={size}\n className={cn(\"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\n \"gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\"text-sm font-medium group-data-[size=sm]/card:text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n {...props}\n />\n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\n \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n {...props}\n />\n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\"rounded-none border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
17
apps/v4/public/r/styles/base-lyra/carousel-api.json
Normal file
17
apps/v4/public/r/styles/base-lyra/carousel-api.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "carousel-api",
|
||||
"title": "Carousel Api",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"carousel"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/carousel-api.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n type CarouselApi,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n const [api, setApi] = React.useState<CarouselApi>()\n const [current, setCurrent] = React.useState(0)\n const [count, setCount] = React.useState(0)\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n setCount(api.scrollSnapList().length)\n setCurrent(api.selectedScrollSnap() + 1)\n\n api.on(\"select\", () => {\n setCurrent(api.selectedScrollSnap() + 1)\n })\n }, [api])\n\n return (\n <div className=\"mx-auto max-w-xs\">\n <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n <div className=\"text-muted-foreground py-2 text-center text-sm\">\n Slide {current} of {count}\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/carousel-demo.json
Normal file
17
apps/v4/public/r/styles/base-lyra/carousel-demo.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "carousel-demo",
|
||||
"title": "Carousel Demo",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"carousel"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/carousel-demo.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselDemo() {\n return (\n <Carousel className=\"w-full max-w-xs\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/examples/carousel-example.tsx",
|
||||
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Card, CardContent } from \"@/registry/bases/base/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/bases/base/ui/carousel\"\n\nexport default function CarouselExample() {\n return (\n <ExampleWrapper className=\"lg:grid-cols-1\">\n <CarouselBasic />\n <CarouselMultiple />\n <CarouselWithGap />\n </ExampleWrapper>\n )\n}\n\nfunction CarouselBasic() {\n return (\n <Example title=\"Basic\">\n <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious className=\"hidden sm:inline-flex\" />\n <CarouselNext className=\"hidden sm:inline-flex\" />\n </Carousel>\n </Example>\n )\n}\n\nfunction CarouselMultiple() {\n return (\n <Example title=\"Multiple\">\n <Carousel\n className=\"mx-auto max-w-xs sm:max-w-sm\"\n opts={{\n align: \"start\",\n }}\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"sm:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious className=\"hidden sm:inline-flex\" />\n <CarouselNext className=\"hidden sm:inline-flex\" />\n </Carousel>\n </Example>\n )\n}\n\nfunction CarouselWithGap() {\n return (\n <Example title=\"With Gap\">\n <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n <CarouselContent className=\"-ml-1\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pl-1 md:basis-1/2\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-2xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious className=\"hidden sm:inline-flex\" />\n <CarouselNext className=\"hidden sm:inline-flex\" />\n </Carousel>\n </Example>\n )\n}\n",
|
||||
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselExample() {\n return (\n <ExampleWrapper className=\"lg:grid-cols-1\">\n <CarouselBasic />\n <CarouselMultiple />\n <CarouselWithGap />\n </ExampleWrapper>\n )\n}\n\nfunction CarouselBasic() {\n return (\n <Example title=\"Basic\">\n <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious className=\"hidden sm:inline-flex\" />\n <CarouselNext className=\"hidden sm:inline-flex\" />\n </Carousel>\n </Example>\n )\n}\n\nfunction CarouselMultiple() {\n return (\n <Example title=\"Multiple\">\n <Carousel\n className=\"mx-auto max-w-xs sm:max-w-sm\"\n opts={{\n align: \"start\",\n }}\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"sm:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious className=\"hidden sm:inline-flex\" />\n <CarouselNext className=\"hidden sm:inline-flex\" />\n </Carousel>\n </Example>\n )\n}\n\nfunction CarouselWithGap() {\n return (\n <Example title=\"With Gap\">\n <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n <CarouselContent className=\"-ml-1\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pl-1 md:basis-1/2\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-2xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious className=\"hidden sm:inline-flex\" />\n <CarouselNext className=\"hidden sm:inline-flex\" />\n </Carousel>\n </Example>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
|
||||
17
apps/v4/public/r/styles/base-lyra/carousel-orientation.json
Normal file
17
apps/v4/public/r/styles/base-lyra/carousel-orientation.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "carousel-orientation",
|
||||
"title": "Carousel Orientation",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"carousel"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/carousel-orientation.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselOrientation() {\n return (\n <Carousel\n opts={{\n align: \"start\",\n }}\n orientation=\"vertical\"\n className=\"w-full max-w-xs\"\n >\n <CarouselContent className=\"-mt-1 h-[200px]\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/carousel-plugin.json
Normal file
17
apps/v4/public/r/styles/base-lyra/carousel-plugin.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "carousel-plugin",
|
||||
"title": "Carousel Plugin",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"carousel"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/carousel-plugin.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselPlugin() {\n const plugin = React.useRef(\n Autoplay({ delay: 2000, stopOnInteraction: true })\n )\n\n return (\n <Carousel\n plugins={[plugin.current]}\n className=\"w-full max-w-xs\"\n onMouseEnter={plugin.current.stop}\n onMouseLeave={plugin.current.reset}\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index}>\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-4xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/carousel-size.json
Normal file
17
apps/v4/public/r/styles/base-lyra/carousel-size.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "carousel-size",
|
||||
"title": "Carousel Size",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"carousel"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/carousel-size.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselSize() {\n return (\n <Carousel\n opts={{\n align: \"start\",\n }}\n className=\"w-full max-w-sm\"\n >\n <CarouselContent>\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-3xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
17
apps/v4/public/r/styles/base-lyra/carousel-spacing.json
Normal file
17
apps/v4/public/r/styles/base-lyra/carousel-spacing.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "carousel-spacing",
|
||||
"title": "Carousel Spacing",
|
||||
"registryDependencies": [
|
||||
"card",
|
||||
"carousel"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/carousel-spacing.tsx",
|
||||
"content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/base-lyra/ui/carousel\"\n\nexport default function CarouselSpacing() {\n return (\n <Carousel className=\"w-full max-w-sm\">\n <CarouselContent className=\"-ml-1\">\n {Array.from({ length: 5 }).map((_, index) => (\n <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n <div className=\"p-1\">\n <Card>\n <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n <span className=\"text-2xl font-semibold\">{index + 1}</span>\n </CardContent>\n </Card>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n <CarouselPrevious />\n <CarouselNext />\n </Carousel>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo-axis.json
Normal file
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo-axis.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "chart-bar-demo-axis",
|
||||
"title": "Chart Bar Demo Axis",
|
||||
"registryDependencies": [
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/chart-bar-demo-axis.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\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 chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoAxis() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo-grid.json
Normal file
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo-grid.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "chart-bar-demo-grid",
|
||||
"title": "Chart Bar Demo Grid",
|
||||
"registryDependencies": [
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/chart-bar-demo-grid.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\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 chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoGrid() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo-legend.json
Normal file
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo-legend.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "chart-bar-demo-legend",
|
||||
"title": "Chart Bar Demo Legend",
|
||||
"registryDependencies": [
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/chart-bar-demo-legend.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\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 chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoLegend() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent />} />\n <ChartLegend content={<ChartLegendContent />} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "chart-bar-demo-tooltip",
|
||||
"title": "Chart Bar Demo Tooltip",
|
||||
"registryDependencies": [
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/chart-bar-demo-tooltip.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\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 chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemoTooltip() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip content={<ChartTooltipContent />} />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/chart-bar-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "chart-bar-demo",
|
||||
"title": "Chart Bar Demo",
|
||||
"registryDependencies": [
|
||||
"chart"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/chart-bar-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\n\nconst chartData = [\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 chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"#2563eb\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"#60a5fa\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDemo() {\n return (\n <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n <BarChart accessibilityLayer data={chartData}>\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
17
apps/v4/public/r/styles/base-lyra/checkbox-demo.json
Normal file
17
apps/v4/public/r/styles/base-lyra/checkbox-demo.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "checkbox-demo",
|
||||
"title": "Checkbox Demo",
|
||||
"registryDependencies": [
|
||||
"checkbox",
|
||||
"label"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/checkbox-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\n\nexport default function CheckboxDemo() {\n return (\n <div className=\"flex flex-col gap-6\">\n <div className=\"flex items-center gap-3\">\n <Checkbox id=\"terms\" />\n <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n </div>\n <div className=\"flex items-start gap-3\">\n <Checkbox id=\"terms-2\" defaultChecked />\n <div className=\"grid gap-2\">\n <Label htmlFor=\"terms-2\">Accept terms and conditions</Label>\n <p className=\"text-muted-foreground text-sm\">\n By clicking this checkbox, you agree to the terms and conditions.\n </p>\n </div>\n </div>\n <div className=\"flex items-start gap-3\">\n <Checkbox id=\"toggle\" disabled />\n <Label htmlFor=\"toggle\">Enable notifications</Label>\n </div>\n <Label className=\"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\">\n <Checkbox\n id=\"toggle-2\"\n defaultChecked\n className=\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\"\n />\n <div className=\"grid gap-1.5 font-normal\">\n <p className=\"text-sm leading-none font-medium\">\n Enable notifications\n </p>\n <p className=\"text-muted-foreground text-sm\">\n You can enable or disable notifications at any time.\n </p>\n </div>\n </Label>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/checkbox-disabled.json
Normal file
16
apps/v4/public/r/styles/base-lyra/checkbox-disabled.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "checkbox-disabled",
|
||||
"title": "Checkbox Disabled",
|
||||
"registryDependencies": [
|
||||
"checkbox"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/checkbox-disabled.tsx",
|
||||
"content": "import { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\n\nexport default function CheckboxDisabled() {\n return (\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"terms2\" disabled />\n <label\n htmlFor=\"terms2\"\n className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n Accept terms and conditions\n </label>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
16
apps/v4/public/r/styles/base-lyra/checkbox-with-text.json
Normal file
16
apps/v4/public/r/styles/base-lyra/checkbox-with-text.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "checkbox-with-text",
|
||||
"title": "Checkbox With Text",
|
||||
"registryDependencies": [
|
||||
"checkbox"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/checkbox-with-text.tsx",
|
||||
"content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n return (\n <div className=\"items-top flex gap-2\">\n <Checkbox id=\"terms1\" />\n <div className=\"grid gap-1.5 leading-none\">\n <label\n htmlFor=\"terms1\"\n className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n Accept terms and conditions\n </label>\n <p className=\"text-muted-foreground text-sm\">\n You agree to our Terms of Service and Privacy Policy.\n </p>\n </div>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/ui/checkbox.tsx",
|
||||
"content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n >\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n}\n\nexport { Checkbox }\n",
|
||||
"content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n >\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n}\n\nexport { Checkbox }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
17
apps/v4/public/r/styles/base-lyra/collapsible-demo.json
Normal file
17
apps/v4/public/r/styles/base-lyra/collapsible-demo.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "collapsible-demo",
|
||||
"title": "Collapsible Demo",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"collapsible"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/collapsible-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <Collapsible\n open={isOpen}\n onOpenChange={setIsOpen}\n className=\"flex w-[350px] flex-col gap-2\"\n >\n <div className=\"flex items-center justify-between gap-4 px-4\">\n <h4 className=\"text-sm font-semibold\">\n @peduarte starred 3 repositories\n </h4>\n <CollapsibleTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n <ChevronsUpDown />\n <span className=\"sr-only\">Toggle</span>\n </Button>\n </CollapsibleTrigger>\n </div>\n <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n @radix-ui/primitives\n </div>\n <CollapsibleContent className=\"flex flex-col gap-2\">\n <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n @radix-ui/colors\n </div>\n <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n @stitches/react\n </div>\n </CollapsibleContent>\n </Collapsible>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
18
apps/v4/public/r/styles/base-lyra/combobox-demo.json
Normal file
18
apps/v4/public/r/styles/base-lyra/combobox-demo.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "combobox-demo",
|
||||
"title": "Combobox Demo",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"command",
|
||||
"popover"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/combobox-demo.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\nconst frameworks = [\n {\n value: \"next.js\",\n label: \"Next.js\",\n },\n {\n value: \"sveltekit\",\n label: \"SvelteKit\",\n },\n {\n value: \"nuxt.js\",\n label: \"Nuxt.js\",\n },\n {\n value: \"remix\",\n label: \"Remix\",\n },\n {\n value: \"astro\",\n label: \"Astro\",\n },\n]\n\nexport default function ComboboxDemo() {\n const [open, setOpen] = React.useState(false)\n const [value, setValue] = React.useState(\"\")\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n role=\"combobox\"\n aria-expanded={open}\n className=\"w-[200px] justify-between\"\n >\n {value\n ? frameworks.find((framework) => framework.value === value)?.label\n : \"Select framework...\"}\n <ChevronsUpDown className=\"opacity-50\" />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-[200px] p-0\">\n <Command>\n <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n <CommandList>\n <CommandEmpty>No framework found.</CommandEmpty>\n <CommandGroup>\n {frameworks.map((framework) => (\n <CommandItem\n key={framework.value}\n value={framework.value}\n onSelect={(currentValue) => {\n setValue(currentValue === value ? \"\" : currentValue)\n setOpen(false)\n }}\n >\n {framework.label}\n <Check\n className={cn(\n \"ml-auto\",\n value === framework.value ? \"opacity-100\" : \"opacity-0\"\n )}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "combobox-dropdown-menu",
|
||||
"title": "Combobox Dropdown Menu",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"command",
|
||||
"dropdown-menu"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/combobox-dropdown-menu.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\n\nconst labels = [\n \"feature\",\n \"bug\",\n \"enhancement\",\n \"documentation\",\n \"design\",\n \"question\",\n \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n const [label, setLabel] = React.useState(\"feature\")\n const [open, setOpen] = React.useState(false)\n\n return (\n <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n <p className=\"text-sm leading-none font-medium\">\n <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n {label}\n </span>\n <span className=\"text-muted-foreground\">Create a new project</span>\n </p>\n <DropdownMenu open={open} onOpenChange={setOpen}>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" size=\"sm\">\n <MoreHorizontal />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n <DropdownMenuLabel>Actions</DropdownMenuLabel>\n <DropdownMenuGroup>\n <DropdownMenuItem>Assign to...</DropdownMenuItem>\n <DropdownMenuItem>Set due date...</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n <DropdownMenuSubContent className=\"p-0\">\n <Command>\n <CommandInput\n placeholder=\"Filter label...\"\n autoFocus={true}\n className=\"h-9\"\n />\n <CommandList>\n <CommandEmpty>No label found.</CommandEmpty>\n <CommandGroup>\n {labels.map((label) => (\n <CommandItem\n key={label}\n value={label}\n onSelect={(value) => {\n setLabel(value)\n setOpen(false)\n }}\n >\n {label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n <DropdownMenuSeparator />\n <DropdownMenuItem className=\"text-red-600\">\n Delete\n <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
18
apps/v4/public/r/styles/base-lyra/combobox-popover.json
Normal file
18
apps/v4/public/r/styles/base-lyra/combobox-popover.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "combobox-popover",
|
||||
"title": "Combobox Popover",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"command",
|
||||
"popover"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/combobox-popover.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboboxPopover() {\n const [open, setOpen] = React.useState(false)\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n return (\n <div className=\"flex items-center space-x-4\">\n <p className=\"text-muted-foreground text-sm\">Status</p>\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n <Command>\n <CommandInput placeholder=\"Change status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) ||\n null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
@@ -3,15 +3,15 @@
|
||||
"name": "combobox-responsive",
|
||||
"title": "Combobox Responsive",
|
||||
"registryDependencies": [
|
||||
"button",
|
||||
"command",
|
||||
"popover",
|
||||
"drawer",
|
||||
"button"
|
||||
"popover"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/combobox-responsive.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n Drawer,\n DrawerContent,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboBoxResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n if (isDesktop) {\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n </PopoverContent>\n </Popover>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mt-4 border-t\">\n <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction StatusList({\n setOpen,\n setSelectedStatus,\n}: {\n setOpen: (open: boolean) => void\n setSelectedStatus: (status: Status | null) => void\n}) {\n return (\n <Command>\n <CommandInput placeholder=\"Filter status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) || null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n )\n}\n",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n Drawer,\n DrawerContent,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\n\ntype Status = {\n value: string\n label: string\n}\n\nconst statuses: Status[] = [\n {\n value: \"backlog\",\n label: \"Backlog\",\n },\n {\n value: \"todo\",\n label: \"Todo\",\n },\n {\n value: \"in progress\",\n label: \"In Progress\",\n },\n {\n value: \"done\",\n label: \"Done\",\n },\n {\n value: \"canceled\",\n label: \"Canceled\",\n },\n]\n\nexport default function ComboBoxResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n null\n )\n\n if (isDesktop) {\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n </PopoverContent>\n </Popover>\n )\n }\n\n return (\n <Drawer open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n </Button>\n </DrawerTrigger>\n <DrawerContent>\n <div className=\"mt-4 border-t\">\n <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n </div>\n </DrawerContent>\n </Drawer>\n )\n}\n\nfunction StatusList({\n setOpen,\n setSelectedStatus,\n}: {\n setOpen: (open: boolean) => void\n setSelectedStatus: (status: Status | null) => void\n}) {\n return (\n <Command>\n <CommandInput placeholder=\"Filter status...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup>\n {statuses.map((status) => (\n <CommandItem\n key={status.value}\n value={status.value}\n onSelect={(value) => {\n setSelectedStatus(\n statuses.find((priority) => priority.value === value) || null\n )\n setOpen(false)\n }}\n >\n {status.label}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
|
||||
File diff suppressed because one or more lines are too long
16
apps/v4/public/r/styles/base-lyra/command-demo.json
Normal file
16
apps/v4/public/r/styles/base-lyra/command-demo.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "command-demo",
|
||||
"title": "Command Demo",
|
||||
"registryDependencies": [
|
||||
"command"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/command-demo.tsx",
|
||||
"content": "import {\n Calculator,\n Calendar,\n CreditCard,\n Settings,\n Smile,\n User,\n} from \"lucide-react\"\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/base-lyra/ui/command\"\n\nexport function CommandDemo() {\n return (\n <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n <CommandInput placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup heading=\"Suggestions\">\n <CommandItem>\n <Calendar />\n <span>Calendar</span>\n </CommandItem>\n <CommandItem>\n <Smile />\n <span>Search Emoji</span>\n </CommandItem>\n <CommandItem disabled>\n <Calculator />\n <span>Calculator</span>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"Settings\">\n <CommandItem>\n <User />\n <span>Profile</span>\n <CommandShortcut>⌘P</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <CreditCard />\n <span>Billing</span>\n <CommandShortcut>⌘B</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <Settings />\n <span>Settings</span>\n <CommandShortcut>⌘S</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n </Command>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
16
apps/v4/public/r/styles/base-lyra/command-dialog.json
Normal file
16
apps/v4/public/r/styles/base-lyra/command-dialog.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
||||
"name": "command-dialog",
|
||||
"title": "Command Dialog",
|
||||
"registryDependencies": [
|
||||
"command"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/demo/command-dialog.tsx",
|
||||
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Calculator,\n Calendar,\n CreditCard,\n Settings,\n Smile,\n User,\n} from \"lucide-react\"\n\nimport {\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/base-lyra/ui/command\"\n\nexport function CommandDialogDemo() {\n const [open, setOpen] = React.useState(false)\n\n React.useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n setOpen((open) => !open)\n }\n }\n\n document.addEventListener(\"keydown\", down)\n return () => document.removeEventListener(\"keydown\", down)\n }, [])\n\n return (\n <>\n <p className=\"text-muted-foreground text-sm\">\n Press{\" \"}\n <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none\">\n <span className=\"text-xs\">⌘</span>J\n </kbd>\n </p>\n <CommandDialog open={open} onOpenChange={setOpen}>\n <CommandInput placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup heading=\"Suggestions\">\n <CommandItem>\n <Calendar />\n <span>Calendar</span>\n </CommandItem>\n <CommandItem>\n <Smile />\n <span>Search Emoji</span>\n </CommandItem>\n <CommandItem>\n <Calculator />\n <span>Calculator</span>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"Settings\">\n <CommandItem>\n <User />\n <span>Profile</span>\n <CommandShortcut>⌘P</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <CreditCard />\n <span>Billing</span>\n <CommandShortcut>⌘B</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <Settings />\n <span>Settings</span>\n <CommandShortcut>⌘S</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n </CommandDialog>\n </>\n )\n}\n",
|
||||
"type": "registry:example"
|
||||
}
|
||||
],
|
||||
"type": "registry:example"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user