@static-ui/registry 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.json +43 -43
- package/package.json +1 -1
package/dist/index.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"files": [
|
|
8
8
|
{
|
|
9
9
|
"name": "accordion.tsx",
|
|
10
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Accordion = BaseAccordion.Root\r\n\r\nconst AccordionItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAccordion.Item ref={ref} className={cn(\"border-b border-
|
|
10
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Accordion = BaseAccordion.Root\r\n\r\nconst AccordionItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAccordion.Item ref={ref} className={cn(\"border-b border-border py-2\", className)} {...props} />\r\n))\r\nAccordionItem.displayName = \"AccordionItem\"\r\n\r\nconst AccordionHeader = BaseAccordion.Header\r\n\r\nconst AccordionTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseAccordion.Header className=\"flex\">\r\n <BaseAccordion.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left\",\r\n \"group data-[panel-open]:text-foreground\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[panel-open]:rotate-180\"\r\n >\r\n <polyline points=\"6 9 12 15 18 9\" />\r\n </svg>\r\n </BaseAccordion.Trigger>\r\n </BaseAccordion.Header>\r\n))\r\nAccordionTrigger.displayName = \"AccordionTrigger\"\r\n\r\nconst AccordionContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseAccordion.Panel\r\n ref={ref}\r\n className={cn(\r\n \"overflow-hidden text-sm transition-all animate-accordion-up data-[panel-open]:animate-accordion-down\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAccordionContent.displayName = \"AccordionContent\"\r\n\r\nexport { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent }"
|
|
11
11
|
}
|
|
12
12
|
]
|
|
13
13
|
},
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"files": [
|
|
20
20
|
{
|
|
21
21
|
"name": "alert-dialog.tsx",
|
|
22
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst AlertDialog = BaseAlertDialog.Root\r\n\r\nconst AlertDialogTrigger = BaseAlertDialog.Trigger\r\n\r\nconst AlertDialogPortal = BaseAlertDialog.Portal\r\n\r\nconst AlertDialogBackdrop = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAlertDialog.Backdrop\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 min-h-dvh bg-black/40 backdrop-blur-xs transition-opacity duration-200\",\r\n \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAlertDialogBackdrop.displayName = \"AlertDialogBackdrop\"\r\n\r\nconst AlertDialogPopup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAlertDialog.Popup\r\n ref={ref}\r\n className={cn(\r\n \"fixed top-1/2 left-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-
|
|
22
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst AlertDialog = BaseAlertDialog.Root\r\n\r\nconst AlertDialogTrigger = BaseAlertDialog.Trigger\r\n\r\nconst AlertDialogPortal = BaseAlertDialog.Portal\r\n\r\nconst AlertDialogBackdrop = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAlertDialog.Backdrop\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 min-h-dvh bg-black/40 backdrop-blur-xs transition-opacity duration-200\",\r\n \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAlertDialogBackdrop.displayName = \"AlertDialogBackdrop\"\r\n\r\nconst AlertDialogPopup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAlertDialog.Popup\r\n ref={ref}\r\n className={cn(\r\n \"fixed top-1/2 left-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-background p-6 shadow-xl text-foreground transition-all duration-200 ease-out\",\r\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\r\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAlertDialogPopup.displayName = \"AlertDialogPopup\"\r\n\r\nconst AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex flex-col gap-1 text-center sm:text-left mb-4\", className)} {...props} />\r\n)\r\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\r\n\r\nconst AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6\", className)} {...props} />\r\n)\r\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\r\n\r\nconst AlertDialogTitle = React.forwardRef<\r\n HTMLHeadingElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAlertDialog.Title\r\n ref={ref}\r\n className={cn(\"text-base font-semibold tracking-tight leading-none\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertDialogTitle.displayName = \"AlertDialogTitle\"\r\n\r\nconst AlertDialogDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAlertDialog.Description\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground leading-normal\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertDialogDescription.displayName = \"AlertDialogDescription\"\r\n\r\nconst AlertDialogAction = BaseAlertDialog.Close\r\n\r\nconst AlertDialogCancel = BaseAlertDialog.Close\r\n\r\nexport {\r\n AlertDialog,\r\n AlertDialogTrigger,\r\n AlertDialogPortal,\r\n AlertDialogBackdrop,\r\n AlertDialogPopup,\r\n AlertDialogHeader,\r\n AlertDialogFooter,\r\n AlertDialogTitle,\r\n AlertDialogDescription,\r\n AlertDialogAction,\r\n AlertDialogCancel,\r\n}"
|
|
23
23
|
}
|
|
24
24
|
]
|
|
25
25
|
},
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"files": [
|
|
30
30
|
{
|
|
31
31
|
"name": "alert.tsx",
|
|
32
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Alert = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { variant?: \"default\" | \"destructive\" }\r\n>(({ className, variant = \"default\", ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={cn(\r\n \"relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-
|
|
32
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Alert = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { variant?: \"default\" | \"destructive\" }\r\n>(({ className, variant = \"default\", ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={cn(\r\n \"relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\r\n variant === \"default\" && \"bg-muted text-foreground border-border [&>svg]:text-muted-foreground\",\r\n variant === \"destructive\" && \"border-destructive/50 bg-destructive/10 text-destructive-foreground [&>svg]:text-destructive-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAlert.displayName = \"Alert\"\r\n\r\nconst AlertTitle = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n <h5\r\n ref={ref}\r\n className={cn(\"mb-1 font-medium tracking-tight text-sm leading-none\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertTitle.displayName = \"AlertTitle\"\r\n\r\nconst AlertDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"text-xs text-muted-foreground [&_p]:leading-relaxed\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertDescription.displayName = \"AlertDescription\"\r\n\r\nexport { Alert, AlertTitle, AlertDescription }"
|
|
33
33
|
}
|
|
34
34
|
]
|
|
35
35
|
},
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"files": [
|
|
52
52
|
{
|
|
53
53
|
"name": "avatar.tsx",
|
|
54
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Avatar = React.forwardRef<\r\n HTMLSpanElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAvatar.Root\r\n ref={ref}\r\n className={cn(\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-
|
|
54
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Avatar = React.forwardRef<\r\n HTMLSpanElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAvatar.Root\r\n ref={ref}\r\n className={cn(\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-muted\", className)}\r\n {...props}\r\n />\r\n))\r\nAvatar.displayName = \"Avatar\"\r\n\r\nconst AvatarImage = React.forwardRef<\r\n HTMLImageElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAvatar.Image\r\n ref={ref}\r\n className={cn(\"aspect-square h-full w-full object-cover transition-opacity duration-200 data-[status=loading]:opacity-0\", className)}\r\n {...props}\r\n />\r\n))\r\nAvatarImage.displayName = \"AvatarImage\"\r\n\r\nconst AvatarFallback = React.forwardRef<\r\n HTMLSpanElement,\r\n React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>\r\n>(({ className, ...props }, ref) => (\r\n <BaseAvatar.Fallback\r\n ref={ref}\r\n className={cn(\r\n \"flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-sm text-muted-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAvatarFallback.displayName = \"AvatarFallback\"\r\n\r\nexport { Avatar, AvatarImage, AvatarFallback }"
|
|
55
55
|
}
|
|
56
56
|
]
|
|
57
57
|
},
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"files": [
|
|
64
64
|
{
|
|
65
65
|
"name": "badge.tsx",
|
|
66
|
-
"content": "import * as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst badgeVariants = cva(\r\n \"inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-
|
|
66
|
+
"content": "import * as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst badgeVariants = cva(\r\n \"inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80\",\r\n secondary: \"border-transparent bg-muted text-foreground hover:bg-muted/80\",\r\n destructive: \"border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\r\n outline: \"text-foreground border border-border\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n }\r\n)\r\n\r\nexport interface BadgeProps\r\n extends React.HTMLAttributes<HTMLDivElement>,\r\n VariantProps<typeof badgeVariants> {}\r\n\r\nconst Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\r\n ({ className, variant, ...props }, ref) => {\r\n return (\r\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\r\n )\r\n }\r\n)\r\n\r\nexport { Badge, badgeVariants }"
|
|
67
67
|
}
|
|
68
68
|
]
|
|
69
69
|
},
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"files": [
|
|
74
74
|
{
|
|
75
75
|
"name": "breadcrumb.tsx",
|
|
76
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Breadcrumb = React.forwardRef<\r\n HTMLElement,\r\n React.ComponentPropsWithoutRef<\"nav\"> & { separator?: React.ReactNode }\r\n>(({ className, ...props }, ref) => (\r\n <nav ref={ref} aria-label=\"breadcrumb\" className={cn(\"flex flex-wrap items-center gap-1.5 break-words text-sm text-
|
|
76
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Breadcrumb = React.forwardRef<\r\n HTMLElement,\r\n React.ComponentPropsWithoutRef<\"nav\"> & { separator?: React.ReactNode }\r\n>(({ className, ...props }, ref) => (\r\n <nav ref={ref} aria-label=\"breadcrumb\" className={cn(\"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground\", className)} {...props} />\r\n))\r\nBreadcrumb.displayName = \"Breadcrumb\"\r\n\r\nconst BreadcrumbList = React.forwardRef<\r\n HTMLOListElement,\r\n React.ComponentPropsWithoutRef<\"ol\">\r\n>(({ className, ...props }, ref) => (\r\n <ol ref={ref} className={cn(\"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground\", className)} {...props} />\r\n))\r\nBreadcrumbList.displayName = \"BreadcrumbList\"\r\n\r\nconst BreadcrumbItem = React.forwardRef<\r\n HTMLLIElement,\r\n React.ComponentPropsWithoutRef<\"li\">\r\n>(({ className, ...props }, ref) => (\r\n <li ref={ref} className={cn(\"inline-flex items-center gap-1.5\", className)} {...props} />\r\n))\r\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\r\n\r\nconst BreadcrumbLink = React.forwardRef<\r\n HTMLAnchorElement,\r\n React.ComponentPropsWithoutRef<\"a\"> & { asChild?: boolean }\r\n>(({ className, ...props }, ref) => (\r\n <a ref={ref} className={cn(\"transition-colors hover:text-foreground cursor-pointer\", className)} {...props} />\r\n))\r\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\r\n\r\nconst BreadcrumbPage = React.forwardRef<\r\n HTMLSpanElement,\r\n React.ComponentPropsWithoutRef<\"span\">\r\n>(({ className, ...props }, ref) => (\r\n <span ref={ref} role=\"link\" aria-disabled=\"true\" aria-current=\"page\" className={cn(\"font-normal text-foreground\", className)} {...props} />\r\n))\r\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\r\n\r\nconst BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<\"li\">) => (\r\n <li role=\"presentation\" aria-hidden=\"true\" className={cn(\"[&>svg]:h-3.5 [&>svg]:w-3.5 text-muted-foreground\", className)} {...props}>\r\n {children ?? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n <path d=\"m9 18 6-6-6-6\" />\r\n </svg>\r\n )}\r\n </li>\r\n)\r\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\r\n\r\nexport { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator }"
|
|
77
77
|
}
|
|
78
78
|
]
|
|
79
79
|
},
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"files": [
|
|
87
87
|
{
|
|
88
88
|
"name": "button.tsx",
|
|
89
|
-
"content": "import * as React from \"react\"\r\nimport { Button as BaseButton } from \"@base-ui/react/button\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst buttonVariants = cva(\r\n \"inline-flex items-center justify-center font-medium rounded-md text-sm transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2 data-[focus-visible]:ring-
|
|
89
|
+
"content": "import * as React from \"react\"\r\nimport { Button as BaseButton } from \"@base-ui/react/button\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst buttonVariants = cva(\r\n \"inline-flex items-center justify-center font-medium rounded-md text-sm transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-primary text-primary-foreground hover:bg-primary/90 data-[hover]:bg-primary/90\",\r\n outline: \"border border-border bg-background text-foreground hover:bg-muted data-[hover]:bg-muted\",\r\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n },\r\n size: {\r\n default: \"h-10 px-4 py-2\",\r\n sm: \"h-9 px-3\",\r\n lg: \"h-11 px-8\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\",\r\n },\r\n }\r\n)\r\n\r\nexport interface ButtonProps\r\n extends React.ComponentPropsWithoutRef<typeof BaseButton>,\r\n VariantProps<typeof buttonVariants> {}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ className, variant, size, ...props }, ref) => {\r\n return (\r\n <BaseButton\r\n ref={ref}\r\n className={cn(buttonVariants({ variant, size, className }))}\r\n {...props}\r\n />\r\n )\r\n }\r\n)\r\n\r\nButton.displayName = \"Button\"\r\n\r\nexport { Button, buttonVariants }"
|
|
90
90
|
}
|
|
91
91
|
]
|
|
92
92
|
},
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"files": [
|
|
97
97
|
{
|
|
98
98
|
"name": "calendar.tsx",
|
|
99
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface CalendarProps {\r\n className?: string\r\n value?: Date\r\n onChange?: (date: Date) => void\r\n}\r\n\r\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(\r\n ({ className, value, onChange }, ref) => {\r\n const [currentDate, setCurrentDate] = React.useState(value || new Date())\r\n const selectedDate = value;\r\n\r\n const year = currentDate.getFullYear()\r\n const month = currentDate.getMonth()\r\n\r\n const monthNames = [\r\n \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\r\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\r\n ]\r\n\r\n const daysInMonth = new Date(year, month + 1, 0).getDate()\r\n const firstDayIndex = new Date(year, month, 1).getDay()\r\n\r\n const handlePrevMonth = () => {\r\n setCurrentDate(new Date(year, month - 1, 1))\r\n }\r\n\r\n const handleNextMonth = () => {\r\n setCurrentDate(new Date(year, month + 1, 1))\r\n }\r\n\r\n const handleDateClick = (day: number) => {\r\n const clickedDate = new Date(year, month, day)\r\n if (onChange) onChange(clickedDate)\r\n }\r\n\r\n const daysArray = Array.from({ length: daysInMonth }, (_, i) => i + 1)\r\n const blankDays = Array.from({ length: firstDayIndex }, (_, i) => i)\r\n\r\n const weekdays = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\"p-4 bg-
|
|
99
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface CalendarProps {\r\n className?: string\r\n value?: Date\r\n onChange?: (date: Date) => void\r\n}\r\n\r\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(\r\n ({ className, value, onChange }, ref) => {\r\n const [currentDate, setCurrentDate] = React.useState(value || new Date())\r\n const selectedDate = value;\r\n\r\n const year = currentDate.getFullYear()\r\n const month = currentDate.getMonth()\r\n\r\n const monthNames = [\r\n \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\r\n \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\r\n ]\r\n\r\n const daysInMonth = new Date(year, month + 1, 0).getDate()\r\n const firstDayIndex = new Date(year, month, 1).getDay()\r\n\r\n const handlePrevMonth = () => {\r\n setCurrentDate(new Date(year, month - 1, 1))\r\n }\r\n\r\n const handleNextMonth = () => {\r\n setCurrentDate(new Date(year, month + 1, 1))\r\n }\r\n\r\n const handleDateClick = (day: number) => {\r\n const clickedDate = new Date(year, month, day)\r\n if (onChange) onChange(clickedDate)\r\n }\r\n\r\n const daysArray = Array.from({ length: daysInMonth }, (_, i) => i + 1)\r\n const blankDays = Array.from({ length: firstDayIndex }, (_, i) => i)\r\n\r\n const weekdays = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\"p-4 bg-background border border-border rounded-xl shadow-2xs max-w-[280px] w-full\", className)}\r\n >\r\n {/* Header section */}\r\n <div className=\"flex items-center justify-between pb-3\">\r\n <button\r\n type=\"button\"\r\n onClick={handlePrevMonth}\r\n className=\"inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer transition-colors\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"2\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\r\n </svg>\r\n </button>\r\n <span className=\"text-sm font-semibold text-foreground select-none\">\r\n {monthNames[month]} {year}\r\n </span>\r\n <button\r\n type=\"button\"\r\n onClick={handleNextMonth}\r\n className=\"inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer transition-colors\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"2\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n {/* Weekdays layout */}\r\n <div className=\"grid grid-cols-7 gap-1 text-center pb-1\">\r\n {weekdays.map((day) => (\r\n <span key={day} className=\"text-xs font-medium text-muted-foreground select-none h-6 w-6 flex items-center justify-center mx-auto\">\r\n {day}\r\n </span>\r\n ))}\r\n </div>\r\n\r\n {/* Month grid matrix */}\r\n <div className=\"grid grid-cols-7 gap-1 text-center\">\r\n {blankDays.map((blank) => (\r\n <div key={`blank-${blank}`} className=\"h-7 w-7\" />\r\n ))}\r\n {daysArray.map((day) => {\r\n const isSelected =\r\n selectedDate &&\r\n selectedDate.getDate() === day &&\r\n selectedDate.getMonth() === month &&\r\n selectedDate.getFullYear() === year\r\n\r\n return (\r\n <button\r\n key={day}\r\n type=\"button\"\r\n onClick={() => handleDateClick(day)}\r\n className={cn(\r\n \"h-7 w-7 text-xs font-normal rounded-md flex items-center justify-center mx-auto cursor-pointer transition-all select-none\",\r\n isSelected\r\n ? \"bg-primary text-primary-foreground font-medium\"\r\n : \"text-foreground hover:bg-muted\"\r\n )}\r\n >\r\n {day}\r\n </button>\r\n )\r\n })}\r\n </div>\r\n </div>\r\n )\r\n }\r\n)\r\nCalendar.displayName = \"Calendar\"\r\n\r\nexport { Calendar }"
|
|
100
100
|
}
|
|
101
101
|
]
|
|
102
102
|
},
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"files": [
|
|
107
107
|
{
|
|
108
108
|
"name": "card.tsx",
|
|
109
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Card = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"rounded-xl border border-
|
|
109
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Card = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"rounded-xl border border-border bg-card text-card-foreground shadow-xs\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCard.displayName = \"Card\"\r\n\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\r\n {...props}\r\n />\r\n))\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n <h3\r\n ref={ref}\r\n className={cn(\"font-semibold leading-none tracking-tight text-base\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n <p\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\r\n))\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center p-6 pt-0\", className)}\r\n {...props}\r\n />\r\n))\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }"
|
|
110
110
|
}
|
|
111
111
|
]
|
|
112
112
|
},
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"files": [
|
|
117
117
|
{
|
|
118
118
|
"name": "carousel.tsx",
|
|
119
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ntype CarouselContextProps = {\r\n carouselRef: React.RefObject<HTMLDivElement | null>\r\n scrollPrev: () => void\r\n scrollNext: () => void\r\n canScrollPrev: boolean\r\n canScrollNext: boolean\r\n}\r\n\r\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\r\n\r\nfunction useCarousel() {\r\n const context = React.useContext(CarouselContext)\r\n if (!context) throw new Error(\"useCarousel must be used within a CarouselProvider\")\r\n return context\r\n}\r\n\r\nconst Carousel = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, children, ...props }, ref) => {\r\n const carouselRef = React.useRef<HTMLDivElement>(null)\r\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\r\n const [canScrollNext, setCanScrollNext] = React.useState(true)\r\n\r\n const checkScroll = React.useCallback(() => {\r\n if (!carouselRef.current) return\r\n const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current\r\n setCanScrollPrev(scrollLeft > 0)\r\n setCanScrollNext(scrollLeft < scrollWidth - clientWidth - 1)\r\n }, [])\r\n\r\n React.useEffect(() => {\r\n const api = carouselRef.current\r\n if (!api) return\r\n api.addEventListener(\"scroll\", checkScroll, { passive: true })\r\n window.addEventListener(\"resize\", checkScroll)\r\n checkScroll()\r\n\r\n return () => {\r\n api.removeEventListener(\"scroll\", checkScroll)\r\n window.removeEventListener(\"resize\", checkScroll)\r\n }\r\n }, [checkScroll])\r\n\r\n const scrollPrev = React.useCallback(() => {\r\n carouselRef.current?.scrollBy({ left: -carouselRef.current.clientWidth, behavior: \"smooth\" })\r\n }, [])\r\n\r\n const scrollNext = React.useCallback(() => {\r\n carouselRef.current?.scrollBy({ left: carouselRef.current.clientWidth, behavior: \"smooth\" })\r\n }, [])\r\n\r\n return (\r\n <CarouselContext.Provider value={{ carouselRef, scrollPrev, scrollNext, canScrollPrev, canScrollNext }}>\r\n <div ref={ref} className={cn(\"relative w-full\", className)} role=\"region\" aria-roledescription=\"carousel\" {...props}>\r\n {children}\r\n </div>\r\n </CarouselContext.Provider>\r\n )\r\n})\r\nCarousel.displayName = \"Carousel\"\r\n\r\nconst CarouselContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const { carouselRef } = useCarousel()\r\n return (\r\n <div className=\"overflow-hidden\">\r\n <div\r\n ref={carouselRef}\r\n className={cn(\"flex snap-x snap-mandatory overflow-x-auto scrollbar-none gap-4 -ml-4\", className)}\r\n {...props}\r\n />\r\n </div>\r\n )\r\n})\r\nCarouselContent.displayName = \"CarouselContent\"\r\n\r\nconst CarouselItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n role=\"group\"\r\n aria-roledescription=\"slide\"\r\n className={cn(\"min-w-0 shrink-0 grow-0 basis-full snap-start pl-4\", className)}\r\n {...props}\r\n />\r\n))\r\nCarouselItem.displayName = \"CarouselItem\"\r\n\r\nconst CarouselPrevious = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ButtonHTMLAttributes<HTMLButtonElement>\r\n>(({ className, ...props }, ref) => {\r\n const { scrollPrev, canScrollPrev } = useCarousel()\r\n return (\r\n <button\r\n ref={ref}\r\n disabled={!canScrollPrev}\r\n onClick={scrollPrev}\r\n className={cn(\r\n \"absolute h-8 w-8 rounded-full border border-
|
|
119
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ntype CarouselContextProps = {\r\n carouselRef: React.RefObject<HTMLDivElement | null>\r\n scrollPrev: () => void\r\n scrollNext: () => void\r\n canScrollPrev: boolean\r\n canScrollNext: boolean\r\n}\r\n\r\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\r\n\r\nfunction useCarousel() {\r\n const context = React.useContext(CarouselContext)\r\n if (!context) throw new Error(\"useCarousel must be used within a CarouselProvider\")\r\n return context\r\n}\r\n\r\nconst Carousel = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, children, ...props }, ref) => {\r\n const carouselRef = React.useRef<HTMLDivElement>(null)\r\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\r\n const [canScrollNext, setCanScrollNext] = React.useState(true)\r\n\r\n const checkScroll = React.useCallback(() => {\r\n if (!carouselRef.current) return\r\n const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current\r\n setCanScrollPrev(scrollLeft > 0)\r\n setCanScrollNext(scrollLeft < scrollWidth - clientWidth - 1)\r\n }, [])\r\n\r\n React.useEffect(() => {\r\n const api = carouselRef.current\r\n if (!api) return\r\n api.addEventListener(\"scroll\", checkScroll, { passive: true })\r\n window.addEventListener(\"resize\", checkScroll)\r\n checkScroll()\r\n\r\n return () => {\r\n api.removeEventListener(\"scroll\", checkScroll)\r\n window.removeEventListener(\"resize\", checkScroll)\r\n }\r\n }, [checkScroll])\r\n\r\n const scrollPrev = React.useCallback(() => {\r\n carouselRef.current?.scrollBy({ left: -carouselRef.current.clientWidth, behavior: \"smooth\" })\r\n }, [])\r\n\r\n const scrollNext = React.useCallback(() => {\r\n carouselRef.current?.scrollBy({ left: carouselRef.current.clientWidth, behavior: \"smooth\" })\r\n }, [])\r\n\r\n return (\r\n <CarouselContext.Provider value={{ carouselRef, scrollPrev, scrollNext, canScrollPrev, canScrollNext }}>\r\n <div ref={ref} className={cn(\"relative w-full\", className)} role=\"region\" aria-roledescription=\"carousel\" {...props}>\r\n {children}\r\n </div>\r\n </CarouselContext.Provider>\r\n )\r\n})\r\nCarousel.displayName = \"Carousel\"\r\n\r\nconst CarouselContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const { carouselRef } = useCarousel()\r\n return (\r\n <div className=\"overflow-hidden\">\r\n <div\r\n ref={carouselRef}\r\n className={cn(\"flex snap-x snap-mandatory overflow-x-auto scrollbar-none gap-4 -ml-4\", className)}\r\n {...props}\r\n />\r\n </div>\r\n )\r\n})\r\nCarouselContent.displayName = \"CarouselContent\"\r\n\r\nconst CarouselItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n role=\"group\"\r\n aria-roledescription=\"slide\"\r\n className={cn(\"min-w-0 shrink-0 grow-0 basis-full snap-start pl-4\", className)}\r\n {...props}\r\n />\r\n))\r\nCarouselItem.displayName = \"CarouselItem\"\r\n\r\nconst CarouselPrevious = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ButtonHTMLAttributes<HTMLButtonElement>\r\n>(({ className, ...props }, ref) => {\r\n const { scrollPrev, canScrollPrev } = useCarousel()\r\n return (\r\n <button\r\n ref={ref}\r\n disabled={!canScrollPrev}\r\n onClick={scrollPrev}\r\n className={cn(\r\n \"absolute h-8 w-8 rounded-full border border-border bg-background text-muted-foreground shadow-2xs inline-flex items-center justify-center left-4 top-1/2 -translate-y-1/2 disabled:opacity-30 cursor-pointer focus-visible:outline-hidden\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"2\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\r\n </svg>\r\n </button>\r\n )\r\n})\r\nCarouselPrevious.displayName = \"CarouselPrevious\"\r\n\r\nconst CarouselNext = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ButtonHTMLAttributes<HTMLButtonElement>\r\n>(({ className, ...props }, ref) => {\r\n const { scrollNext, canScrollNext } = useCarousel()\r\n return (\r\n <button\r\n ref={ref}\r\n disabled={!canScrollNext}\r\n onClick={scrollNext}\r\n className={cn(\r\n \"absolute h-8 w-8 rounded-full border border-border bg-background text-muted-foreground shadow-2xs inline-flex items-center justify-center right-4 top-1/2 -translate-y-1/2 disabled:opacity-30 cursor-pointer focus-visible:outline-hidden\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"2\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\r\n </svg>\r\n </button>\r\n )\r\n})\r\nCarouselNext.displayName = \"CarouselNext\"\r\n\r\nexport { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }"
|
|
120
120
|
}
|
|
121
121
|
]
|
|
122
122
|
},
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
"files": [
|
|
129
129
|
{
|
|
130
130
|
"name": "checkbox.tsx",
|
|
131
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Checkbox = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseCheckbox.Root\r\n ref={ref}\r\n className={cn(\r\n \"group peer h-4 w-4 shrink-0 rounded-sm border border-
|
|
131
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Checkbox = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseCheckbox.Root\r\n ref={ref}\r\n className={cn(\r\n \"group peer h-4 w-4 shrink-0 rounded-sm border border-input bg-background transition-all cursor-pointer\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n \"data-[checked]:bg-primary data-[checked]:border-primary\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <BaseCheckbox.Indicator className=\"flex items-center justify-center text-primary-foreground transition-transform duration-100 data-[starting-style]:scale-50\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n strokeWidth=\"3\"\r\n stroke=\"currentColor\"\r\n className=\"h-3 w-3\"\r\n >\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\r\n </svg>\r\n </BaseCheckbox.Indicator>\r\n </BaseCheckbox.Root>\r\n))\r\nCheckbox.displayName = \"Checkbox\"\r\n\r\nexport { Checkbox }"
|
|
132
132
|
}
|
|
133
133
|
]
|
|
134
134
|
},
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
"files": [
|
|
153
153
|
{
|
|
154
154
|
"name": "context-menu.tsx",
|
|
155
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ContextMenu = ({\r\n children,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<typeof BaseMenu.Root>) => {\r\n
|
|
155
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ContextMenu = ({\r\n children,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<typeof BaseMenu.Root>) => {\r\n return (\r\n <BaseMenu.Root {...props}>\r\n {children}\r\n </BaseMenu.Root>\r\n )\r\n}\r\n\r\nconst ContextMenuTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseMenu.Trigger\r\n ref={ref}\r\n className={cn(\"cursor-context-menu\", className)}\r\n {...props}\r\n >\r\n {children}\r\n </BaseMenu.Trigger>\r\n))\r\nContextMenuTrigger.displayName = \"ContextMenuTrigger\"\r\n\r\nconst ContextMenuPortal = BaseMenu.Portal\r\n\r\nconst ContextMenuContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>\r\n>(({ className, ...props }, ref) => (\r\n <BaseMenu.Positioner side=\"bottom\" align=\"start\">\r\n <BaseMenu.Popup\r\n ref={ref}\r\n className={cn(\r\n \"z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-md outline-hidden transition-all duration-100 ease-out\",\r\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\r\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </BaseMenu.Positioner>\r\n))\r\nContextMenuContent.displayName = \"ContextMenuContent\"\r\n\r\nconst ContextMenuItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseMenu.Item>\r\n>(({ className, ...props }, ref) => (\r\n <BaseMenu.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors cursor-pointer\",\r\n \"data-[highlighted]:bg-muted data-[highlighted]:text-foreground\",\r\n \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nContextMenuItem.displayName = \"ContextMenuItem\"\r\n\r\nexport {\r\n ContextMenu,\r\n ContextMenuTrigger,\r\n ContextMenuPortal,\r\n ContextMenuContent,\r\n ContextMenuItem,\r\n}"
|
|
156
156
|
}
|
|
157
157
|
]
|
|
158
158
|
},
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
"files": [
|
|
165
165
|
{
|
|
166
166
|
"name": "dialog.tsx",
|
|
167
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Dialog = BaseDialog.Root\r\n\r\nconst DialogTrigger = BaseDialog.Trigger\r\n\r\nconst DialogPortal = BaseDialog.Portal\r\n\r\nconst DialogBackdrop = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Backdrop\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 min-h-dvh bg-black/40 backdrop-blur-xs transition-opacity duration-200\",\r\n \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDialogBackdrop.displayName = \"DialogBackdrop\"\r\n\r\nconst DialogPopup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Popup\r\n ref={ref}\r\n className={cn(\r\n \"fixed top-1/2 left-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-
|
|
167
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Dialog = BaseDialog.Root\r\n\r\nconst DialogTrigger = BaseDialog.Trigger\r\n\r\nconst DialogPortal = BaseDialog.Portal\r\n\r\nconst DialogBackdrop = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Backdrop\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 min-h-dvh bg-black/40 backdrop-blur-xs transition-opacity duration-200\",\r\n \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDialogBackdrop.displayName = \"DialogBackdrop\"\r\n\r\nconst DialogPopup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Popup\r\n ref={ref}\r\n className={cn(\r\n \"fixed top-1/2 left-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-background p-6 shadow-xl text-foreground transition-all duration-200 ease-out\",\r\n // Modern Base UI entry/exit animation attributes\r\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\r\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\r\n // Handle automatic visual scaling when nested inside another open modal\r\n \"scale-[calc(1-0.04*var(--nested-dialogs))]\",\r\n \"translate-y-[calc(-50%+1.25rem*var(--nested-dialogs))]\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDialogPopup.displayName = \"DialogPopup\"\r\n\r\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex flex-col gap-1 text-center sm:text-left mb-4\", className)} {...props} />\r\n)\r\nDialogHeader.displayName = \"DialogHeader\"\r\n\r\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6\", className)} {...props} />\r\n)\r\nDialogFooter.displayName = \"DialogFooter\"\r\n\r\nconst DialogTitle = React.forwardRef<\r\n HTMLHeadingElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Title>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Title\r\n ref={ref}\r\n className={cn(\"text-lg font-semibold tracking-tight leading-none\", className)}\r\n {...props}\r\n />\r\n))\r\nDialogTitle.displayName = \"DialogTitle\"\r\n\r\nconst DialogDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Description>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Description\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground\", className)}\r\n {...props}\r\n />\r\n))\r\nDialogDescription.displayName = \"DialogDescription\"\r\n\r\nconst DialogClose = BaseDialog.Close\r\n\r\nexport {\r\n Dialog,\r\n DialogTrigger,\r\n DialogPortal,\r\n DialogBackdrop,\r\n DialogPopup,\r\n DialogHeader,\r\n DialogFooter,\r\n DialogTitle,\r\n DialogDescription,\r\n DialogClose,\r\n}"
|
|
168
168
|
}
|
|
169
169
|
]
|
|
170
170
|
},
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
"files": [
|
|
177
177
|
{
|
|
178
178
|
"name": "drawer.tsx",
|
|
179
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Drawer = BaseDialog.Root\r\n\r\nconst DrawerTrigger = BaseDialog.Trigger\r\n\r\nconst DrawerPortal = BaseDialog.Portal\r\n\r\nconst DrawerBackdrop = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Backdrop\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 z-50 bg-black/40 backdrop-blur-xs transition-opacity duration-300\",\r\n \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDrawerBackdrop.displayName = \"DrawerBackdrop\"\r\n\r\nconst DrawerContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & { side?: \"left\" | \"right\" }\r\n>(({ className, side = \"right\", ...props }, ref) => (\r\n <BaseDialog.Popup\r\n ref={ref}\r\n className={cn(\r\n \"fixed z-50 bg-
|
|
179
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Drawer = BaseDialog.Root\r\n\r\nconst DrawerTrigger = BaseDialog.Trigger\r\n\r\nconst DrawerPortal = BaseDialog.Portal\r\n\r\nconst DrawerBackdrop = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>\r\n>(({ className, ...props }, ref) => (\r\n <BaseDialog.Backdrop\r\n ref={ref}\r\n className={cn(\r\n \"fixed inset-0 z-50 bg-black/40 backdrop-blur-xs transition-opacity duration-300\",\r\n \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDrawerBackdrop.displayName = \"DrawerBackdrop\"\r\n\r\nconst DrawerContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseDialog.Popup> & { side?: \"left\" | \"right\" }\r\n>(({ className, side = \"right\", ...props }, ref) => (\r\n <BaseDialog.Popup\r\n ref={ref}\r\n className={cn(\r\n \"fixed z-50 bg-background p-6 shadow-xl text-foreground transition-transform duration-300 ease-in-out h-full w-full max-w-sm top-0 bottom-0\",\r\n side === \"right\" && \"right-0 data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full border-l border-border\",\r\n side === \"left\" && \"left-0 data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full border-r border-border\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDrawerContent.displayName = \"DrawerContent\"\r\n\r\nconst DrawerClose = BaseDialog.Close\r\n\r\nexport { Drawer, DrawerTrigger, DrawerPortal, DrawerBackdrop, DrawerContent, DrawerClose }"
|
|
180
180
|
}
|
|
181
181
|
]
|
|
182
182
|
},
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
"files": [
|
|
189
189
|
{
|
|
190
190
|
"name": "dropdown-menu.tsx",
|
|
191
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst DropdownMenu = BaseMenu.Root\r\n\r\nconst DropdownMenuTrigger = BaseMenu.Trigger\r\n\r\nconst DropdownMenuPortal = BaseMenu.Portal\r\n\r\ntype DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof BaseMenu.Popup> & {\r\n sideOffset?: number\r\n}\r\n\r\nconst DropdownMenuContent = React.forwardRef<\r\n HTMLDivElement,\r\n DropdownMenuContentProps\r\n>(({ className, sideOffset = 4, ...props }, ref) => (\r\n <BaseMenu.Positioner sideOffset={sideOffset}>\r\n <BaseMenu.Popup\r\n ref={ref}\r\n className={cn(\r\n \"z-50 min-w-
|
|
191
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst DropdownMenu = BaseMenu.Root\r\n\r\nconst DropdownMenuTrigger = BaseMenu.Trigger\r\n\r\nconst DropdownMenuPortal = BaseMenu.Portal\r\n\r\ntype DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof BaseMenu.Popup> & {\r\n sideOffset?: number\r\n}\r\n\r\nconst DropdownMenuContent = React.forwardRef<\r\n HTMLDivElement,\r\n DropdownMenuContentProps\r\n>(({ className, sideOffset = 4, ...props }, ref) => (\r\n <BaseMenu.Positioner sideOffset={sideOffset}>\r\n <BaseMenu.Popup\r\n ref={ref}\r\n className={cn(\r\n \"z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-md outline-hidden transition-all duration-100 ease-out\",\r\n \"data-starting-style:scale-95 data-starting-style:opacity-0\",\r\n \"data-ending-style:scale-95 data-ending-style:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </BaseMenu.Positioner>\r\n))\r\nDropdownMenuContent.displayName = \"DropdownMenuContent\"\r\n\r\nconst DropdownMenuItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseMenu.Item>\r\n>(({ className, ...props }, ref) => (\r\n <BaseMenu.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden transition-colors cursor-pointer\",\r\n \"data-highlighted:bg-muted data-highlighted:text-foreground\",\r\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nDropdownMenuItem.displayName = \"DropdownMenuItem\"\r\n\r\nexport {\r\n DropdownMenu,\r\n DropdownMenuTrigger,\r\n DropdownMenuPortal,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n}"
|
|
192
192
|
}
|
|
193
193
|
]
|
|
194
194
|
},
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
"files": [
|
|
201
201
|
{
|
|
202
202
|
"name": "hover-card.tsx",
|
|
203
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Popover as BasePopover } from \"@base-ui/react/popover\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst HoverCard = ({\r\n children,\r\n openDelay = 200,\r\n closeDelay = 200,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<typeof BasePopover.Root> & {\r\n openDelay?: number\r\n closeDelay?: number\r\n}) => {\r\n const [open, setOpen] = React.useState(false)\r\n const openTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null)\r\n const closeTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null)\r\n\r\n const handleOpen = React.useCallback(() => {\r\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\r\n openTimeout.current = setTimeout(() => setOpen(true), openDelay)\r\n }, [openDelay])\r\n\r\n const handleClose = React.useCallback(() => {\r\n if (openTimeout.current) clearTimeout(openTimeout.current)\r\n closeTimeout.current = setTimeout(() => setOpen(false), closeDelay)\r\n }, [closeDelay])\r\n\r\n React.useEffect(() => {\r\n return () => {\r\n if (openTimeout.current) clearTimeout(openTimeout.current)\r\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\r\n }\r\n }, [])\r\n\r\n return (\r\n <BasePopover.Root open={open} onOpenChange={setOpen} {...props}>\r\n {React.isValidElement(children)\r\n ? React.cloneElement(children, {\r\n onMouseEnter: handleOpen,\r\n onMouseLeave: handleClose,\r\n } as React.HTMLAttributes<HTMLElement>)\r\n : children}\r\n </BasePopover.Root>\r\n )\r\n}\r\n\r\nconst HoverCardTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BasePopover.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n <BasePopover.Trigger\r\n ref={ref}\r\n className={cn(\"inline-block cursor-pointer\", className)}\r\n {...props}\r\n />\r\n))\r\nHoverCardTrigger.displayName = \"HoverCardTrigger\"\r\n\r\nconst HoverCardPortal = BasePopover.Portal\r\n\r\ninterface HoverCardContentProps extends React.ComponentPropsWithoutRef<typeof BasePopover.Popup> {\r\n sideOffset?: number\r\n align?: \"start\" | \"center\" | \"end\"\r\n}\r\n\r\nconst HoverCardContent = React.forwardRef<\r\n HTMLDivElement,\r\n HoverCardContentProps\r\n>(({ className, align = \"center\", sideOffset = 8, ...props }, ref) => (\r\n <BasePopover.Positioner sideOffset={sideOffset} align={align}>\r\n <BasePopover.Popup\r\n ref={ref}\r\n className={cn(\r\n // Stylized to mirror our clean standalone Card architecture\r\n \"z-50 w-64 rounded-xl border border-
|
|
203
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Popover as BasePopover } from \"@base-ui/react/popover\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst HoverCard = ({\r\n children,\r\n openDelay = 200,\r\n closeDelay = 200,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<typeof BasePopover.Root> & {\r\n openDelay?: number\r\n closeDelay?: number\r\n}) => {\r\n const [open, setOpen] = React.useState(false)\r\n const openTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null)\r\n const closeTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null)\r\n\r\n const handleOpen = React.useCallback(() => {\r\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\r\n openTimeout.current = setTimeout(() => setOpen(true), openDelay)\r\n }, [openDelay])\r\n\r\n const handleClose = React.useCallback(() => {\r\n if (openTimeout.current) clearTimeout(openTimeout.current)\r\n closeTimeout.current = setTimeout(() => setOpen(false), closeDelay)\r\n }, [closeDelay])\r\n\r\n React.useEffect(() => {\r\n return () => {\r\n if (openTimeout.current) clearTimeout(openTimeout.current)\r\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\r\n }\r\n }, [])\r\n\r\n return (\r\n <BasePopover.Root open={open} onOpenChange={setOpen} {...props}>\r\n {React.isValidElement(children)\r\n ? React.cloneElement(children, {\r\n onMouseEnter: handleOpen,\r\n onMouseLeave: handleClose,\r\n } as React.HTMLAttributes<HTMLElement>)\r\n : children}\r\n </BasePopover.Root>\r\n )\r\n}\r\n\r\nconst HoverCardTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BasePopover.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n <BasePopover.Trigger\r\n ref={ref}\r\n className={cn(\"inline-block cursor-pointer\", className)}\r\n {...props}\r\n />\r\n))\r\nHoverCardTrigger.displayName = \"HoverCardTrigger\"\r\n\r\nconst HoverCardPortal = BasePopover.Portal\r\n\r\ninterface HoverCardContentProps extends React.ComponentPropsWithoutRef<typeof BasePopover.Popup> {\r\n sideOffset?: number\r\n align?: \"start\" | \"center\" | \"end\"\r\n}\r\n\r\nconst HoverCardContent = React.forwardRef<\r\n HTMLDivElement,\r\n HoverCardContentProps\r\n>(({ className, align = \"center\", sideOffset = 8, ...props }, ref) => (\r\n <BasePopover.Positioner sideOffset={sideOffset} align={align}>\r\n <BasePopover.Popup\r\n ref={ref}\r\n className={cn(\r\n // Stylized to mirror our clean standalone Card architecture\r\n \"z-50 w-64 rounded-xl border border-border bg-background p-4 text-foreground shadow-md outline-hidden transition-all duration-150 ease-out pointer-events-auto\",\r\n \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\r\n \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </BasePopover.Positioner>\r\n))\r\nHoverCardContent.displayName = \"HoverCardContent\"\r\n\r\nexport { HoverCard, HoverCardTrigger, HoverCardPortal, HoverCardContent }"
|
|
204
204
|
}
|
|
205
205
|
]
|
|
206
206
|
},
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
"files": [
|
|
211
211
|
{
|
|
212
212
|
"name": "input-group.tsx",
|
|
213
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst InputGroup = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"relative flex items-center w-full shadow-2xs rounded-md border border-
|
|
213
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst InputGroup = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"relative flex items-center w-full shadow-2xs rounded-md border border-border bg-background focus-within:border-ring focus-within:ring-1 focus-within:ring-ring transition-all\",\r\n \"[&>input]:border-0 [&>input]:focus-visible:ring-0 [&>input]:shadow-none\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nInputGroup.displayName = \"InputGroup\"\r\n\r\nconst InputGroupText = React.forwardRef<\r\n HTMLSpanElement,\r\n React.HTMLAttributes<HTMLSpanElement>\r\n>(({ className, ...props }, ref) => (\r\n <span\r\n ref={ref}\r\n className={cn(\r\n \"flex items-center px-3 text-sm text-muted-foreground bg-muted border-r border-border h-10 select-none font-medium\",\r\n \"first:rounded-l-md last:rounded-r-md last:border-r-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nInputGroupText.displayName = \"InputGroupText\"\r\n\r\nexport { InputGroup, InputGroupText }"
|
|
214
214
|
}
|
|
215
215
|
]
|
|
216
216
|
},
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
"files": [
|
|
221
221
|
{
|
|
222
222
|
"name": "input-otp.tsx",
|
|
223
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface InputOTPProps extends React.InputHTMLAttributes<HTMLInputElement> {\r\n maxLength: number\r\n onCodeComplete?: (code: string) => void\r\n}\r\n\r\nconst InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(\r\n ({ className, maxLength = 6, onCodeComplete, value, onChange, ...props }, ref) => {\r\n const [code, setCode] = React.useState<string[]>((value as string || \"\").split(\"\").slice(0, maxLength))\r\n const inputRefs = React.useRef<HTMLInputElement[]>([])\r\n\r\n React.useEffect(() => {\r\n if (value !== undefined) {\r\n setCode((value as string).split(\"\").slice(0, maxLength))\r\n }\r\n }, [value, maxLength])\r\n\r\n const handleTextChange = (text: string, index: number) => {\r\n const cleanDigit = text.replace(/[^0-9]/g, \"\").slice(-1)\r\n const newCode = [...code]\r\n newCode[index] = cleanDigit\r\n \r\n setCode(newCode)\r\n if (onChange) {\r\n const joined = newCode.join(\"\")\r\n onChange({ target: { value: joined } } as React.ChangeEvent<HTMLInputElement>)\r\n if (joined.length === maxLength && onCodeComplete) onCodeComplete(joined)\r\n }\r\n\r\n if (cleanDigit && index < maxLength - 1) {\r\n inputRefs.current[index + 1]?.focus()\r\n }\r\n }\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\r\n if (e.key === \"Backspace\" && !code[index] && index > 0) {\r\n inputRefs.current[index - 1]?.focus()\r\n }\r\n }\r\n\r\n return (\r\n <div className={cn(\"flex items-center gap-2\", className)}>\r\n {Array.from({ length: maxLength }).map((_, index) => (\r\n <input\r\n key={index}\r\n ref={(el) => { if (el) inputRefs.current[index] = el }}\r\n type=\"text\"\r\n inputMode=\"numeric\"\r\n pattern=\"[0-9]*\"\r\n maxLength={1}\r\n value={code[index] || \"\"}\r\n onChange={(e) => handleTextChange(e.target.value, index)}\r\n onKeyDown={(e) => handleKeyDown(e, index)}\r\n className=\"w-10 h-12 text-center text-lg font-semibold border border-
|
|
223
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface InputOTPProps extends React.InputHTMLAttributes<HTMLInputElement> {\r\n maxLength: number\r\n onCodeComplete?: (code: string) => void\r\n}\r\n\r\nconst InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(\r\n ({ className, maxLength = 6, onCodeComplete, value, onChange, ...props }, ref) => {\r\n const [code, setCode] = React.useState<string[]>((value as string || \"\").split(\"\").slice(0, maxLength))\r\n const inputRefs = React.useRef<HTMLInputElement[]>([])\r\n\r\n React.useEffect(() => {\r\n if (value !== undefined) {\r\n setCode((value as string).split(\"\").slice(0, maxLength))\r\n }\r\n }, [value, maxLength])\r\n\r\n const handleTextChange = (text: string, index: number) => {\r\n const cleanDigit = text.replace(/[^0-9]/g, \"\").slice(-1)\r\n const newCode = [...code]\r\n newCode[index] = cleanDigit\r\n \r\n setCode(newCode)\r\n if (onChange) {\r\n const joined = newCode.join(\"\")\r\n onChange({ target: { value: joined } } as React.ChangeEvent<HTMLInputElement>)\r\n if (joined.length === maxLength && onCodeComplete) onCodeComplete(joined)\r\n }\r\n\r\n if (cleanDigit && index < maxLength - 1) {\r\n inputRefs.current[index + 1]?.focus()\r\n }\r\n }\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\r\n if (e.key === \"Backspace\" && !code[index] && index > 0) {\r\n inputRefs.current[index - 1]?.focus()\r\n }\r\n }\r\n\r\n return (\r\n <div className={cn(\"flex items-center gap-2\", className)}>\r\n {Array.from({ length: maxLength }).map((_, index) => (\r\n <input\r\n key={index}\r\n ref={(el) => { if (el) inputRefs.current[index] = el }}\r\n type=\"text\"\r\n inputMode=\"numeric\"\r\n pattern=\"[0-9]*\"\r\n maxLength={1}\r\n value={code[index] || \"\"}\r\n onChange={(e) => handleTextChange(e.target.value, index)}\r\n onKeyDown={(e) => handleKeyDown(e, index)}\r\n className=\"w-10 h-12 text-center text-lg font-semibold border border-border bg-background rounded-md shadow-2xs focus:outline-hidden focus:border-ring focus:ring-1 focus:ring-ring transition-all\"\r\n {...props}\r\n />\r\n ))}\r\n </div>\r\n )\r\n }\r\n)\r\nInputOTP.displayName = \"InputOTP\"\r\n\r\nexport { InputOTP }"
|
|
224
224
|
}
|
|
225
225
|
]
|
|
226
226
|
},
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
"files": [
|
|
231
231
|
{
|
|
232
232
|
"name": "input.tsx",
|
|
233
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n ({ className, type = \"text\", ...props }, ref) => {\r\n return (\r\n <input\r\n type={type}\r\n className={cn(\r\n \"flex h-10 w-full rounded-md border border-
|
|
233
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n ({ className, type = \"text\", ...props }, ref) => {\r\n return (\r\n <input\r\n type={type}\r\n className={cn(\r\n \"flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground shadow-2xs transition-all\",\r\n \"focus-visible:outline-hidden focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50\",\r\n className\r\n )}\r\n ref={ref}\r\n {...props}\r\n />\r\n )\r\n }\r\n)\r\nInput.displayName = \"Input\"\r\n\r\nexport { Input }"
|
|
234
234
|
}
|
|
235
235
|
]
|
|
236
236
|
},
|
|
@@ -242,7 +242,7 @@
|
|
|
242
242
|
"files": [
|
|
243
243
|
{
|
|
244
244
|
"name": "kbd.tsx",
|
|
245
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\r\n ({ className, ...props }, ref) => (\r\n <kbd\r\n ref={ref}\r\n className={cn(\r\n \"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-
|
|
245
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\r\n ({ className, ...props }, ref) => (\r\n <kbd\r\n ref={ref}\r\n className={cn(\r\n \"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground shadow-xs\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n)\r\nKbd.displayName = \"Kbd\"\r\n\r\nexport { Kbd }"
|
|
246
246
|
}
|
|
247
247
|
]
|
|
248
248
|
},
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
"files": [
|
|
253
253
|
{
|
|
254
254
|
"name": "label.tsx",
|
|
255
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Label = React.forwardRef<\r\n HTMLLabelElement,\r\n React.LabelHTMLAttributes<HTMLLabelElement>\r\n>(({ className, ...props }, ref) => (\r\n <label\r\n ref={ref}\r\n className={cn(\r\n \"text-sm font-medium leading-none text-
|
|
255
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Label = React.forwardRef<\r\n HTMLLabelElement,\r\n React.LabelHTMLAttributes<HTMLLabelElement>\r\n>(({ className, ...props }, ref) => (\r\n <label\r\n ref={ref}\r\n className={cn(\r\n \"text-sm font-medium leading-none text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nLabel.displayName = \"Label\"\r\n\r\nexport { Label }"
|
|
256
256
|
}
|
|
257
257
|
]
|
|
258
258
|
},
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
"files": [
|
|
265
265
|
{
|
|
266
266
|
"name": "number-field.tsx",
|
|
267
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface NumberFieldProps extends React.ComponentPropsWithoutRef<typeof BaseNumberField.Root> {\r\n label?: string\r\n}\r\n\r\nconst NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(\r\n ({ className, label, ...props }, ref) => {\r\n return (\r\n <BaseNumberField.Root ref={ref} className={cn(\"flex flex-col gap-1.5 w-full max-w-
|
|
267
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface NumberFieldProps extends React.ComponentPropsWithoutRef<typeof BaseNumberField.Root> {\r\n label?: string\r\n}\r\n\r\nconst NumberField = React.forwardRef<HTMLDivElement, NumberFieldProps>(\r\n ({ className, label, ...props }, ref) => {\r\n return (\r\n <BaseNumberField.Root ref={ref} className={cn(\"flex flex-col gap-1.5 w-full max-w-50\", className)} {...props}>\r\n {label && <label className=\"text-sm font-medium text-foreground\">{label}</label>}\r\n \r\n <div className=\"relative flex items-center border border-border rounded-md bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring\">\r\n {/* Decrement Button */}\r\n <BaseNumberField.Decrement className=\"flex items-center justify-center h-9 w-9 text-muted-foreground transition-colors hover:bg-muted data-disabled:opacity-30 border-r border-border\">\r\n −\r\n </BaseNumberField.Decrement>\r\n\r\n {/* Core Input Element */}\r\n <BaseNumberField.Input className=\"w-full text-center bg-transparent text-sm font-medium text-foreground outline-none placeholder:text-muted-foreground py-1.5\" />\r\n\r\n {/* Increment Button */}\r\n <BaseNumberField.Increment className=\"flex items-center justify-center h-9 w-9 text-muted-foreground transition-colors hover:bg-muted data-disabled:opacity-30 border-l border-border\">\r\n +\r\n </BaseNumberField.Increment>\r\n </div>\r\n </BaseNumberField.Root>\r\n )\r\n }\r\n)\r\n\r\nNumberField.displayName = \"NumberField\"\r\n\r\nexport { NumberField }"
|
|
268
268
|
}
|
|
269
269
|
]
|
|
270
270
|
},
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
"files": [
|
|
275
275
|
{
|
|
276
276
|
"name": "pagination.tsx",
|
|
277
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\r\n <nav role=\"navigation\" aria-label=\"pagination\" className={cn(\"mx-auto flex w-full justify-center\", className)} {...props} />\r\n)\r\nPagination.displayName = \"Pagination\"\r\n\r\nconst PaginationContent = React.forwardRef<\r\n HTMLUListElement,\r\n React.ComponentPropsWithoutRef<\"ul\">\r\n>(({ className, ...props }, ref) => (\r\n <ul ref={ref} className={cn(\"flex flex-row items-center gap-1\", className)} {...props} />\r\n))\r\nPaginationContent.displayName = \"PaginationContent\"\r\n\r\nconst PaginationItem = React.forwardRef<\r\n HTMLLIElement,\r\n React.ComponentPropsWithoutRef<\"li\">\r\n>(({ className, ...props }, ref) => (\r\n <li ref={ref} className={cn(\"\", className)} {...props} />\r\n))\r\nPaginationItem.displayName = \"PaginationItem\"\r\n\r\nconst PaginationLink = ({ className, isActive, ...props }: React.ComponentProps<\"a\"> & { isActive?: boolean }) => (\r\n <a\r\n aria-current={isActive ? \"page\" : undefined}\r\n className={cn(\r\n \"flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors cursor-pointer select-none border border-transparent\",\r\n isActive ? \"bg-
|
|
277
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\r\n <nav role=\"navigation\" aria-label=\"pagination\" className={cn(\"mx-auto flex w-full justify-center\", className)} {...props} />\r\n)\r\nPagination.displayName = \"Pagination\"\r\n\r\nconst PaginationContent = React.forwardRef<\r\n HTMLUListElement,\r\n React.ComponentPropsWithoutRef<\"ul\">\r\n>(({ className, ...props }, ref) => (\r\n <ul ref={ref} className={cn(\"flex flex-row items-center gap-1\", className)} {...props} />\r\n))\r\nPaginationContent.displayName = \"PaginationContent\"\r\n\r\nconst PaginationItem = React.forwardRef<\r\n HTMLLIElement,\r\n React.ComponentPropsWithoutRef<\"li\">\r\n>(({ className, ...props }, ref) => (\r\n <li ref={ref} className={cn(\"\", className)} {...props} />\r\n))\r\nPaginationItem.displayName = \"PaginationItem\"\r\n\r\nconst PaginationLink = ({ className, isActive, ...props }: React.ComponentProps<\"a\"> & { isActive?: boolean }) => (\r\n <a\r\n aria-current={isActive ? \"page\" : undefined}\r\n className={cn(\r\n \"flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors cursor-pointer select-none border border-transparent\",\r\n isActive ? \"bg-primary text-primary-foreground border-primary\" : \"hover:bg-muted text-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n)\r\nPaginationLink.displayName = \"PaginationLink\"\r\n\r\nconst PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (\r\n <PaginationLink aria-label=\"Go to previous page\" className={cn(\"gap-1 pl-2.5 pr-3.5 w-auto\", className)} {...props}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"15 18 9 12 15 6\" /></svg>\r\n <span>Previous</span>\r\n </PaginationLink>\r\n)\r\nPaginationPrevious.displayName = \"PaginationPrevious\"\r\n\r\nconst PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (\r\n <PaginationLink aria-label=\"Go to next page\" className={cn(\"gap-1 pl-3.5 pr-2.5 w-auto\", className)} {...props}>\r\n <span>Next</span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"9 18 15 12 9 6\" /></svg>\r\n </PaginationLink>\r\n)\r\nPaginationNext.displayName = \"PaginationNext\"\r\n\r\nconst PaginationEllipsis = ({ className, ...props }: React.ComponentProps<\"span\">) => (\r\n <span aria-hidden=\"true\" className={cn(\"flex h-9 w-9 items-center justify-center text-muted-foreground\", className)} {...props}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"1\" /><circle cx=\"19\" cy=\"12\" r=\"1\" /><circle cx=\"5\" cy=\"12\" r=\"1\" /></svg>\r\n </span>\r\n)\r\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\r\n\r\nexport { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis }"
|
|
278
278
|
}
|
|
279
279
|
]
|
|
280
280
|
},
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
"files": [
|
|
287
287
|
{
|
|
288
288
|
"name": "popover.tsx",
|
|
289
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Popover as BasePopover } from \"@base-ui/react/popover\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Popover = BasePopover.Root\r\n\r\nconst PopoverTrigger = BasePopover.Trigger\r\n\r\nconst PopoverPortal = BasePopover.Portal\r\n\r\nconst PopoverContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BasePopover.Popup> & { sideOffset?: number; align?: \"start\" | \"center\" | \"end\" }\r\n>(({ className, align = \"center\", sideOffset = 8, ...props }, ref) => (\r\n <BasePopover.Positioner sideOffset={sideOffset} align={align}>\r\n <BasePopover.Popup\r\n ref={ref}\r\n className={cn(\r\n \"z-50 w-72 rounded-xl border border-
|
|
289
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Popover as BasePopover } from \"@base-ui/react/popover\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Popover = BasePopover.Root\r\n\r\nconst PopoverTrigger = BasePopover.Trigger\r\n\r\nconst PopoverPortal = BasePopover.Portal\r\n\r\nconst PopoverContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BasePopover.Popup> & { sideOffset?: number; align?: \"start\" | \"center\" | \"end\" }\r\n>(({ className, align = \"center\", sideOffset = 8, ...props }, ref) => (\r\n <BasePopover.Positioner sideOffset={sideOffset} align={align}>\r\n <BasePopover.Popup\r\n ref={ref}\r\n className={cn(\r\n \"z-50 w-72 rounded-xl border border-border bg-background p-4 text-foreground shadow-md outline-hidden transition-all duration-150 ease-out\",\r\n \"data-starting-style:scale-95 data-starting-style:opacity-0\",\r\n \"data-ending-style:scale-95 data-ending-style:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </BasePopover.Positioner>\r\n))\r\nPopoverContent.displayName = \"PopoverContent\"\r\n\r\nexport { Popover, PopoverTrigger, PopoverPortal, PopoverContent }"
|
|
290
290
|
}
|
|
291
291
|
]
|
|
292
292
|
},
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
"files": [
|
|
299
299
|
{
|
|
300
300
|
"name": "progress.tsx",
|
|
301
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Progress as BaseProgress } from \"@base-ui/react/progress\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Progress = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseProgress.Root>\r\n>(({ className, value = 0, ...props }, ref) => (\r\n <BaseProgress.Root\r\n ref={ref}\r\n value={value}\r\n className={cn(\r\n \"relative h-2 w-full overflow-hidden rounded-full bg-
|
|
301
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Progress as BaseProgress } from \"@base-ui/react/progress\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Progress = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseProgress.Root>\r\n>(({ className, value = 0, ...props }, ref) => (\r\n <BaseProgress.Root\r\n ref={ref}\r\n value={value}\r\n className={cn(\r\n \"relative h-2 w-full overflow-hidden rounded-full bg-muted\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <BaseProgress.Track className=\"h-full w-full bg-muted\">\r\n <BaseProgress.Indicator\r\n className=\"h-full bg-primary transition-all duration-300 ease-in-out\"\r\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\r\n />\r\n </BaseProgress.Track>\r\n </BaseProgress.Root>\r\n))\r\nProgress.displayName = \"Progress\"\r\n\r\nexport { Progress }"
|
|
302
302
|
}
|
|
303
303
|
]
|
|
304
304
|
},
|
|
@@ -310,7 +310,7 @@
|
|
|
310
310
|
"files": [
|
|
311
311
|
{
|
|
312
312
|
"name": "radio-group.tsx",
|
|
313
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst RadioGroup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseRadioGroup.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseRadioGroup.Root ref={ref} className={cn(\"grid gap-2.5\", className)} {...props} />\r\n))\r\nRadioGroup.displayName = \"RadioGroup\"\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseRadioGroup.Item>\r\n>(({ className, ...props }, ref) => (\r\n <BaseRadioGroup.Item\r\n ref={ref}\r\n className={cn(\r\n \"group aspect-square h-4 w-4 shrink-0 rounded-full border border-
|
|
313
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst RadioGroup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseRadioGroup.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseRadioGroup.Root ref={ref} className={cn(\"grid gap-2.5\", className)} {...props} />\r\n))\r\nRadioGroup.displayName = \"RadioGroup\"\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseRadioGroup.Item>\r\n>(({ className, ...props }, ref) => (\r\n <BaseRadioGroup.Item\r\n ref={ref}\r\n className={cn(\r\n \"group aspect-square h-4 w-4 shrink-0 rounded-full border border-input bg-background transition-all cursor-pointer flex items-center justify-center\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n \"data-checked:border-primary data-checked:bg-primary\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <BaseRadioGroup.Indicator className=\"h-1.5 w-1.5 rounded-full bg-background transition-transform duration-100 data-starting-style:scale-50\" />\r\n </BaseRadioGroup.Item>\r\n))\r\nRadioGroupItem.displayName = \"RadioGroupItem\"\r\n\r\nexport { RadioGroup, RadioGroupItem }"
|
|
314
314
|
}
|
|
315
315
|
]
|
|
316
316
|
},
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
"files": [
|
|
323
323
|
{
|
|
324
324
|
"name": "scroll-area.tsx",
|
|
325
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { ScrollArea as BaseScrollArea } from \"@base-ui/react/scroll-area\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ScrollArea = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseScrollArea.Root>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseScrollArea.Root\r\n ref={ref}\r\n className={cn(\"relative overflow-hidden group/scroll\", className)}\r\n {...props}\r\n >\r\n <BaseScrollArea.Viewport className=\"h-full w-full rounded-[inherit] overscroll-contain outline-hidden\">\r\n <BaseScrollArea.Content>{children}</BaseScrollArea.Content>\r\n </BaseScrollArea.Viewport>\r\n \r\n <BaseScrollArea.Scrollbar\r\n orientation=\"vertical\"\r\n className=\"absolute right-0 top-0 bottom-0 z-50 flex w-2.5 touch-none select-none p-px bg-transparent transition-opacity duration-150 opacity-0 group-hover/scroll:opacity-100 data-
|
|
325
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { ScrollArea as BaseScrollArea } from \"@base-ui/react/scroll-area\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ScrollArea = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseScrollArea.Root>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseScrollArea.Root\r\n ref={ref}\r\n className={cn(\"relative overflow-hidden group/scroll\", className)}\r\n {...props}\r\n >\r\n <BaseScrollArea.Viewport className=\"h-full w-full rounded-[inherit] overscroll-contain outline-hidden\">\r\n <BaseScrollArea.Content>{children}</BaseScrollArea.Content>\r\n </BaseScrollArea.Viewport>\r\n \r\n <BaseScrollArea.Scrollbar\r\n orientation=\"vertical\"\r\n className=\"absolute right-0 top-0 bottom-0 z-50 flex w-2.5 touch-none select-none p-px bg-transparent transition-opacity duration-150 opacity-0 group-hover/scroll:opacity-100 data-scrolling:opacity-100 data-hovering:opacity-100\"\r\n >\r\n <BaseScrollArea.Thumb className=\"relative flex-1 rounded-full bg-muted-foreground/20 transition-colors hover:bg-muted-foreground/30\" />\r\n </BaseScrollArea.Scrollbar>\r\n\r\n <BaseScrollArea.Scrollbar\r\n orientation=\"horizontal\"\r\n className=\"absolute bottom-0 left-0 right-0 z-50 flex h-2.5 touch-none select-none flex-col p-px bg-transparent transition-opacity duration-150 opacity-0 group-hover/scroll:opacity-100 data-scrolling:opacity-100 data-hovering:opacity-100\"\r\n >\r\n <BaseScrollArea.Thumb className=\"relative flex-1 rounded-full bg-muted-foreground/20 transition-colors hover:bg-muted-foreground/30\" />\r\n </BaseScrollArea.Scrollbar>\r\n </BaseScrollArea.Root>\r\n))\r\nScrollArea.displayName = \"ScrollArea\"\r\n\r\nexport { ScrollArea }"
|
|
326
326
|
}
|
|
327
327
|
]
|
|
328
328
|
},
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
"files": [
|
|
335
335
|
{
|
|
336
336
|
"name": "select.tsx",
|
|
337
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Select as BaseSelect } from \"@base-ui/react/select\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Select = BaseSelect.Root\r\n\r\nconst SelectGroup = BaseSelect.Group\r\n\r\nconst SelectValue = BaseSelect.Value\r\n\r\nconst SelectTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseSelect.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"flex h-10 w-full items-center justify-between rounded-md border border-
|
|
337
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Select as BaseSelect } from \"@base-ui/react/select\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Select = BaseSelect.Root\r\n\r\nconst SelectGroup = BaseSelect.Group\r\n\r\nconst SelectValue = BaseSelect.Value\r\n\r\nconst SelectTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseSelect.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"flex h-10 w-full items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-2xs transition-all cursor-pointer select-none\",\r\n \"focus:outline-hidden focus:border-ring focus:ring-1 focus:ring-ring\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50\",\r\n \"group text-left\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <BaseSelect.Icon className=\"h-4 w-4 opacity-50 transition-transform duration-200 group-data-popup-open:rotate-180\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"2\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\r\n </svg>\r\n </BaseSelect.Icon>\r\n </BaseSelect.Trigger>\r\n))\r\nSelectTrigger.displayName = \"SelectTrigger\"\r\n\r\nconst SelectPortal = BaseSelect.Portal\r\n\r\nconst SelectContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSelect.Popup>\r\n>(({ className, sideOffset = 4, ...props }, ref) => (\r\n <BaseSelect.Positioner sideOffset={sideOffset}>\r\n <BaseSelect.Popup\r\n ref={ref}\r\n className={cn(\r\n \"z-50 min-w-32 overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-md outline-hidden transition-all duration-100 ease-out\",\r\n \"data-starting-style:scale-95 data-starting-style:opacity-0\",\r\n \"data-ending-style:scale-95 data-ending-style:opacity-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </BaseSelect.Positioner>\r\n))\r\nSelectContent.displayName = \"SelectContent\"\r\n\r\nconst SelectItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSelect.Item>\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseSelect.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm text-foreground outline-hidden group\",\r\n \"data-highlighted:bg-muted data-highlighted:text-foreground\",\r\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center opacity-0 group-data-selected:opacity-100 transition-opacity duration-700\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth=\"3\" stroke=\"currentColor\" className=\"h-3 w-3\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" />\r\n </svg>\r\n </span>\r\n <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\r\n </BaseSelect.Item>\r\n))\r\nSelectItem.displayName = \"SelectItem\"\r\n\r\nconst SelectLabel = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSelect.Label>\r\n>(({ className, ...props }, ref) => (\r\n <BaseSelect.Label\r\n ref={ref}\r\n className={cn(\"px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider select-none\", className)}\r\n {...props}\r\n />\r\n))\r\nSelectLabel.displayName = \"SelectLabel\"\r\n\r\nexport {\r\n Select,\r\n SelectGroup,\r\n SelectValue,\r\n SelectTrigger,\r\n SelectPortal,\r\n SelectContent,\r\n SelectItem,\r\n SelectLabel,\r\n}"
|
|
338
338
|
}
|
|
339
339
|
]
|
|
340
340
|
},
|
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
"files": [
|
|
347
347
|
{
|
|
348
348
|
"name": "separator.tsx",
|
|
349
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Separator = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { orientation?: \"horizontal\" | \"vertical\" }\r\n>(({ className, orientation = \"horizontal\", ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n role=\"none\"\r\n className={cn(\r\n \"shrink-0 bg-
|
|
349
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Separator = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & { orientation?: \"horizontal\" | \"vertical\" }\r\n>(({ className, orientation = \"horizontal\", ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n role=\"none\"\r\n className={cn(\r\n \"shrink-0 bg-border\",\r\n orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nSeparator.displayName = \"Separator\"\r\n\r\nexport { Separator }"
|
|
350
350
|
}
|
|
351
351
|
]
|
|
352
352
|
},
|
|
@@ -356,7 +356,7 @@
|
|
|
356
356
|
"files": [
|
|
357
357
|
{
|
|
358
358
|
"name": "sidebar.tsx",
|
|
359
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst SidebarContext = React.createContext<{\r\n isCollapsed: boolean\r\n setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>\r\n} | null>(null)\r\n\r\nfunction useSidebar() {\r\n const context = React.useContext(SidebarContext)\r\n if (!context) throw new Error(\"useSidebar must be used within a SidebarProvider\")\r\n return context\r\n}\r\n\r\nconst SidebarProvider = ({\r\n children,\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => {\r\n const [isCollapsed, setIsCollapsed] = React.useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ isCollapsed, setIsCollapsed }}>\r\n <div\r\n className={cn(\r\n \"flex min-h-screen w-full bg-
|
|
359
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst SidebarContext = React.createContext<{\r\n isCollapsed: boolean\r\n setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>\r\n} | null>(null)\r\n\r\nfunction useSidebar() {\r\n const context = React.useContext(SidebarContext)\r\n if (!context) throw new Error(\"useSidebar must be used within a SidebarProvider\")\r\n return context\r\n}\r\n\r\nconst SidebarProvider = ({\r\n children,\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => {\r\n const [isCollapsed, setIsCollapsed] = React.useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ isCollapsed, setIsCollapsed }}>\r\n <div\r\n className={cn(\r\n \"flex min-h-screen w-full bg-muted/50 text-foreground\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n </SidebarContext.Provider>\r\n )\r\n}\r\nSidebarProvider.displayName = \"SidebarProvider\"\r\n\r\nconst Sidebar = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, children, ...props }, ref) => {\r\n const { isCollapsed } = useSidebar()\r\n\r\n return (\r\n <aside\r\n ref={ref}\r\n className={cn(\r\n \"h-screen border-r border-border bg-background transition-all duration-300 ease-in-out flex flex-col shrink-0 sticky top-0 z-20\",\r\n isCollapsed ? \"w-16\" : \"w-64\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </aside>\r\n )\r\n})\r\nSidebar.displayName = \"Sidebar\"\r\n\r\nconst SidebarTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ButtonHTMLAttributes<HTMLButtonElement>\r\n>(({ className, ...props }, ref) => {\r\n const { isCollapsed, setIsCollapsed } = useSidebar()\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n onClick={() => setIsCollapsed(!isCollapsed)}\r\n className={cn(\r\n \"inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:text-foreground shadow-2xs cursor-pointer focus-visible:outline-hidden\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n className={cn(\"transition-transform duration-200\", isCollapsed && \"rotate-180\")}\r\n >\r\n <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\r\n <path d=\"M9 3v18\" />\r\n </svg>\r\n </button>\r\n )\r\n})\r\nSidebarTrigger.displayName = \"SidebarTrigger\"\r\n\r\nconst SidebarContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex-1 overflow-y-auto p-3 space-y-1.5\", className)} {...props} />\r\n)\r\nSidebarContent.displayName = \"SidebarContent\"\r\n\r\nconst SidebarGroup = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n <div className={cn(\"flex flex-col space-y-1\", className)} {...props} />\r\n)\r\nSidebarGroup.displayName = \"SidebarGroup\"\r\n\r\nconst SidebarGroupLabel = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {\r\n const { isCollapsed } = useSidebar()\r\n if (isCollapsed) return null\r\n return (\r\n <div\r\n className={cn(\r\n \"px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground select-none\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\r\n\r\nconst SidebarItem = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ButtonHTMLAttributes<HTMLButtonElement> & { isActive?: boolean }\r\n>(({ className, isActive, children, ...props }, ref) => {\r\n const { isCollapsed } = useSidebar()\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n className={cn(\r\n \"flex w-full items-center rounded-lg px-3 py-2 text-sm font-medium transition-all cursor-pointer group text-left select-none relative\",\r\n isActive\r\n ? \"bg-primary text-primary-foreground shadow-xs\"\r\n : \"text-muted-foreground hover:bg-muted hover:text-foreground\",\r\n isCollapsed && \"justify-center px-0 h-10\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n )\r\n})\r\nSidebarItem.displayName = \"SidebarItem\"\r\n\r\nexport {\r\n SidebarProvider,\r\n Sidebar,\r\n SidebarTrigger,\r\n SidebarContent,\r\n SidebarGroup,\r\n SidebarGroupLabel,\r\n SidebarItem,\r\n useSidebar,\r\n}"
|
|
360
360
|
}
|
|
361
361
|
]
|
|
362
362
|
},
|
|
@@ -366,7 +366,7 @@
|
|
|
366
366
|
"files": [
|
|
367
367
|
{
|
|
368
368
|
"name": "skeleton.tsx",
|
|
369
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Skeleton({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n return (\r\n <div\r\n className={cn(\r\n \"animate-pulse rounded-md bg-
|
|
369
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Skeleton({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n return (\r\n <div\r\n className={cn(\r\n \"animate-pulse rounded-md bg-muted\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport { Skeleton }"
|
|
370
370
|
}
|
|
371
371
|
]
|
|
372
372
|
},
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
"files": [
|
|
379
379
|
{
|
|
380
380
|
"name": "slider.tsx",
|
|
381
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Slider = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSlider.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseSlider.Root\r\n ref={ref}\r\n className={cn(\"relative flex w-full touch-none select-none items-center group py-4\", className)}\r\n {...props}\r\n >\r\n <BaseSlider.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-
|
|
381
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Slider = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSlider.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseSlider.Root\r\n ref={ref}\r\n className={cn(\"relative flex w-full touch-none select-none items-center group py-4\", className)}\r\n {...props}\r\n >\r\n <BaseSlider.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-muted\">\r\n <BaseSlider.Indicator className=\"absolute h-full bg-primary\" />\r\n </BaseSlider.Track>\r\n <BaseSlider.Thumb \r\n className={cn(\r\n \"block h-5 w-5 rounded-full border border-border bg-background shadow-sm transition-colors\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\r\n \"disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing\"\r\n )} \r\n />\r\n </BaseSlider.Root>\r\n))\r\nSlider.displayName = \"Slider\"\r\n\r\nexport { Slider }"
|
|
382
382
|
}
|
|
383
383
|
]
|
|
384
384
|
},
|
|
@@ -388,7 +388,7 @@
|
|
|
388
388
|
"files": [
|
|
389
389
|
{
|
|
390
390
|
"name": "sonner.tsx",
|
|
391
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface SonnerMessage {\r\n id: string\r\n message: string\r\n description?: string\r\n}\r\n\r\nconst SonnerContext = React.createContext<{\r\n toast: (message: string, description?: string) => void\r\n} | null>(null)\r\n\r\nexport function useSonner() {\r\n const context = React.useContext(SonnerContext)\r\n if (!context) throw new Error(\"useSonner must be used within a SonnerProvider\")\r\n return context\r\n}\r\n\r\nexport const SonnerProvider = ({ children }: { children: React.ReactNode }) => {\r\n const [items, setItems] = React.useState<SonnerMessage[]>([])\r\n\r\n const toast = React.useCallback((message: string, description?: string) => {\r\n const id = Math.random().toString(36).substring(2, 9)\r\n setItems((prev) => [...prev, { id, message, description }].slice(-3)) // Keeps a max stack of 3 on screen\r\n\r\n setTimeout(() => {\r\n setItems((prev) => prev.filter((item) => item.id !== id))\r\n }, 4000)\r\n }, [])\r\n\r\n return (\r\n <SonnerContext.Provider value={{ toast }}>\r\n {children}\r\n <div className=\"fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none w-full max-w-sm\">\r\n {items.map((item, index) => {\r\n const isBottom = items.length - 1 - index\r\n return (\r\n <div\r\n key={item.id}\r\n style={{\r\n transform: `scale(${1 - isBottom * 0.05}) translateY(${isBottom * 10}px)`,\r\n zIndex: items.length - isBottom,\r\n opacity: 1 - isBottom * 0.3,\r\n }}\r\n className={cn(\r\n \"pointer-events-auto w-full rounded-xl border border-
|
|
391
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface SonnerMessage {\r\n id: string\r\n message: string\r\n description?: string\r\n}\r\n\r\nconst SonnerContext = React.createContext<{\r\n toast: (message: string, description?: string) => void\r\n} | null>(null)\r\n\r\nexport function useSonner() {\r\n const context = React.useContext(SonnerContext)\r\n if (!context) throw new Error(\"useSonner must be used within a SonnerProvider\")\r\n return context\r\n}\r\n\r\nexport const SonnerProvider = ({ children }: { children: React.ReactNode }) => {\r\n const [items, setItems] = React.useState<SonnerMessage[]>([])\r\n\r\n const toast = React.useCallback((message: string, description?: string) => {\r\n const id = Math.random().toString(36).substring(2, 9)\r\n setItems((prev) => [...prev, { id, message, description }].slice(-3)) // Keeps a max stack of 3 on screen\r\n\r\n setTimeout(() => {\r\n setItems((prev) => prev.filter((item) => item.id !== id))\r\n }, 4000)\r\n }, [])\r\n\r\n return (\r\n <SonnerContext.Provider value={{ toast }}>\r\n {children}\r\n <div className=\"fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none w-full max-w-sm\">\r\n {items.map((item, index) => {\r\n const isBottom = items.length - 1 - index\r\n return (\r\n <div\r\n key={item.id}\r\n style={{\r\n transform: `scale(${1 - isBottom * 0.05}) translateY(${isBottom * 10}px)`,\r\n zIndex: items.length - isBottom,\r\n opacity: 1 - isBottom * 0.3,\r\n }}\r\n className={cn(\r\n \"pointer-events-auto w-full rounded-xl border border-border bg-background p-4 text-foreground shadow-md transition-all duration-300 flex flex-col gap-1 origin-bottom\",\r\n isBottom > 0 ? \"absolute bottom-0\" : \"relative\"\r\n )}\r\n >\r\n <div className=\"text-sm font-semibold tracking-tight\">{item.message}</div>\r\n {item.description && <div className=\"text-xs text-muted-foreground\">{item.description}</div>}\r\n </div>\r\n )\r\n })}\r\n </div>\r\n </SonnerContext.Provider>\r\n )\r\n}"
|
|
392
392
|
}
|
|
393
393
|
]
|
|
394
394
|
},
|
|
@@ -398,7 +398,7 @@
|
|
|
398
398
|
"files": [
|
|
399
399
|
{
|
|
400
400
|
"name": "spinner.tsx",
|
|
401
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Spinner = React.forwardRef<\r\n SVGSVGElement,\r\n React.ComponentPropsWithoutRef<\"svg\">\r\n>(({ className, ...props }, ref) => (\r\n <svg\r\n ref={ref}\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\"\r\n className={cn(\"h-4 w-4 animate-spin text-
|
|
401
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Spinner = React.forwardRef<\r\n SVGSVGElement,\r\n React.ComponentPropsWithoutRef<\"svg\">\r\n>(({ className, ...props }, ref) => (\r\n <svg\r\n ref={ref}\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\"\r\n className={cn(\"h-4 w-4 animate-spin text-muted-foreground\", className)}\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n {...props}\r\n >\r\n <circle\r\n className=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"4\"\r\n />\r\n <path\r\n className=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\r\n />\r\n </svg>\r\n))\r\nSpinner.displayName = \"Spinner\"\r\n\r\nexport { Spinner }"
|
|
402
402
|
}
|
|
403
403
|
]
|
|
404
404
|
},
|
|
@@ -410,7 +410,7 @@
|
|
|
410
410
|
"files": [
|
|
411
411
|
{
|
|
412
412
|
"name": "switch.tsx",
|
|
413
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Switch = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseSwitch.Root\r\n ref={ref}\r\n className={cn(\r\n \"group inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-
|
|
413
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Switch = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>\r\n>(({ className, ...props }, ref) => (\r\n <BaseSwitch.Root\r\n ref={ref}\r\n className={cn(\r\n \"group inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n \"bg-input data-[checked]:bg-primary\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <BaseSwitch.Thumb\r\n className={cn(\r\n \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 ease-in-out\",\r\n \"translate-x-0 data-[checked]:translate-x-5\"\r\n )}\r\n />\r\n </BaseSwitch.Root>\r\n))\r\nSwitch.displayName = \"Switch\"\r\n\r\nexport { Switch }"
|
|
414
414
|
}
|
|
415
415
|
]
|
|
416
416
|
},
|
|
@@ -420,7 +420,7 @@
|
|
|
420
420
|
"files": [
|
|
421
421
|
{
|
|
422
422
|
"name": "table.tsx",
|
|
423
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Table = React.forwardRef<\r\n HTMLTableElement,\r\n React.HTMLAttributes<HTMLTableElement>\r\n>(({ className, ...props }, ref) => (\r\n <div className=\"relative w-full overflow-auto\">\r\n <table\r\n ref={ref}\r\n className={cn(\"w-full caption-bottom text-sm border-collapse\", className)}\r\n {...props}\r\n />\r\n </div>\r\n))\r\nTable.displayName = \"Table\"\r\n\r\nconst TableHeader = React.forwardRef<\r\n HTMLTableSectionElement,\r\n React.HTMLAttributes<HTMLTableSectionElement>\r\n>(({ className, ...props }, ref) => (\r\n <thead ref={ref} className={cn(\"[&_tr]:border-b bg-
|
|
423
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Table = React.forwardRef<\r\n HTMLTableElement,\r\n React.HTMLAttributes<HTMLTableElement>\r\n>(({ className, ...props }, ref) => (\r\n <div className=\"relative w-full overflow-auto\">\r\n <table\r\n ref={ref}\r\n className={cn(\"w-full caption-bottom text-sm border-collapse\", className)}\r\n {...props}\r\n />\r\n </div>\r\n))\r\nTable.displayName = \"Table\"\r\n\r\nconst TableHeader = React.forwardRef<\r\n HTMLTableSectionElement,\r\n React.HTMLAttributes<HTMLTableSectionElement>\r\n>(({ className, ...props }, ref) => (\r\n <thead ref={ref} className={cn(\"[&_tr]:border-b bg-muted/70 border-border\", className)} {...props} />\r\n))\r\nTableHeader.displayName = \"TableHeader\"\r\n\r\nconst TableBody = React.forwardRef<\r\n HTMLTableSectionElement,\r\n React.HTMLAttributes<HTMLTableSectionElement>\r\n>(({ className, ...props }, ref) => (\r\n <tbody\r\n ref={ref}\r\n className={cn(\"[&_tr:last-child]:border-0\", className)}\r\n {...props}\r\n />\r\n))\r\nTableBody.displayName = \"TableBody\"\r\n\r\nconst TableFooter = React.forwardRef<\r\n HTMLTableSectionElement,\r\n React.HTMLAttributes<HTMLTableSectionElement>\r\n>(({ className, ...props }, ref) => (\r\n <tfoot\r\n ref={ref}\r\n className={cn(\"border-t bg-muted font-medium [&_tr]:last-child:border-0 border-border\", className)}\r\n {...props}\r\n />\r\n))\r\nTableFooter.displayName = \"TableFooter\"\r\n\r\nconst TableRow = React.forwardRef<\r\n HTMLTableRowElement,\r\n React.HTMLAttributes<HTMLTableRowElement>\r\n>(({ className, ...props }, ref) => (\r\n <tr\r\n ref={ref}\r\n className={cn(\r\n \"border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTableRow.displayName = \"TableRow\"\r\n\r\nconst TableHead = React.forwardRef<\r\n HTMLTableCellElement,\r\n React.ThHTMLAttributes<HTMLTableCellElement>\r\n>(({ className, ...props }, ref) => (\r\n <th\r\n ref={ref}\r\n className={cn(\r\n \"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTableHead.displayName = \"TableHead\"\r\n\r\nconst TableCell = React.forwardRef<\r\n HTMLTableCellElement,\r\n React.TdHTMLAttributes<HTMLTableCellElement>\r\n>(({ className, ...props }, ref) => (\r\n <td\r\n ref={ref}\r\n className={cn(\r\n \"p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTableCell.displayName = \"TableCell\"\r\n\r\nexport {\r\n Table,\r\n TableHeader,\r\n TableBody,\r\n TableFooter,\r\n TableRow,\r\n TableHead,\r\n TableCell,\r\n}"
|
|
424
424
|
}
|
|
425
425
|
]
|
|
426
426
|
},
|
|
@@ -432,7 +432,7 @@
|
|
|
432
432
|
"files": [
|
|
433
433
|
{
|
|
434
434
|
"name": "tabs.tsx",
|
|
435
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Tabs = BaseTabs.Root\r\n\r\nconst TabsList = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseTabs.List>\r\n>(({ className, ...props }, ref) => (\r\n <BaseTabs.List\r\n ref={ref}\r\n className={cn(\r\n \"inline-flex h-10 items-center justify-center rounded-lg bg-
|
|
435
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Tabs = BaseTabs.Root\r\n\r\nconst TabsList = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseTabs.List>\r\n>(({ className, ...props }, ref) => (\r\n <BaseTabs.List\r\n ref={ref}\r\n className={cn(\r\n \"inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTabsList.displayName = \"TabsList\"\r\n\r\nconst TabsTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>\r\n>(({ className, ...props }, ref) => (\r\n <BaseTabs.Tab\r\n ref={ref}\r\n className={cn(\r\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all cursor-pointer select-none\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n \"disabled:pointer-events-none disabled:opacity-50\",\r\n \"data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-xs\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTabsTrigger.displayName = \"TabsTrigger\"\r\n\r\nconst TabsContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>\r\n>(({ className, ...props }, ref) => (\r\n <BaseTabs.Panel\r\n ref={ref}\r\n className={cn(\r\n \"mt-2 outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTabsContent.displayName = \"TabsContent\"\r\n\r\nexport { Tabs, TabsList, TabsTrigger, TabsContent }"
|
|
436
436
|
}
|
|
437
437
|
]
|
|
438
438
|
},
|
|
@@ -442,7 +442,7 @@
|
|
|
442
442
|
"files": [
|
|
443
443
|
{
|
|
444
444
|
"name": "textarea.tsx",
|
|
445
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\r\n\r\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n ({ className, ...props }, ref) => {\r\n return (\r\n <textarea\r\n className={cn(\r\n \"flex min-h-[80px] w-full rounded-md border border-
|
|
445
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\r\n\r\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n ({ className, ...props }, ref) => {\r\n return (\r\n <textarea\r\n className={cn(\r\n \"flex min-h-[80px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground shadow-2xs transition-all\",\r\n \"focus-visible:outline-hidden focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50\",\r\n className\r\n )}\r\n ref={ref}\r\n {...props}\r\n />\r\n )\r\n }\r\n)\r\nTextarea.displayName = \"Textarea\"\r\n\r\nexport { Textarea }"
|
|
446
446
|
}
|
|
447
447
|
]
|
|
448
448
|
},
|
|
@@ -452,7 +452,7 @@
|
|
|
452
452
|
"files": [
|
|
453
453
|
{
|
|
454
454
|
"name": "toast.tsx",
|
|
455
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface ToastMessage {\r\n id: string\r\n title?: string\r\n description?: string\r\n variant?: \"default\" | \"destructive\"\r\n}\r\n\r\nconst ToastContext = React.createContext<{\r\n toast: (props: Omit<ToastMessage, \"id\">) => void\r\n} | null>(null)\r\n\r\nexport function useToast() {\r\n const context = React.useContext(ToastContext)\r\n if (!context) throw new Error(\"useToast must be used within a ToastProvider\")\r\n return context\r\n}\r\n\r\nexport const ToastProvider = ({ children }: { children: React.ReactNode }) => {\r\n const [toasts, setToasts] = React.useState<ToastMessage[]>([])\r\n\r\n const toast = React.useCallback(({ title, description, variant = \"default\" }: Omit<ToastMessage, \"id\">) => {\r\n const id = Math.random().toString(36).substring(2, 9)\r\n setToasts((prev) => [...prev, { id, title, description, variant }])\r\n\r\n setTimeout(() => {\r\n setToasts((prev) => prev.filter((t) => t.id !== id))\r\n }, 4000)\r\n }, [])\r\n\r\n return (\r\n <ToastContext.Provider value={{ toast }}>\r\n {children}\r\n <div className=\"fixed bottom-0 right-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-2\">\r\n {toasts.map((t) => (\r\n <div\r\n key={t.id}\r\n className={cn(\r\n \"group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all duration-300 ease-out\",\r\n t.variant === \"default\" && \"bg-
|
|
455
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface ToastMessage {\r\n id: string\r\n title?: string\r\n description?: string\r\n variant?: \"default\" | \"destructive\"\r\n}\r\n\r\nconst ToastContext = React.createContext<{\r\n toast: (props: Omit<ToastMessage, \"id\">) => void\r\n} | null>(null)\r\n\r\nexport function useToast() {\r\n const context = React.useContext(ToastContext)\r\n if (!context) throw new Error(\"useToast must be used within a ToastProvider\")\r\n return context\r\n}\r\n\r\nexport const ToastProvider = ({ children }: { children: React.ReactNode }) => {\r\n const [toasts, setToasts] = React.useState<ToastMessage[]>([])\r\n\r\n const toast = React.useCallback(({ title, description, variant = \"default\" }: Omit<ToastMessage, \"id\">) => {\r\n const id = Math.random().toString(36).substring(2, 9)\r\n setToasts((prev) => [...prev, { id, title, description, variant }])\r\n\r\n setTimeout(() => {\r\n setToasts((prev) => prev.filter((t) => t.id !== id))\r\n }, 4000)\r\n }, [])\r\n\r\n return (\r\n <ToastContext.Provider value={{ toast }}>\r\n {children}\r\n <div className=\"fixed bottom-0 right-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-2\">\r\n {toasts.map((t) => (\r\n <div\r\n key={t.id}\r\n className={cn(\r\n \"group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all duration-300 ease-out\",\r\n t.variant === \"default\" && \"bg-background border-border text-foreground\",\r\n t.variant === \"destructive\" && \"destructive group border-destructive bg-destructive text-destructive-foreground\"\r\n )}\r\n >\r\n <div className=\"grid gap-1\">\r\n {t.title && <div className=\"text-sm font-semibold\">{t.title}</div>}\r\n {t.description && <div className={cn(\"text-xs opacity-90\", t.variant === \"default\" ? \"text-muted-foreground\" : \"text-primary-foreground\")}>{t.description}</div>}\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n </ToastContext.Provider>\r\n )\r\n}"
|
|
456
456
|
}
|
|
457
457
|
]
|
|
458
458
|
},
|
|
@@ -464,7 +464,7 @@
|
|
|
464
464
|
"files": [
|
|
465
465
|
{
|
|
466
466
|
"name": "toggle-group.tsx",
|
|
467
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { ToggleGroup as BaseToggleGroup } from \"@base-ui/react/toggle-group\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ToggleGroupContext = React.createContext<{\r\n size?: \"default\" | \"sm\" | \"lg\"\r\n variant?: \"default\" | \"outline\"\r\n} | null>(null)\r\n\r\nconst ToggleGroup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseToggleGroup.Root> & {\r\n size?: \"default\" | \"sm\" | \"lg\"\r\n variant?: \"default\" | \"outline\"\r\n }\r\n>(({ className, variant, size, children, ...props }, ref) => (\r\n <BaseToggleGroup.Root\r\n ref={ref}\r\n className={cn(\"flex items-center justify-center gap-1\", className)}\r\n {...props}\r\n >\r\n <ToggleGroupContext.Provider value={{ variant, size }}>\r\n {children}\r\n </ToggleGroupContext.Provider>\r\n </BaseToggleGroup.Root>\r\n))\r\n\r\nToggleGroup.displayName = \"ToggleGroup\"\r\n\r\nconst ToggleGroupItem = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseToggleGroup.Item> & {\r\n size?: \"default\" | \"sm\" | \"lg\"\r\n variant?: \"default\" | \"outline\"\r\n }\r\n>(({ className, children, variant, size, ...props }, ref) => {\r\n const context = React.useContext(ToggleGroupContext)\r\n \r\n // Toggle layout variant overrides based on group setup mappings\r\n const itemVariant = variant || context?.variant || \"default\"\r\n const itemSize = size || context?.size || \"default\"\r\n\r\n return (\r\n <BaseToggleGroup.Item\r\n ref={ref}\r\n className={cn(\r\n \"inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-
|
|
467
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { ToggleGroup as BaseToggleGroup } from \"@base-ui/react/toggle-group\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ToggleGroupContext = React.createContext<{\r\n size?: \"default\" | \"sm\" | \"lg\"\r\n variant?: \"default\" | \"outline\"\r\n} | null>(null)\r\n\r\nconst ToggleGroup = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseToggleGroup.Root> & {\r\n size?: \"default\" | \"sm\" | \"lg\"\r\n variant?: \"default\" | \"outline\"\r\n }\r\n>(({ className, variant, size, children, ...props }, ref) => (\r\n <BaseToggleGroup.Root\r\n ref={ref}\r\n className={cn(\"flex items-center justify-center gap-1\", className)}\r\n {...props}\r\n >\r\n <ToggleGroupContext.Provider value={{ variant, size }}>\r\n {children}\r\n </ToggleGroupContext.Provider>\r\n </BaseToggleGroup.Root>\r\n))\r\n\r\nToggleGroup.displayName = \"ToggleGroup\"\r\n\r\nconst ToggleGroupItem = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentPropsWithoutRef<typeof BaseToggleGroup.Item> & {\r\n size?: \"default\" | \"sm\" | \"lg\"\r\n variant?: \"default\" | \"outline\"\r\n }\r\n>(({ className, children, variant, size, ...props }, ref) => {\r\n const context = React.useContext(ToggleGroupContext)\r\n \r\n // Toggle layout variant overrides based on group setup mappings\r\n const itemVariant = variant || context?.variant || \"default\"\r\n const itemSize = size || context?.size || \"default\"\r\n\r\n return (\r\n <BaseToggleGroup.Item\r\n ref={ref}\r\n className={cn(\r\n \"inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground cursor-pointer select-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-primary data-[pressed]:text-primary-foreground rounded-none first:rounded-l-md last:rounded-r-md border-r last:border-r-0 border-border/60 shadow-2xs\",\r\n itemVariant === \"outline\" ? \"border border-border\" : \"bg-transparent\",\r\n itemSize === \"default\" && \"h-9 px-3\",\r\n itemSize === \"sm\" && \"h-8 px-2\",\r\n itemSize === \"lg\" && \"h-10 px-3\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </BaseToggleGroup.Item>\r\n )\r\n})\r\n\r\nToggleGroupItem.displayName = \"ToggleGroupItem\"\r\n\r\nexport { ToggleGroup, ToggleGroupItem }"
|
|
468
468
|
}
|
|
469
469
|
]
|
|
470
470
|
},
|
|
@@ -477,7 +477,7 @@
|
|
|
477
477
|
"files": [
|
|
478
478
|
{
|
|
479
479
|
"name": "toggle.tsx",
|
|
480
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst toggleVariants = cva(\r\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-
|
|
480
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst toggleVariants = cva(\r\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground cursor-pointer select-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-primary data-[pressed]:text-primary-foreground shadow-2xs\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-transparent\",\r\n outline: \"border border-border bg-transparent hover:bg-muted hover:text-foreground\",\r\n },\r\n size: {\r\n default: \"h-9 px-3\",\r\n sm: \"h-8 px-2\",\r\n lg: \"h-10 px-3\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\",\r\n },\r\n }\r\n)\r\n\r\nexport interface ToggleProps\r\n extends React.ComponentPropsWithoutRef<typeof BaseToggle>,\r\n VariantProps<typeof toggleVariants> {}\r\n\r\nconst Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(\r\n ({ className, variant, size, ...props }, ref) => (\r\n <BaseToggle\r\n ref={ref}\r\n className={cn(toggleVariants({ variant, size, className }))}\r\n {...props}\r\n />\r\n )\r\n)\r\n\r\nToggle.displayName = \"Toggle\"\r\n\r\nexport { Toggle, toggleVariants }"
|
|
481
481
|
}
|
|
482
482
|
]
|
|
483
483
|
},
|
|
@@ -489,7 +489,7 @@
|
|
|
489
489
|
"files": [
|
|
490
490
|
{
|
|
491
491
|
"name": "tooltip.tsx",
|
|
492
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst TooltipProvider = BaseTooltip.Provider\r\n\r\nconst Tooltip = BaseTooltip.Root\r\n\r\nconst TooltipTrigger = BaseTooltip.Trigger\r\n\r\nconst TooltipPortal = BaseTooltip.Portal\r\n\r\nconst TooltipContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup
|
|
492
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst TooltipProvider = BaseTooltip.Provider\r\n\r\nconst Tooltip = BaseTooltip.Root\r\n\r\nconst TooltipTrigger = BaseTooltip.Trigger\r\n\r\nconst TooltipPortal = BaseTooltip.Portal\r\n\r\nconst TooltipContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup> & { sideOffset?: number }\r\n>(({ className, sideOffset = 4, ...props }, ref) => (\r\n <BaseTooltip.Positioner sideOffset={sideOffset}>\r\n <BaseTooltip.Popup\r\n ref={ref}\r\n className={cn(\r\n \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md transition-all duration-100 ease-out\",\r\n \"data-[starting-style]:opacity-0 data-[starting-style]:scale-95\",\r\n \"data-[ending-style]:opacity-0 data-[ending-style]:scale-95\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </BaseTooltip.Positioner>\r\n))\r\nTooltipContent.displayName = \"TooltipContent\"\r\n\r\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipPortal, TooltipProvider }"
|
|
493
493
|
}
|
|
494
494
|
]
|
|
495
495
|
},
|
|
@@ -499,7 +499,7 @@
|
|
|
499
499
|
"files": [
|
|
500
500
|
{
|
|
501
501
|
"name": "typography.tsx",
|
|
502
|
-
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst TypographyH1 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\r\n ({ className, ...props }, ref) => (\r\n <h1 ref={ref} className={cn(\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-
|
|
502
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst TypographyH1 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\r\n ({ className, ...props }, ref) => (\r\n <h1 ref={ref} className={cn(\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-foreground\", className)} {...props} />\r\n )\r\n)\r\nTypographyH1.displayName = \"TypographyH1\"\r\n\r\nconst TypographyH2 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\r\n ({ className, ...props }, ref) => (\r\n <h2 ref={ref} className={cn(\"scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-foreground\", className)} {...props} />\r\n )\r\n)\r\nTypographyH2.displayName = \"TypographyH2\"\r\n\r\nconst TypographyH3 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\r\n ({ className, ...props }, ref) => (\r\n <h3 ref={ref} className={cn(\"scroll-m-20 text-2xl font-semibold tracking-tight text-foreground\", className)} {...props} />\r\n )\r\n)\r\nTypographyH3.displayName = \"TypographyH3\"\r\n\r\nconst TypographyLead = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\r\n ({ className, ...props }, ref) => (\r\n <p ref={ref} className={cn(\"text-xl text-muted-foreground\", className)} {...props} />\r\n )\r\n)\r\nTypographyLead.displayName = \"TypographyLead\"\r\n\r\nconst TypographyMuted = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\r\n ({ className, ...props }, ref) => (\r\n <span ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\r\n )\r\n)\r\nTypographyMuted.displayName = \"TypographyMuted\"\r\n\r\nexport { TypographyH1, TypographyH2, TypographyH3, TypographyLead, TypographyMuted }"
|
|
503
503
|
}
|
|
504
504
|
]
|
|
505
505
|
}
|