diff --git a/README.md b/README.md index f54aa02..37bc1b5 100644 --- a/README.md +++ b/README.md @@ -207,18 +207,21 @@ Pre-built page sections ready to drop into your project. ### Feature
+ Feature 1 Feature 2
### Footer
+ Footer 7 Footer 3
### Gallery
+ Gallery 2 Gallery 4
@@ -231,6 +234,7 @@ Pre-built page sections ready to drop into your project. ### Portfolio
+ Portfolio 5 Portfolio 4
@@ -243,6 +247,7 @@ Pre-built page sections ready to drop into your project. ### Process
+ Process 6 Process 1
diff --git a/package-lock.json b/package-lock.json index e8f54d2..b5205f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "UIAble", - "version": "1.3.0", + "version": "1.5.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "UIAble", - "version": "1.3.0", + "version": "1.5.0", "dependencies": { "@ai-sdk/react": "4.0.19", "@base-ui/react": "1.6.0", diff --git a/package.json b/package.json index 6c9ffce..a3a4641 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "UIAble", - "version": "1.4.0", + "version": "1.5.0", "private": true, "scripts": { "dev": "next dev", diff --git a/public/assets/images/block/img-gal-wed-1.png b/public/assets/images/block/img-gal-wed-1.png new file mode 100644 index 0000000..6e0b2c4 Binary files /dev/null and b/public/assets/images/block/img-gal-wed-1.png differ diff --git a/public/assets/images/block/img-gal-wed-2.png b/public/assets/images/block/img-gal-wed-2.png new file mode 100644 index 0000000..64264c7 Binary files /dev/null and b/public/assets/images/block/img-gal-wed-2.png differ diff --git a/public/assets/images/block/img-gal-wed-3.png b/public/assets/images/block/img-gal-wed-3.png new file mode 100644 index 0000000..6e60bce Binary files /dev/null and b/public/assets/images/block/img-gal-wed-3.png differ diff --git a/public/assets/images/block/img-gal-wed-4.png b/public/assets/images/block/img-gal-wed-4.png new file mode 100644 index 0000000..aae938f Binary files /dev/null and b/public/assets/images/block/img-gal-wed-4.png differ diff --git a/public/assets/images/block/img-gal-wed-5.png b/public/assets/images/block/img-gal-wed-5.png new file mode 100644 index 0000000..8abc8cc Binary files /dev/null and b/public/assets/images/block/img-gal-wed-5.png differ diff --git a/public/assets/images/block/img-gal-wed-6.png b/public/assets/images/block/img-gal-wed-6.png new file mode 100644 index 0000000..f60dc71 Binary files /dev/null and b/public/assets/images/block/img-gal-wed-6.png differ diff --git a/public/assets/images/block/img-portfolio-5-1.png b/public/assets/images/block/img-portfolio-5-1.png new file mode 100644 index 0000000..95a9b8c Binary files /dev/null and b/public/assets/images/block/img-portfolio-5-1.png differ diff --git a/public/assets/images/block/img-portfolio-5-2.png b/public/assets/images/block/img-portfolio-5-2.png new file mode 100644 index 0000000..224bc0c Binary files /dev/null and b/public/assets/images/block/img-portfolio-5-2.png differ diff --git a/public/assets/images/block/img-portfolio-5-3.png b/public/assets/images/block/img-portfolio-5-3.png new file mode 100644 index 0000000..401028f Binary files /dev/null and b/public/assets/images/block/img-portfolio-5-3.png differ diff --git a/public/r/accordion.json b/public/r/accordion.json index 6c91d0e..0cd541b 100644 --- a/public/r/accordion.json +++ b/public/r/accordion.json @@ -1,18 +1,22 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "accordion", + "title": "Accordion", + "description": "Accordion component.", "dependencies": [ "@base-ui/react", "lucide-react" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/accordion.tsx", - "content": "\"use client\"\r\n\r\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\r\n\r\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AccordionTrigger({\r\n className,\r\n children,\r\n ...props\r\n}: AccordionPrimitive.Trigger.Props) {\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n )\r\n}\r\n\r\nfunction AccordionContent({\r\n className,\r\n children,\r\n ...props\r\n}: AccordionPrimitive.Panel.Props) {\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n )\r\n}\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\r\n", - "type": "registry:ui", - "target": "components/ui/accordion.tsx" + "content": "\"use client\";\r\n\r\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\r\n\r\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AccordionTrigger({\r\n className,\r\n children,\r\n ...props\r\n}: AccordionPrimitive.Trigger.Props) {\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n\r\nfunction AccordionContent({\r\n className,\r\n children,\r\n ...props\r\n}: AccordionPrimitive.Panel.Props) {\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\r\n", + "type": "registry:component", + "target": "@components/ui/accordion.tsx" } ], + "categories": [ + "accordion" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/alert-dialog.json b/public/r/alert-dialog.json index 4d75297..08c1f61 100644 --- a/public/r/alert-dialog.json +++ b/public/r/alert-dialog.json @@ -1,9 +1,10 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "alert-dialog", + "title": "Alert Dialog", + "description": "Alert Dialog component.", "dependencies": [ - "@base-ui/react", - "react" + "@base-ui/react" ], "registryDependencies": [ "@uiable/button" @@ -11,10 +12,13 @@ "files": [ { "path": "src/components/ui/alert-dialog.tsx", - "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\r\n return \r\n}\r\n\r\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogOverlay({\r\n className,\r\n ...props\r\n}: AlertDialogPrimitive.Backdrop.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogContent({\r\n className,\r\n size = \"default\",\r\n ...props\r\n}: AlertDialogPrimitive.Popup.Props & {\r\n size?: \"default\" | \"sm\"\r\n}) {\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogHeader({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogFooter({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogMedia({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogTitle({\r\n className,\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogDescription({\r\n className,\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogAction({\r\n className,\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertDialogCancel({\r\n className,\r\n variant = \"outline\",\r\n size = \"default\",\r\n ...props\r\n}: AlertDialogPrimitive.Close.Props &\r\n Pick, \"variant\" | \"size\">) {\r\n return (\r\n }\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\r\n AlertDialogContent,\r\n AlertDialogDescription,\r\n AlertDialogFooter,\r\n AlertDialogHeader,\r\n AlertDialogMedia,\r\n AlertDialogOverlay,\r\n AlertDialogPortal,\r\n AlertDialogTitle,\r\n AlertDialogTrigger,\r\n}\r\n", - "type": "registry:ui", - "target": "components/ui/alert-dialog.tsx" + "content": "\"use client\";\r\n\r\nimport { ComponentProps } from \"react\";\r\n\r\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\n\r\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\r\n return ;\r\n}\r\n\r\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogOverlay({\r\n className,\r\n ...props\r\n}: AlertDialogPrimitive.Backdrop.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogContent({\r\n className,\r\n size = \"default\",\r\n ...props\r\n}: AlertDialogPrimitive.Popup.Props & {\r\n size?: \"default\" | \"sm\";\r\n}) {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogHeader({\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogFooter({\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogMedia({\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogTitle({\r\n className,\r\n ...props\r\n}: ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogDescription({\r\n className,\r\n ...props\r\n}: ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogAction({\r\n className,\r\n ...props\r\n}: ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertDialogCancel({\r\n className,\r\n variant = \"outline\",\r\n size = \"default\",\r\n ...props\r\n}: AlertDialogPrimitive.Close.Props &\r\n Pick, \"variant\" | \"size\">) {\r\n return (\r\n }\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\r\n AlertDialogContent,\r\n AlertDialogDescription,\r\n AlertDialogFooter,\r\n AlertDialogHeader,\r\n AlertDialogMedia,\r\n AlertDialogOverlay,\r\n AlertDialogPortal,\r\n AlertDialogTitle,\r\n AlertDialogTrigger\r\n};\r\n", + "type": "registry:component", + "target": "@components/ui/alert-dialog.tsx" } ], + "categories": [ + "alert-dialog" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/alert.json b/public/r/alert.json index 27ddf58..5eabced 100644 --- a/public/r/alert.json +++ b/public/r/alert.json @@ -1,18 +1,21 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "alert", + "title": "Alert", + "description": "Alert component.", "dependencies": [ - "class-variance-authority", - "react" + "class-variance-authority" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/alert.tsx", - "content": "import * as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst alertVariants = cva(\r\n \"grid gap-0.5 rounded-lg border border-border px-5 py-3 text-left text-base 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.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-card text-card-foreground\",\r\n destructive:\r\n \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n }\r\n)\r\n\r\nfunction Alert({\r\n className,\r\n variant,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction AlertDescription({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\r\n", - "type": "registry:ui", - "target": "components/ui/alert.tsx" + "content": "import { ComponentProps } from \"react\";\r\n\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst alertVariants = cva(\r\n \"grid gap-0.5 rounded-lg border border-border px-5 py-3 text-left text-base 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.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-card text-card-foreground\",\r\n destructive:\r\n \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\"\r\n }\r\n },\r\n defaultVariants: {\r\n variant: \"default\"\r\n }\r\n }\r\n);\r\n\r\nfunction Alert({\r\n className,\r\n variant,\r\n ...props\r\n}: ComponentProps<\"div\"> & VariantProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertTitle({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nfunction AlertDescription({\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AlertAction({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\r\n", + "type": "registry:component", + "target": "@components/ui/alert.tsx" } ], + "categories": [ + "alert" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/aspect-ratio.json b/public/r/aspect-ratio.json index 6e79bca..33b575a 100644 --- a/public/r/aspect-ratio.json +++ b/public/r/aspect-ratio.json @@ -1,15 +1,18 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aspect-ratio", - "dependencies": [], - "registryDependencies": [], + "title": "Aspect Ratio", + "description": "Aspect Ratio component.", "files": [ { "path": "src/components/ui/aspect-ratio.tsx", - "content": "import { cn } from \"@/lib/utils\"\r\n\r\nfunction AspectRatio({\r\n ratio,\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport { AspectRatio }\r\n", - "type": "registry:ui", - "target": "components/ui/aspect-ratio.tsx" + "content": "import { ComponentProps, CSSProperties } from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction AspectRatio({\r\n ratio,\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\"> & { ratio: number }) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport { AspectRatio }\r\n", + "type": "registry:component", + "target": "@components/ui/aspect-ratio.tsx" } ], + "categories": [ + "aspect-ratio" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/attachment.json b/public/r/attachment.json new file mode 100644 index 0000000..e094dcf --- /dev/null +++ b/public/r/attachment.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "attachment", + "title": "Attachment", + "description": "Attachment component.", + "dependencies": [ + "@base-ui/react", + "class-variance-authority" + ], + "registryDependencies": [ + "@uiable/button" + ], + "files": [ + { + "path": "src/components/ui/attachment.tsx", + "content": "import { ComponentProps } from \"react\"\r\nimport { mergeProps } from \"@base-ui/react/merge-props\"\r\nimport { useRender } from \"@base-ui/react/use-render\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nconst attachmentVariants = cva(\r\n \"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed\",\r\n {\r\n variants: {\r\n size: {\r\n default:\r\n \"gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2\",\r\n sm: \"gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5\",\r\n xs: \"gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1\",\r\n },\r\n orientation: {\r\n horizontal: \"min-w-40 items-center\",\r\n vertical: \"w-24 flex-col has-data-[slot=attachment-content]:w-30\",\r\n },\r\n },\r\n }\r\n)\r\n\r\nfunction Attachment({\r\n className,\r\n state = \"done\",\r\n size = \"default\",\r\n orientation = \"horizontal\",\r\n ...props\r\n}: ComponentProps<\"div\"> &\r\n VariantProps & {\r\n state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\"\r\n }) {\r\n const resolvedOrientation = orientation ?? \"horizontal\"\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nconst attachmentMediaVariants = cva(\r\n \"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5\",\r\n {\r\n variants: {\r\n variant: {\r\n icon: \"\",\r\n image:\r\n \"opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"icon\",\r\n },\r\n }\r\n)\r\n\r\nfunction AttachmentMedia({\r\n className,\r\n variant = \"icon\",\r\n ...props\r\n}: ComponentProps<\"div\"> & VariantProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AttachmentContent({\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AttachmentTitle({\r\n className,\r\n ...props\r\n}: ComponentProps<\"span\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AttachmentDescription({\r\n className,\r\n ...props\r\n}: ComponentProps<\"span\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AttachmentActions({\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AttachmentAction({\r\n className,\r\n variant,\r\n size = \"icon-xs\",\r\n ...props\r\n}: ComponentProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AttachmentTrigger({\r\n className,\r\n render,\r\n type,\r\n ...props\r\n}: useRender.ComponentProps<\"button\">) {\r\n return useRender({\r\n defaultTagName: \"button\",\r\n props: mergeProps<\"button\">(\r\n {\r\n type: render ? type : (type ?? \"button\"),\r\n className: cn(\"absolute inset-0 z-10 outline-none\", className),\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"attachment-trigger\",\r\n },\r\n })\r\n}\r\n\r\nfunction AttachmentGroup({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport {\r\n Attachment,\r\n AttachmentGroup,\r\n AttachmentMedia,\r\n AttachmentContent,\r\n AttachmentTitle,\r\n AttachmentDescription,\r\n AttachmentActions,\r\n AttachmentAction,\r\n AttachmentTrigger,\r\n}\r\n", + "type": "registry:component", + "target": "@components/ui/attachment.tsx" + } + ], + "categories": [ + "attachment" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/avatar.json b/public/r/avatar.json index 138ba27..b593a41 100644 --- a/public/r/avatar.json +++ b/public/r/avatar.json @@ -1,18 +1,21 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "avatar", + "title": "Avatar", + "description": "Avatar component.", "dependencies": [ - "@base-ui/react", - "react" + "@base-ui/react" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/avatar.tsx", - "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Avatar({\r\n className,\r\n size = \"default\",\r\n ...props\r\n}: AvatarPrimitive.Root.Props & {\r\n size?: \"default\" | \"sm\" | \"lg\"\r\n}) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AvatarFallback({\r\n className,\r\n ...props\r\n}: AvatarPrimitive.Fallback.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\r\n return (\r\n svg]:hidden\",\r\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\r\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction AvatarGroupCount({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"div\">) {\r\n return (\r\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport {\r\n Avatar,\r\n AvatarImage,\r\n AvatarFallback,\r\n AvatarGroup,\r\n AvatarGroupCount,\r\n AvatarBadge,\r\n}\r\n", - "type": "registry:ui", - "target": "components/ui/avatar.tsx" + "content": "\"use client\";\r\n\r\nimport { ComponentProps } from \"react\";\r\n\r\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nfunction Avatar({\r\n className,\r\n size = \"default\",\r\n ...props\r\n}: AvatarPrimitive.Root.Props & {\r\n size?: \"default\" | \"sm\" | \"lg\";\r\n}) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AvatarFallback({\r\n className,\r\n ...props\r\n}: AvatarPrimitive.Fallback.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AvatarBadge({ className, ...props }: ComponentProps<\"span\">) {\r\n return (\r\n svg]:hidden\",\r\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\r\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nfunction AvatarGroup({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction AvatarGroupCount({\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\">) {\r\n return (\r\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport {\r\n Avatar,\r\n AvatarImage,\r\n AvatarFallback,\r\n AvatarGroup,\r\n AvatarGroupCount,\r\n AvatarBadge\r\n};\r\n", + "type": "registry:component", + "target": "@components/ui/avatar.tsx" } ], + "categories": [ + "avatar" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/badge.json b/public/r/badge.json index a120426..69417e4 100644 --- a/public/r/badge.json +++ b/public/r/badge.json @@ -1,18 +1,22 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "badge", + "title": "Badge", + "description": "Badge component.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/badge.tsx", - "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\r\nimport { useRender } from \"@base-ui/react/use-render\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst badgeVariants = cva(\r\n \"gap-1 rounded-md border border-transparent px-[0.8em] py-[0.45em] text-[.75em] font-medium leading-[0.9] 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 overflow-hidden group/badge\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-primary text-white [a]:hover:bg-primary/80\",\r\n secondary:\r\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\r\n destructive:\r\n \"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\",\r\n outline:\r\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\r\n ghost:\r\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\r\n link: \"text-primary underline-offset-4 hover:underline\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n }\r\n)\r\n\r\nfunction Badge({\r\n className,\r\n variant = \"default\",\r\n render,\r\n ...props\r\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\r\n return useRender({\r\n defaultTagName: \"span\",\r\n props: mergeProps<\"span\">(\r\n {\r\n className: cn(badgeVariants({ variant }), className),\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"badge\",\r\n variant,\r\n },\r\n })\r\n}\r\n\r\nexport { Badge, badgeVariants }\r\n", - "type": "registry:ui", - "target": "components/ui/badge.tsx" + "content": "\"use client\";\r\n\r\nimport { mergeProps } from \"@base-ui/react/merge-props\";\r\nimport { useRender } from \"@base-ui/react/use-render\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst badgeVariants = cva(\r\n \"gap-1 rounded-lg border border-transparent px-[0.8em] py-[0.45em] text-[.75em] font-medium leading-[0.9] 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 overflow-hidden group/badge\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-primary text-white [a]:hover:bg-primary/80\",\r\n secondary:\r\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\r\n destructive:\r\n \"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\",\r\n outline:\r\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\r\n ghost:\r\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\r\n link: \"text-primary underline-offset-4 hover:underline\"\r\n }\r\n },\r\n defaultVariants: {\r\n variant: \"default\"\r\n }\r\n }\r\n);\r\n\r\nfunction Badge({\r\n className,\r\n variant = \"default\",\r\n render,\r\n ...props\r\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\r\n return useRender({\r\n defaultTagName: \"span\",\r\n props: mergeProps<\"span\">(\r\n {\r\n className: cn(badgeVariants({ variant }), className)\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"badge\",\r\n variant\r\n }\r\n });\r\n}\r\n\r\nexport { Badge, badgeVariants };\r\n", + "type": "registry:component", + "target": "@components/ui/badge.tsx" } ], + "categories": [ + "badge" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/breadcrumb.json b/public/r/breadcrumb.json index db563d6..6b848a5 100644 --- a/public/r/breadcrumb.json +++ b/public/r/breadcrumb.json @@ -1,19 +1,22 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "breadcrumb", + "title": "Breadcrumb", + "description": "Breadcrumb component.", "dependencies": [ "@base-ui/react", - "lucide-react", - "react" + "lucide-react" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/breadcrumb.tsx", - "content": "import * as React from \"react\"\r\nimport { mergeProps } from \"@base-ui/react/merge-props\"\r\nimport { useRender } from \"@base-ui/react/use-render\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\"\r\n\r\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction BreadcrumbLink({\r\n className,\r\n render,\r\n ...props\r\n}: useRender.ComponentProps<\"a\">) {\r\n return useRender({\r\n defaultTagName: \"a\",\r\n props: mergeProps<\"a\">(\r\n {\r\n className: cn(\"hover:text-foreground transition-colors\", className),\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"breadcrumb-link\",\r\n },\r\n })\r\n}\r\n\r\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction BreadcrumbSeparator({\r\n children,\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"li\">) {\r\n return (\r\n svg]:size-4 [&>svg]:leading-0\", className)}\r\n {...props}\r\n >\r\n {children ?? (\r\n \r\n )}\r\n \r\n )\r\n}\r\n\r\nfunction BreadcrumbEllipsis({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"span\">) {\r\n return (\r\n svg]:size-4\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n \r\n More\r\n \r\n )\r\n}\r\n\r\nexport {\r\n Breadcrumb,\r\n BreadcrumbList,\r\n BreadcrumbItem,\r\n BreadcrumbLink,\r\n BreadcrumbPage,\r\n BreadcrumbSeparator,\r\n BreadcrumbEllipsis,\r\n}\r\n", - "type": "registry:ui", - "target": "components/ui/breadcrumb.tsx" + "content": "\"use client\";\r\n\r\nimport { ComponentProps } from \"react\";\r\n\r\nimport { mergeProps } from \"@base-ui/react/merge-props\";\r\nimport { useRender } from \"@base-ui/react/use-render\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\r\n\r\nfunction Breadcrumb({ className, ...props }: ComponentProps<\"nav\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction BreadcrumbList({ className, ...props }: ComponentProps<\"ol\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction BreadcrumbItem({ className, ...props }: ComponentProps<\"li\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction BreadcrumbLink({\r\n className,\r\n render,\r\n ...props\r\n}: useRender.ComponentProps<\"a\">) {\r\n return useRender({\r\n defaultTagName: \"a\",\r\n props: mergeProps<\"a\">(\r\n {\r\n className: cn(\"hover:text-foreground transition-colors\", className)\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"breadcrumb-link\"\r\n }\r\n });\r\n}\r\n\r\nfunction BreadcrumbPage({ className, ...props }: ComponentProps<\"span\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction BreadcrumbSeparator({\r\n children,\r\n className,\r\n ...props\r\n}: ComponentProps<\"li\">) {\r\n return (\r\n svg]:size-4 [&>svg]:leading-0\", className)}\r\n {...props}\r\n >\r\n {children ?? }\r\n \r\n );\r\n}\r\n\r\nfunction BreadcrumbEllipsis({\r\n className,\r\n ...props\r\n}: ComponentProps<\"span\">) {\r\n return (\r\n svg]:size-4\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n \r\n More\r\n \r\n );\r\n}\r\n\r\nexport {\r\n Breadcrumb,\r\n BreadcrumbList,\r\n BreadcrumbItem,\r\n BreadcrumbLink,\r\n BreadcrumbPage,\r\n BreadcrumbSeparator,\r\n BreadcrumbEllipsis\r\n};\r\n", + "type": "registry:component", + "target": "@components/ui/breadcrumb.tsx" } ], + "categories": [ + "breadcrumb" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/bubble.json b/public/r/bubble.json new file mode 100644 index 0000000..f7e209f --- /dev/null +++ b/public/r/bubble.json @@ -0,0 +1,22 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "bubble", + "title": "Bubble", + "description": "Bubble component.", + "dependencies": [ + "@base-ui/react", + "class-variance-authority" + ], + "files": [ + { + "path": "src/components/ui/bubble.tsx", + "content": "import { ComponentProps } from \"react\"\r\nimport { mergeProps } from \"@base-ui/react/merge-props\"\r\nimport { useRender } from \"@base-ui/react/use-render\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction BubbleGroup({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nconst bubbleVariants = cva(\r\n \"group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full\",\r\n {\r\n variants: {\r\n variant: {\r\n default:\r\n \"*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80\",\r\n secondary:\r\n \"*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]\",\r\n muted:\r\n \"*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]\",\r\n tinted:\r\n \"*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]\",\r\n outline:\r\n \"*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30\",\r\n ghost:\r\n \"border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50\",\r\n destructive:\r\n \"*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n }\r\n)\r\n\r\nfunction Bubble({\r\n variant = \"default\",\r\n align = \"start\",\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\"> &\r\n VariantProps & {\r\n align?: \"start\" | \"end\"\r\n }) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction BubbleContent({\r\n className,\r\n render,\r\n ...props\r\n}: useRender.ComponentProps<\"div\">) {\r\n return useRender({\r\n defaultTagName: \"div\",\r\n props: mergeProps<\"div\">(\r\n {\r\n className: cn(\r\n \"w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50\",\r\n className\r\n ),\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"bubble-content\",\r\n },\r\n })\r\n}\r\n\r\nconst bubbleReactionsVariants = cva(\r\n \"absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0\",\r\n {\r\n variants: {\r\n side: {\r\n top: \"top-0 -translate-y-3/4\",\r\n bottom: \"bottom-0 translate-y-3/4\",\r\n },\r\n align: {\r\n start: \"left-3\",\r\n end: \"right-3\",\r\n },\r\n },\r\n defaultVariants: {\r\n side: \"bottom\",\r\n align: \"end\",\r\n },\r\n }\r\n)\r\n\r\nfunction BubbleReactions({\r\n side = \"bottom\",\r\n align = \"end\",\r\n className,\r\n ...props\r\n}: ComponentProps<\"div\"> & {\r\n align?: \"start\" | \"end\"\r\n side?: \"top\" | \"bottom\"\r\n}) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport { BubbleGroup, Bubble, BubbleContent, BubbleReactions }\r\n", + "type": "registry:component", + "target": "@components/ui/bubble.tsx" + } + ], + "categories": [ + "bubble" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/button-group.json b/public/r/button-group.json index ce0f3b1..b836bf5 100644 --- a/public/r/button-group.json +++ b/public/r/button-group.json @@ -1,6 +1,8 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button-group", + "title": "Button Group", + "description": "Button Group component.", "dependencies": [ "@base-ui/react", "class-variance-authority" @@ -11,10 +13,13 @@ "files": [ { "path": "src/components/ui/button-group.tsx", - "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\r\nimport { useRender } from \"@base-ui/react/use-render\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nconst buttonGroupVariants = cva(\r\n \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\r\n {\r\n variants: {\r\n orientation: {\r\n horizontal:\r\n \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\r\n vertical:\r\n \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-xl! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\r\n },\r\n },\r\n defaultVariants: {\r\n orientation: \"horizontal\",\r\n },\r\n }\r\n)\r\n\r\nfunction ButtonGroup({\r\n className,\r\n orientation,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction ButtonGroupText({\r\n className,\r\n render,\r\n ...props\r\n}: useRender.ComponentProps<\"div\">) {\r\n return useRender({\r\n defaultTagName: \"div\",\r\n props: mergeProps<\"div\">(\r\n {\r\n className: cn(\r\n \"flex items-center gap-2 rounded-xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\r\n className\r\n ),\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"button-group-text\",\r\n },\r\n })\r\n}\r\n\r\nfunction ButtonGroupSeparator({\r\n className,\r\n orientation = \"vertical\",\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport {\r\n ButtonGroup,\r\n ButtonGroupSeparator,\r\n ButtonGroupText,\r\n buttonGroupVariants,\r\n}\r\n", - "type": "registry:ui", - "target": "components/ui/button-group.tsx" + "content": "\"use client\"\r\n\r\nimport { ComponentProps } from \"react\"\r\nimport { mergeProps } from \"@base-ui/react/merge-props\"\r\nimport { useRender } from \"@base-ui/react/use-render\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nconst buttonGroupVariants = cva(\r\n \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\r\n {\r\n variants: {\r\n orientation: {\r\n horizontal:\r\n \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\r\n vertical:\r\n \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\r\n },\r\n },\r\n defaultVariants: {\r\n orientation: \"horizontal\",\r\n },\r\n }\r\n)\r\n\r\nfunction ButtonGroup({\r\n className,\r\n orientation,\r\n ...props\r\n}: ComponentProps<\"div\"> & VariantProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction ButtonGroupText({\r\n className,\r\n render,\r\n ...props\r\n}: useRender.ComponentProps<\"div\">) {\r\n return useRender({\r\n defaultTagName: \"div\",\r\n props: mergeProps<\"div\">(\r\n {\r\n className: cn(\r\n \"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\r\n className\r\n ),\r\n },\r\n props\r\n ),\r\n render,\r\n state: {\r\n slot: \"button-group-text\",\r\n },\r\n })\r\n}\r\n\r\nfunction ButtonGroupSeparator({\r\n className,\r\n orientation = \"vertical\",\r\n ...props\r\n}: ComponentProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport {\r\n ButtonGroup,\r\n ButtonGroupSeparator,\r\n ButtonGroupText,\r\n buttonGroupVariants,\r\n}\r\n", + "type": "registry:component", + "target": "@components/ui/button-group.tsx" } ], + "categories": [ + "button-group" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/button.json b/public/r/button.json index d90f8e6..95c0912 100644 --- a/public/r/button.json +++ b/public/r/button.json @@ -1,18 +1,22 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button", + "title": "Button", + "description": "Button component.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/button.tsx", - "content": "\"use client\"\r\n\r\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst buttonVariants = cva(\r\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-lg border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_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\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-primary text-white hover:bg-primary-600 [a]:hover:bg-primary-600\",\r\n outline:\r\n \"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\",\r\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\r\n ghost:\r\n \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\r\n destructive:\r\n \"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\",\r\n link: \"text-primary underline-offset-4 hover:underline\",\r\n },\r\n size: {\r\n default:\r\n \"py-2 px-4 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\r\n xs: \"h-6 gap-1 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\",\r\n sm: \"py-1 px-3 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\r\n lg: \"py-3 px-5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\r\n icon: \"size-8\",\r\n \"icon-xs\":\r\n \"size-6 [&_svg:not([class*='size-'])]:size-3\",\r\n \"icon-sm\":\r\n \"size-7\",\r\n \"icon-lg\": \"size-9\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\",\r\n },\r\n }\r\n)\r\n\r\nfunction Button({\r\n className,\r\n variant = \"default\",\r\n size = \"default\",\r\n ...props\r\n}: ButtonPrimitive.Props & VariantProps) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport { Button, buttonVariants }\r\n", - "type": "registry:ui", - "target": "components/ui/button.tsx" + "content": "\"use client\";\r\n\r\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst buttonVariants = cva(\r\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-lg border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_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\",\r\n {\r\n variants: {\r\n variant: {\r\n default:\r\n \"bg-primary text-white hover:bg-primary-600 [a]:hover:bg-primary-600\",\r\n outline:\r\n \"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\",\r\n secondary:\r\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n ghost:\r\n \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\r\n destructive:\r\n \"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\",\r\n link: \"text-primary underline-offset-4 hover:underline\"\r\n },\r\n size: {\r\n default:\r\n \"py-2 px-4 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\r\n xs: \"h-6 gap-1 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\",\r\n sm: \"py-1 px-3 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\r\n lg: \"py-3 px-5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\r\n icon: \"size-8\",\r\n \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\r\n \"icon-sm\": \"size-7\",\r\n \"icon-lg\": \"size-9\"\r\n }\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\"\r\n }\r\n }\r\n);\r\n\r\nfunction Button({\r\n className,\r\n variant = \"default\",\r\n size = \"default\",\r\n ...props\r\n}: ButtonPrimitive.Props & VariantProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport { Button, buttonVariants };\r\n", + "type": "registry:component", + "target": "@components/ui/button.tsx" } ], + "categories": [ + "button" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/calendar.json b/public/r/calendar.json index ff3cd00..ade9fbe 100644 --- a/public/r/calendar.json +++ b/public/r/calendar.json @@ -1,9 +1,10 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar", + "title": "Calendar", + "description": "Calendar component.", "dependencies": [ "lucide-react", - "react", "react-day-picker" ], "registryDependencies": [ @@ -12,10 +13,13 @@ "files": [ { "path": "src/components/ui/calendar.tsx", - "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport {\r\n DayPicker,\r\n getDefaultClassNames,\r\n type DayButton,\r\n type Locale,\r\n} from \"react-day-picker\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button, buttonVariants } from \"@/components/ui/button\"\r\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\"\r\n\r\nfunction Calendar({\r\n className,\r\n classNames,\r\n showOutsideDays = true,\r\n captionLayout = \"label\",\r\n buttonVariant = \"ghost\",\r\n locale,\r\n formatters,\r\n components,\r\n ...props\r\n}: React.ComponentProps & {\r\n buttonVariant?: React.ComponentProps[\"variant\"]\r\n}) {\r\n const defaultClassNames = getDefaultClassNames()\r\n\r\n return (\r\n svg]:rotate-180`,\r\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\r\n className\r\n )}\r\n captionLayout={captionLayout}\r\n locale={locale}\r\n formatters={{\r\n formatMonthDropdown: (date) =>\r\n date.toLocaleString(locale?.code, { month: \"short\" }),\r\n ...formatters,\r\n }}\r\n classNames={{\r\n root: cn(\"w-fit\", defaultClassNames.root),\r\n months: cn(\r\n \"flex gap-4 flex-col md:flex-row relative\",\r\n defaultClassNames.months\r\n ),\r\n month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\r\n nav: cn(\r\n \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\r\n defaultClassNames.nav\r\n ),\r\n button_previous: cn(\r\n buttonVariants({ variant: buttonVariant }),\r\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n defaultClassNames.button_previous\r\n ),\r\n button_next: cn(\r\n buttonVariants({ variant: buttonVariant }),\r\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n defaultClassNames.button_next\r\n ),\r\n month_caption: cn(\r\n \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\r\n defaultClassNames.month_caption\r\n ),\r\n dropdowns: cn(\r\n \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\r\n defaultClassNames.dropdowns\r\n ),\r\n dropdown_root: cn(\r\n \"relative rounded-(--cell-radius)\",\r\n defaultClassNames.dropdown_root\r\n ),\r\n dropdown: cn(\r\n \"absolute bg-popover inset-0 opacity-0\",\r\n defaultClassNames.dropdown\r\n ),\r\n caption_label: cn(\r\n \"select-none font-medium\",\r\n captionLayout === \"label\"\r\n ? \"text-sm\"\r\n : \"rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\r\n defaultClassNames.caption_label\r\n ),\r\n table: \"w-full border-collapse\",\r\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\r\n weekday: cn(\r\n \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\r\n defaultClassNames.weekday\r\n ),\r\n week: cn(\"flex w-full mt-2\", defaultClassNames.week),\r\n week_number_header: cn(\r\n \"select-none w-(--cell-size)\",\r\n defaultClassNames.week_number_header\r\n ),\r\n week_number: cn(\r\n \"text-[0.8rem] select-none text-muted-foreground\",\r\n defaultClassNames.week_number\r\n ),\r\n day: cn(\r\n \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\r\n props.showWeekNumber\r\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\r\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\r\n defaultClassNames.day\r\n ),\r\n range_start: cn(\r\n \"rounded-l-(--cell-radius) bg-primary/10 relative after:bg-primary/10 after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\r\n defaultClassNames.range_start\r\n ),\r\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\r\n range_end: cn(\r\n \"rounded-r-(--cell-radius) bg-primary/10 relative after:bg-primary/10 after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\r\n defaultClassNames.range_end\r\n ),\r\n today: cn(\r\n \"bg-primary/10 text-primary rounded-(--cell-radius) data-[selected=true]:rounded-none\",\r\n defaultClassNames.today\r\n ),\r\n outside: cn(\r\n \"text-muted-foreground aria-selected:text-muted-foreground\",\r\n defaultClassNames.outside\r\n ),\r\n disabled: cn(\r\n \"text-muted-foreground opacity-50\",\r\n defaultClassNames.disabled\r\n ),\r\n hidden: cn(\"invisible\", defaultClassNames.hidden),\r\n ...classNames,\r\n }}\r\n components={{\r\n Root: ({ className, rootRef, ...props }) => {\r\n return (\r\n \r\n )\r\n },\r\n Chevron: ({ className, orientation, ...props }) => {\r\n if (orientation === \"left\") {\r\n return (\r\n \r\n )\r\n }\r\n\r\n if (orientation === \"right\") {\r\n return (\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n )\r\n },\r\n DayButton: ({ ...props }) => (\r\n \r\n ),\r\n WeekNumber: ({ children, ...props }) => {\r\n return (\r\n \r\n
\r\n {children}\r\n
\r\n \r\n )\r\n },\r\n ...components,\r\n }}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction CalendarDayButton({\r\n className,\r\n day,\r\n modifiers,\r\n locale,\r\n ...props\r\n}: React.ComponentProps & { locale?: Partial }) {\r\n const defaultClassNames = getDefaultClassNames()\r\n\r\n const ref = React.useRef(null)\r\n React.useEffect(() => {\r\n if (modifiers.focused) ref.current?.focus()\r\n }, [modifiers.focused])\r\n\r\n return (\r\n span]:text-xs [&>span]:opacity-70\",\r\n defaultClassNames.day,\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport { Calendar, CalendarDayButton }\r\n", - "type": "registry:ui", - "target": "components/ui/calendar.tsx" + "content": "\"use client\";\r\n\r\nimport { ComponentProps, useEffect, useRef } from \"react\";\r\n\r\nimport {\r\n DayPicker,\r\n getDefaultClassNames,\r\n type DayButton,\r\n type Locale\r\n} from \"react-day-picker\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button, buttonVariants } from \"@/components/ui/button\";\r\nimport {\r\n ChevronLeftIcon,\r\n ChevronRightIcon,\r\n ChevronDownIcon\r\n} from \"lucide-react\";\r\n\r\nfunction Calendar({\r\n className,\r\n classNames,\r\n showOutsideDays = true,\r\n captionLayout = \"label\",\r\n buttonVariant = \"ghost\",\r\n locale,\r\n formatters,\r\n components,\r\n ...props\r\n}: ComponentProps & {\r\n buttonVariant?: ComponentProps[\"variant\"];\r\n}) {\r\n const defaultClassNames = getDefaultClassNames();\r\n\r\n return (\r\n svg]:rotate-180`,\r\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\r\n className\r\n )}\r\n captionLayout={captionLayout}\r\n locale={locale}\r\n formatters={{\r\n formatMonthDropdown: (date) =>\r\n date.toLocaleString(locale?.code, { month: \"short\" }),\r\n ...formatters\r\n }}\r\n classNames={{\r\n root: cn(\"w-fit\", defaultClassNames.root),\r\n months: cn(\r\n \"flex gap-4 flex-col md:flex-row relative\",\r\n defaultClassNames.months\r\n ),\r\n month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\r\n nav: cn(\r\n \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\r\n defaultClassNames.nav\r\n ),\r\n button_previous: cn(\r\n buttonVariants({ variant: buttonVariant }),\r\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n defaultClassNames.button_previous\r\n ),\r\n button_next: cn(\r\n buttonVariants({ variant: buttonVariant }),\r\n \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\r\n defaultClassNames.button_next\r\n ),\r\n month_caption: cn(\r\n \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\r\n defaultClassNames.month_caption\r\n ),\r\n dropdowns: cn(\r\n \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\r\n defaultClassNames.dropdowns\r\n ),\r\n dropdown_root: cn(\r\n \"relative rounded-(--cell-radius)\",\r\n defaultClassNames.dropdown_root\r\n ),\r\n dropdown: cn(\r\n \"absolute bg-popover inset-0 opacity-0\",\r\n defaultClassNames.dropdown\r\n ),\r\n caption_label: cn(\r\n \"select-none font-medium\",\r\n captionLayout === \"label\"\r\n ? \"text-sm\"\r\n : \"rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\r\n defaultClassNames.caption_label\r\n ),\r\n month_grid: \"w-full border-collapse\",\r\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\r\n weekday: cn(\r\n \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\r\n defaultClassNames.weekday\r\n ),\r\n week: cn(\"flex w-full mt-2\", defaultClassNames.week),\r\n week_number_header: cn(\r\n \"select-none w-(--cell-size)\",\r\n defaultClassNames.week_number_header\r\n ),\r\n week_number: cn(\r\n \"text-[0.8rem] select-none text-muted-foreground\",\r\n defaultClassNames.week_number\r\n ),\r\n day: cn(\r\n \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\r\n props.showWeekNumber\r\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\r\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\r\n defaultClassNames.day\r\n ),\r\n range_start: cn(\r\n \"rounded-l-(--cell-radius) bg-primary/10 relative after:bg-primary/10 after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\r\n defaultClassNames.range_start\r\n ),\r\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\r\n range_end: cn(\r\n \"rounded-r-(--cell-radius) bg-primary/10 relative after:bg-primary/10 after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\r\n defaultClassNames.range_end\r\n ),\r\n today: cn(\r\n \"bg-primary/10 text-primary rounded-(--cell-radius) data-[selected=true]:rounded-none\",\r\n defaultClassNames.today\r\n ),\r\n outside: cn(\r\n \"text-muted-foreground aria-selected:text-muted-foreground\",\r\n defaultClassNames.outside\r\n ),\r\n disabled: cn(\r\n \"text-muted-foreground opacity-50\",\r\n defaultClassNames.disabled\r\n ),\r\n hidden: cn(\"invisible\", defaultClassNames.hidden),\r\n ...classNames\r\n }}\r\n components={{\r\n Root: ({ className, rootRef, ...props }) => {\r\n return (\r\n \r\n );\r\n },\r\n Chevron: ({ className, orientation, ...props }) => {\r\n if (orientation === \"left\") {\r\n return (\r\n \r\n );\r\n }\r\n\r\n if (orientation === \"right\") {\r\n return (\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n );\r\n },\r\n DayButton: ({ ...props }) => (\r\n \r\n ),\r\n WeekNumber: ({ children, ...props }) => {\r\n return (\r\n \r\n
\r\n {children}\r\n
\r\n \r\n );\r\n },\r\n ...components\r\n }}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nfunction CalendarDayButton({\r\n className,\r\n day,\r\n modifiers,\r\n locale,\r\n ...props\r\n}: ComponentProps & { locale?: Partial }) {\r\n const defaultClassNames = getDefaultClassNames();\r\n\r\n const ref = useRef(null);\r\n useEffect(() => {\r\n if (modifiers.focused) ref.current?.focus();\r\n }, [modifiers.focused]);\r\n\r\n return (\r\n span]:text-xs [&>span]:opacity-70\",\r\n defaultClassNames.day,\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport { Calendar, CalendarDayButton };\r\n", + "type": "registry:component", + "target": "@components/ui/calendar.tsx" } ], + "categories": [ + "calendar" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/card.json b/public/r/card.json index b3ec381..5e7dcb9 100644 --- a/public/r/card.json +++ b/public/r/card.json @@ -1,17 +1,18 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card", - "dependencies": [ - "react" - ], - "registryDependencies": [], + "title": "Card", + "description": "Card component.", "files": [ { "path": "src/components/ui/card.tsx", - "content": "import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Card({\r\n className,\r\n size = \"default\",\r\n ...props\r\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n \r\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport {\r\n Card,\r\n CardHeader,\r\n CardFooter,\r\n CardTitle,\r\n CardAction,\r\n CardDescription,\r\n CardContent,\r\n}\r\n", - "type": "registry:ui", - "target": "components/ui/card.tsx" + "content": "import { ComponentProps } from \"react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nfunction Card({\r\n className,\r\n size = \"default\",\r\n ...props\r\n}: ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CardHeader({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CardTitle({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CardDescription({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CardAction({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CardContent({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CardFooter({ className, ...props }: ComponentProps<\"div\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport {\r\n Card,\r\n CardHeader,\r\n CardFooter,\r\n CardTitle,\r\n CardAction,\r\n CardDescription,\r\n CardContent\r\n};\r\n", + "type": "registry:component", + "target": "@components/ui/card.tsx" } ], + "categories": [ + "card" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/carousel.json b/public/r/carousel.json index f96b400..a6f922f 100644 --- a/public/r/carousel.json +++ b/public/r/carousel.json @@ -1,10 +1,11 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel", + "title": "Carousel", + "description": "Carousel component.", "dependencies": [ "embla-carousel-react", - "lucide-react", - "react" + "lucide-react" ], "registryDependencies": [ "@uiable/button" @@ -12,10 +13,13 @@ "files": [ { "path": "src/components/ui/carousel.tsx", - "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport useEmblaCarousel, {\r\n type UseEmblaCarouselType,\r\n} from \"embla-carousel-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\r\n\r\ntype CarouselApi = UseEmblaCarouselType[1]\r\ntype UseCarouselParameters = Parameters\r\ntype CarouselOptions = UseCarouselParameters[0]\r\ntype CarouselPlugin = UseCarouselParameters[1]\r\n\r\ntype CarouselProps = {\r\n opts?: CarouselOptions\r\n plugins?: CarouselPlugin\r\n orientation?: \"horizontal\" | \"vertical\"\r\n setApi?: (api: CarouselApi) => void\r\n}\r\n\r\ntype CarouselContextProps = {\r\n carouselRef: ReturnType[0]\r\n api: ReturnType[1]\r\n scrollPrev: () => void\r\n scrollNext: () => void\r\n canScrollPrev: boolean\r\n canScrollNext: boolean\r\n} & CarouselProps\r\n\r\nconst CarouselContext = React.createContext(null)\r\n\r\nfunction useCarousel() {\r\n const context = React.useContext(CarouselContext)\r\n\r\n if (!context) {\r\n throw new Error(\"useCarousel must be used within a \")\r\n }\r\n\r\n return context\r\n}\r\n\r\nfunction Carousel({\r\n orientation = \"horizontal\",\r\n opts,\r\n setApi,\r\n plugins,\r\n className,\r\n children,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & CarouselProps) {\r\n const [carouselRef, api] = useEmblaCarousel(\r\n {\r\n ...opts,\r\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\r\n },\r\n plugins\r\n )\r\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\r\n const [canScrollNext, setCanScrollNext] = React.useState(false)\r\n\r\n const onSelect = React.useCallback((api: CarouselApi) => {\r\n if (!api) return\r\n setCanScrollPrev(api.canScrollPrev())\r\n setCanScrollNext(api.canScrollNext())\r\n }, [])\r\n\r\n const scrollPrev = React.useCallback(() => {\r\n api?.scrollPrev()\r\n }, [api])\r\n\r\n const scrollNext = React.useCallback(() => {\r\n api?.scrollNext()\r\n }, [api])\r\n\r\n const handleKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent) => {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault()\r\n scrollPrev()\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault()\r\n scrollNext()\r\n }\r\n },\r\n [scrollPrev, scrollNext]\r\n )\r\n\r\n React.useEffect(() => {\r\n if (!api || !setApi) return\r\n setApi(api)\r\n }, [api, setApi])\r\n\r\n React.useEffect(() => {\r\n if (!api) return\r\n onSelect(api)\r\n api.on(\"reInit\", onSelect)\r\n api.on(\"select\", onSelect)\r\n\r\n return () => {\r\n api?.off(\"select\", onSelect)\r\n }\r\n }, [api, onSelect])\r\n\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n )\r\n}\r\n\r\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\r\n const { carouselRef, orientation } = useCarousel()\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n const { orientation } = useCarousel()\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction CarouselPrevious({\r\n className,\r\n variant = \"outline\",\r\n size = \"icon-sm\",\r\n ...props\r\n}: React.ComponentProps) {\r\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\r\n\r\n return (\r\n \r\n \r\n Previous slide\r\n \r\n )\r\n}\r\n\r\nfunction CarouselNext({\r\n className,\r\n variant = \"outline\",\r\n size = \"icon-sm\",\r\n ...props\r\n}: React.ComponentProps) {\r\n const { orientation, scrollNext, canScrollNext } = useCarousel()\r\n\r\n return (\r\n \r\n \r\n Next slide\r\n \r\n )\r\n}\r\n\r\nexport {\r\n type CarouselApi,\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselPrevious,\r\n CarouselNext,\r\n useCarousel,\r\n}\r\n", - "type": "registry:ui", - "target": "components/ui/carousel.tsx" + "content": "\"use client\";\r\n\r\nimport { ComponentProps, KeyboardEvent, createContext, useCallback, useContext, useEffect, useState } from \"react\";\r\n\r\nimport useEmblaCarousel, {\r\n type UseEmblaCarouselType\r\n} from \"embla-carousel-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\r\n\r\ntype CarouselApi = UseEmblaCarouselType[1];\r\ntype UseCarouselParameters = Parameters;\r\ntype CarouselOptions = UseCarouselParameters[0];\r\ntype CarouselPlugin = UseCarouselParameters[1];\r\n\r\ntype CarouselProps = {\r\n opts?: CarouselOptions;\r\n plugins?: CarouselPlugin;\r\n orientation?: \"horizontal\" | \"vertical\";\r\n setApi?: (api: CarouselApi) => void;\r\n};\r\n\r\ntype CarouselContextProps = {\r\n carouselRef: ReturnType[0];\r\n api: ReturnType[1];\r\n scrollPrev: () => void;\r\n scrollNext: () => void;\r\n canScrollPrev: boolean;\r\n canScrollNext: boolean;\r\n} & CarouselProps;\r\n\r\nconst CarouselContext = createContext(null);\r\n\r\nfunction useCarousel() {\r\n const context = useContext(CarouselContext);\r\n\r\n if (!context) {\r\n throw new Error(\"useCarousel must be used within a \");\r\n }\r\n\r\n return context;\r\n}\r\n\r\nfunction Carousel({\r\n orientation = \"horizontal\",\r\n opts,\r\n setApi,\r\n plugins,\r\n className,\r\n children,\r\n ...props\r\n}: ComponentProps<\"div\"> & CarouselProps) {\r\n const [carouselRef, api] = useEmblaCarousel(\r\n {\r\n ...opts,\r\n axis: orientation === \"horizontal\" ? \"x\" : \"y\"\r\n },\r\n plugins\r\n );\r\n const [canScrollPrev, setCanScrollPrev] = useState(false);\r\n const [canScrollNext, setCanScrollNext] = useState(false);\r\n\r\n const onSelect = useCallback((api: CarouselApi) => {\r\n if (!api) return;\r\n setCanScrollPrev(api.canScrollPrev());\r\n setCanScrollNext(api.canScrollNext());\r\n }, []);\r\n\r\n const scrollPrev = useCallback(() => {\r\n api?.scrollPrev();\r\n }, [api]);\r\n\r\n const scrollNext = useCallback(() => {\r\n api?.scrollNext();\r\n }, [api]);\r\n\r\n const handleKeyDown = useCallback(\r\n (event: KeyboardEvent) => {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault();\r\n scrollPrev();\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault();\r\n scrollNext();\r\n }\r\n },\r\n [scrollPrev, scrollNext]\r\n );\r\n\r\n useEffect(() => {\r\n if (!api || !setApi) return;\r\n setApi(api);\r\n }, [api, setApi]);\r\n\r\n useEffect(() => {\r\n if (!api) return;\r\n setTimeout(() => onSelect(api), 0);\r\n api.on(\"reInit\", onSelect);\r\n api.on(\"select\", onSelect);\r\n\r\n return () => {\r\n api?.off(\"select\", onSelect);\r\n };\r\n }, [api, onSelect]);\r\n\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n\r\nfunction CarouselContent({ className, ...props }: ComponentProps<\"div\">) {\r\n const { carouselRef, orientation } = useCarousel();\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction CarouselItem({ className, ...props }: ComponentProps<\"div\">) {\r\n const { orientation } = useCarousel();\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CarouselPrevious({\r\n className,\r\n variant = \"outline\",\r\n size = \"icon-sm\",\r\n ...props\r\n}: ComponentProps) {\r\n const { orientation, scrollPrev, canScrollPrev } = useCarousel();\r\n\r\n return (\r\n \r\n \r\n Previous slide\r\n \r\n );\r\n}\r\n\r\nfunction CarouselNext({\r\n className,\r\n variant = \"outline\",\r\n size = \"icon-sm\",\r\n ...props\r\n}: ComponentProps) {\r\n const { orientation, scrollNext, canScrollNext } = useCarousel();\r\n\r\n return (\r\n \r\n \r\n Next slide\r\n \r\n );\r\n}\r\n\r\nexport {\r\n type CarouselApi,\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselPrevious,\r\n CarouselNext,\r\n useCarousel\r\n};\r\n", + "type": "registry:component", + "target": "@components/ui/carousel.tsx" } ], + "categories": [ + "carousel" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/chart.json b/public/r/chart.json index 18e056f..67e163e 100644 --- a/public/r/chart.json +++ b/public/r/chart.json @@ -1,18 +1,21 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chart", + "title": "Chart", + "description": "Chart component.", "dependencies": [ - "react", "recharts" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/chart.tsx", - "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as RechartsPrimitive from \"recharts\"\r\nimport type { TooltipValueType } from \"recharts\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\n// Format: { THEME_NAME: CSS_SELECTOR }\r\nconst THEMES = { light: \"\", dark: \".dark\" } as const\r\n\r\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\r\ntype TooltipNameType = number | string\r\n\r\nexport type ChartConfig = Record<\r\n string,\r\n {\r\n label?: React.ReactNode\r\n icon?: React.ComponentType\r\n } & (\r\n | { color?: string; theme?: never }\r\n | { color?: never; theme: Record }\r\n )\r\n>\r\n\r\ntype ChartContextProps = {\r\n config: ChartConfig\r\n}\r\n\r\nconst ChartContext = React.createContext(null)\r\n\r\nfunction useChart() {\r\n const context = React.useContext(ChartContext)\r\n\r\n if (!context) {\r\n throw new Error(\"useChart must be used within a \")\r\n }\r\n\r\n return context\r\n}\r\n\r\nfunction ChartContainer({\r\n id,\r\n className,\r\n children,\r\n config,\r\n initialDimension = INITIAL_DIMENSION,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n config: ChartConfig\r\n children: React.ComponentProps<\r\n typeof RechartsPrimitive.ResponsiveContainer\r\n >[\"children\"]\r\n initialDimension?: {\r\n width: number\r\n height: number\r\n }\r\n}) {\r\n const uniqueId = React.useId()\r\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\r\n const colorConfig = Object.entries(config).filter(\r\n ([, config]) => config.theme ?? config.color\r\n )\r\n\r\n if (!colorConfig.length) {\r\n return null\r\n }\r\n\r\n return (\r\n `\r\n${prefix} [data-chart=${id}] {\r\n${colorConfig\r\n .map(([key, itemConfig]) => {\r\n const color =\r\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\r\n itemConfig.color\r\n return color ? ` --color-${key}: ${color};` : null\r\n })\r\n .join(\"\\n\")}\r\n}\r\n`\r\n )\r\n .join(\"\\n\"),\r\n }}\r\n />\r\n )\r\n}\r\n\r\nconst ChartTooltip = RechartsPrimitive.Tooltip\r\n\r\nfunction ChartTooltipContent({\r\n active,\r\n payload,\r\n className,\r\n indicator = \"dot\",\r\n hideLabel = false,\r\n hideIndicator = false,\r\n label,\r\n labelFormatter,\r\n labelClassName,\r\n formatter,\r\n color,\r\n nameKey,\r\n labelKey,\r\n}: React.ComponentProps &\r\n React.ComponentProps<\"div\"> & {\r\n hideLabel?: boolean\r\n hideIndicator?: boolean\r\n indicator?: \"line\" | \"dot\" | \"dashed\"\r\n nameKey?: string\r\n labelKey?: string\r\n } & Omit<\r\n RechartsPrimitive.DefaultTooltipContentProps<\r\n TooltipValueType,\r\n TooltipNameType\r\n >,\r\n \"accessibilityLayer\"\r\n >) {\r\n const { config } = useChart()\r\n\r\n const tooltipLabel = React.useMemo(() => {\r\n if (hideLabel || !payload?.length) {\r\n return null\r\n }\r\n\r\n const [item] = payload\r\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n const value =\r\n !labelKey && typeof label === \"string\"\r\n ? (config[label]?.label ?? label)\r\n : itemConfig?.label\r\n\r\n if (labelFormatter) {\r\n return (\r\n
\r\n {labelFormatter(value, payload)}\r\n
\r\n )\r\n }\r\n\r\n if (!value) {\r\n return null\r\n }\r\n\r\n return
{value}
\r\n }, [\r\n label,\r\n labelFormatter,\r\n payload,\r\n hideLabel,\r\n labelClassName,\r\n config,\r\n labelKey,\r\n ])\r\n\r\n if (!active || !payload?.length) {\r\n return null\r\n }\r\n\r\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\r\n\r\n return (\r\n \r\n {!nestLabel ? tooltipLabel : null}\r\n
\r\n {payload\r\n .filter((item) => item.type !== \"none\")\r\n .map((item, index) => {\r\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n const indicatorColor = color ?? item.payload?.fill ?? item.color\r\n\r\n return (\r\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\r\n indicator === \"dot\" && \"items-center\"\r\n )}\r\n >\r\n {formatter && item?.value !== undefined && item.name ? (\r\n formatter(item.value, item.name, item, index, item.payload)\r\n ) : (\r\n <>\r\n {itemConfig?.icon ? (\r\n \r\n ) : (\r\n !hideIndicator && (\r\n \r\n )\r\n )}\r\n \r\n
\r\n {nestLabel ? tooltipLabel : null}\r\n \r\n {itemConfig?.label ?? item.name}\r\n \r\n
\r\n {item.value != null && (\r\n \r\n {typeof item.value === \"number\"\r\n ? item.value.toLocaleString()\r\n : String(item.value)}\r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n )\r\n })}\r\n \r\n \r\n )\r\n}\r\n\r\nconst ChartLegend = RechartsPrimitive.Legend\r\n\r\nfunction ChartLegendContent({\r\n className,\r\n hideIcon = false,\r\n payload,\r\n verticalAlign = \"bottom\",\r\n nameKey,\r\n}: React.ComponentProps<\"div\"> & {\r\n hideIcon?: boolean\r\n nameKey?: string\r\n} & RechartsPrimitive.DefaultLegendContentProps) {\r\n const { config } = useChart()\r\n\r\n if (!payload?.length) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n {payload\r\n .filter((item) => item.type !== \"none\")\r\n .map((item, index) => {\r\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n\r\n return (\r\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\r\n )}\r\n >\r\n {itemConfig?.icon && !hideIcon ? (\r\n \r\n ) : (\r\n \r\n )}\r\n {itemConfig?.label}\r\n \r\n )\r\n })}\r\n \r\n )\r\n}\r\n\r\nfunction getPayloadConfigFromPayload(\r\n config: ChartConfig,\r\n payload: unknown,\r\n key: string\r\n) {\r\n if (typeof payload !== \"object\" || payload === null) {\r\n return undefined\r\n }\r\n\r\n const payloadPayload =\r\n \"payload\" in payload &&\r\n typeof payload.payload === \"object\" &&\r\n payload.payload !== null\r\n ? payload.payload\r\n : undefined\r\n\r\n let configLabelKey: string = key\r\n\r\n if (\r\n key in payload &&\r\n typeof payload[key as keyof typeof payload] === \"string\"\r\n ) {\r\n configLabelKey = payload[key as keyof typeof payload] as string\r\n } else if (\r\n payloadPayload &&\r\n key in payloadPayload &&\r\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\r\n ) {\r\n configLabelKey = payloadPayload[\r\n key as keyof typeof payloadPayload\r\n ] as string\r\n }\r\n\r\n return configLabelKey in config ? config[configLabelKey] : config[key]\r\n}\r\n\r\nexport {\r\n ChartContainer,\r\n ChartTooltip,\r\n ChartTooltipContent,\r\n ChartLegend,\r\n ChartLegendContent,\r\n ChartStyle,\r\n}\r\n", - "type": "registry:ui", - "target": "components/ui/chart.tsx" + "content": "\"use client\";\r\n\r\nimport { CSSProperties, ComponentProps, ComponentType, ReactNode, createContext, useContext, useId, useMemo } from \"react\";\r\n\r\nimport * as RechartsPrimitive from \"recharts\";\r\nimport type { TooltipValueType } from \"recharts\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// Format: { THEME_NAME: CSS_SELECTOR }\r\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\r\n\r\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\r\ntype TooltipNameType = number | string;\r\n\r\nexport type ChartConfig = Record<\r\n string,\r\n {\r\n label?: ReactNode;\r\n icon?: ComponentType;\r\n } & (\r\n | { color?: string; theme?: never }\r\n | { color?: never; theme: Record }\r\n )\r\n>;\r\n\r\ntype ChartContextProps = {\r\n config: ChartConfig;\r\n};\r\n\r\nconst ChartContext = createContext(null);\r\n\r\nfunction useChart() {\r\n const context = useContext(ChartContext);\r\n\r\n if (!context) {\r\n throw new Error(\"useChart must be used within a \");\r\n }\r\n\r\n return context;\r\n}\r\n\r\nfunction ChartContainer({\r\n id,\r\n className,\r\n children,\r\n config,\r\n initialDimension = INITIAL_DIMENSION,\r\n ...props\r\n}: ComponentProps<\"div\"> & {\r\n config: ChartConfig;\r\n children: ComponentProps<\r\n typeof RechartsPrimitive.ResponsiveContainer\r\n >[\"children\"];\r\n initialDimension?: {\r\n width: number;\r\n height: number;\r\n };\r\n}) {\r\n const uniqueId = useId();\r\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\r\n const colorConfig = Object.entries(config).filter(\r\n ([, config]) => config.theme ?? config.color\r\n );\r\n\r\n if (!colorConfig.length) {\r\n return null;\r\n }\r\n\r\n return (\r\n `\r\n${prefix} [data-chart=${id}] {\r\n${colorConfig\r\n .map(([key, itemConfig]) => {\r\n const color =\r\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\r\n itemConfig.color;\r\n return color ? ` --color-${key}: ${color};` : null;\r\n })\r\n .join(\"\\n\")}\r\n}\r\n`\r\n )\r\n .join(\"\\n\")\r\n }}\r\n />\r\n );\r\n};\r\n\r\nconst ChartTooltip = RechartsPrimitive.Tooltip;\r\n\r\nfunction ChartTooltipContent({\r\n active,\r\n payload,\r\n className,\r\n indicator = \"dot\",\r\n hideLabel = false,\r\n hideIndicator = false,\r\n label,\r\n labelFormatter,\r\n labelClassName,\r\n formatter,\r\n color,\r\n nameKey,\r\n labelKey\r\n}: ComponentProps &\r\n ComponentProps<\"div\"> & {\r\n hideLabel?: boolean;\r\n hideIndicator?: boolean;\r\n indicator?: \"line\" | \"dot\" | \"dashed\";\r\n nameKey?: string;\r\n labelKey?: string;\r\n } & Omit<\r\n RechartsPrimitive.DefaultTooltipContentProps<\r\n TooltipValueType,\r\n TooltipNameType\r\n >,\r\n \"accessibilityLayer\"\r\n >) {\r\n const { config } = useChart();\r\n\r\n const tooltipLabel = useMemo(() => {\r\n if (hideLabel || !payload?.length) {\r\n return null;\r\n }\r\n\r\n const [item] = payload;\r\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`;\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n const value =\r\n !labelKey && typeof label === \"string\"\r\n ? (config[label]?.label ?? label)\r\n : itemConfig?.label;\r\n\r\n if (labelFormatter) {\r\n return (\r\n
\r\n {labelFormatter(value, payload)}\r\n
\r\n );\r\n }\r\n\r\n if (!value) {\r\n return null;\r\n }\r\n\r\n return
{value}
;\r\n }, [\r\n label,\r\n labelFormatter,\r\n payload,\r\n hideLabel,\r\n labelClassName,\r\n config,\r\n labelKey\r\n ]);\r\n\r\n if (!active || !payload?.length) {\r\n return null;\r\n }\r\n\r\n const nestLabel = payload.length === 1 && indicator !== \"dot\";\r\n\r\n return (\r\n \r\n {!nestLabel ? tooltipLabel : null}\r\n
\r\n {payload\r\n .filter((item) => item.type !== \"none\")\r\n .map((item, index) => {\r\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`;\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n const indicatorColor = color ?? item.payload?.fill ?? item.color;\r\n\r\n return (\r\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\r\n indicator === \"dot\" && \"items-center\"\r\n )}\r\n >\r\n {formatter && item?.value !== undefined && item.name ? (\r\n formatter(item.value, item.name, item, index, item.payload)\r\n ) : (\r\n <>\r\n {itemConfig?.icon ? (\r\n \r\n ) : (\r\n !hideIndicator && (\r\n \r\n )\r\n )}\r\n \r\n
\r\n {nestLabel ? tooltipLabel : null}\r\n \r\n {itemConfig?.label ?? item.name}\r\n \r\n
\r\n {item.value != null && (\r\n \r\n {typeof item.value === \"number\"\r\n ? item.value.toLocaleString()\r\n : String(item.value)}\r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n}\r\n\r\nconst ChartLegend = RechartsPrimitive.Legend;\r\n\r\nfunction ChartLegendContent({\r\n className,\r\n hideIcon = false,\r\n payload,\r\n verticalAlign = \"bottom\",\r\n nameKey\r\n}: ComponentProps<\"div\"> & {\r\n hideIcon?: boolean;\r\n nameKey?: string;\r\n} & RechartsPrimitive.DefaultLegendContentProps) {\r\n const { config } = useChart();\r\n\r\n if (!payload?.length) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {payload\r\n .filter((item) => item.type !== \"none\")\r\n .map((item, index) => {\r\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`;\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\r\n\r\n return (\r\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\r\n )}\r\n >\r\n {itemConfig?.icon && !hideIcon ? (\r\n \r\n ) : (\r\n \r\n )}\r\n {itemConfig?.label}\r\n \r\n );\r\n })}\r\n \r\n );\r\n}\r\n\r\nfunction getPayloadConfigFromPayload(\r\n config: ChartConfig,\r\n payload: unknown,\r\n key: string\r\n) {\r\n if (typeof payload !== \"object\" || payload === null) {\r\n return undefined;\r\n }\r\n\r\n const payloadPayload =\r\n \"payload\" in payload &&\r\n typeof payload.payload === \"object\" &&\r\n payload.payload !== null\r\n ? payload.payload\r\n : undefined;\r\n\r\n let configLabelKey: string = key;\r\n\r\n if (\r\n key in payload &&\r\n typeof payload[key as keyof typeof payload] === \"string\"\r\n ) {\r\n configLabelKey = payload[key as keyof typeof payload] as string;\r\n } else if (\r\n payloadPayload &&\r\n key in payloadPayload &&\r\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\r\n ) {\r\n configLabelKey = payloadPayload[\r\n key as keyof typeof payloadPayload\r\n ] as string;\r\n }\r\n\r\n return configLabelKey in config ? config[configLabelKey] : config[key];\r\n}\r\n\r\nexport {\r\n ChartContainer,\r\n ChartTooltip,\r\n ChartTooltipContent,\r\n ChartLegend,\r\n ChartLegendContent,\r\n ChartStyle\r\n};\r\n", + "type": "registry:component", + "target": "@components/ui/chart.tsx" } ], + "categories": [ + "chart" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/checkbox.json b/public/r/checkbox.json index 03795ad..a085ea5 100644 --- a/public/r/checkbox.json +++ b/public/r/checkbox.json @@ -1,18 +1,22 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkbox", + "title": "Checkbox", + "description": "Checkbox component.", "dependencies": [ "@base-ui/react", "lucide-react" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/checkbox.tsx", - "content": "\"use client\"\r\n\r\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { CheckIcon } from \"lucide-react\"\r\n\r\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\r\n return (\r\n \r\n svg]:size-3 [&>svg]:stroke-3\"\r\n >\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport { Checkbox }\r\n", - "type": "registry:ui", - "target": "components/ui/checkbox.tsx" + "content": "\"use client\";\r\n\r\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { CheckIcon } from \"lucide-react\";\r\n\r\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\r\n return (\r\n \r\n svg]:size-3 [&>svg]:stroke-3\"\r\n >\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport { Checkbox };\r\n", + "type": "registry:component", + "target": "@components/ui/checkbox.tsx" } ], + "categories": [ + "checkbox" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/collapsible.json b/public/r/collapsible.json index 292402d..0eb99dd 100644 --- a/public/r/collapsible.json +++ b/public/r/collapsible.json @@ -1,17 +1,21 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "collapsible", + "title": "Collapsible", + "description": "Collapsible component.", "dependencies": [ "@base-ui/react" ], - "registryDependencies": [], "files": [ { "path": "src/components/ui/collapsible.tsx", - "content": "\"use client\"\r\n\r\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\r\n\r\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\r\n return \r\n}\r\n\r\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\r\n", - "type": "registry:ui", - "target": "components/ui/collapsible.tsx" + "content": "\"use client\";\r\n\r\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\r\n\r\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\r\n return ;\r\n}\r\n\r\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\r\n", + "type": "registry:component", + "target": "@components/ui/collapsible.tsx" } ], + "categories": [ + "collapsible" + ], "type": "registry:ui" } \ No newline at end of file diff --git a/public/r/combobox.json b/public/r/combobox.json index 3531424..4dec6a1 100644 --- a/public/r/combobox.json +++ b/public/r/combobox.json @@ -1,10 +1,11 @@ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "combobox", + "title": "Combobox", + "description": "Combobox component.", "dependencies": [ "@base-ui/react", - "lucide-react", - "react" + "lucide-react" ], "registryDependencies": [ "@uiable/button", @@ -13,10 +14,13 @@ "files": [ { "path": "src/components/ui/combobox.tsx", - "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { ChevronDownIcon, XIcon, CheckIcon } from \"lucide-react\"\r\n\r\nconst Combobox = ComboboxPrimitive.Root\r\n\r\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\r\n return \r\n}\r\n\r\nfunction ComboboxTrigger({\r\n className,\r\n children,\r\n ...props\r\n}: ComboboxPrimitive.Trigger.Props) {\r\n return (\r\n \r\n {children}\r\n \r\n \r\n )\r\n}\r\n\r\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\r\n return (\r\n }\r\n className={cn(className)}\r\n {...props}\r\n >\r\n \r\n \r\n )\r\n}\r\n\r\nfunction ComboboxInput({\r\n className,\r\n children,\r\n disabled = false,\r\n showTrigger = true,\r\n showClear = false,\r\n ...props\r\n}: ComboboxPrimitive.Input.Props & {\r\n showTrigger?: boolean\r\n showClear?: boolean\r\n}) {\r\n return (\r\n \r\n }\r\n {...props}\r\n />\r\n \r\n {showTrigger && (\r\n }\r\n data-slot=\"input-group-button\"\r\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\r\n disabled={disabled}\r\n />\r\n )}\r\n {showClear && }\r\n \r\n {children}\r\n \r\n )\r\n}\r\n\r\nfunction ComboboxContent({\r\n className,\r\n side = \"bottom\",\r\n sideOffset = 6,\r\n align = \"start\",\r\n alignOffset = 0,\r\n anchor,\r\n ...props\r\n}: ComboboxPrimitive.Popup.Props &\r\n Pick<\r\n ComboboxPrimitive.Positioner.Props,\r\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\r\n >) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction ComboboxItem({\r\n className,\r\n children,\r\n ...props\r\n}: ComboboxPrimitive.Item.Props) {\r\n return (\r\n \r\n {children}\r\n \r\n }\r\n >\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction ComboboxLabel({\r\n className,\r\n ...props\r\n}: ComboboxPrimitive.GroupLabel.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\r\n return (\r\n \r\n )\r\n}\r\n\r\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\r\n return (\r\n