@static-ui/registry 0.0.1
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 +506 -0
- package/package.json +42 -0
package/dist/index.json
ADDED
|
@@ -0,0 +1,506 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "accordion",
|
|
4
|
+
"dependencies": [
|
|
5
|
+
"@base-ui/react"
|
|
6
|
+
],
|
|
7
|
+
"files": [
|
|
8
|
+
{
|
|
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-neutral-200 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-neutral-900\",\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-neutral-500 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
|
+
}
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"name": "alert-dialog",
|
|
16
|
+
"dependencies": [
|
|
17
|
+
"@base-ui/react"
|
|
18
|
+
],
|
|
19
|
+
"files": [
|
|
20
|
+
{
|
|
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-neutral-200 bg-white p-6 shadow-xl text-neutral-950 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-neutral-500 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
|
+
}
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "alert",
|
|
28
|
+
"dependencies": [],
|
|
29
|
+
"files": [
|
|
30
|
+
{
|
|
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-neutral-950 [&>svg~*]:pl-7\",\r\n variant === \"default\" && \"bg-neutral-50 text-neutral-900 border-neutral-200 [&>svg]:text-neutral-600\",\r\n variant === \"destructive\" && \"border-red-500/50 bg-red-50 text-red-900 [&>svg]:text-red-600\",\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-neutral-500 [&_p]:leading-relaxed\", className)}\r\n {...props}\r\n />\r\n))\r\nAlertDescription.displayName = \"AlertDescription\"\r\n\r\nexport { Alert, AlertTitle, AlertDescription }"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "aspect-ratio",
|
|
38
|
+
"dependencies": [],
|
|
39
|
+
"files": [
|
|
40
|
+
{
|
|
41
|
+
"name": "aspect-ratio.tsx",
|
|
42
|
+
"content": "import * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ninterface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {\r\n ratio?: number\r\n}\r\n\r\nconst AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(\r\n ({ className, ratio = 16 / 9, style, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n style={{\r\n position: \"relative\",\r\n width: \"100%\",\r\n aspectRatio: `${ratio}`,\r\n ...style,\r\n }}\r\n className={cn(\"[&>img]:absolute [&>img]:inset-0 [&>img]:h-full [&>img]:w-full [&>img]:object-cover\", className)}\r\n {...props}\r\n />\r\n )\r\n)\r\nAspectRatio.displayName = \"AspectRatio\"\r\n\r\nexport { AspectRatio }"
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "avatar",
|
|
48
|
+
"dependencies": [
|
|
49
|
+
"@base-ui/react"
|
|
50
|
+
],
|
|
51
|
+
"files": [
|
|
52
|
+
{
|
|
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-neutral-100\", 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-neutral-100 font-medium text-sm text-neutral-600\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAvatarFallback.displayName = \"AvatarFallback\"\r\n\r\nexport { Avatar, AvatarImage, AvatarFallback }"
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "badge",
|
|
60
|
+
"dependencies": [
|
|
61
|
+
"class-variance-authority"
|
|
62
|
+
],
|
|
63
|
+
"files": [
|
|
64
|
+
{
|
|
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-neutral-950 focus-visible:ring-offset-2\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"border-transparent bg-neutral-900 text-neutral-50 shadow-sm hover:bg-neutral-900/80\",\r\n secondary: \"border-transparent bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80\",\r\n destructive: \"border-transparent bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/80\",\r\n outline: \"text-neutral-950 border border-neutral-200\",\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
|
+
}
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "breadcrumb",
|
|
72
|
+
"dependencies": [],
|
|
73
|
+
"files": [
|
|
74
|
+
{
|
|
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-neutral-500\", 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-neutral-500\", 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-neutral-900 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-neutral-950\", 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-neutral-400\", 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
|
+
}
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"name": "button",
|
|
82
|
+
"dependencies": [
|
|
83
|
+
"@base-ui/react",
|
|
84
|
+
"class-variance-authority"
|
|
85
|
+
],
|
|
86
|
+
"files": [
|
|
87
|
+
{
|
|
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-neutral-950 data-[focus-visible]:ring-offset-2\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 data-[hover]:bg-neutral-800\",\r\n outline: \"border border-neutral-200 bg-white text-neutral-900 hover:bg-neutral-100 data-[hover]:bg-neutral-100\",\r\n destructive: \"bg-red-600 text-white hover:bg-red-600/90 data-[hover]:bg-red-700\",\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
|
+
}
|
|
91
|
+
]
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"name": "calendar",
|
|
95
|
+
"dependencies": [],
|
|
96
|
+
"files": [
|
|
97
|
+
{
|
|
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-white border border-neutral-200 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-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 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-neutral-900 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-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 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-neutral-400 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-neutral-900 text-white font-medium\"\r\n : \"text-neutral-800 hover:bg-neutral-100\"\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
|
+
}
|
|
101
|
+
]
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "card",
|
|
105
|
+
"dependencies": [],
|
|
106
|
+
"files": [
|
|
107
|
+
{
|
|
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-neutral-200 bg-white text-neutral-950 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-neutral-500\", 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
|
+
}
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": "carousel",
|
|
115
|
+
"dependencies": [],
|
|
116
|
+
"files": [
|
|
117
|
+
{
|
|
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-neutral-200 bg-white text-neutral-600 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-neutral-200 bg-white text-neutral-600 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
|
+
}
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "checkbox",
|
|
125
|
+
"dependencies": [
|
|
126
|
+
"@base-ui/react"
|
|
127
|
+
],
|
|
128
|
+
"files": [
|
|
129
|
+
{
|
|
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-neutral-300 bg-white transition-all cursor-pointer\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n \"data-[checked]:bg-neutral-900 data-[checked]:border-neutral-900\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <BaseCheckbox.Indicator className=\"flex items-center justify-center text-white 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
|
+
}
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"name": "collapsible",
|
|
137
|
+
"dependencies": [
|
|
138
|
+
"@base-ui/react"
|
|
139
|
+
],
|
|
140
|
+
"files": [
|
|
141
|
+
{
|
|
142
|
+
"name": "collapsible.tsx",
|
|
143
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Collapsible = BaseCollapsible.Root\r\n\r\nconst CollapsibleTrigger = BaseCollapsible.Trigger\r\n\r\nconst CollapsibleContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>\r\n>(({ className, ...props }, ref) => (\r\n <BaseCollapsible.Panel\r\n ref={ref}\r\n className={cn(\r\n \"overflow-hidden transition-all animate-collapsible-up data-[open]:animate-collapsible-down\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCollapsibleContent.displayName = \"CollapsibleContent\"\r\n\r\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }"
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"name": "context-menu",
|
|
149
|
+
"dependencies": [
|
|
150
|
+
"@base-ui/react"
|
|
151
|
+
],
|
|
152
|
+
"files": [
|
|
153
|
+
{
|
|
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 const [open, setOpen] = React.useState(false)\r\n const [coords, setCoords] = React.useState({ x: 0, y: 0 })\r\n\r\n const handleContextMenu = React.useCallback((e: React.MouseEvent) => {\r\n e.preventDefault()\r\n setCoords({ x: e.clientX, y: e.clientY })\r\n setOpen(true)\r\n }, [])\r\n\r\n return (\r\n <div onContextMenu={handleContextMenu} className=\"w-full h-full\">\r\n <BaseMenu.Root open={open} onOpenChange={setOpen} {...props}>\r\n {/* Custom anchor positioning matrix matching right-click clients coordinates */}\r\n <BaseMenu.Anchor\r\n style={{\r\n position: \"fixed\",\r\n left: coords.x,\r\n top: coords.y,\r\n width: 1,\r\n height: 1,\r\n }}\r\n />\r\n {children}\r\n </BaseMenu.Root>\r\n </div>\r\n )\r\n}\r\n\r\nconst ContextMenuTrigger = ({ children }: { children: React.ReactNode }) => children\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-neutral-200 bg-white p-1 text-neutral-950 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-neutral-100 data-[highlighted]:text-neutral-900\",\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
|
+
}
|
|
157
|
+
]
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "dialog",
|
|
161
|
+
"dependencies": [
|
|
162
|
+
"@base-ui/react"
|
|
163
|
+
],
|
|
164
|
+
"files": [
|
|
165
|
+
{
|
|
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-neutral-200 bg-white p-6 shadow-xl text-neutral-950 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-neutral-500\", 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
|
+
}
|
|
169
|
+
]
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"name": "drawer",
|
|
173
|
+
"dependencies": [
|
|
174
|
+
"@base-ui/react"
|
|
175
|
+
],
|
|
176
|
+
"files": [
|
|
177
|
+
{
|
|
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-white p-6 shadow-xl text-neutral-950 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-neutral-200\",\r\n side === \"left\" && \"left-0 data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full border-r border-neutral-200\",\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
|
+
}
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "dropdown-menu",
|
|
185
|
+
"dependencies": [
|
|
186
|
+
"@base-ui/react"
|
|
187
|
+
],
|
|
188
|
+
"files": [
|
|
189
|
+
{
|
|
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-[8rem] overflow-hidden rounded-lg border border-neutral-200 bg-white p-1 text-neutral-950 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 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-neutral-100 data-[highlighted]:text-neutral-900\",\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
|
+
}
|
|
193
|
+
]
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"name": "hover-card",
|
|
197
|
+
"dependencies": [
|
|
198
|
+
"@base-ui/react"
|
|
199
|
+
],
|
|
200
|
+
"files": [
|
|
201
|
+
{
|
|
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-neutral-200 bg-white p-4 text-neutral-950 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
|
+
}
|
|
205
|
+
]
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"name": "input-group",
|
|
209
|
+
"dependencies": [],
|
|
210
|
+
"files": [
|
|
211
|
+
{
|
|
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-neutral-200 bg-white focus-within:border-neutral-900 focus-within:ring-1 focus-within:ring-neutral-900 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-neutral-500 bg-neutral-50 border-r border-neutral-200 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
|
+
}
|
|
215
|
+
]
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"name": "input-otp",
|
|
219
|
+
"dependencies": [],
|
|
220
|
+
"files": [
|
|
221
|
+
{
|
|
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-neutral-200 bg-white rounded-md shadow-2xs focus:outline-hidden focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900 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
|
+
}
|
|
225
|
+
]
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "input",
|
|
229
|
+
"dependencies": [],
|
|
230
|
+
"files": [
|
|
231
|
+
{
|
|
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-neutral-200 bg-white px-3 py-2 text-sm text-neutral-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-400 shadow-2xs transition-all\",\r\n \"focus-visible:outline-hidden focus-visible:border-neutral-900 focus-visible:ring-1 focus-visible:ring-neutral-900\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-neutral-50/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
|
+
}
|
|
235
|
+
]
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"name": "kbd",
|
|
239
|
+
"dependencies": [
|
|
240
|
+
"@base-ui/react"
|
|
241
|
+
],
|
|
242
|
+
"files": [
|
|
243
|
+
{
|
|
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-neutral-200 bg-neutral-100 px-1.5 font-mono text-[10px] font-medium text-neutral-500 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
|
+
}
|
|
247
|
+
]
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "label",
|
|
251
|
+
"dependencies": [],
|
|
252
|
+
"files": [
|
|
253
|
+
{
|
|
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-neutral-900 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
|
+
}
|
|
257
|
+
]
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
"name": "number-field",
|
|
261
|
+
"dependencies": [
|
|
262
|
+
"@base-ui/react"
|
|
263
|
+
],
|
|
264
|
+
"files": [
|
|
265
|
+
{
|
|
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-[200px]\", className)} {...props}>\r\n {label && <label className=\"text-sm font-medium text-neutral-700\">{label}</label>}\r\n \r\n <div className=\"relative flex items-center border border-neutral-200 rounded-md bg-white shadow-sm focus-within:ring-2 focus-within:ring-neutral-950\">\r\n {/* Decrement Button */}\r\n <BaseNumberField.Decrement className=\"flex items-center justify-center h-9 w-9 text-neutral-500 transition-colors hover:bg-neutral-50 data-[disabled]:opacity-30 border-r border-neutral-200\">\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-neutral-900 outline-none placeholder:text-neutral-400 py-1.5\" />\r\n\r\n {/* Increment Button */}\r\n <BaseNumberField.Increment className=\"flex items-center justify-center h-9 w-9 text-neutral-500 transition-colors hover:bg-neutral-50 data-[disabled]:opacity-30 border-l border-neutral-200\">\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
|
+
}
|
|
269
|
+
]
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "pagination",
|
|
273
|
+
"dependencies": [],
|
|
274
|
+
"files": [
|
|
275
|
+
{
|
|
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-neutral-900 text-neutral-50 border-neutral-900\" : \"hover:bg-neutral-100 text-neutral-900\",\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-neutral-400\", 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
|
+
}
|
|
279
|
+
]
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
"name": "popover",
|
|
283
|
+
"dependencies": [
|
|
284
|
+
"@base-ui/react"
|
|
285
|
+
],
|
|
286
|
+
"files": [
|
|
287
|
+
{
|
|
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-neutral-200 bg-white p-4 text-neutral-950 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
|
+
}
|
|
291
|
+
]
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"name": "progress",
|
|
295
|
+
"dependencies": [
|
|
296
|
+
"@base-ui/react"
|
|
297
|
+
],
|
|
298
|
+
"files": [
|
|
299
|
+
{
|
|
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-neutral-100\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <BaseProgress.Track className=\"h-full w-full bg-neutral-100\">\r\n <BaseProgress.Indicator\r\n className=\"h-full bg-neutral-900 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
|
+
}
|
|
303
|
+
]
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "radio-group",
|
|
307
|
+
"dependencies": [
|
|
308
|
+
"@base-ui/react"
|
|
309
|
+
],
|
|
310
|
+
"files": [
|
|
311
|
+
{
|
|
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-neutral-300 bg-white transition-all cursor-pointer flex items-center justify-center\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n \"data-[checked]:border-neutral-900 data-[checked]:bg-neutral-900\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <BaseRadioGroup.Indicator className=\"h-1.5 w-1.5 rounded-full bg-white 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
|
+
}
|
|
315
|
+
]
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"name": "scroll-area",
|
|
319
|
+
"dependencies": [
|
|
320
|
+
"@base-ui/react"
|
|
321
|
+
],
|
|
322
|
+
"files": [
|
|
323
|
+
{
|
|
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-[scrolling]:opacity-100 data-[hovering]:opacity-100\"\r\n >\r\n <BaseScrollArea.Thumb className=\"relative flex-1 rounded-full bg-neutral-300 transition-colors hover:bg-neutral-400\" />\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-neutral-300 transition-colors hover:bg-neutral-400\" />\r\n </BaseScrollArea.Scrollbar>\r\n </BaseScrollArea.Root>\r\n))\r\nScrollArea.displayName = \"ScrollArea\"\r\n\r\nexport { ScrollArea }"
|
|
326
|
+
}
|
|
327
|
+
]
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
"name": "select",
|
|
331
|
+
"dependencies": [
|
|
332
|
+
"@base-ui/react"
|
|
333
|
+
],
|
|
334
|
+
"files": [
|
|
335
|
+
{
|
|
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-neutral-200 bg-white px-3 py-2 text-sm text-neutral-950 shadow-2xs transition-all cursor-pointer select-none\",\r\n \"focus:outline-hidden focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-neutral-50/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-[8rem] overflow-hidden rounded-lg border border-neutral-200 bg-white p-1 text-neutral-950 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-neutral-900 outline-hidden cursor-pointer group\",\r\n \"data-[highlighted]:bg-neutral-100 data-[highlighted]:text-neutral-900\",\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-neutral-400 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
|
+
}
|
|
339
|
+
]
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
"name": "separator",
|
|
343
|
+
"dependencies": [
|
|
344
|
+
"@base-ui/react"
|
|
345
|
+
],
|
|
346
|
+
"files": [
|
|
347
|
+
{
|
|
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-neutral-200\",\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
|
+
}
|
|
351
|
+
]
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
"name": "sidebar",
|
|
355
|
+
"dependencies": [],
|
|
356
|
+
"files": [
|
|
357
|
+
{
|
|
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-neutral-50/50 text-neutral-950\",\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-neutral-200 bg-white 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-neutral-200 bg-white text-neutral-500 hover:text-neutral-900 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-neutral-400 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-neutral-900 text-neutral-50 shadow-xs\"\r\n : \"text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900\",\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
|
+
}
|
|
361
|
+
]
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
"name": "skeleton",
|
|
365
|
+
"dependencies": [],
|
|
366
|
+
"files": [
|
|
367
|
+
{
|
|
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-neutral-200/60\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport { Skeleton }"
|
|
370
|
+
}
|
|
371
|
+
]
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"name": "slider",
|
|
375
|
+
"dependencies": [
|
|
376
|
+
"@base-ui/react"
|
|
377
|
+
],
|
|
378
|
+
"files": [
|
|
379
|
+
{
|
|
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-neutral-100\">\r\n <BaseSlider.Indicator className=\"absolute h-full bg-neutral-900\" />\r\n </BaseSlider.Track>\r\n <BaseSlider.Thumb \r\n className={cn(\r\n \"block h-5 w-5 rounded-full border border-neutral-200 bg-white shadow-sm transition-colors\",\r\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950\",\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
|
+
}
|
|
383
|
+
]
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
"name": "sonner",
|
|
387
|
+
"dependencies": [],
|
|
388
|
+
"files": [
|
|
389
|
+
{
|
|
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-neutral-200 bg-white p-4 text-neutral-950 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-neutral-500\">{item.description}</div>}\r\n </div>\r\n )\r\n })}\r\n </div>\r\n </SonnerContext.Provider>\r\n )\r\n}"
|
|
392
|
+
}
|
|
393
|
+
]
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"name": "spinner",
|
|
397
|
+
"dependencies": [],
|
|
398
|
+
"files": [
|
|
399
|
+
{
|
|
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-neutral-500\", 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
|
+
}
|
|
403
|
+
]
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"name": "switch",
|
|
407
|
+
"dependencies": [
|
|
408
|
+
"@base-ui/react"
|
|
409
|
+
],
|
|
410
|
+
"files": [
|
|
411
|
+
{
|
|
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-neutral-950 focus-visible:ring-offset-2\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50\",\r\n \"bg-neutral-200 data-[checked]:bg-neutral-900\",\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-white 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
|
+
}
|
|
415
|
+
]
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"name": "table",
|
|
419
|
+
"dependencies": [],
|
|
420
|
+
"files": [
|
|
421
|
+
{
|
|
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-neutral-50/70 border-neutral-200\", 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-neutral-50 font-medium [&_tr]:last-child:border-0 border-neutral-200\", 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-neutral-200 transition-colors hover:bg-neutral-50/50 data-[state=selected]:bg-neutral-50\",\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-neutral-500 [&: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
|
+
}
|
|
425
|
+
]
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"name": "tabs",
|
|
429
|
+
"dependencies": [
|
|
430
|
+
"@base-ui/react"
|
|
431
|
+
],
|
|
432
|
+
"files": [
|
|
433
|
+
{
|
|
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-neutral-100 p-1 text-neutral-500\",\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.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n <BaseTabs.Trigger\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-neutral-950 focus-visible:ring-offset-2\",\r\n \"disabled:pointer-events-none disabled:opacity-50\",\r\n \"data-[selected]:bg-white data-[selected]:text-neutral-950 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-neutral-950 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
|
+
}
|
|
437
|
+
]
|
|
438
|
+
},
|
|
439
|
+
{
|
|
440
|
+
"name": "textarea",
|
|
441
|
+
"dependencies": [],
|
|
442
|
+
"files": [
|
|
443
|
+
{
|
|
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-neutral-200 bg-white px-3 py-2 text-sm text-neutral-950 placeholder:text-neutral-400 shadow-2xs transition-all\",\r\n \"focus-visible:outline-hidden focus-visible:border-neutral-900 focus-visible:ring-1 focus-visible:ring-neutral-900\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-neutral-50/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
|
+
}
|
|
447
|
+
]
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
"name": "toast",
|
|
451
|
+
"dependencies": [],
|
|
452
|
+
"files": [
|
|
453
|
+
{
|
|
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-white border-neutral-200 text-neutral-950\",\r\n t.variant === \"destructive\" && \"destructive group border-red-500 bg-red-600 text-white\"\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-neutral-500\" : \"text-white\")}>{t.description}</div>}\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n </ToastContext.Provider>\r\n )\r\n}"
|
|
456
|
+
}
|
|
457
|
+
]
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"name": "toggle-group",
|
|
461
|
+
"dependencies": [
|
|
462
|
+
"@base-ui/react"
|
|
463
|
+
],
|
|
464
|
+
"files": [
|
|
465
|
+
{
|
|
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-neutral-100 hover:text-neutral-500 cursor-pointer select-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-neutral-900 data-[pressed]:text-neutral-50 rounded-none first:rounded-l-md last:rounded-r-md border-r last:border-r-0 border-neutral-200/60 shadow-2xs\",\r\n itemVariant === \"outline\" ? \"border border-neutral-200\" : \"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
|
+
}
|
|
469
|
+
]
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"name": "toggle",
|
|
473
|
+
"dependencies": [
|
|
474
|
+
"@base-ui/react",
|
|
475
|
+
"class-variance-authority"
|
|
476
|
+
],
|
|
477
|
+
"files": [
|
|
478
|
+
{
|
|
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-neutral-100 hover:text-neutral-500 cursor-pointer select-none focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-neutral-900 data-[pressed]:text-neutral-50 shadow-2xs\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-transparent\",\r\n outline: \"border border-neutral-200 bg-transparent hover:bg-neutral-100 hover:text-neutral-900\",\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
|
+
}
|
|
482
|
+
]
|
|
483
|
+
},
|
|
484
|
+
{
|
|
485
|
+
"name": "tooltip",
|
|
486
|
+
"dependencies": [
|
|
487
|
+
"@base-ui/react"
|
|
488
|
+
],
|
|
489
|
+
"files": [
|
|
490
|
+
{
|
|
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>\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-neutral-900 px-3 py-1.5 text-xs text-neutral-50 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
|
+
}
|
|
494
|
+
]
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"name": "typography",
|
|
498
|
+
"dependencies": [],
|
|
499
|
+
"files": [
|
|
500
|
+
{
|
|
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-neutral-950\", 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-neutral-200 pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-neutral-950\", 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-neutral-950\", 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-neutral-500\", 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-neutral-500\", className)} {...props} />\r\n )\r\n)\r\nTypographyMuted.displayName = \"TypographyMuted\"\r\n\r\nexport { TypographyH1, TypographyH2, TypographyH3, TypographyLead, TypographyMuted }"
|
|
503
|
+
}
|
|
504
|
+
]
|
|
505
|
+
}
|
|
506
|
+
]
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@static-ui/registry",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"private": false,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"description": "The raw component source code and structural catalog map for Static UI",
|
|
7
|
+
"main": "./dist/index.json",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": "./dist/index.json"
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"publishConfig": {
|
|
15
|
+
"access": "public"
|
|
16
|
+
},
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "tsx scripts/build-registry.ts",
|
|
19
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
20
|
+
},
|
|
21
|
+
"keywords": [
|
|
22
|
+
"static-ui",
|
|
23
|
+
"components",
|
|
24
|
+
"registry",
|
|
25
|
+
"base-ui"
|
|
26
|
+
],
|
|
27
|
+
"author": "Anshul Shakya",
|
|
28
|
+
"license": "ISC",
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@base-ui/react": "^1.5.0",
|
|
31
|
+
"class-variance-authority": "^0.7.1",
|
|
32
|
+
"react": "^19.2.7"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@types/fs-extra": "^11.0.4",
|
|
36
|
+
"@types/node": "^20.19.41",
|
|
37
|
+
"@types/react": "^19.2.16",
|
|
38
|
+
"fs-extra": "^11.3.5",
|
|
39
|
+
"tsx": "^4.22.4",
|
|
40
|
+
"typescript": "^5.9.3"
|
|
41
|
+
}
|
|
42
|
+
}
|