basuicn 0.2.5 → 0.2.7
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/README.md +96 -96
- package/README_CLI.md +44 -44
- package/dist/assets/index-1YAQdTE0.css +2 -0
- package/dist/assets/index-BsQ6nn74.js +237 -0
- package/dist/favicon.svg +1 -0
- package/dist/icons.svg +24 -0
- package/dist/index.html +13 -0
- package/dist/ui-cli.cjs +1 -1
- package/dist/ui-cli.js +124 -0
- package/package.json +1 -1
- package/registry.json +155 -36
- package/scripts/build-cli.mjs +12 -12
- package/scripts/generate-theme-css.ts +74 -74
- package/scripts/ui-cli.ts +1 -1
package/registry.json
CHANGED
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"files": [
|
|
70
70
|
{
|
|
71
71
|
"path": "src/components/ui/alert-dialog/AlertDialog.tsx",
|
|
72
|
-
"content": "import * as React from 'react';\r\nimport { AlertDialog as BaseAlertDialog } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\n\r\nconst alertDialogVariants = tv({\r\n slots: {\r\n overlay:\r\n 'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-open:animate-in data-close:animate-out data-close:fade-out-0 data-open:fade-in-0',\r\n content:\r\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-open:animate-in data-close:animate-out data-close:fade-out-0 data-open:fade-in-0 data-close:zoom-out-95 data-open:zoom-in-95 sm:rounded-lg',\r\n header: 'flex flex-col space-y-2 text-center sm:text-left',\r\n footer: 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-2',\r\n title: 'text-lg font-semibold leading-none tracking-tight',\r\n description: 'text-sm text-muted-foreground',\r\n },\r\n});\r\n\r\n/* ─── Root ─── */\r\nconst AlertDialog = BaseAlertDialog.Root;\r\n\r\n/* ─── Trigger ─── */\r\nconst AlertDialogTrigger = BaseAlertDialog.Trigger;\r\n\r\n/* ─── Close (wraps BaseAlertDialog.Close for cancel buttons) ─── */\r\nconst AlertDialogClose = BaseAlertDialog.Close;\r\n\r\n/* ─── Content (Portal + Backdrop + Popup) ─── */\r\nconst AlertDialogContent = React.forwardRef<\r\n HTMLDivElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, children, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return (\r\n <BaseAlertDialog.Portal>\r\n <BaseAlertDialog.Backdrop className={slots.overlay()} />\r\n <BaseAlertDialog.Popup ref={ref} className={slots.content({ className })} {...props}>\r\n {children}\r\n </BaseAlertDialog.Popup>\r\n </BaseAlertDialog.Portal>\r\n );\r\n});\r\nAlertDialogContent.displayName = 'AlertDialogContent';\r\n\r\n/* ─── Header ─── */\r\nconst AlertDialogHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return <div ref={ref} className={slots.header({ className })} {...props} />;\r\n});\r\nAlertDialogHeader.displayName = 'AlertDialogHeader';\r\n\r\n/* ─── Footer ─── */\r\nconst AlertDialogFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return <div ref={ref} className={slots.footer({ className })} {...props} />;\r\n});\r\nAlertDialogFooter.displayName = 'AlertDialogFooter';\r\n\r\n/* ─── Title ─── */\r\nconst AlertDialogTitle = React.forwardRef<\r\n HTMLHeadingElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return <BaseAlertDialog.Title ref={ref} className={slots.title({ className })} {...props} />;\r\n});\r\nAlertDialogTitle.displayName = 'AlertDialogTitle';\r\n\r\n/* ─── Description ─── */\r\nconst AlertDialogDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return (\r\n <BaseAlertDialog.Description\r\n ref={ref}\r\n className={slots.description({ className })}\r\n {...props}\r\n />\r\n );\r\n});\r\nAlertDialogDescription.displayName = 'AlertDialogDescription';\r\n\r\nexport {\r\n AlertDialog,\r\n AlertDialogTrigger,\r\n AlertDialogContent,\r\n AlertDialogHeader,\r\n AlertDialogFooter,\r\n AlertDialogTitle,\r\n AlertDialogDescription,\r\n AlertDialogClose,\r\n alertDialogVariants,\r\n};\r\n"
|
|
72
|
+
"content": "import * as React from 'react';\r\nimport { AlertDialog as BaseAlertDialog } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\n\r\nconst alertDialogVariants = tv({\r\n slots: {\r\n overlay:\r\n 'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-open:animate-in data-close:animate-out data-close:fade-out-0 data-open:fade-in-0',\r\n content:\r\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-open:animate-in data-close:animate-out data-close:fade-out-0 data-open:fade-in-0 data-close:zoom-out-95 data-open:zoom-in-95 sm:rounded-lg',\r\n header: 'flex flex-col space-y-2 text-center sm:text-left',\r\n footer: 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-2',\r\n title: 'text-lg font-semibold leading-none tracking-tight',\r\n description: 'text-sm text-muted-foreground',\r\n },\r\n});\r\n\r\n/* ─── Root ─── */\r\nconst AlertDialog = BaseAlertDialog.Root;\r\n\r\n/* ─── Trigger ─── */\r\n// Hỗ trợ cả render={} (Base UI) lẫn children trực tiếp.\r\n// Nếu children là một React element (e.g. <Button>), tự động dùng làm render prop\r\n// để tránh nested button (<button><button>…</button></button>).\r\ntype BaseTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Trigger>;\r\n\r\ninterface AlertDialogTriggerProps extends Omit<BaseTriggerProps, 'render'> {\r\n render?: BaseTriggerProps['render'];\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst AlertDialogTrigger = React.forwardRef<HTMLElement, AlertDialogTriggerProps>(\r\n ({ render: renderProp, children, ...props }, ref) => {\r\n const resolvedRender =\r\n renderProp ?? (React.isValidElement(children) ? children : undefined);\r\n\r\n return (\r\n <BaseAlertDialog.Trigger\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n render={resolvedRender}\r\n {...props}\r\n >\r\n {resolvedRender ? undefined : children}\r\n </BaseAlertDialog.Trigger>\r\n );\r\n },\r\n);\r\nAlertDialogTrigger.displayName = 'AlertDialogTrigger';\r\n\r\n/* ─── Close (wraps BaseAlertDialog.Close for cancel buttons) ─── */\r\nconst AlertDialogClose = BaseAlertDialog.Close;\r\n\r\n/* ─── Content (Portal + Backdrop + Popup) ─── */\r\nconst AlertDialogContent = React.forwardRef<\r\n HTMLDivElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, children, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return (\r\n <BaseAlertDialog.Portal>\r\n <BaseAlertDialog.Backdrop className={slots.overlay()} />\r\n <BaseAlertDialog.Popup ref={ref} className={slots.content({ className })} {...props}>\r\n {children}\r\n </BaseAlertDialog.Popup>\r\n </BaseAlertDialog.Portal>\r\n );\r\n});\r\nAlertDialogContent.displayName = 'AlertDialogContent';\r\n\r\n/* ─── Header ─── */\r\nconst AlertDialogHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return <div ref={ref} className={slots.header({ className })} {...props} />;\r\n});\r\nAlertDialogHeader.displayName = 'AlertDialogHeader';\r\n\r\n/* ─── Footer ─── */\r\nconst AlertDialogFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return <div ref={ref} className={slots.footer({ className })} {...props} />;\r\n});\r\nAlertDialogFooter.displayName = 'AlertDialogFooter';\r\n\r\n/* ─── Title ─── */\r\nconst AlertDialogTitle = React.forwardRef<\r\n HTMLHeadingElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return <BaseAlertDialog.Title ref={ref} className={slots.title({ className })} {...props} />;\r\n});\r\nAlertDialogTitle.displayName = 'AlertDialogTitle';\r\n\r\n/* ─── Description ─── */\r\nconst AlertDialogDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = alertDialogVariants();\r\n return (\r\n <BaseAlertDialog.Description\r\n ref={ref}\r\n className={slots.description({ className })}\r\n {...props}\r\n />\r\n );\r\n});\r\nAlertDialogDescription.displayName = 'AlertDialogDescription';\r\n\r\nexport {\r\n AlertDialog,\r\n AlertDialogTrigger,\r\n AlertDialogContent,\r\n AlertDialogHeader,\r\n AlertDialogFooter,\r\n AlertDialogTitle,\r\n AlertDialogDescription,\r\n AlertDialogClose,\r\n alertDialogVariants,\r\n};\r\n"
|
|
73
73
|
}
|
|
74
74
|
]
|
|
75
75
|
},
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
"files": [
|
|
154
154
|
{
|
|
155
155
|
"path": "src/components/ui/button/Button.tsx",
|
|
156
|
-
"content": "import * as React from 'react';\r\nimport { Button as BaseButton } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { Spinner } from '../spinner/Spinner';\r\n\r\nconst buttonVariants = tv({\r\n base: 'inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-30 disabled:hover:bg-transparent data-open:bg-muted cursor-pointer disabled:cursor-not-allowed',\r\n variants: {\r\n variant: {\r\n // Kraken Primary Purple\r\n solid: 'bg-primary text-primary-foreground hover:bg-primary/80 shadow-[rgba(0,0,0,0.08)_0px_1px_4px]',\r\n // Kraken Purple Outlined — border + text use primary colour\r\n outline: 'border border-primary/40 bg-transparent text-primary hover:bg-primary/5 hover:border-primary/70',\r\n // Kraken Secondary Gray — subtle bg, neutral text\r\n ghost: 'hover:bg-accent hover:text-accent-foreground',\r\n // Kraken Purple Subtle — secondary surface\r\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/70 shadow-[rgba(0,0,0,0.04)_0px_1px_4px]',\r\n danger: 'bg-danger text-danger-foreground hover:bg-danger/80 shadow-[rgba(0,0,0,0.08)_0px_1px_4px]',\r\n link: 'text-primary underline-offset-4 hover:underline h-auto px-0 py-0 font-normal',\r\n // Kính mờ tối — trên nền tối\r\n glass: 'bg-white/15 backdrop-blur-md border border-white/30 text-accent hover:bg-white/25 hover:border-white/50 shadow-[inset_0_1px_0_rgba(255,255,255,0.7),0_4px_20px_rgba(0,0,0,0.2)] transition-all',\r\n // ─── Glossy Bubble Variants ───────────────────────────────────────────────\r\n // Gradient from white highlight (top-left) → tinted color (bottom-right)\r\n // + inset top border = hiệu ứng gương bong bóng xà phòng\r\n 'glass-white': 'bg-gradient-to-br from-white/70 to-slate-100/60 backdrop-blur-md border border-black/5 text-slate-700 hover:from-white/85 hover:to-slate-100/70 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-amber': 'bg-gradient-to-br from-white/70 to-amber-300/40 backdrop-blur-sm border border-amber-100/80 text-amber-700 hover:from-white/85 hover:to-amber-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-green': 'bg-gradient-to-br from-white/70 to-emerald-300/40 backdrop-blur-sm border border-emerald-100/80 text-emerald-700 hover:from-white/85 hover:to-emerald-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-purple': 'bg-gradient-to-br from-white/70 to-violet-300/40 backdrop-blur-sm border border-violet-100/80 text-violet-700 hover:from-white/85 hover:to-violet-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-pink': 'bg-gradient-to-br from-white/70 to-pink-300/40 backdrop-blur-sm border border-pink-100/80 text-pink-700 hover:from-white/85 hover:to-pink-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n },\r\n size: {\r\n sm: 'h-8 px-3 text-xs',\r\n md: 'h-10 px-4 py-2',\r\n lg: 'h-11 px-8',\r\n icon: 'h-10 w-10',\r\n },\r\n },\r\n defaultVariants: {\r\n variant: 'solid',\r\n size: 'md',\r\n },\r\n});\r\n\r\n/** Props for the Button component */\r\nexport interface ButtonProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseButton>, 'className'>,\r\n VariantProps<typeof buttonVariants> {\r\n /** Icon rendered before the button label */\r\n leftIcon?: React.ReactNode;\r\n /** Icon rendered after the button label */\r\n rightIcon?: React.ReactNode;\r\n /** Shows a loading spinner and disables interaction */\r\n isLoading?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Button = React.forwardRef<React.ElementRef<typeof BaseButton>, ButtonProps>(\r\n ({ className, variant, size, leftIcon, rightIcon, isLoading, children, ...props }, ref) => {\r\n return (\r\n <BaseButton\r\n ref={ref}\r\n className={buttonVariants({ variant, size, className: className || '' })}\r\n disabled={isLoading || props.disabled}\r\n {...props}\r\n >\r\n {isLoading && <Spinner size=\"xs\" className=\"mr-2\" />}\r\n {!isLoading && leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\r\n {children}\r\n {!isLoading && rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\r\n </BaseButton>\r\n );\r\n }\r\n);\r\nButton.displayName = 'Button';\r\n\r\nexport { Button };\r\n"
|
|
156
|
+
"content": "import * as React from 'react';\r\nimport { Button as BaseButton } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { Spinner } from '../spinner/Spinner';\r\n\r\nconst buttonVariants = tv({\r\n base: 'inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-30 disabled:hover:bg-transparent data-open:bg-muted cursor-pointer disabled:cursor-not-allowed',\r\n variants: {\r\n variant: {\r\n // Kraken Primary Purple\r\n solid: 'bg-primary text-primary-foreground hover:bg-primary/80 shadow-[rgba(0,0,0,0.08)_0px_1px_4px]',\r\n // Kraken Purple Outlined — border + text use primary colour\r\n outline: 'border border-primary/40 bg-transparent text-primary hover:bg-primary/5 hover:border-primary/70',\r\n // Kraken Secondary Gray — subtle bg, neutral text\r\n ghost: 'hover:bg-accent hover:text-accent-foreground',\r\n // Kraken Purple Subtle — secondary surface\r\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/70 shadow-[rgba(0,0,0,0.04)_0px_1px_4px]',\r\n danger: 'bg-danger text-danger-foreground hover:bg-danger/80 shadow-[rgba(0,0,0,0.08)_0px_1px_4px]',\r\n link: 'text-primary underline-offset-4 hover:underline h-auto px-0 py-0 font-normal',\r\n // Kính mờ tối — trên nền tối\r\n glass: 'bg-white/15 backdrop-blur-md border border-white/30 text-accent hover:bg-white/25 hover:border-white/50 shadow-[inset_0_1px_0_rgba(255,255,255,0.7),0_4px_20px_rgba(0,0,0,0.2)] transition-all',\r\n // ─── Glossy Bubble Variants ───────────────────────────────────────────────\r\n // Gradient from white highlight (top-left) → tinted color (bottom-right)\r\n // + inset top border = hiệu ứng gương bong bóng xà phòng\r\n 'glass-white': 'bg-gradient-to-br from-white/70 to-slate-100/60 backdrop-blur-md border border-black/5 text-slate-700 hover:from-white/85 hover:to-slate-100/70 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-amber': 'bg-gradient-to-br from-white/70 to-amber-300/40 backdrop-blur-sm border border-amber-100/80 text-amber-700 hover:from-white/85 hover:to-amber-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-green': 'bg-gradient-to-br from-white/70 to-emerald-300/40 backdrop-blur-sm border border-emerald-100/80 text-emerald-700 hover:from-white/85 hover:to-emerald-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-purple': 'bg-gradient-to-br from-white/70 to-violet-300/40 backdrop-blur-sm border border-violet-100/80 text-violet-700 hover:from-white/85 hover:to-violet-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n 'glass-pink': 'bg-gradient-to-br from-white/70 to-pink-300/40 backdrop-blur-sm border border-pink-100/80 text-pink-700 hover:from-white/85 hover:to-pink-300/60 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] transition-all',\r\n },\r\n size: {\r\n sm: 'h-8 px-3 text-xs',\r\n md: 'h-10 px-4 py-2',\r\n lg: 'h-11 px-8',\r\n icon: 'h-10 w-10',\r\n 'icon-sm': 'h-8 w-8',\r\n },\r\n },\r\n defaultVariants: {\r\n variant: 'solid',\r\n size: 'md',\r\n },\r\n});\r\n\r\n/** Props for the Button component */\r\nexport interface ButtonProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseButton>, 'className'>,\r\n VariantProps<typeof buttonVariants> {\r\n /** Icon rendered before the button label */\r\n leftIcon?: React.ReactNode;\r\n /** Icon rendered after the button label */\r\n rightIcon?: React.ReactNode;\r\n /** Shows a loading spinner and disables interaction */\r\n isLoading?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Button = React.forwardRef<React.ElementRef<typeof BaseButton>, ButtonProps>(\r\n ({ className, variant, size, leftIcon, rightIcon, isLoading, children, ...props }, ref) => {\r\n return (\r\n <BaseButton\r\n ref={ref}\r\n className={buttonVariants({ variant, size, className: className || '' })}\r\n disabled={isLoading || props.disabled}\r\n {...props}\r\n >\r\n {isLoading && <Spinner size=\"xs\" className=\"mr-2\" />}\r\n {!isLoading && leftIcon && <span className=\"mr-2\">{leftIcon}</span>}\r\n {children}\r\n {!isLoading && rightIcon && <span className=\"ml-2\">{rightIcon}</span>}\r\n </BaseButton>\r\n );\r\n }\r\n);\r\nButton.displayName = 'Button';\r\n\r\nexport { Button };\r\n"
|
|
157
157
|
}
|
|
158
158
|
]
|
|
159
159
|
},
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
"files": [
|
|
168
168
|
{
|
|
169
169
|
"path": "src/components/ui/calendar/Calendar.tsx",
|
|
170
|
-
"content": "'use client';\
|
|
170
|
+
"content": "'use client';\n\nimport * as React from 'react';\nimport { DayPicker, type DateRange, type Matcher } from 'react-day-picker';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport * as locales from 'react-day-picker/locale';\n\nimport 'react-day-picker/dist/style.css';\n\nconst calendarVariants = tv({\n base: 'rdp-custom',\n variants: {\n size: {\n sm: '[&_.rdp-day]:h-7 [&_.rdp-day]:w-7 [&_.rdp-day]:text-xs',\n md: '[&_.rdp-day]:h-9 [&_.rdp-day]:w-9 [&_.rdp-day]:text-sm',\n lg: '[&_.rdp-day]:h-11 [&_.rdp-day]:w-11 [&_.rdp-day]:text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nconst wrapperVariants = tv({\n base: 'inline-block rounded-xl border border-border bg-background p-3 shadow-sm',\n});\n\nexport type CalendarMode = 'single' | 'range' | 'multiple';\n\n/** Props for the Calendar component */\nexport interface CalendarProps extends VariantProps<typeof calendarVariants> {\n /** Selection mode: single date, date range, or multiple dates */\n mode?: CalendarMode;\n /** Currently selected value (Date, DateRange, or Date[] depending on mode) */\n selected?: Date | DateRange | Date[];\n /** Callback fired when the selection changes */\n onSelect?: (value: Date | DateRange | Date[] | undefined) => void;\n /** Disable all dates before today */\n disablePastDates?: boolean;\n /** Disable all dates after today */\n disableFutureDates?: boolean;\n /** Disable the entire calendar */\n disabled?: boolean;\n /** Locale key from react-day-picker/locale (defaults to 'enUS') */\n locale?: keyof typeof locales;\n className?: string;\n /** Additional class name for the outer wrapper */\n wrapperClassName?: string;\n /** Number of months to display side by side */\n numberOfMonths?: number;\n /** Show days from adjacent months */\n showOutsideDays?: boolean;\n}\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(({\n mode = 'single',\n selected,\n onSelect,\n disablePastDates = false,\n disableFutureDates = false,\n disabled = false,\n locale = 'enUS',\n className,\n wrapperClassName,\n size,\n numberOfMonths = 1,\n showOutsideDays = true,\n}, ref) => {\n const getDisabled = (): Matcher | Matcher[] | undefined => {\n if (disabled) return true;\n if (disablePastDates && disableFutureDates) return () => true;\n if (disablePastDates) return { before: new Date() };\n if (disableFutureDates) return { after: new Date() };\n return undefined;\n };\n\n const commonProps = {\n locale: locales[locale as keyof typeof locales],\n disabled: getDisabled(),\n numberOfMonths,\n showOutsideDays,\n className: calendarVariants({ size, className }),\n };\n\n return (\n <div ref={ref} className={wrapperVariants({ className: wrapperClassName })}>\n {mode === 'range' ? (\n <DayPicker\n {...commonProps}\n mode=\"range\"\n selected={selected as DateRange | undefined}\n onSelect={(d) => onSelect?.(d)}\n />\n ) : mode === 'multiple' ? (\n <DayPicker\n {...commonProps}\n mode=\"multiple\"\n selected={selected as Date[] | undefined}\n onSelect={(d) => onSelect?.(d)}\n />\n ) : (\n <DayPicker\n {...commonProps}\n mode=\"single\"\n selected={selected as Date | undefined}\n onSelect={(d) => onSelect?.(d)}\n />\n )}\n </div>\n );\n});\n\nCalendar.displayName = 'Calendar';\n\nexport { Calendar };\n"
|
|
171
171
|
}
|
|
172
172
|
]
|
|
173
173
|
},
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
"files": [
|
|
196
196
|
{
|
|
197
197
|
"path": "src/components/ui/carousel/Carousel.tsx",
|
|
198
|
-
"content": "import * as React from 'react';\r\nimport { useKeenSlider, type KeenSliderOptions, type KeenSliderPlugin, type KeenSliderInstance } from 'keen-slider/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\r\nimport 'keen-slider/keen-slider.min.css';\r\n\r\n// ─── Variants ─────────────────────────────────────────────────────────────────\r\n\r\nconst carouselVariants = tv({\r\n slots: {\r\n root: 'relative w-full select-none',\r\n viewport: 'keen-slider overflow-hidden rounded-xl',\r\n slide: 'keen-slider__slide',\r\n arrow: [\r\n 'absolute top-1/2 -translate-y-1/2 z-10',\r\n 'flex items-center justify-center',\r\n 'h-9 w-9 rounded-full',\r\n 'bg-background/80 backdrop-blur-sm border border-border shadow-md',\r\n 'text-foreground transition-all duration-150',\r\n 'hover:bg-background hover:scale-105',\r\n 'disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:scale-100',\r\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',\r\n ],\r\n dotsWrapper: 'flex justify-center gap-1.5 mt-3',\r\n dot: [\r\n 'h-1.5 rounded-full bg-border transition-all duration-300',\r\n 'hover:bg-muted-foreground cursor-pointer',\r\n ],\r\n },\r\n});\r\n\r\nconst { root, viewport, slide, arrow, dotsWrapper, dot } = carouselVariants();\r\n\r\n// ─── Context ──────────────────────────────────────────────────────────────────\r\n\r\ninterface CarouselContextValue {\r\n instanceRef: React.MutableRefObject<KeenSliderInstance | null>;\r\n currentSlide: number;\r\n slideCount: number;\r\n loop: boolean;\r\n}\r\n\r\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null);\r\n\r\nfunction useCarousel() {\r\n const ctx = React.useContext(CarouselContext);\r\n if (!ctx) throw new Error('useCarousel must be used within <Carousel>');\r\n return ctx;\r\n}\r\n\r\n// ─── AutoPlay plugin ──────────────────────────────────────────────────────────\r\n\r\nexport function AutoPlayPlugin(interval = 3000): KeenSliderPlugin {\r\n return (slider) => {\r\n let timeout: ReturnType<typeof setTimeout>;\r\n let mouseOver = false;\r\n\r\n const clearNext = () => clearTimeout(timeout);\r\n const next = () => {\r\n clearNext();\r\n timeout = setTimeout(() => {\r\n if (!mouseOver) slider.next();\r\n }, interval);\r\n };\r\n\r\n slider.on('created', () => {\r\n slider.container.addEventListener('mouseover', () => { mouseOver = true; clearNext(); });\r\n slider.container.addEventListener('mouseout', () => { mouseOver = false; next(); });\r\n next();\r\n });\r\n slider.on('dragStarted', clearNext);\r\n slider.on('animationEnded', next);\r\n slider.on('updated', next);\r\n slider.on('destroyed', clearNext);\r\n };\r\n}\r\n\r\n// ─── WheelControls plugin ────────────────────────────────────────────────────\r\n\r\nexport const WheelControlsPlugin: KeenSliderPlugin = (slider) => {\r\n let touchTimeout: ReturnType<typeof setTimeout>;\r\n let position = { x: 0, y: 0 };\r\n let wheelActive = false;\r\n\r\n const dispatch = (e: WheelEvent, name: string) => {\r\n position.x -= e.deltaX;\r\n position.y -= e.deltaY;\r\n slider.container.dispatchEvent(new CustomEvent(name, { detail: { x: position.x, y: position.y } }));\r\n };\r\n\r\n const wheelStart = (e: WheelEvent) => {\r\n position = { x: e.pageX, y: e.pageY };\r\n dispatch(e, 'ksDragStart');\r\n };\r\n\r\n const wheel = (e: WheelEvent) => {\r\n dispatch(e, 'ksDrag');\r\n };\r\n\r\n const wheelEnd = (e: WheelEvent) => {\r\n dispatch(e, 'ksDragEnd');\r\n };\r\n\r\n const eventWheel = (e: WheelEvent) => {\r\n if (!wheelActive) {\r\n wheelStart(e);\r\n wheelActive = true;\r\n }\r\n wheel(e);\r\n clearTimeout(touchTimeout);\r\n touchTimeout = setTimeout(() => {\r\n wheelActive = false;\r\n wheelEnd(e);\r\n }, 50);\r\n };\r\n\r\n slider.on('created', () => {\r\n slider.container.addEventListener('wheel', eventWheel, { passive: true });\r\n });\r\n slider.on('destroyed', () => {\r\n slider.container.removeEventListener('wheel', eventWheel);\r\n });\r\n};\r\n\r\n// ─── MutationPlugin ───────────────────────────────────────────────────────────\r\n\r\nexport const MutationPlugin: KeenSliderPlugin = (slider) => {\r\n const observer = new MutationObserver((mutations) => {\r\n mutations.forEach(() => slider.update());\r\n });\r\n slider.on('created', () => {\r\n observer.observe(slider.container, { childList: true });\r\n });\r\n slider.on('destroyed', () => observer.disconnect());\r\n};\r\n\r\n// ─── Carousel3DPlugin ─────────────────────────────────────────────────────────\r\n\r\n/**\r\n * 3-D rotating carousel plugin.\r\n * Wrap the `keen-slider` div inside a perspective scene:\r\n * <div style={{ perspective: '1000px' }}>\r\n * <div ref={sliderRef} style={{ transformStyle: 'preserve-3d' }} …>\r\n * {slides}\r\n * </div>\r\n * </div>\r\n *\r\n * @param depth translateZ radius in px (default 280). For N slides of width W:\r\n * depth ≈ (W / 2) / Math.tan(Math.PI / N)\r\n */\r\nexport function Carousel3DPlugin(depth = 280): KeenSliderPlugin {\r\n return (slider) => {\r\n function applyRotation() {\r\n const deg = 360 * slider.track.details.progress;\r\n slider.container.style.transform = `translateZ(-${depth}px) rotateY(${-deg}deg)`;\r\n }\r\n\r\n slider.on('created', () => {\r\n const perSlide = 360 / slider.slides.length;\r\n slider.slides.forEach((el, i) => {\r\n el.style.transform = `rotateY(${perSlide * i}deg) translateZ(${depth}px)`;\r\n });\r\n applyRotation();\r\n });\r\n\r\n slider.on('detailsChanged', applyRotation);\r\n };\r\n}\r\n\r\n// ─── ResizePlugin ─────────────────────────────────────────────────────────────\r\n\r\nexport const ResizePlugin: KeenSliderPlugin = (slider) => {\r\n const observer = new ResizeObserver(() => slider.update());\r\n slider.on('created', () => observer.observe(slider.container));\r\n slider.on('destroyed', () => observer.disconnect());\r\n};\r\n\r\n// ─── Root ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselProps {\r\n children: React.ReactNode;\r\n /** Loop back to start after last slide */\r\n loop?: boolean;\r\n /** Auto-advance interval in ms; `false` to disable */\r\n autoPlay?: number | false;\r\n /** Initial slide index */\r\n initial?: number;\r\n /** Slides to show per view */\r\n slidesPerView?: number;\r\n /** Gap between slides in px */\r\n spacing?: number;\r\n /** Drag / swipe enabled */\r\n drag?: boolean;\r\n /** Vertical orientation — must also provide `height` */\r\n vertical?: boolean;\r\n /** Explicit height for the viewport (required for vertical mode) e.g. \"320px\" */\r\n height?: string;\r\n /** Scroll mode */\r\n mode?: 'snap' | 'free' | 'free-snap';\r\n /** Enable mouse-wheel navigation */\r\n wheelControls?: boolean;\r\n /** Watch DOM mutations and auto-update */\r\n mutationObserver?: boolean;\r\n /** Breakpoint overrides — keyed by media query string */\r\n breakpoints?: KeenSliderOptions['breakpoints'];\r\n /** Called when the active slide changes */\r\n onSlideChange?: (index: number) => void;\r\n /** Called on every position change — provides progress 0-1 */\r\n onDetailsChanged?: (progress: number, rel: number) => void;\r\n /** Called once the slider is ready */\r\n onCreated?: (instance: CarouselContextValue['instanceRef']['current']) => void;\r\n /** Extra className applied to the inner viewport div */\r\n viewportClassName?: string;\r\n className?: string;\r\n}\r\n\r\nconst Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(\r\n (\r\n {\r\n children,\r\n loop = false,\r\n autoPlay = false,\r\n initial = 0,\r\n slidesPerView = 1,\r\n spacing = 16,\r\n drag = true,\r\n vertical = false,\r\n height,\r\n mode = 'snap',\r\n wheelControls = false,\r\n mutationObserver = false,\r\n breakpoints,\r\n onSlideChange,\r\n onDetailsChanged,\r\n onCreated,\r\n viewportClassName,\r\n className,\r\n },\r\n ref\r\n ) => {\r\n const [currentSlide, setCurrentSlide] = React.useState(initial);\r\n const [slideCount, setSlideCount] = React.useState(0);\r\n\r\n const plugins: KeenSliderPlugin[] = [];\r\n if (autoPlay !== false) plugins.push(AutoPlayPlugin(autoPlay));\r\n if (wheelControls) plugins.push(WheelControlsPlugin);\r\n if (mutationObserver) plugins.push(MutationPlugin);\r\n plugins.push(ResizePlugin);\r\n\r\n const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\r\n {\r\n loop,\r\n initial,\r\n drag,\r\n vertical,\r\n mode,\r\n breakpoints,\r\n slides: { perView: slidesPerView, spacing },\r\n slideChanged(s) {\r\n setCurrentSlide(s.track.details.rel);\r\n onSlideChange?.(s.track.details.rel);\r\n },\r\n detailsChanged(s) {\r\n onDetailsChanged?.(s.track.details.progress, s.track.details.rel);\r\n },\r\n created(s) {\r\n setSlideCount(s.track.details.slides.length);\r\n onCreated?.(s);\r\n },\r\n updated(s) {\r\n setSlideCount(s.track.details.slides.length);\r\n },\r\n },\r\n plugins\r\n );\r\n\r\n // Separate CarouselSlide children from navigation children\r\n const slides: React.ReactNode[] = [];\r\n const navigation: React.ReactNode[] = [];\r\n React.Children.forEach(children, (child) => {\r\n if (React.isValidElement(child) && (child.type as { displayName?: string }).displayName === 'CarouselSlide') {\r\n slides.push(child);\r\n } else {\r\n navigation.push(child);\r\n }\r\n });\r\n\r\n return (\r\n <CarouselContext.Provider value={{ instanceRef, currentSlide, slideCount, loop }}>\r\n <div ref={ref} className={root({ className })} data-testid=\"carousel\">\r\n <div\r\n ref={sliderRef}\r\n className={cn(viewport(), viewportClassName)}\r\n style={height ? { height } : undefined}\r\n >\r\n {slides}\r\n </div>\r\n {navigation}\r\n </div>\r\n </CarouselContext.Provider>\r\n );\r\n }\r\n);\r\nCarousel.displayName = 'Carousel';\r\n\r\n// ─── CarouselSlide ────────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst CarouselSlide = React.forwardRef<HTMLDivElement, CarouselSlideProps>(\r\n ({ className, children, ...props }, ref) => (\r\n <div ref={ref} className={slide({ className })} {...props}>\r\n {children}\r\n </div>\r\n )\r\n);\r\nCarouselSlide.displayName = 'CarouselSlide';\r\n\r\n// ─── CarouselPrev / CarouselNext ──────────────────────────────────────────────\r\n\r\nexport interface CarouselArrowProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n className?: string;\r\n}\r\n\r\nconst CarouselPrev = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\r\n ({ className, ...props }, ref) => {\r\n const { instanceRef, currentSlide, loop } = useCarousel();\r\n const disabled = !loop && currentSlide === 0;\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n aria-label=\"Previous slide\"\r\n disabled={disabled}\r\n onClick={() => instanceRef.current?.prev()}\r\n className={arrow({ className: cn('left-2', className) })}\r\n {...props}\r\n >\r\n <ChevronLeft className=\"h-4 w-4\" />\r\n </button>\r\n );\r\n }\r\n);\r\nCarouselPrev.displayName = 'CarouselPrev';\r\n\r\nconst CarouselNext = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\r\n ({ className, ...props }, ref) => {\r\n const { instanceRef, currentSlide, slideCount, loop } = useCarousel();\r\n const disabled = !loop && currentSlide === slideCount - 1;\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n aria-label=\"Next slide\"\r\n disabled={disabled}\r\n onClick={() => instanceRef.current?.next()}\r\n className={arrow({ className: cn('right-2', className) })}\r\n {...props}\r\n >\r\n <ChevronRight className=\"h-4 w-4\" />\r\n </button>\r\n );\r\n }\r\n);\r\nCarouselNext.displayName = 'CarouselNext';\r\n\r\n// ─── CarouselDots ─────────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselDotsProps extends React.HTMLAttributes<HTMLDivElement> {\r\n className?: string;\r\n}\r\n\r\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\r\n ({ className, ...props }, ref) => {\r\n const { instanceRef, currentSlide, slideCount } = useCarousel();\r\n\r\n if (slideCount === 0) return null;\r\n\r\n return (\r\n <div ref={ref} className={dotsWrapper({ className })} role=\"tablist\" aria-label=\"Carousel navigation\" {...props}>\r\n {Array.from({ length: slideCount }).map((_, i) => (\r\n <button\r\n key={i}\r\n role=\"tab\"\r\n aria-selected={i === currentSlide}\r\n aria-label={`Go to slide ${i + 1}`}\r\n onClick={() => instanceRef.current?.moveToIdx(i)}\r\n className={dot({\r\n className: cn(\r\n i === currentSlide\r\n ? 'w-6 bg-primary'\r\n : 'w-1.5 bg-border hover:bg-muted-foreground'\r\n ),\r\n })}\r\n />\r\n ))}\r\n </div>\r\n );\r\n }\r\n);\r\nCarouselDots.displayName = 'CarouselDots';\r\n\r\n// ─── CarouselProgress ─────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselProgressProps extends React.HTMLAttributes<HTMLDivElement> {\r\n className?: string;\r\n}\r\n\r\nconst CarouselProgress = React.forwardRef<HTMLDivElement, CarouselProgressProps>(\r\n ({ className, ...props }, ref) => {\r\n const { currentSlide, slideCount } = useCarousel();\r\n\r\n const pct = slideCount > 1\r\n ? Math.round((currentSlide / (slideCount - 1)) * 100)\r\n : 100;\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"progressbar\"\r\n aria-valuenow={pct}\r\n aria-valuemin={0}\r\n aria-valuemax={100}\r\n aria-label=\"Carousel progress\"\r\n className={cn('w-full h-1 bg-border rounded-full overflow-hidden mt-3', className)}\r\n {...props}\r\n >\r\n <div\r\n className=\"h-full bg-primary rounded-full transition-all duration-300\"\r\n style={{ width: `${pct}%` }}\r\n />\r\n </div>\r\n );\r\n }\r\n);\r\nCarouselProgress.displayName = 'CarouselProgress';\r\n\r\n// ─── CarouselCounter ──────────────────────────────────────────────────────────\r\n\r\nexport interface CarouselCounterProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n className?: string;\r\n}\r\n\r\nconst CarouselCounter = React.forwardRef<HTMLSpanElement, CarouselCounterProps>(\r\n ({ className, ...props }, ref) => {\r\n const { currentSlide, slideCount } = useCarousel();\r\n\r\n return (\r\n <span\r\n ref={ref}\r\n aria-live=\"polite\"\r\n aria-label=\"Slide counter\"\r\n className={cn('text-xs text-muted-foreground tabular-nums', className)}\r\n {...props}\r\n >\r\n {currentSlide + 1} / {slideCount}\r\n </span>\r\n );\r\n }\r\n);\r\nCarouselCounter.displayName = 'CarouselCounter';\r\n\r\n// ─── Exports ──────────────────────────────────────────────────────────────────\r\n\r\nexport {\r\n Carousel,\r\n CarouselSlide,\r\n CarouselPrev,\r\n CarouselNext,\r\n CarouselDots,\r\n CarouselProgress,\r\n CarouselCounter,\r\n useCarousel,\r\n};\r\n"
|
|
198
|
+
"content": "import * as React from 'react';\nimport { useKeenSlider, type KeenSliderOptions, type KeenSliderPlugin, type KeenSliderInstance } from 'keen-slider/react';\nimport { tv } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport 'keen-slider/keen-slider.min.css';\n\n// ─── Variants ─────────────────────────────────────────────────────────────────\n\nconst carouselVariants = tv({\n slots: {\n root: 'relative w-full select-none',\n viewport: 'keen-slider overflow-hidden rounded-xl',\n slide: 'keen-slider__slide',\n arrow: [\n 'absolute top-1/2 -translate-y-1/2 z-10',\n 'flex items-center justify-center',\n 'h-9 w-9 rounded-full',\n 'bg-background/80 backdrop-blur-sm border border-border shadow-md',\n 'text-foreground transition-all duration-150',\n 'hover:bg-background hover:scale-105',\n 'disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:scale-100',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',\n ],\n dotsWrapper: 'flex justify-center gap-1.5 mt-3',\n dot: [\n 'h-1.5 rounded-full bg-border transition-all duration-300',\n 'hover:bg-muted-foreground cursor-pointer',\n ],\n },\n});\n\nconst { root, viewport, slide, arrow, dotsWrapper, dot } = carouselVariants();\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\ninterface CarouselContextValue {\n instanceRef: React.MutableRefObject<KeenSliderInstance | null>;\n currentSlide: number;\n slideCount: number;\n loop: boolean;\n}\n\nconst CarouselContext = React.createContext<CarouselContextValue | null>(null);\n\nfunction useCarousel() {\n const ctx = React.useContext(CarouselContext);\n if (!ctx) throw new Error('useCarousel must be used within <Carousel>');\n return ctx;\n}\n\n// ─── AutoPlay plugin ──────────────────────────────────────────────────────────\n\nexport function AutoPlayPlugin(interval = 3000): KeenSliderPlugin {\n return (slider) => {\n let timeout: ReturnType<typeof setTimeout>;\n let mouseOver = false;\n\n const clearNext = () => clearTimeout(timeout);\n const next = () => {\n clearNext();\n timeout = setTimeout(() => {\n if (!mouseOver) slider.next();\n }, interval);\n };\n\n slider.on('created', () => {\n slider.container.addEventListener('mouseover', () => { mouseOver = true; clearNext(); });\n slider.container.addEventListener('mouseout', () => { mouseOver = false; next(); });\n next();\n });\n slider.on('dragStarted', clearNext);\n slider.on('animationEnded', next);\n slider.on('updated', next);\n slider.on('destroyed', clearNext);\n };\n}\n\n// ─── WheelControls plugin ────────────────────────────────────────────────────\n\nexport const WheelControlsPlugin: KeenSliderPlugin = (slider) => {\n let touchTimeout: ReturnType<typeof setTimeout>;\n let position = { x: 0, y: 0 };\n let wheelActive = false;\n\n const dispatch = (e: WheelEvent, name: string) => {\n position.x -= e.deltaX;\n position.y -= e.deltaY;\n slider.container.dispatchEvent(new CustomEvent(name, { detail: { x: position.x, y: position.y } }));\n };\n\n const wheelStart = (e: WheelEvent) => {\n position = { x: e.pageX, y: e.pageY };\n dispatch(e, 'ksDragStart');\n };\n\n const wheel = (e: WheelEvent) => {\n dispatch(e, 'ksDrag');\n };\n\n const wheelEnd = (e: WheelEvent) => {\n dispatch(e, 'ksDragEnd');\n };\n\n const eventWheel = (e: WheelEvent) => {\n if (!wheelActive) {\n wheelStart(e);\n wheelActive = true;\n }\n wheel(e);\n clearTimeout(touchTimeout);\n touchTimeout = setTimeout(() => {\n wheelActive = false;\n wheelEnd(e);\n }, 50);\n };\n\n slider.on('created', () => {\n slider.container.addEventListener('wheel', eventWheel, { passive: true });\n });\n slider.on('destroyed', () => {\n slider.container.removeEventListener('wheel', eventWheel);\n });\n};\n\n// ─── MutationPlugin ───────────────────────────────────────────────────────────\n\nexport const MutationPlugin: KeenSliderPlugin = (slider) => {\n const observer = new MutationObserver((mutations) => {\n mutations.forEach(() => slider.update());\n });\n slider.on('created', () => {\n observer.observe(slider.container, { childList: true });\n });\n slider.on('destroyed', () => observer.disconnect());\n};\n\n// ─── Carousel3DPlugin ─────────────────────────────────────────────────────────\n\n/**\n * 3-D rotating carousel plugin.\n * Wrap the `keen-slider` div inside a perspective scene:\n * <div style={{ perspective: '1000px' }}>\n * <div ref={sliderRef} style={{ transformStyle: 'preserve-3d' }} …>\n * {slides}\n * </div>\n * </div>\n *\n * @param depth translateZ radius in px (default 280). For N slides of width W:\n * depth ≈ (W / 2) / Math.tan(Math.PI / N)\n */\nexport function Carousel3DPlugin(depth = 280): KeenSliderPlugin {\n return (slider) => {\n function applyRotation() {\n const deg = 360 * slider.track.details.progress;\n slider.container.style.transform = `translateZ(-${depth}px) rotateY(${-deg}deg)`;\n }\n\n slider.on('created', () => {\n const perSlide = 360 / slider.slides.length;\n slider.slides.forEach((el, i) => {\n el.style.transform = `rotateY(${perSlide * i}deg) translateZ(${depth}px)`;\n });\n applyRotation();\n });\n\n slider.on('detailsChanged', applyRotation);\n };\n}\n\n// ─── ResizePlugin ─────────────────────────────────────────────────────────────\n\nexport const ResizePlugin: KeenSliderPlugin = (slider) => {\n const observer = new ResizeObserver(() => slider.update());\n slider.on('created', () => observer.observe(slider.container));\n slider.on('destroyed', () => observer.disconnect());\n};\n\n// ─── Root ─────────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps {\n children: React.ReactNode;\n /** Loop back to start after last slide */\n loop?: boolean;\n /** Auto-advance interval in ms; `false` to disable */\n autoPlay?: number | false;\n /** Initial slide index */\n initial?: number;\n /** Slides to show per view */\n slidesPerView?: number;\n /** Gap between slides in px */\n spacing?: number;\n /** Drag / swipe enabled */\n drag?: boolean;\n /** Vertical orientation — must also provide `height` */\n vertical?: boolean;\n /** Explicit height for the viewport (required for vertical mode) e.g. \"320px\" */\n height?: string;\n /** Scroll mode */\n mode?: 'snap' | 'free' | 'free-snap';\n /** Enable mouse-wheel navigation */\n wheelControls?: boolean;\n /** Watch DOM mutations and auto-update */\n mutationObserver?: boolean;\n /** Breakpoint overrides — keyed by media query string */\n breakpoints?: KeenSliderOptions['breakpoints'];\n /** Called when the active slide changes */\n onSlideChange?: (index: number) => void;\n /** Called on every position change — provides progress 0-1 */\n onDetailsChanged?: (progress: number, rel: number) => void;\n /** Called once the slider is ready */\n onCreated?: (instance: CarouselContextValue['instanceRef']['current']) => void;\n /** Extra className applied to the inner viewport div */\n viewportClassName?: string;\n className?: string;\n}\n\nconst Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(\n (\n {\n children,\n loop = false,\n autoPlay = false,\n initial = 0,\n slidesPerView = 1,\n spacing = 16,\n drag = true,\n vertical = false,\n height,\n mode = 'snap',\n wheelControls = false,\n mutationObserver = false,\n breakpoints,\n onSlideChange,\n onDetailsChanged,\n onCreated,\n viewportClassName,\n className,\n },\n ref\n ) => {\n const [currentSlide, setCurrentSlide] = React.useState(initial);\n const [slideCount, setSlideCount] = React.useState(0);\n\n const plugins: KeenSliderPlugin[] = [];\n if (autoPlay !== false) plugins.push(AutoPlayPlugin(autoPlay));\n if (wheelControls) plugins.push(WheelControlsPlugin);\n if (mutationObserver) plugins.push(MutationPlugin);\n plugins.push(ResizePlugin);\n\n const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\n {\n loop,\n initial,\n drag,\n vertical,\n mode,\n breakpoints,\n slides: { perView: slidesPerView, spacing },\n slideChanged(s) {\n setCurrentSlide(s.track.details.rel);\n onSlideChange?.(s.track.details.rel);\n },\n detailsChanged(s) {\n onDetailsChanged?.(s.track.details.progress, s.track.details.rel);\n },\n created(s) {\n setSlideCount(s.track.details.slides.length);\n onCreated?.(s);\n },\n updated(s) {\n setSlideCount(s.track.details.slides.length);\n },\n },\n plugins\n );\n\n // Separate CarouselSlide children from navigation children\n const slides: React.ReactNode[] = [];\n const navigation: React.ReactNode[] = [];\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) && (child.type as { displayName?: string }).displayName === 'CarouselSlide') {\n slides.push(child);\n } else {\n navigation.push(child);\n }\n });\n\n return (\n <CarouselContext.Provider value={{ instanceRef, currentSlide, slideCount, loop }}>\n <div ref={ref} className={root({ className })} data-testid=\"carousel\">\n <div\n ref={sliderRef}\n className={cn(viewport(), viewportClassName)}\n style={height ? { height } : undefined}\n >\n {slides}\n </div>\n {navigation}\n </div>\n </CarouselContext.Provider>\n );\n }\n);\nCarousel.displayName = 'Carousel';\n\n// ─── CarouselSlide ────────────────────────────────────────────────────────────\n\nexport interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n children?: React.ReactNode;\n}\n\nconst CarouselSlide = React.forwardRef<HTMLDivElement, CarouselSlideProps>(\n ({ className, children, ...props }, ref) => (\n <div ref={ref} className={slide({ className })} {...props}>\n {children}\n </div>\n )\n);\nCarouselSlide.displayName = 'CarouselSlide';\n\n// ─── CarouselPrev / CarouselNext ──────────────────────────────────────────────\n\nexport interface CarouselArrowProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n className?: string;\n}\n\nconst CarouselPrev = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\n ({ className, ...props }, ref) => {\n const { instanceRef, currentSlide, loop } = useCarousel();\n const disabled = !loop && currentSlide === 0;\n\n return (\n <button\n ref={ref}\n aria-label=\"Previous slide\"\n disabled={disabled}\n onClick={() => instanceRef.current?.prev()}\n className={arrow({ className: cn('left-2', className) })}\n {...props}\n >\n <ChevronLeft className=\"h-4 w-4\" />\n </button>\n );\n }\n);\nCarouselPrev.displayName = 'CarouselPrev';\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, CarouselArrowProps>(\n ({ className, ...props }, ref) => {\n const { instanceRef, currentSlide, slideCount, loop } = useCarousel();\n const disabled = !loop && currentSlide === slideCount - 1;\n\n return (\n <button\n ref={ref}\n aria-label=\"Next slide\"\n disabled={disabled}\n onClick={() => instanceRef.current?.next()}\n className={arrow({ className: cn('right-2', className) })}\n {...props}\n >\n <ChevronRight className=\"h-4 w-4\" />\n </button>\n );\n }\n);\nCarouselNext.displayName = 'CarouselNext';\n\n// ─── CarouselDots ─────────────────────────────────────────────────────────────\n\nexport interface CarouselDotsProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n}\n\nconst CarouselDots = React.forwardRef<HTMLDivElement, CarouselDotsProps>(\n ({ className, ...props }, ref) => {\n const { instanceRef, currentSlide, slideCount } = useCarousel();\n\n if (slideCount === 0) return null;\n\n return (\n <div ref={ref} className={dotsWrapper({ className })} role=\"tablist\" aria-label=\"Carousel navigation\" {...props}>\n {Array.from({ length: slideCount }).map((_, i) => (\n <button\n key={i}\n role=\"tab\"\n aria-selected={i === currentSlide}\n aria-label={`Go to slide ${i + 1}`}\n onClick={() => instanceRef.current?.moveToIdx(i)}\n className={dot({\n className: cn(\n i === currentSlide\n ? 'w-6 bg-primary'\n : 'w-1.5 bg-border hover:bg-muted-foreground'\n ),\n })}\n />\n ))}\n </div>\n );\n }\n);\nCarouselDots.displayName = 'CarouselDots';\n\n// ─── CarouselProgress ─────────────────────────────────────────────────────────\n\nexport interface CarouselProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n}\n\nconst CarouselProgress = React.forwardRef<HTMLDivElement, CarouselProgressProps>(\n ({ className, ...props }, ref) => {\n const { currentSlide, slideCount } = useCarousel();\n\n const pct = slideCount > 1\n ? Math.round((currentSlide / (slideCount - 1)) * 100)\n : 100;\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuenow={pct}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label=\"Carousel progress\"\n className={cn('w-full h-1 bg-border rounded-full overflow-hidden mt-3', className)}\n {...props}\n >\n <div\n className=\"h-full bg-primary rounded-full transition-all duration-300\"\n style={{ width: `${pct}%` }}\n />\n </div>\n );\n }\n);\nCarouselProgress.displayName = 'CarouselProgress';\n\n// ─── CarouselCounter ──────────────────────────────────────────────────────────\n\nexport interface CarouselCounterProps extends React.HTMLAttributes<HTMLSpanElement> {\n className?: string;\n}\n\nconst CarouselCounter = React.forwardRef<HTMLSpanElement, CarouselCounterProps>(\n ({ className, ...props }, ref) => {\n const { currentSlide, slideCount } = useCarousel();\n\n return (\n <span\n ref={ref}\n aria-live=\"polite\"\n aria-label=\"Slide counter\"\n className={cn('text-xs text-muted-foreground tabular-nums', className)}\n {...props}\n >\n {currentSlide + 1} / {slideCount}\n </span>\n );\n }\n);\nCarouselCounter.displayName = 'CarouselCounter';\n\n// ─── Exports ──────────────────────────────────────────────────────────────────\n\nexport {\n Carousel,\n CarouselSlide,\n CarouselPrev,\n CarouselNext,\n CarouselDots,\n CarouselProgress,\n CarouselCounter,\n useCarousel,\n};\n"
|
|
199
199
|
}
|
|
200
200
|
]
|
|
201
201
|
},
|
|
@@ -208,11 +208,11 @@
|
|
|
208
208
|
"files": [
|
|
209
209
|
{
|
|
210
210
|
"path": "src/components/ui/chart/chart-tokens.ts",
|
|
211
|
-
"content": "// ─── Chart design tokens (Kraken palette) ────────────────────────────────────\n\nexport const CHART_COLORS = [\n '#7132f5', '#149e61', '#2563eb', '#f59e0b',\n '#ef4444', '#c4b0ff', '#5741d8', '#1acc72',\n] as const;\n\n/** Axis tick style */\nexport const CHART_AX = { fontSize: 12, fill: '#9497a9' } as const;\n\n/** Cartesian grid style */\nexport const CHART_GRD = { stroke: '#dedee5', strokeDasharray: '4 4' } as const;\n\n// ─── Shared prop types ────────────────────────────────────────────────────────\n\nexport type SeriesItem = {\n key: string;\n name?: string;\n color?: string;\n stackId?: string;\n};\n\nexport type PieDataItem = {\n name: string;\n value: number;\n color?: string;\n};\n\n/** Dữ liệu trả về khi onClick trên các chart\n * - activeLabel : giá trị trục X (category) tại vị trí click\n * - activeIndex : vị trí trong mảng data\n * - dataKey : key của series được click (line/area/bar cụ thể)\n * - payload : toàn bộ row data tại vị trí đó (data[activeIndex])\n */\nexport type ChartClickEvent = {\n activeLabel?: string | number;\n activeIndex?: number;\n dataKey?: string;\n payload?: Record<string, unknown>;\n};\n"
|
|
211
|
+
"content": "// ─── Chart design tokens (Kraken palette) ────────────────────────────────────\r\n\r\nexport const CHART_COLORS = [\r\n '#7132f5', '#149e61', '#2563eb', '#f59e0b',\r\n '#ef4444', '#c4b0ff', '#5741d8', '#1acc72',\r\n] as const;\r\n\r\n/** Axis tick style */\r\nexport const CHART_AX = { fontSize: 12, fill: '#9497a9' } as const;\r\n\r\n/** Cartesian grid style */\r\nexport const CHART_GRD = { stroke: '#dedee5', strokeDasharray: '4 4' } as const;\r\n\r\n// ─── Shared prop types ────────────────────────────────────────────────────────\r\n\r\nexport type SeriesItem = {\r\n key: string;\r\n name?: string;\r\n color?: string;\r\n stackId?: string;\r\n};\r\n\r\nexport type PieDataItem = {\r\n name: string;\r\n value: number;\r\n color?: string;\r\n};\r\n\r\n/** Dữ liệu trả về khi onClick trên các chart\r\n * - activeLabel : giá trị trục X (category) tại vị trí click\r\n * - activeIndex : vị trí trong mảng data\r\n * - dataKey : key của series được click (line/area/bar cụ thể)\r\n * - payload : toàn bộ row data tại vị trí đó (data[activeIndex])\r\n */\r\nexport type ChartClickEvent = {\r\n activeLabel?: string | number;\r\n activeIndex?: number;\r\n dataKey?: string;\r\n payload?: Record<string, unknown>;\r\n};\r\n"
|
|
212
212
|
},
|
|
213
213
|
{
|
|
214
214
|
"path": "src/components/ui/chart/Chart.tsx",
|
|
215
|
-
"content": "import * as React from 'react';\nimport {\n LineChart, Line,\n BarChart, Bar,\n AreaChart, Area,\n PieChart, Pie, Cell,\n RadarChart, Radar, PolarGrid, PolarAngleAxis,\n XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,\n} from 'recharts';\nimport type { TooltipContentProps, TooltipIndex } from 'recharts';\nimport {\n CHART_COLORS, CHART_AX, CHART_GRD,\n} from './chart-tokens';\nimport type { SeriesItem, PieDataItem, ChartClickEvent } from './chart-tokens';\n\n// ─── Helper: tìm row bằng activeLabel (recharts v3 không có activePayload trong onClick) ─\nconst resolveByLabel = (\n data: Record<string, unknown>[],\n labelKey: string,\n activeLabel: string | number | undefined,\n e: React.SyntheticEvent,\n cb: (payload: ChartClickEvent, event: React.MouseEvent) => void,\n) => {\n if (activeLabel == null) return;\n const idx = data.findIndex(d => d[labelKey] === activeLabel);\n if (idx < 0) return;\n cb({ activeLabel, activeIndex: idx, payload: data[idx] }, e as React.MouseEvent);\n};\n\n// ─── Custom Tooltip ───────────────────────────────────────────────────────────\nexport const ChartTooltip = ({ active, payload, label }: TooltipContentProps) => {\n if (!active || !payload?.length) return null;\n return (\n <div className=\"rounded-lg border border-border bg-background p-3 shadow-[rgba(0,0,0,0.1)_0px_4px_20px] text-sm min-w-[150px]\">\n {label != null && (\n <p className=\"mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n {label}\n </p>\n )}\n {payload.map((e) => (\n <div key={String(e.dataKey)} className=\"flex items-center gap-2 py-0.5\">\n <span className=\"h-2 w-2 shrink-0 rounded-full\" style={{ background: e.color }} />\n <span className=\"text-muted-foreground\">{e.name}:</span>\n <span className=\"ml-auto pl-3 font-semibold text-foreground\">\n {typeof e.value === 'number' ? e.value.toLocaleString() : e.value}\n </span>\n </div>\n ))}\n </div>\n );\n};\n\n// ─── ChartLine ────────────────────────────────────────────────────────────────\nexport interface ChartLineProps {\n data: Record<string, unknown>[];\n xKey: string;\n series: SeriesItem[];\n height?: number;\n curved?: boolean;\n defaultIndex?: TooltipIndex;\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\n}\n\nexport const ChartLine: React.FC<ChartLineProps> = ({\n data, xKey, series, height = 280, curved = true, defaultIndex, onClick,\n}) => (\n <ResponsiveContainer width=\"100%\" height={height}>\n <LineChart\n data={data}\n margin={{ top: 4, right: 16, left: 0, bottom: 0 }}\n style={{ cursor: onClick ? 'pointer' : undefined }}\n onClick={onClick\n ? ({ activeLabel }, e) => resolveByLabel(data, xKey, activeLabel, e, onClick)\n : undefined}\n >\n <CartesianGrid {...CHART_GRD} vertical={false} />\n <XAxis dataKey={xKey} tick={CHART_AX} axisLine={false} tickLine={false} />\n <YAxis tick={CHART_AX} axisLine={false} tickLine={false} width={64} />\n <Tooltip content={ChartTooltip} defaultIndex={defaultIndex} />\n <Legend wrapperStyle={{ fontSize: 12 }} />\n {series.map((s, i) => (\n <Line key={s.key} type={curved ? 'monotone' : 'linear'}\n dataKey={s.key} name={s.name ?? s.key}\n stroke={s.color ?? CHART_COLORS[i % CHART_COLORS.length]}\n strokeWidth={2} dot={false}\n activeDot={onClick ? makeActiveDot(xKey, onClick) : { r: 5, strokeWidth: 0 }} />\n ))}\n </LineChart>\n </ResponsiveContainer>\n);\n\n// ─── ChartBar ─────────────────────────────────────────────────────────────────\nexport interface ChartBarProps {\n data: Record<string, unknown>[];\n xKey: string;\n series: SeriesItem[];\n height?: number;\n stacked?: boolean;\n layout?: 'horizontal' | 'vertical';\n defaultIndex?: TooltipIndex;\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\n}\n\nexport const ChartBar: React.FC<ChartBarProps> = ({\n data, xKey, series, height = 280, stacked, layout = 'horizontal', defaultIndex, onClick,\n}) => (\n <ResponsiveContainer width=\"100%\" height={height}>\n <BarChart data={data} layout={layout} margin={{ top: 4, right: 16, left: 0, bottom: 0 }} barCategoryGap=\"35%\">\n {layout === 'horizontal' ? (\n <>\n <XAxis dataKey={xKey} tick={CHART_AX} axisLine={false} tickLine={false} />\n <YAxis tick={CHART_AX} axisLine={false} tickLine={false} width={64} />\n </>\n ) : (\n <>\n <XAxis type=\"number\" tick={CHART_AX} axisLine={false} tickLine={false} />\n <YAxis dataKey={xKey} type=\"category\" tick={CHART_AX} axisLine={false} tickLine={false} width={80} />\n </>\n )}\n <CartesianGrid {...CHART_GRD} vertical={layout === 'vertical'} horizontal={layout === 'horizontal'} />\n <Tooltip content={ChartTooltip} cursor={{ fill: 'rgba(113,50,245,0.05)' }} defaultIndex={defaultIndex} />\n <Legend wrapperStyle={{ fontSize: 12 }} />\n {series.map((s, i) => (\n // Bar.onClick giống Pie.onClick — recharts truyền toàn bộ row data trực tiếp\n <Bar key={s.key} dataKey={s.key} name={s.name ?? s.key}\n fill={s.color ?? CHART_COLORS[i % CHART_COLORS.length]}\n radius={layout === 'horizontal' ? [4, 4, 0, 0] : [0, 4, 4, 0]}\n stackId={stacked ? 'stack' : undefined}\n cursor={onClick ? 'pointer' : undefined}\n onClick={onClick\n ? (barData, index, e) => {\n const row = barData as unknown as Record<string, unknown>;\n onClick({ activeLabel: row[xKey] as string | number, activeIndex: index, dataKey: s.key, payload: row }, e as React.MouseEvent);\n }\n : undefined} />\n ))}\n </BarChart>\n </ResponsiveContainer>\n);\n\n// ─── ChartArea ────────────────────────────────────────────────────────────────\nexport interface ChartAreaProps {\n data: Record<string, unknown>[];\n xKey: string;\n series: SeriesItem[];\n height?: number;\n stacked?: boolean;\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\n}\n\nexport const ChartArea: React.FC<ChartAreaProps> = ({\n data, xKey, series, height = 280, stacked, onClick,\n}) => {\n const uid = React.useId().replace(/:/g, '');\n return (\n <ResponsiveContainer width=\"100%\" height={height}>\n <AreaChart\n data={data}\n margin={{ top: 4, right: 16, left: 0, bottom: 0 }}\n style={{ cursor: onClick ? 'pointer' : undefined }}\n onClick={onClick\n ? ({ activeLabel }, e) => resolveByLabel(data, xKey, activeLabel, e, onClick)\n : undefined}\n >\n <defs>\n {series.map((s, i) => {\n const c = s.color ?? CHART_COLORS[i % CHART_COLORS.length];\n return (\n <linearGradient key={s.key} id={`${uid}${s.key}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"5%\" stopColor={c} stopOpacity={0.2} />\n <stop offset=\"95%\" stopColor={c} stopOpacity={0} />\n </linearGradient>\n );\n })}\n </defs>\n <CartesianGrid {...CHART_GRD} vertical={false} />\n <XAxis dataKey={xKey} tick={CHART_AX} axisLine={false} tickLine={false} />\n <YAxis tick={CHART_AX} axisLine={false} tickLine={false} width={64} />\n <Tooltip content={ChartTooltip} />\n <Legend wrapperStyle={{ fontSize: 12 }} />\n {series.map((s, i) => {\n const c = s.color ?? CHART_COLORS[i % CHART_COLORS.length];\n return (\n <Area key={s.key} type=\"monotone\" dataKey={s.key} name={s.name ?? s.key}\n stroke={c} fill={`url(#${uid}${s.key})`} strokeWidth={2}\n stackId={stacked ? 'stack' : undefined}\n dot={false}\n activeDot={onClick ? makeActiveDot(xKey, onClick) : { r: 5, strokeWidth: 0 }} />\n );\n })}\n </AreaChart>\n </ResponsiveContainer>\n );\n};\n\n// ─── Helper: custom activeDot với onClick cho Line/Area ──────────────────────\ntype ActiveDotRenderProps = {\n cx?: number; cy?: number; r?: number;\n fill?: string; stroke?: string;\n payload?: Record<string, unknown>;\n index?: number;\n dataKey?: string; // key của series được click (vd: 'revenue', 'cost')\n};\n\nconst makeActiveDot = (\n xKey: string,\n onClick: (payload: ChartClickEvent, event: React.MouseEvent) => void,\n) => (dotProps: unknown) => {\n const { cx = 0, cy = 0, fill = '', payload = {}, index = 0, dataKey } = dotProps as ActiveDotRenderProps;\n return (\n <circle\n cx={cx} cy={cy} r={6}\n fill={fill} stroke=\"white\" strokeWidth={2}\n style={{ cursor: 'pointer' }}\n onClick={(e) => {\n e.stopPropagation();\n onClick({ activeLabel: payload[xKey] as string | number, activeIndex: index, dataKey, payload }, e);\n }}\n />\n );\n};\n\n// ─── ChartPie ─────────────────────────────────────────────────────────────────\nexport interface ChartPieProps {\n data: PieDataItem[];\n donut?: boolean;\n height?: number;\n showLabel?: boolean;\n defaultIndex?: TooltipIndex;\n isAnimationActive?: boolean;\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\n}\n\nexport const ChartPie: React.FC<ChartPieProps> = ({\n data, donut = false, height = 300, showLabel = true, defaultIndex, isAnimationActive = true, onClick,\n}) => (\n <ResponsiveContainer width=\"100%\" height={height}>\n <PieChart margin={{ top: 20, right: 30, left: 30, bottom: 20 }}>\n <Pie data={data}\n cx=\"50%\" cy=\"50%\"\n dataKey=\"value\"\n innerRadius={donut ? 50 : 0}\n outerRadius={80}\n isAnimationActive={isAnimationActive}\n onClick={onClick\n ? (d, index, e) => {\n const row = d as unknown as Record<string, unknown>;\n onClick({ activeLabel: row['name'] as string, activeIndex: index, dataKey: 'value', payload: row }, e as React.MouseEvent);\n }\n : undefined}\n label={showLabel ? (props) => {\n const { cx = 0, cy = 0, midAngle = 0, outerRadius = 0, percent = 0, name = '' } = props as {\n cx?: number; cy?: number; midAngle?: number;\n outerRadius?: number; percent?: number; name?: string;\n };\n const RADIAN = Math.PI / 180;\n const radius = outerRadius + 15;\n const x = cx + radius * Math.cos(-midAngle * RADIAN);\n const y = cy + radius * Math.sin(-midAngle * RADIAN);\n const shortName = name.length > 12 ? `${name.substring(0, 12)}...` : name;\n return (\n <text x={x} y={y} fill=\"currentColor\" className=\"text-[11px] text-muted-foreground\" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline=\"central\">\n {shortName} {(percent * 100).toFixed(0)}%\n </text>\n );\n } : false}\n labelLine={showLabel ? { stroke: 'currentColor', className: 'text-border opacity-50' } : false}\n >\n {data.map((entry, i) => (\n <Cell\n key={entry.name}\n fill={entry.color ?? CHART_COLORS[i % CHART_COLORS.length]}\n style={{ cursor: onClick ? 'pointer' : 'default', outline: 'none' }}\n />\n ))}\n </Pie>\n <Tooltip content={ChartTooltip} defaultIndex={defaultIndex} />\n <Legend wrapperStyle={{ fontSize: 11, paddingTop: 10 }} iconType=\"circle\" />\n </PieChart>\n </ResponsiveContainer>\n);\n\n// ─── ChartRadar ───────────────────────────────────────────────────────────────\nexport interface ChartRadarProps {\n data: Record<string, unknown>[];\n angleKey: string;\n series: Array<{ key: string; name?: string; color?: string }>;\n height?: number;\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\n}\n\nexport const ChartRadar: React.FC<ChartRadarProps> = ({\n data, angleKey, series, height = 280, onClick,\n}) => (\n <ResponsiveContainer width=\"100%\" height={height}>\n <RadarChart\n data={data}\n cx=\"50%\" cy=\"50%\" outerRadius=\"72%\"\n style={{ cursor: onClick ? 'pointer' : undefined }}\n onClick={onClick\n ? ({ activeLabel }, e) => resolveByLabel(data, angleKey, activeLabel, e, onClick)\n : undefined}\n >\n <PolarGrid stroke=\"#dedee5\" />\n <PolarAngleAxis dataKey={angleKey} tick={CHART_AX} />\n <Tooltip content={ChartTooltip} />\n <Legend wrapperStyle={{ fontSize: 12 }} iconType=\"circle\" />\n {series.map((s, i) => {\n const c = s.color ?? CHART_COLORS[i % CHART_COLORS.length];\n return (\n <Radar key={s.key} dataKey={s.key} name={s.name ?? s.key}\n stroke={c} fill={c} fillOpacity={0.15} strokeWidth={2} />\n );\n })}\n </RadarChart>\n </ResponsiveContainer>\n);\n\n// ─── Re-export Recharts primitives for composed / custom charts ───────────────\nexport {\n ResponsiveContainer, LineChart, BarChart, AreaChart, PieChart, RadarChart,\n Line, Bar, Area, Pie, Cell, Radar,\n XAxis, YAxis, CartesianGrid, Tooltip, Legend, PolarGrid, PolarAngleAxis,\n} from 'recharts';\nexport type { TooltipProps, TooltipContentProps } from 'recharts';\n\n// ─── Re-export tokens so consumers only need one import path ──────────────────\nexport type { SeriesItem, PieDataItem, ChartClickEvent } from './chart-tokens';\nexport { CHART_COLORS } from './chart-tokens';\n"
|
|
215
|
+
"content": "import * as React from 'react';\r\nimport {\r\n LineChart, Line,\r\n BarChart, Bar,\r\n AreaChart, Area,\r\n PieChart, Pie, Cell,\r\n RadarChart, Radar, PolarGrid, PolarAngleAxis,\r\n XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,\r\n} from 'recharts';\r\nimport type { TooltipContentProps, TooltipIndex } from 'recharts';\r\nimport {\r\n CHART_COLORS, CHART_AX, CHART_GRD,\r\n} from './chart-tokens';\r\nimport type { SeriesItem, PieDataItem, ChartClickEvent } from './chart-tokens';\r\n\r\n// ─── Helper: tìm row bằng activeLabel (recharts v3 không có activePayload trong onClick) ─\r\nconst resolveByLabel = (\r\n data: Record<string, unknown>[],\r\n labelKey: string,\r\n activeLabel: string | number | undefined,\r\n e: React.SyntheticEvent,\r\n cb: (payload: ChartClickEvent, event: React.MouseEvent) => void,\r\n) => {\r\n if (activeLabel == null) return;\r\n const idx = data.findIndex(d => d[labelKey] === activeLabel);\r\n if (idx < 0) return;\r\n cb({ activeLabel, activeIndex: idx, payload: data[idx] }, e as React.MouseEvent);\r\n};\r\n\r\n// ─── Custom Tooltip ───────────────────────────────────────────────────────────\r\nexport const ChartTooltip = ({ active, payload, label }: TooltipContentProps) => {\r\n if (!active || !payload?.length) return null;\r\n return (\r\n <div className=\"rounded-lg border border-border bg-background p-3 shadow-[rgba(0,0,0,0.1)_0px_4px_20px] text-sm min-w-[150px]\">\r\n {label != null && (\r\n <p className=\"mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\r\n {label}\r\n </p>\r\n )}\r\n {payload.map((e) => (\r\n <div key={String(e.dataKey)} className=\"flex items-center gap-2 py-0.5\">\r\n <span className=\"h-2 w-2 shrink-0 rounded-full\" style={{ background: e.color }} />\r\n <span className=\"text-muted-foreground\">{e.name}:</span>\r\n <span className=\"ml-auto pl-3 font-semibold text-foreground\">\r\n {typeof e.value === 'number' ? e.value.toLocaleString() : e.value}\r\n </span>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\n// ─── ChartLine ────────────────────────────────────────────────────────────────\r\nexport interface ChartLineProps {\r\n data: Record<string, unknown>[];\r\n xKey: string;\r\n series: SeriesItem[];\r\n height?: number;\r\n curved?: boolean;\r\n defaultIndex?: TooltipIndex;\r\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\r\n}\r\n\r\nexport const ChartLine: React.FC<ChartLineProps> = ({\r\n data, xKey, series, height = 280, curved = true, defaultIndex, onClick,\r\n}) => (\r\n <ResponsiveContainer width=\"100%\" height={height}>\r\n <LineChart\r\n data={data}\r\n margin={{ top: 4, right: 16, left: 0, bottom: 0 }}\r\n style={{ cursor: onClick ? 'pointer' : undefined }}\r\n onClick={onClick\r\n ? ({ activeLabel }, e) => resolveByLabel(data, xKey, activeLabel, e, onClick)\r\n : undefined}\r\n >\r\n <CartesianGrid {...CHART_GRD} vertical={false} />\r\n <XAxis dataKey={xKey} tick={CHART_AX} axisLine={false} tickLine={false} />\r\n <YAxis tick={CHART_AX} axisLine={false} tickLine={false} width={64} />\r\n <Tooltip content={ChartTooltip} defaultIndex={defaultIndex} />\r\n <Legend wrapperStyle={{ fontSize: 12 }} />\r\n {series.map((s, i) => (\r\n <Line key={s.key} type={curved ? 'monotone' : 'linear'}\r\n dataKey={s.key} name={s.name ?? s.key}\r\n stroke={s.color ?? CHART_COLORS[i % CHART_COLORS.length]}\r\n strokeWidth={2} dot={false}\r\n activeDot={onClick ? makeActiveDot(xKey, onClick) : { r: 5, strokeWidth: 0 }} />\r\n ))}\r\n </LineChart>\r\n </ResponsiveContainer>\r\n);\r\n\r\n// ─── ChartBar ─────────────────────────────────────────────────────────────────\r\nexport interface ChartBarProps {\r\n data: Record<string, unknown>[];\r\n xKey: string;\r\n series: SeriesItem[];\r\n height?: number;\r\n stacked?: boolean;\r\n layout?: 'horizontal' | 'vertical';\r\n defaultIndex?: TooltipIndex;\r\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\r\n}\r\n\r\nexport const ChartBar: React.FC<ChartBarProps> = ({\r\n data, xKey, series, height = 280, stacked, layout = 'horizontal', defaultIndex, onClick,\r\n}) => (\r\n <ResponsiveContainer width=\"100%\" height={height}>\r\n <BarChart data={data} layout={layout} margin={{ top: 4, right: 16, left: 0, bottom: 0 }} barCategoryGap=\"35%\">\r\n {layout === 'horizontal' ? (\r\n <>\r\n <XAxis dataKey={xKey} tick={CHART_AX} axisLine={false} tickLine={false} />\r\n <YAxis tick={CHART_AX} axisLine={false} tickLine={false} width={64} />\r\n </>\r\n ) : (\r\n <>\r\n <XAxis type=\"number\" tick={CHART_AX} axisLine={false} tickLine={false} />\r\n <YAxis dataKey={xKey} type=\"category\" tick={CHART_AX} axisLine={false} tickLine={false} width={80} />\r\n </>\r\n )}\r\n <CartesianGrid {...CHART_GRD} vertical={layout === 'vertical'} horizontal={layout === 'horizontal'} />\r\n <Tooltip content={ChartTooltip} cursor={{ fill: 'rgba(113,50,245,0.05)' }} defaultIndex={defaultIndex} />\r\n <Legend wrapperStyle={{ fontSize: 12 }} />\r\n {series.map((s, i) => (\r\n // Bar.onClick giống Pie.onClick — recharts truyền toàn bộ row data trực tiếp\r\n <Bar key={s.key} dataKey={s.key} name={s.name ?? s.key}\r\n fill={s.color ?? CHART_COLORS[i % CHART_COLORS.length]}\r\n radius={layout === 'horizontal' ? [4, 4, 0, 0] : [0, 4, 4, 0]}\r\n stackId={stacked ? 'stack' : undefined}\r\n cursor={onClick ? 'pointer' : undefined}\r\n onClick={onClick\r\n ? (barData, index, e) => {\r\n const row = barData as unknown as Record<string, unknown>;\r\n onClick({ activeLabel: row[xKey] as string | number, activeIndex: index, dataKey: s.key, payload: row }, e as React.MouseEvent);\r\n }\r\n : undefined} />\r\n ))}\r\n </BarChart>\r\n </ResponsiveContainer>\r\n);\r\n\r\n// ─── ChartArea ────────────────────────────────────────────────────────────────\r\nexport interface ChartAreaProps {\r\n data: Record<string, unknown>[];\r\n xKey: string;\r\n series: SeriesItem[];\r\n height?: number;\r\n stacked?: boolean;\r\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\r\n}\r\n\r\nexport const ChartArea: React.FC<ChartAreaProps> = ({\r\n data, xKey, series, height = 280, stacked, onClick,\r\n}) => {\r\n const uid = React.useId().replace(/:/g, '');\r\n return (\r\n <ResponsiveContainer width=\"100%\" height={height}>\r\n <AreaChart\r\n data={data}\r\n margin={{ top: 4, right: 16, left: 0, bottom: 0 }}\r\n style={{ cursor: onClick ? 'pointer' : undefined }}\r\n onClick={onClick\r\n ? ({ activeLabel }, e) => resolveByLabel(data, xKey, activeLabel, e, onClick)\r\n : undefined}\r\n >\r\n <defs>\r\n {series.map((s, i) => {\r\n const c = s.color ?? CHART_COLORS[i % CHART_COLORS.length];\r\n return (\r\n <linearGradient key={s.key} id={`${uid}${s.key}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"5%\" stopColor={c} stopOpacity={0.2} />\r\n <stop offset=\"95%\" stopColor={c} stopOpacity={0} />\r\n </linearGradient>\r\n );\r\n })}\r\n </defs>\r\n <CartesianGrid {...CHART_GRD} vertical={false} />\r\n <XAxis dataKey={xKey} tick={CHART_AX} axisLine={false} tickLine={false} />\r\n <YAxis tick={CHART_AX} axisLine={false} tickLine={false} width={64} />\r\n <Tooltip content={ChartTooltip} />\r\n <Legend wrapperStyle={{ fontSize: 12 }} />\r\n {series.map((s, i) => {\r\n const c = s.color ?? CHART_COLORS[i % CHART_COLORS.length];\r\n return (\r\n <Area key={s.key} type=\"monotone\" dataKey={s.key} name={s.name ?? s.key}\r\n stroke={c} fill={`url(#${uid}${s.key})`} strokeWidth={2}\r\n stackId={stacked ? 'stack' : undefined}\r\n dot={false}\r\n activeDot={onClick ? makeActiveDot(xKey, onClick) : { r: 5, strokeWidth: 0 }} />\r\n );\r\n })}\r\n </AreaChart>\r\n </ResponsiveContainer>\r\n );\r\n};\r\n\r\n// ─── Helper: custom activeDot với onClick cho Line/Area ──────────────────────\r\ntype ActiveDotRenderProps = {\r\n cx?: number; cy?: number; r?: number;\r\n fill?: string; stroke?: string;\r\n payload?: Record<string, unknown>;\r\n index?: number;\r\n dataKey?: string; // key của series được click (vd: 'revenue', 'cost')\r\n};\r\n\r\nconst makeActiveDot = (\r\n xKey: string,\r\n onClick: (payload: ChartClickEvent, event: React.MouseEvent) => void,\r\n) => (dotProps: unknown) => {\r\n const { cx = 0, cy = 0, fill = '', payload = {}, index = 0, dataKey } = dotProps as ActiveDotRenderProps;\r\n return (\r\n <circle\r\n cx={cx} cy={cy} r={6}\r\n fill={fill} stroke=\"white\" strokeWidth={2}\r\n style={{ cursor: 'pointer' }}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onClick({ activeLabel: payload[xKey] as string | number, activeIndex: index, dataKey, payload }, e);\r\n }}\r\n />\r\n );\r\n};\r\n\r\n// ─── ChartPie ─────────────────────────────────────────────────────────────────\r\nexport interface ChartPieProps {\r\n data: PieDataItem[];\r\n donut?: boolean;\r\n height?: number;\r\n showLabel?: boolean;\r\n defaultIndex?: TooltipIndex;\r\n isAnimationActive?: boolean;\r\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\r\n}\r\n\r\nexport const ChartPie: React.FC<ChartPieProps> = ({\r\n data, donut = false, height = 300, showLabel = true, defaultIndex, isAnimationActive = true, onClick,\r\n}) => (\r\n <ResponsiveContainer width=\"100%\" height={height}>\r\n <PieChart margin={{ top: 20, right: 30, left: 30, bottom: 20 }}>\r\n <Pie data={data}\r\n cx=\"50%\" cy=\"50%\"\r\n dataKey=\"value\"\r\n innerRadius={donut ? 50 : 0}\r\n outerRadius={80}\r\n isAnimationActive={isAnimationActive}\r\n onClick={onClick\r\n ? (d, index, e) => {\r\n const row = d as unknown as Record<string, unknown>;\r\n onClick({ activeLabel: row['name'] as string, activeIndex: index, dataKey: 'value', payload: row }, e as React.MouseEvent);\r\n }\r\n : undefined}\r\n label={showLabel ? (props) => {\r\n const { cx = 0, cy = 0, midAngle = 0, outerRadius = 0, percent = 0, name = '' } = props as {\r\n cx?: number; cy?: number; midAngle?: number;\r\n outerRadius?: number; percent?: number; name?: string;\r\n };\r\n const RADIAN = Math.PI / 180;\r\n const radius = outerRadius + 15;\r\n const x = cx + radius * Math.cos(-midAngle * RADIAN);\r\n const y = cy + radius * Math.sin(-midAngle * RADIAN);\r\n const shortName = name.length > 12 ? `${name.substring(0, 12)}...` : name;\r\n return (\r\n <text x={x} y={y} fill=\"currentColor\" className=\"text-[11px] text-muted-foreground\" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline=\"central\">\r\n {shortName} {(percent * 100).toFixed(0)}%\r\n </text>\r\n );\r\n } : false}\r\n labelLine={showLabel ? { stroke: 'currentColor', className: 'text-border opacity-50' } : false}\r\n >\r\n {data.map((entry, i) => (\r\n <Cell\r\n key={entry.name}\r\n fill={entry.color ?? CHART_COLORS[i % CHART_COLORS.length]}\r\n style={{ cursor: onClick ? 'pointer' : 'default', outline: 'none' }}\r\n />\r\n ))}\r\n </Pie>\r\n <Tooltip content={ChartTooltip} defaultIndex={defaultIndex} />\r\n <Legend wrapperStyle={{ fontSize: 11, paddingTop: 10 }} iconType=\"circle\" />\r\n </PieChart>\r\n </ResponsiveContainer>\r\n);\r\n\r\n// ─── ChartRadar ───────────────────────────────────────────────────────────────\r\nexport interface ChartRadarProps {\r\n data: Record<string, unknown>[];\r\n angleKey: string;\r\n series: Array<{ key: string; name?: string; color?: string }>;\r\n height?: number;\r\n onClick?: (payload: ChartClickEvent, event: React.MouseEvent) => void;\r\n}\r\n\r\nexport const ChartRadar: React.FC<ChartRadarProps> = ({\r\n data, angleKey, series, height = 280, onClick,\r\n}) => (\r\n <ResponsiveContainer width=\"100%\" height={height}>\r\n <RadarChart\r\n data={data}\r\n cx=\"50%\" cy=\"50%\" outerRadius=\"72%\"\r\n style={{ cursor: onClick ? 'pointer' : undefined }}\r\n onClick={onClick\r\n ? ({ activeLabel }, e) => resolveByLabel(data, angleKey, activeLabel, e, onClick)\r\n : undefined}\r\n >\r\n <PolarGrid stroke=\"#dedee5\" />\r\n <PolarAngleAxis dataKey={angleKey} tick={CHART_AX} />\r\n <Tooltip content={ChartTooltip} />\r\n <Legend wrapperStyle={{ fontSize: 12 }} iconType=\"circle\" />\r\n {series.map((s, i) => {\r\n const c = s.color ?? CHART_COLORS[i % CHART_COLORS.length];\r\n return (\r\n <Radar key={s.key} dataKey={s.key} name={s.name ?? s.key}\r\n stroke={c} fill={c} fillOpacity={0.15} strokeWidth={2} />\r\n );\r\n })}\r\n </RadarChart>\r\n </ResponsiveContainer>\r\n);\r\n\r\n// ─── Re-export Recharts primitives for composed / custom charts ───────────────\r\nexport {\r\n ResponsiveContainer, LineChart, BarChart, AreaChart, PieChart, RadarChart,\r\n Line, Bar, Area, Pie, Cell, Radar,\r\n XAxis, YAxis, CartesianGrid, Tooltip, Legend, PolarGrid, PolarAngleAxis,\r\n} from 'recharts';\r\nexport type { TooltipProps, TooltipContentProps } from 'recharts';\r\n\r\n// ─── Re-export tokens so consumers only need one import path ──────────────────\r\nexport type { SeriesItem, PieDataItem, ChartClickEvent } from './chart-tokens';\r\nexport { CHART_COLORS } from './chart-tokens';\r\n"
|
|
216
216
|
}
|
|
217
217
|
]
|
|
218
218
|
},
|
|
@@ -242,19 +242,43 @@
|
|
|
242
242
|
"files": [
|
|
243
243
|
{
|
|
244
244
|
"path": "src/components/ui/code-sandbox/CodeSandbox.tsx",
|
|
245
|
-
"content": "import React, { useState, useEffect } from 'react';\nimport { SandpackProvider } from '@codesandbox/sandpack-react';\nimport { cn } from '@/lib/utils/cn';\nimport { SandboxLayout } from './SandboxLayout';\nimport { SANDBOX_TEMPLATES } from './templates';\nimport type { SandboxTemplate } from './templates';\n\n// ─── Dark mode detection ─────────────────────────────────────\n\nfunction useIsDark() {\n const [isDark, setIsDark] = useState(\n () => document.documentElement.classList.contains('dark'),\n );\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n setIsDark(document.documentElement.classList.contains('dark'));\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class'],\n });\n return () => observer.disconnect();\n }, []);\n\n return isDark;\n}\n\n// ─── Sandpack themes ─────────────────────────────────────────\n\nconst lightTheme = {\n colors: {\n surface1: '#ffffff',\n surface2: '#f8fafc',\n surface3: '#f1f5f9',\n clickable: '#64748b',\n base: '#0f172a',\n disabled: '#94a3b8',\n hover: '#0f172a',\n accent: '#2f27ce',\n error: '#ef4444',\n errorSurface: '#fef2f2',\n },\n syntax: {\n plain: '#0f172a',\n comment: { color: '#94a3b8', fontStyle: 'italic' as const },\n keyword: '#7c3aed',\n tag: '#2563eb',\n punctuation: '#64748b',\n definition: '#059669',\n property: '#0891b2',\n static: '#c2410c',\n string: '#16a34a',\n },\n font: {\n body: 'Inter, system-ui, sans-serif',\n mono: '\"Fira Code\", Consolas, \"Courier New\", monospace',\n size: '13px',\n lineHeight: '20px',\n },\n};\n\nconst darkTheme = {\n colors: {\n surface1: '#0f172a',\n surface2: '#1e293b',\n surface3: '#334155',\n clickable: '#94a3b8',\n base: '#e2e8f0',\n disabled: '#475569',\n hover: '#f8fafc',\n accent: '#6366f1',\n error: '#ef4444',\n errorSurface: '#450a0a',\n },\n syntax: {\n plain: '#e2e8f0',\n comment: { color: '#64748b', fontStyle: 'italic' as const },\n keyword: '#c084fc',\n tag: '#60a5fa',\n punctuation: '#94a3b8',\n definition: '#34d399',\n property: '#22d3ee',\n static: '#fb923c',\n string: '#4ade80',\n },\n font: {\n body: 'Inter, system-ui, sans-serif',\n mono: '\"Fira Code\", Consolas, \"Courier New\", monospace',\n size: '13px',\n lineHeight: '20px',\n },\n};\n\n// ─── Props ───────────────────────────────────────────────────\n\nexport interface CodeSandboxProps {\n /** Starting template id */\n defaultTemplate?: string;\n /** Custom initial files (overrides template) */\n files?: Record<string, string>;\n /** Extra dependencies */\n dependencies?: Record<string, string>;\n /** Container className */\n className?: string;\n}\n\n// ─── Component ───────────────────────────────────────────────\n\nexport function CodeSandbox({\n defaultTemplate = 'react-ts',\n files: customFiles,\n dependencies: extraDeps,\n className,\n}: CodeSandboxProps) {\n const isDark = useIsDark();\n const [templateId, setTemplateId] = useState(defaultTemplate);\n\n const template: SandboxTemplate =\n SANDBOX_TEMPLATES.find((t) => t.id === templateId) ??\n SANDBOX_TEMPLATES[0];\n\n const files = customFiles ?? template.files;\n const deps = {\n ...template.dependencies,\n ...extraDeps,\n };\n\n return (\n <div className={cn('h-full w-full', className)}>\n <SandpackProvider\n key={templateId}\n template={template.template}\n theme={isDark ? darkTheme : lightTheme}\n files={files}\n customSetup={{\n dependencies: {\n react: '^18.0.0',\n 'react-dom': '^18.0.0',\n 'react-scripts': '^5.0.0',\n ...deps,\n },\n }}\n options={{\n recompileMode: 'delayed',\n recompileDelay: 400,\n classes: {\n 'sp-wrapper': 'h-full w-full',\n },\n }}\n >\n <SandboxLayout\n templateId={templateId}\n onTemplateChange={setTemplateId}\n className=\"h-full w-full\"\n />\n </SandpackProvider>\n </div>\n );\n}\n"
|
|
245
|
+
"content": "import React, { useState, useEffect } from 'react';\r\nimport { SandpackProvider } from '@codesandbox/sandpack-react';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { SandboxLayout } from './SandboxLayout';\r\nimport { SANDBOX_TEMPLATES } from './templates';\r\nimport type { SandboxTemplate } from './templates';\r\n\r\n// ─── Dark mode detection ─────────────────────────────────────\r\n\r\nfunction useIsDark() {\r\n const [isDark, setIsDark] = useState(\r\n () => document.documentElement.classList.contains('dark'),\r\n );\r\n\r\n useEffect(() => {\r\n const observer = new MutationObserver(() => {\r\n setIsDark(document.documentElement.classList.contains('dark'));\r\n });\r\n observer.observe(document.documentElement, {\r\n attributes: true,\r\n attributeFilter: ['class'],\r\n });\r\n return () => observer.disconnect();\r\n }, []);\r\n\r\n return isDark;\r\n}\r\n\r\n// ─── Sandpack themes ─────────────────────────────────────────\r\n\r\nconst lightTheme = {\r\n colors: {\r\n surface1: '#ffffff',\r\n surface2: '#f8fafc',\r\n surface3: '#f1f5f9',\r\n clickable: '#64748b',\r\n base: '#0f172a',\r\n disabled: '#94a3b8',\r\n hover: '#0f172a',\r\n accent: '#2f27ce',\r\n error: '#ef4444',\r\n errorSurface: '#fef2f2',\r\n },\r\n syntax: {\r\n plain: '#0f172a',\r\n comment: { color: '#94a3b8', fontStyle: 'italic' as const },\r\n keyword: '#7c3aed',\r\n tag: '#2563eb',\r\n punctuation: '#64748b',\r\n definition: '#059669',\r\n property: '#0891b2',\r\n static: '#c2410c',\r\n string: '#16a34a',\r\n },\r\n font: {\r\n body: 'Inter, system-ui, sans-serif',\r\n mono: '\"Fira Code\", Consolas, \"Courier New\", monospace',\r\n size: '13px',\r\n lineHeight: '20px',\r\n },\r\n};\r\n\r\nconst darkTheme = {\r\n colors: {\r\n surface1: '#0f172a',\r\n surface2: '#1e293b',\r\n surface3: '#334155',\r\n clickable: '#94a3b8',\r\n base: '#e2e8f0',\r\n disabled: '#475569',\r\n hover: '#f8fafc',\r\n accent: '#6366f1',\r\n error: '#ef4444',\r\n errorSurface: '#450a0a',\r\n },\r\n syntax: {\r\n plain: '#e2e8f0',\r\n comment: { color: '#64748b', fontStyle: 'italic' as const },\r\n keyword: '#c084fc',\r\n tag: '#60a5fa',\r\n punctuation: '#94a3b8',\r\n definition: '#34d399',\r\n property: '#22d3ee',\r\n static: '#fb923c',\r\n string: '#4ade80',\r\n },\r\n font: {\r\n body: 'Inter, system-ui, sans-serif',\r\n mono: '\"Fira Code\", Consolas, \"Courier New\", monospace',\r\n size: '13px',\r\n lineHeight: '20px',\r\n },\r\n};\r\n\r\n// ─── Props ───────────────────────────────────────────────────\r\n\r\nexport interface CodeSandboxProps {\r\n /** Starting template id */\r\n defaultTemplate?: string;\r\n /** Custom initial files (overrides template) */\r\n files?: Record<string, string>;\r\n /** Extra dependencies */\r\n dependencies?: Record<string, string>;\r\n /** Container className */\r\n className?: string;\r\n}\r\n\r\n// ─── Component ───────────────────────────────────────────────\r\n\r\nexport function CodeSandbox({\r\n defaultTemplate = 'react-ts',\r\n files: customFiles,\r\n dependencies: extraDeps,\r\n className,\r\n}: CodeSandboxProps) {\r\n const isDark = useIsDark();\r\n const [templateId, setTemplateId] = useState(defaultTemplate);\r\n\r\n const template: SandboxTemplate =\r\n SANDBOX_TEMPLATES.find((t) => t.id === templateId) ??\r\n SANDBOX_TEMPLATES[0];\r\n\r\n const files = customFiles ?? template.files;\r\n const deps = {\r\n ...template.dependencies,\r\n ...extraDeps,\r\n };\r\n\r\n return (\r\n <div className={cn('h-full w-full', className)}>\r\n <SandpackProvider\r\n key={templateId}\r\n template={template.template}\r\n theme={isDark ? darkTheme : lightTheme}\r\n files={files}\r\n customSetup={{\r\n dependencies: {\r\n react: '^18.0.0',\r\n 'react-dom': '^18.0.0',\r\n 'react-scripts': '^5.0.0',\r\n ...deps,\r\n },\r\n }}\r\n options={{\r\n recompileMode: 'delayed',\r\n recompileDelay: 400,\r\n classes: {\r\n 'sp-wrapper': 'h-full w-full',\r\n },\r\n }}\r\n >\r\n <SandboxLayout\r\n templateId={templateId}\r\n onTemplateChange={setTemplateId}\r\n className=\"h-full w-full\"\r\n />\r\n </SandpackProvider>\r\n </div>\r\n );\r\n}\r\n"
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"path": "src/components/ui/code-sandbox/DependencyPanel.tsx",
|
|
249
|
+
"content": "import React, { useState } from 'react';\r\nimport { useSandpack } from '@codesandbox/sandpack-react';\r\nimport { Package, Plus, X } from 'lucide-react';\r\n\r\nconst POPULAR_PACKAGES = [\r\n 'axios',\r\n 'framer-motion',\r\n 'zustand',\r\n 'react-router-dom',\r\n 'date-fns',\r\n 'clsx',\r\n 'zod',\r\n 'react-hook-form',\r\n 'swr',\r\n 'lodash',\r\n];\r\n\r\nexport function DependencyPanel() {\r\n const { sandpack } = useSandpack();\r\n const [newDep, setNewDep] = useState('');\r\n\r\n let deps: Record<string, string> = {};\r\n try {\r\n const pkg = JSON.parse(\r\n sandpack.files['/package.json']?.code || '{}',\r\n );\r\n deps = pkg.dependencies || {};\r\n } catch {\r\n /* ignore parse error */\r\n }\r\n\r\n const addDep = (name: string) => {\r\n if (!name.trim() || deps[name]) return;\r\n try {\r\n const pkg = JSON.parse(\r\n sandpack.files['/package.json']?.code || '{}',\r\n );\r\n pkg.dependencies = { ...pkg.dependencies, [name.trim()]: 'latest' };\r\n sandpack.updateFile(\r\n '/package.json',\r\n JSON.stringify(pkg, null, 2),\r\n );\r\n setNewDep('');\r\n } catch {\r\n /* ignore */\r\n }\r\n };\r\n\r\n const removeDep = (name: string) => {\r\n if (['react', 'react-dom', 'react-scripts'].includes(name)) return;\r\n try {\r\n const pkg = JSON.parse(\r\n sandpack.files['/package.json']?.code || '{}',\r\n );\r\n const { [name]: _, ...rest } = pkg.dependencies || {};\r\n pkg.dependencies = rest;\r\n sandpack.updateFile(\r\n '/package.json',\r\n JSON.stringify(pkg, null, 2),\r\n );\r\n } catch {\r\n /* ignore */\r\n }\r\n };\r\n\r\n const available = POPULAR_PACKAGES.filter((p) => !deps[p]);\r\n\r\n return (\r\n <div className=\"flex flex-col h-full text-foreground\">\r\n <div className=\"px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0\">\r\n Dependencies\r\n </div>\r\n\r\n <form\r\n onSubmit={(e) => {\r\n e.preventDefault();\r\n addDep(newDep);\r\n }}\r\n className=\"flex gap-1 px-3 pb-2\"\r\n >\r\n <input\r\n value={newDep}\r\n onChange={(e) => setNewDep(e.target.value)}\r\n placeholder=\"Package name...\"\r\n className=\"flex-1 min-w-0 bg-muted border border-border text-foreground text-[13px] px-2 py-1.5 rounded outline-none focus:border-primary transition-colors\"\r\n />\r\n <button\r\n type=\"submit\"\r\n className=\"px-2 py-1.5 bg-primary text-primary-foreground rounded text-xs font-medium hover:bg-primary/90 transition-colors shrink-0\"\r\n >\r\n <Plus className=\"w-3.5 h-3.5\" />\r\n </button>\r\n </form>\r\n\r\n {available.length > 0 && (\r\n <div className=\"px-3 pb-3\">\r\n <div className=\"text-[10px] text-muted-foreground mb-1.5\">\r\n Quick add:\r\n </div>\r\n <div className=\"flex flex-wrap gap-1\">\r\n {available.slice(0, 5).map((p) => (\r\n <button\r\n key={p}\r\n onClick={() => addDep(p)}\r\n className=\"text-[10px] px-1.5 py-0.5 bg-muted hover:bg-accent rounded border border-border transition-colors\"\r\n >\r\n + {p}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n\r\n <div className=\"flex-1 overflow-y-auto border-t border-border\">\r\n <div className=\"px-3 py-1.5 text-[10px] text-muted-foreground\">\r\n Installed ({Object.keys(deps).length})\r\n </div>\r\n {Object.entries(deps).map(([name, version]) => (\r\n <div\r\n key={name}\r\n className=\"flex items-center justify-between px-3 py-1.5 hover:bg-muted/50 text-[13px] group\"\r\n >\r\n <div className=\"flex items-center gap-1.5 truncate min-w-0\">\r\n <Package className=\"w-3 h-3 text-muted-foreground shrink-0\" />\r\n <span className=\"truncate\">{name}</span>\r\n <span className=\"text-[10px] text-muted-foreground shrink-0\">\r\n {version as string}\r\n </span>\r\n </div>\r\n {!['react', 'react-dom', 'react-scripts'].includes(name) && (\r\n <button\r\n onClick={() => removeDep(name)}\r\n className=\"opacity-0 group-hover:opacity-100 p-0.5 hover:text-danger transition-opacity shrink-0\"\r\n >\r\n <X className=\"w-3 h-3\" />\r\n </button>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n}\r\n"
|
|
246
250
|
},
|
|
247
251
|
{
|
|
248
252
|
"path": "src/components/ui/code-sandbox/FileTree.tsx",
|
|
249
|
-
"content": "import React, { useState, useMemo } from 'react';\nimport { useSandpack } from '@codesandbox/sandpack-react';\nimport {\n ChevronRight,\n ChevronDown,\n FilePlus,\n FolderPlus,\n Trash2,\n Folder,\n} from 'lucide-react';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Tree data structure ─────────────────────────────────────\n\ninterface TreeNode {\n name: string;\n path: string;\n type: 'file' | 'folder';\n children?: TreeNode[];\n}\n\nfunction buildFileTree(paths: string[]): TreeNode[] {\n const root: TreeNode[] = [];\n\n for (const filePath of paths) {\n const parts = filePath.split('/').filter(Boolean);\n let level = root;\n let currentPath = '';\n\n for (let i = 0; i < parts.length; i++) {\n currentPath += '/' + parts[i];\n const isLast = i === parts.length - 1;\n\n if (isLast) {\n level.push({ name: parts[i], path: currentPath, type: 'file' });\n } else {\n let folder = level.find(\n (n) => n.type === 'folder' && n.name === parts[i],\n );\n if (!folder) {\n folder = {\n name: parts[i],\n path: currentPath,\n type: 'folder',\n children: [],\n };\n level.push(folder);\n }\n level = folder.children!;\n }\n }\n }\n\n function sortNodes(nodes: TreeNode[]): TreeNode[] {\n return nodes\n .sort((a, b) => {\n if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;\n return a.name.localeCompare(b.name);\n })\n .map((n) => {\n if (n.children) n.children = sortNodes(n.children);\n return n;\n });\n }\n\n return sortNodes(root);\n}\n\n// ─── File icon by extension ──────────────────────────────────\n\nfunction getFileIcon(name: string): { label: string; color: string } {\n const ext = name.split('.').pop()?.toLowerCase();\n switch (ext) {\n case 'js':\n case 'mjs':\n return { label: 'JS', color: '#f7df1e' };\n case 'jsx':\n return { label: 'JSX', color: '#61dafb' };\n case 'ts':\n return { label: 'TS', color: '#3178c6' };\n case 'tsx':\n return { label: 'TSX', color: '#3178c6' };\n case 'css':\n case 'scss':\n return { label: '#', color: '#264de4' };\n case 'html':\n return { label: '<>', color: '#e34f26' };\n case 'json':\n return { label: '{ }', color: '#5b5b5b' };\n case 'md':\n return { label: 'M', color: '#083fa1' };\n case 'svg':\n return { label: 'SVG', color: '#ffb13b' };\n default:\n return { label: '\\u00B7', color: '#6b7280' };\n }\n}\n\n// ─── Single tree node ────────────────────────────────────────\n\nfunction TreeItem({\n node,\n depth,\n activeFile,\n openFile,\n deleteFile,\n expanded,\n toggleFolder,\n}: {\n node: TreeNode;\n depth: number;\n activeFile: string;\n openFile: (p: string) => void;\n deleteFile: (p: string) => void;\n expanded: Set<string>;\n toggleFolder: (p: string) => void;\n}) {\n const pl = 12 + depth * 16;\n\n if (node.type === 'folder') {\n const isOpen = expanded.has(node.path);\n return (\n <>\n <div\n className=\"flex items-center py-1 px-2 cursor-pointer hover:bg-muted/50 text-[13px] group\"\n style={{ paddingLeft: pl }}\n onClick={() => toggleFolder(node.path)}\n >\n {isOpen ? (\n <ChevronDown className=\"w-3.5 h-3.5 mr-1 shrink-0 text-muted-foreground\" />\n ) : (\n <ChevronRight className=\"w-3.5 h-3.5 mr-1 shrink-0 text-muted-foreground\" />\n )}\n <Folder className=\"w-3.5 h-3.5 mr-1.5 shrink-0 text-amber-500\" />\n <span className=\"truncate\">{node.name}</span>\n </div>\n {isOpen &&\n node.children?.map((child) => (\n <TreeItem\n key={child.path}\n node={child}\n depth={depth + 1}\n activeFile={activeFile}\n openFile={openFile}\n deleteFile={deleteFile}\n expanded={expanded}\n toggleFolder={toggleFolder}\n />\n ))}\n </>\n );\n }\n\n const icon = getFileIcon(node.name);\n const isActive = node.path === activeFile;\n\n return (\n <div\n className={cn(\n 'flex items-center py-1 px-2 cursor-pointer text-[13px] group',\n isActive\n ? 'bg-primary/10 text-primary font-medium'\n : 'hover:bg-muted/50',\n )}\n style={{ paddingLeft: pl }}\n onClick={() => openFile(node.path)}\n >\n <span\n className=\"w-5 mr-1.5 shrink-0 text-[9px] font-bold text-center leading-none\"\n style={{ color: icon.color }}\n >\n {icon.label}\n </span>\n <span className=\"truncate flex-1\">{node.name}</span>\n <button\n className=\"opacity-0 group-hover:opacity-100 p-0.5 hover:text-danger shrink-0 transition-opacity\"\n onClick={(e) => {\n e.stopPropagation();\n deleteFile(node.path);\n }}\n >\n <Trash2 className=\"w-3 h-3\" />\n </button>\n </div>\n );\n}\n\n// ─── File Tree ───────────────────────────────────────────────\n\nexport function FileTree() {\n const { sandpack } = useSandpack();\n const { files, activeFile, openFile, addFile, deleteFile } = sandpack;\n\n const [expanded, setExpanded] = useState<Set<string>>(\n () =>\n new Set([\n '/',\n '/src',\n '/components',\n '/examples',\n '/public',\n ]),\n );\n const [creating, setCreating] = useState<'file' | 'folder' | null>(null);\n const [newName, setNewName] = useState('');\n\n const filePaths = Object.keys(files).filter((p) => !p.endsWith('.gitkeep'));\n const tree = useMemo(() => buildFileTree(filePaths), [filePaths]);\n\n const toggleFolder = (path: string) => {\n setExpanded((prev) => {\n const next = new Set(prev);\n if (next.has(path)) next.delete(path);\n else next.add(path);\n return next;\n });\n };\n\n const handleCreate = (e: React.FormEvent) => {\n e.preventDefault();\n if (!newName.trim()) return;\n const path = newName.startsWith('/') ? newName : '/' + newName;\n if (creating === 'file') {\n addFile(path, '');\n openFile(path);\n } else {\n addFile(`${path}/.gitkeep`, '');\n setExpanded((prev) => new Set([...prev, path]));\n }\n setNewName('');\n setCreating(null);\n };\n\n return (\n <div className=\"flex flex-col h-full text-foreground select-none\">\n {/* Header */}\n <div className=\"flex items-center justify-between px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0 group\">\n <span>Explorer</span>\n <div className=\"flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity\">\n <button\n onClick={() => setCreating('file')}\n className=\"p-1 hover:bg-muted rounded\"\n title=\"New File\"\n >\n <FilePlus className=\"w-3.5 h-3.5\" />\n </button>\n <button\n onClick={() => setCreating('folder')}\n className=\"p-1 hover:bg-muted rounded\"\n title=\"New Folder\"\n >\n <FolderPlus className=\"w-3.5 h-3.5\" />\n </button>\n </div>\n </div>\n\n {/* Create input */}\n {creating && (\n <form onSubmit={handleCreate} className=\"px-3 pb-2\">\n <input\n autoFocus\n type=\"text\"\n placeholder={\n creating === 'file'\n ? '/src/NewFile.tsx'\n : '/src/newfolder'\n }\n className=\"w-full bg-muted border border-primary text-foreground text-[13px] px-2 py-1 rounded outline-none font-mono\"\n value={newName}\n onChange={(e) => setNewName(e.target.value)}\n onBlur={() => setCreating(null)}\n />\n </form>\n )}\n\n {/* Tree */}\n <div className=\"flex-1 overflow-y-auto\">\n {tree.map((node) => (\n <TreeItem\n key={node.path}\n node={node}\n depth={0}\n activeFile={activeFile}\n openFile={openFile}\n deleteFile={deleteFile}\n expanded={expanded}\n toggleFolder={toggleFolder}\n />\n ))}\n </div>\n </div>\n );\n}\n"
|
|
253
|
+
"content": "import React, { useState, useMemo } from 'react';\r\nimport { useSandpack } from '@codesandbox/sandpack-react';\r\nimport {\r\n ChevronRight,\r\n ChevronDown,\r\n FilePlus,\r\n FolderPlus,\r\n Trash2,\r\n Folder,\r\n} from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\n// ─── Tree data structure ─────────────────────────────────────\r\n\r\ninterface TreeNode {\r\n name: string;\r\n path: string;\r\n type: 'file' | 'folder';\r\n children?: TreeNode[];\r\n}\r\n\r\nfunction buildFileTree(paths: string[]): TreeNode[] {\r\n const root: TreeNode[] = [];\r\n\r\n for (const filePath of paths) {\r\n const parts = filePath.split('/').filter(Boolean);\r\n let level = root;\r\n let currentPath = '';\r\n\r\n for (let i = 0; i < parts.length; i++) {\r\n currentPath += '/' + parts[i];\r\n const isLast = i === parts.length - 1;\r\n\r\n if (isLast) {\r\n level.push({ name: parts[i], path: currentPath, type: 'file' });\r\n } else {\r\n let folder = level.find(\r\n (n) => n.type === 'folder' && n.name === parts[i],\r\n );\r\n if (!folder) {\r\n folder = {\r\n name: parts[i],\r\n path: currentPath,\r\n type: 'folder',\r\n children: [],\r\n };\r\n level.push(folder);\r\n }\r\n level = folder.children!;\r\n }\r\n }\r\n }\r\n\r\n function sortNodes(nodes: TreeNode[]): TreeNode[] {\r\n return nodes\r\n .sort((a, b) => {\r\n if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;\r\n return a.name.localeCompare(b.name);\r\n })\r\n .map((n) => {\r\n if (n.children) n.children = sortNodes(n.children);\r\n return n;\r\n });\r\n }\r\n\r\n return sortNodes(root);\r\n}\r\n\r\n// ─── File icon by extension ──────────────────────────────────\r\n\r\nfunction getFileIcon(name: string): { label: string; color: string } {\r\n const ext = name.split('.').pop()?.toLowerCase();\r\n switch (ext) {\r\n case 'js':\r\n case 'mjs':\r\n return { label: 'JS', color: '#f7df1e' };\r\n case 'jsx':\r\n return { label: 'JSX', color: '#61dafb' };\r\n case 'ts':\r\n return { label: 'TS', color: '#3178c6' };\r\n case 'tsx':\r\n return { label: 'TSX', color: '#3178c6' };\r\n case 'css':\r\n case 'scss':\r\n return { label: '#', color: '#264de4' };\r\n case 'html':\r\n return { label: '<>', color: '#e34f26' };\r\n case 'json':\r\n return { label: '{ }', color: '#5b5b5b' };\r\n case 'md':\r\n return { label: 'M', color: '#083fa1' };\r\n case 'svg':\r\n return { label: 'SVG', color: '#ffb13b' };\r\n default:\r\n return { label: '\\u00B7', color: '#6b7280' };\r\n }\r\n}\r\n\r\n// ─── Single tree node ────────────────────────────────────────\r\n\r\nfunction TreeItem({\r\n node,\r\n depth,\r\n activeFile,\r\n openFile,\r\n deleteFile,\r\n expanded,\r\n toggleFolder,\r\n}: {\r\n node: TreeNode;\r\n depth: number;\r\n activeFile: string;\r\n openFile: (p: string) => void;\r\n deleteFile: (p: string) => void;\r\n expanded: Set<string>;\r\n toggleFolder: (p: string) => void;\r\n}) {\r\n const pl = 12 + depth * 16;\r\n\r\n if (node.type === 'folder') {\r\n const isOpen = expanded.has(node.path);\r\n return (\r\n <>\r\n <div\r\n className=\"flex items-center py-1 px-2 cursor-pointer hover:bg-muted/50 text-[13px] group\"\r\n style={{ paddingLeft: pl }}\r\n onClick={() => toggleFolder(node.path)}\r\n >\r\n {isOpen ? (\r\n <ChevronDown className=\"w-3.5 h-3.5 mr-1 shrink-0 text-muted-foreground\" />\r\n ) : (\r\n <ChevronRight className=\"w-3.5 h-3.5 mr-1 shrink-0 text-muted-foreground\" />\r\n )}\r\n <Folder className=\"w-3.5 h-3.5 mr-1.5 shrink-0 text-amber-500\" />\r\n <span className=\"truncate\">{node.name}</span>\r\n </div>\r\n {isOpen &&\r\n node.children?.map((child) => (\r\n <TreeItem\r\n key={child.path}\r\n node={child}\r\n depth={depth + 1}\r\n activeFile={activeFile}\r\n openFile={openFile}\r\n deleteFile={deleteFile}\r\n expanded={expanded}\r\n toggleFolder={toggleFolder}\r\n />\r\n ))}\r\n </>\r\n );\r\n }\r\n\r\n const icon = getFileIcon(node.name);\r\n const isActive = node.path === activeFile;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n 'flex items-center py-1 px-2 cursor-pointer text-[13px] group',\r\n isActive\r\n ? 'bg-primary/10 text-primary font-medium'\r\n : 'hover:bg-muted/50',\r\n )}\r\n style={{ paddingLeft: pl }}\r\n onClick={() => openFile(node.path)}\r\n >\r\n <span\r\n className=\"w-5 mr-1.5 shrink-0 text-[9px] font-bold text-center leading-none\"\r\n style={{ color: icon.color }}\r\n >\r\n {icon.label}\r\n </span>\r\n <span className=\"truncate flex-1\">{node.name}</span>\r\n <button\r\n className=\"opacity-0 group-hover:opacity-100 p-0.5 hover:text-danger shrink-0 transition-opacity\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n deleteFile(node.path);\r\n }}\r\n >\r\n <Trash2 className=\"w-3 h-3\" />\r\n </button>\r\n </div>\r\n );\r\n}\r\n\r\n// ─── File Tree ───────────────────────────────────────────────\r\n\r\nexport function FileTree() {\r\n const { sandpack } = useSandpack();\r\n const { files, activeFile, openFile, addFile, deleteFile } = sandpack;\r\n\r\n const [expanded, setExpanded] = useState<Set<string>>(\r\n () =>\r\n new Set([\r\n '/',\r\n '/src',\r\n '/components',\r\n '/examples',\r\n '/public',\r\n ]),\r\n );\r\n const [creating, setCreating] = useState<'file' | 'folder' | null>(null);\r\n const [newName, setNewName] = useState('');\r\n\r\n const filePaths = Object.keys(files).filter((p) => !p.endsWith('.gitkeep'));\r\n const tree = useMemo(() => buildFileTree(filePaths), [filePaths]);\r\n\r\n const toggleFolder = (path: string) => {\r\n setExpanded((prev) => {\r\n const next = new Set(prev);\r\n if (next.has(path)) next.delete(path);\r\n else next.add(path);\r\n return next;\r\n });\r\n };\r\n\r\n const handleCreate = (e: React.FormEvent) => {\r\n e.preventDefault();\r\n if (!newName.trim()) return;\r\n const path = newName.startsWith('/') ? newName : '/' + newName;\r\n if (creating === 'file') {\r\n addFile(path, '');\r\n openFile(path);\r\n } else {\r\n addFile(`${path}/.gitkeep`, '');\r\n setExpanded((prev) => new Set([...prev, path]));\r\n }\r\n setNewName('');\r\n setCreating(null);\r\n };\r\n\r\n return (\r\n <div className=\"flex flex-col h-full text-foreground select-none\">\r\n {/* Header */}\r\n <div className=\"flex items-center justify-between px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0 group\">\r\n <span>Explorer</span>\r\n <div className=\"flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity\">\r\n <button\r\n onClick={() => setCreating('file')}\r\n className=\"p-1 hover:bg-muted rounded\"\r\n title=\"New File\"\r\n >\r\n <FilePlus className=\"w-3.5 h-3.5\" />\r\n </button>\r\n <button\r\n onClick={() => setCreating('folder')}\r\n className=\"p-1 hover:bg-muted rounded\"\r\n title=\"New Folder\"\r\n >\r\n <FolderPlus className=\"w-3.5 h-3.5\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n {/* Create input */}\r\n {creating && (\r\n <form onSubmit={handleCreate} className=\"px-3 pb-2\">\r\n <input\r\n autoFocus\r\n type=\"text\"\r\n placeholder={\r\n creating === 'file'\r\n ? '/src/NewFile.tsx'\r\n : '/src/newfolder'\r\n }\r\n className=\"w-full bg-muted border border-primary text-foreground text-[13px] px-2 py-1 rounded outline-none font-mono\"\r\n value={newName}\r\n onChange={(e) => setNewName(e.target.value)}\r\n onBlur={() => setCreating(null)}\r\n />\r\n </form>\r\n )}\r\n\r\n {/* Tree */}\r\n <div className=\"flex-1 overflow-y-auto\">\r\n {tree.map((node) => (\r\n <TreeItem\r\n key={node.path}\r\n node={node}\r\n depth={0}\r\n activeFile={activeFile}\r\n openFile={openFile}\r\n deleteFile={deleteFile}\r\n expanded={expanded}\r\n toggleFolder={toggleFolder}\r\n />\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n}\r\n"
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"path": "src/components/ui/code-sandbox/SandboxActivityBar.tsx",
|
|
257
|
+
"content": "import React from 'react';\r\nimport { Files, Search, Package, Settings } from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nexport type SidebarTab = 'explorer' | 'search' | 'dependencies';\r\n\r\ninterface ActivityBarProps {\r\n activeTab: SidebarTab | null;\r\n onTabChange: (tab: SidebarTab | null) => void;\r\n}\r\n\r\nconst tabs: { id: SidebarTab; icon: React.ReactNode; label: string }[] = [\r\n { id: 'explorer', icon: <Files className=\"w-[18px] h-[18px]\" />, label: 'Explorer' },\r\n { id: 'search', icon: <Search className=\"w-[18px] h-[18px]\" />, label: 'Search' },\r\n { id: 'dependencies', icon: <Package className=\"w-[18px] h-[18px]\" />, label: 'Dependencies' },\r\n];\r\n\r\nexport function SandboxActivityBar({ activeTab, onTabChange }: ActivityBarProps) {\r\n return (\r\n <div className=\"w-11 bg-muted/30 border-r border-border flex flex-col items-center py-1.5 shrink-0\">\r\n {tabs.map((tab) => (\r\n <button\r\n key={tab.id}\r\n onClick={() => onTabChange(activeTab === tab.id ? null : tab.id)}\r\n className={cn(\r\n 'relative w-full h-9 flex items-center justify-center transition-colors',\r\n activeTab === tab.id\r\n ? 'text-foreground'\r\n : 'text-muted-foreground hover:text-foreground',\r\n )}\r\n title={tab.label}\r\n >\r\n {activeTab === tab.id && (\r\n <span className=\"absolute left-0 top-[20%] bottom-[20%] w-0.5 bg-primary rounded-r\" />\r\n )}\r\n {tab.icon}\r\n </button>\r\n ))}\r\n <div className=\"flex-1\" />\r\n <button\r\n className=\"w-full h-9 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors\"\r\n title=\"Settings\"\r\n >\r\n <Settings className=\"w-[18px] h-[18px]\" />\r\n </button>\r\n </div>\r\n );\r\n}\r\n"
|
|
250
258
|
},
|
|
251
259
|
{
|
|
252
260
|
"path": "src/components/ui/code-sandbox/SandboxLayout.tsx",
|
|
253
|
-
"content": "import React, { useState, useMemo } from 'react';\nimport {\n SandpackCodeEditor,\n SandpackPreview,\n SandpackConsole,\n useSandpack,\n} from '@codesandbox/sandpack-react';\nimport { Group, Panel, Separator } from 'react-resizable-panels';\nimport {\n Files,\n Search,\n Package,\n Settings,\n ChevronDown,\n Plus,\n X,\n} from 'lucide-react';\nimport { cn } from '@/lib/utils/cn';\nimport { FileTree } from './FileTree';\nimport { SANDBOX_TEMPLATES } from './templates';\n\n// ─── Types ───────────────────────────────────────────────────\n\ntype SidebarTab = 'explorer' | 'search' | 'dependencies';\ntype TerminalTab = 'console' | 'problems';\n\nexport interface SandboxLayoutProps {\n templateId: string;\n onTemplateChange: (id: string) => void;\n className?: string;\n}\n\n// ─── Search Panel ────────────────────────────────────────────\n\nfunction SearchPanel() {\n const { sandpack } = useSandpack();\n const [query, setQuery] = useState('');\n\n const results = useMemo(() => {\n if (!query.trim()) return [];\n const q = query.toLowerCase();\n const matches: { path: string; line: number; text: string }[] = [];\n for (const [path, file] of Object.entries(sandpack.files)) {\n file.code.split('\\n').forEach((line, i) => {\n if (line.toLowerCase().includes(q)) {\n matches.push({ path, line: i + 1, text: line.trim() });\n }\n });\n }\n return matches.slice(0, 100);\n }, [query, sandpack.files]);\n\n return (\n <div className=\"flex flex-col h-full text-foreground\">\n <div className=\"px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0\">\n Search\n </div>\n <div className=\"px-3 pb-2\">\n <input\n value={query}\n onChange={(e) => setQuery(e.target.value)}\n placeholder=\"Search in files...\"\n className=\"w-full bg-muted border border-border text-foreground text-[13px] px-2 py-1.5 rounded outline-none focus:border-primary transition-colors\"\n />\n </div>\n <div className=\"flex-1 overflow-y-auto\">\n {results.length > 0 && (\n <div className=\"px-3 pb-1 text-[10px] text-muted-foreground\">\n {results.length} result{results.length !== 1 ? 's' : ''}\n </div>\n )}\n {results.map((r, i) => (\n <div\n key={`${r.path}:${r.line}:${i}`}\n className=\"px-3 py-1.5 cursor-pointer hover:bg-muted/50 text-xs border-b border-border/30\"\n onClick={() => sandpack.openFile(r.path)}\n >\n <div className=\"font-medium truncate\">\n {r.path.split('/').pop()}\n <span className=\"text-muted-foreground ml-1 font-normal\">\n {r.path}\n </span>\n </div>\n <div className=\"text-muted-foreground truncate font-mono\">\n <span className=\"text-primary mr-1\">{r.line}:</span>\n {r.text}\n </div>\n </div>\n ))}\n {query && results.length === 0 && (\n <div className=\"px-3 py-6 text-xs text-muted-foreground text-center\">\n No results found\n </div>\n )}\n </div>\n </div>\n );\n}\n\n// ─── Dependency Panel ────────────────────────────────────────\n\nconst POPULAR_PACKAGES = [\n 'axios',\n 'framer-motion',\n 'zustand',\n 'react-router-dom',\n 'date-fns',\n 'clsx',\n 'zod',\n 'react-hook-form',\n 'swr',\n 'lodash',\n];\n\nfunction DependencyPanel() {\n const { sandpack } = useSandpack();\n const [newDep, setNewDep] = useState('');\n\n let deps: Record<string, string> = {};\n try {\n const pkg = JSON.parse(\n sandpack.files['/package.json']?.code || '{}',\n );\n deps = pkg.dependencies || {};\n } catch {\n /* ignore parse error */\n }\n\n const addDep = (name: string) => {\n if (!name.trim() || deps[name]) return;\n try {\n const pkg = JSON.parse(\n sandpack.files['/package.json']?.code || '{}',\n );\n pkg.dependencies = { ...pkg.dependencies, [name.trim()]: 'latest' };\n sandpack.updateFile(\n '/package.json',\n JSON.stringify(pkg, null, 2),\n );\n setNewDep('');\n } catch {\n /* ignore */\n }\n };\n\n const removeDep = (name: string) => {\n if (['react', 'react-dom', 'react-scripts'].includes(name)) return;\n try {\n const pkg = JSON.parse(\n sandpack.files['/package.json']?.code || '{}',\n );\n const { [name]: _, ...rest } = pkg.dependencies || {};\n pkg.dependencies = rest;\n sandpack.updateFile(\n '/package.json',\n JSON.stringify(pkg, null, 2),\n );\n } catch {\n /* ignore */\n }\n };\n\n const available = POPULAR_PACKAGES.filter((p) => !deps[p]);\n\n return (\n <div className=\"flex flex-col h-full text-foreground\">\n <div className=\"px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0\">\n Dependencies\n </div>\n\n {/* Add input */}\n <form\n onSubmit={(e) => {\n e.preventDefault();\n addDep(newDep);\n }}\n className=\"flex gap-1 px-3 pb-2\"\n >\n <input\n value={newDep}\n onChange={(e) => setNewDep(e.target.value)}\n placeholder=\"Package name...\"\n className=\"flex-1 min-w-0 bg-muted border border-border text-foreground text-[13px] px-2 py-1.5 rounded outline-none focus:border-primary transition-colors\"\n />\n <button\n type=\"submit\"\n className=\"px-2 py-1.5 bg-primary text-primary-foreground rounded text-xs font-medium hover:bg-primary/90 transition-colors shrink-0\"\n >\n <Plus className=\"w-3.5 h-3.5\" />\n </button>\n </form>\n\n {/* Quick add */}\n {available.length > 0 && (\n <div className=\"px-3 pb-3\">\n <div className=\"text-[10px] text-muted-foreground mb-1.5\">\n Quick add:\n </div>\n <div className=\"flex flex-wrap gap-1\">\n {available.slice(0, 5).map((p) => (\n <button\n key={p}\n onClick={() => addDep(p)}\n className=\"text-[10px] px-1.5 py-0.5 bg-muted hover:bg-accent rounded border border-border transition-colors\"\n >\n + {p}\n </button>\n ))}\n </div>\n </div>\n )}\n\n {/* Installed list */}\n <div className=\"flex-1 overflow-y-auto border-t border-border\">\n <div className=\"px-3 py-1.5 text-[10px] text-muted-foreground\">\n Installed ({Object.keys(deps).length})\n </div>\n {Object.entries(deps).map(([name, version]) => (\n <div\n key={name}\n className=\"flex items-center justify-between px-3 py-1.5 hover:bg-muted/50 text-[13px] group\"\n >\n <div className=\"flex items-center gap-1.5 truncate min-w-0\">\n <Package className=\"w-3 h-3 text-muted-foreground shrink-0\" />\n <span className=\"truncate\">{name}</span>\n <span className=\"text-[10px] text-muted-foreground shrink-0\">\n {version as string}\n </span>\n </div>\n {!['react', 'react-dom', 'react-scripts'].includes(name) && (\n <button\n onClick={() => removeDep(name)}\n className=\"opacity-0 group-hover:opacity-100 p-0.5 hover:text-danger transition-opacity shrink-0\"\n >\n <X className=\"w-3 h-3\" />\n </button>\n )}\n </div>\n ))}\n </div>\n </div>\n );\n}\n\n// ─── Activity Bar ────────────────────────────────────────────\n\nfunction ActivityBar({\n activeTab,\n onTabChange,\n}: {\n activeTab: SidebarTab | null;\n onTabChange: (tab: SidebarTab | null) => void;\n}) {\n const tabs: { id: SidebarTab; icon: React.ReactNode; label: string }[] = [\n {\n id: 'explorer',\n icon: <Files className=\"w-[18px] h-[18px]\" />,\n label: 'Explorer',\n },\n {\n id: 'search',\n icon: <Search className=\"w-[18px] h-[18px]\" />,\n label: 'Search',\n },\n {\n id: 'dependencies',\n icon: <Package className=\"w-[18px] h-[18px]\" />,\n label: 'Dependencies',\n },\n ];\n\n return (\n <div className=\"w-11 bg-muted/30 border-r border-border flex flex-col items-center py-1.5 shrink-0\">\n {tabs.map((tab) => (\n <button\n key={tab.id}\n onClick={() =>\n onTabChange(activeTab === tab.id ? null : tab.id)\n }\n className={cn(\n 'relative w-full h-9 flex items-center justify-center transition-colors',\n activeTab === tab.id\n ? 'text-foreground'\n : 'text-muted-foreground hover:text-foreground',\n )}\n title={tab.label}\n >\n {activeTab === tab.id && (\n <span className=\"absolute left-0 top-[20%] bottom-[20%] w-0.5 bg-primary rounded-r\" />\n )}\n {tab.icon}\n </button>\n ))}\n <div className=\"flex-1\" />\n <button\n className=\"w-full h-9 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors\"\n title=\"Settings\"\n >\n <Settings className=\"w-[18px] h-[18px]\" />\n </button>\n </div>\n );\n}\n\n// ─── Terminal Pane ───────────────────────────────────────────\n\nfunction TerminalPane() {\n const { sandpack } = useSandpack();\n const [tab, setTab] = useState<TerminalTab>('console');\n\n return (\n <div className=\"flex flex-col h-full bg-background\">\n {/* Tab bar */}\n <div className=\"h-7 shrink-0 bg-muted/30 border-t border-b border-border flex items-center px-3 gap-3 text-[10px] font-semibold tracking-wider\">\n {(['console', 'problems'] as TerminalTab[]).map((t) => (\n <button\n key={t}\n onClick={() => setTab(t)}\n className={cn(\n 'uppercase transition-colors pb-0.5 -mb-px border-b',\n tab === t\n ? 'text-primary border-primary'\n : 'text-muted-foreground border-transparent hover:text-foreground',\n )}\n >\n {t}\n {t === 'problems' && sandpack.error && (\n <span className=\"ml-1 text-danger font-bold\">1</span>\n )}\n </button>\n ))}\n </div>\n\n {/* Content */}\n <div className=\"flex-1 overflow-auto min-h-0\">\n {tab === 'console' && (\n <SandpackConsole\n standalone\n style={{ height: '100%' }}\n />\n )}\n {tab === 'problems' && (\n <div className=\"p-3 text-xs\">\n {sandpack.error ? (\n <div className=\"text-danger font-mono whitespace-pre-wrap break-words\">\n {sandpack.error.message}\n </div>\n ) : (\n <div className=\"text-muted-foreground text-center py-4\">\n No problems detected\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n}\n\n// ─── Status Bar ──────────────────────────────────────────────\n\nfunction StatusBar() {\n const { sandpack } = useSandpack();\n const fileName = sandpack.activeFile?.split('/').pop() || '';\n const ext = fileName.split('.').pop()?.toUpperCase() || '';\n\n return (\n <div className=\"h-6 bg-primary text-primary-foreground flex items-center px-3 text-[10px] font-medium shrink-0 gap-3\">\n {/* Status */}\n <span className=\"flex items-center gap-1.5\">\n <span\n className={cn(\n 'w-1.5 h-1.5 rounded-full',\n sandpack.status === 'running'\n ? 'bg-green-400'\n : sandpack.status === 'idle'\n ? 'bg-yellow-400'\n : 'bg-white/50',\n )}\n />\n {sandpack.status === 'running'\n ? 'Running'\n : sandpack.status === 'idle'\n ? 'Ready'\n : 'Loading'}\n </span>\n\n {sandpack.error && (\n <span className=\"bg-white/20 px-1.5 py-0.5 rounded text-[9px]\">\n 1 Error\n </span>\n )}\n\n <div className=\"flex-1\" />\n\n <span className=\"opacity-75\">{fileName}</span>\n <span className=\"opacity-75\">UTF-8</span>\n {ext && <span className=\"opacity-75\">{ext}</span>}\n </div>\n );\n}\n\n// ─── Toolbar ─────────────────────────────────────────────────\n\nfunction Toolbar({\n templateId,\n onTemplateChange,\n}: {\n templateId: string;\n onTemplateChange: (id: string) => void;\n}) {\n const [open, setOpen] = useState(false);\n const current = SANDBOX_TEMPLATES.find((t) => t.id === templateId);\n\n return (\n <div className=\"h-10 bg-muted/30 border-b border-border flex items-center px-3 shrink-0 gap-3\">\n {/* Template picker */}\n <div className=\"relative\">\n <button\n onClick={() => setOpen(!open)}\n className=\"flex items-center gap-2 bg-background border border-border px-2.5 py-1.5 rounded-md hover:bg-muted transition-colors text-sm\"\n >\n <span>{current?.icon}</span>\n <span className=\"font-medium text-foreground\">\n {current?.label}\n </span>\n <ChevronDown className=\"w-3.5 h-3.5 text-muted-foreground\" />\n </button>\n\n {open && (\n <>\n <div\n className=\"fixed inset-0 z-40\"\n onClick={() => setOpen(false)}\n />\n <div className=\"absolute top-full left-0 mt-1 bg-background border border-border rounded-lg shadow-xl z-50 min-w-[260px] py-1 animate-in fade-in slide-in-from-top-2 duration-200\">\n {SANDBOX_TEMPLATES.map((t) => (\n <button\n key={t.id}\n onClick={() => {\n onTemplateChange(t.id);\n setOpen(false);\n }}\n className={cn(\n 'w-full text-left px-3 py-2.5 hover:bg-muted flex items-center gap-3 transition-colors',\n t.id === templateId && 'bg-primary/5',\n )}\n >\n <span className=\"text-lg shrink-0\">{t.icon}</span>\n <div className=\"min-w-0\">\n <div className=\"text-sm font-medium text-foreground\">\n {t.label}\n </div>\n <div className=\"text-xs text-muted-foreground\">\n {t.description}\n </div>\n </div>\n </button>\n ))}\n </div>\n </>\n )}\n </div>\n\n <div className=\"flex-1\" />\n\n {/* Project badge */}\n <div className=\"text-xs text-muted-foreground bg-muted px-2.5 py-1 rounded hidden sm:block\">\n react-playground\n </div>\n </div>\n );\n}\n\n// ─── Resize Handle ───────────────────────────────────────────\n\nfunction ResizeHandle({ horizontal }: { horizontal?: boolean }) {\n return (\n <Separator\n className={cn(\n 'transition-colors shrink-0',\n horizontal\n ? 'h-[3px] hover:bg-primary/40 cursor-row-resize bg-border/60'\n : 'w-[3px] hover:bg-primary/40 cursor-col-resize bg-border/60',\n )}\n />\n );\n}\n\n// ─── Main Layout ─────────────────────────────────────────────\n\nexport function SandboxLayout({\n templateId,\n onTemplateChange,\n className,\n}: SandboxLayoutProps) {\n const [sidebarTab, setSidebarTab] = useState<SidebarTab | null>(\n 'explorer',\n );\n\n return (\n <div\n className={cn(\n 'flex flex-col h-full w-full bg-background text-foreground overflow-hidden',\n className,\n )}\n >\n <Toolbar\n templateId={templateId}\n onTemplateChange={onTemplateChange}\n />\n\n <div className=\"flex flex-1 min-h-0\">\n {/* Activity bar */}\n <ActivityBar activeTab={sidebarTab} onTabChange={setSidebarTab} />\n\n {/* Sidebar panel (fixed width, toggleable) */}\n {sidebarTab && (\n <div className=\"w-56 border-r border-border shrink-0 overflow-hidden bg-background\">\n {sidebarTab === 'explorer' && <FileTree />}\n {sidebarTab === 'search' && <SearchPanel />}\n {sidebarTab === 'dependencies' && <DependencyPanel />}\n </div>\n )}\n\n {/* Resizable main area: Editor + Preview */}\n <Group orientation=\"horizontal\" className=\"h-full flex-1 min-w-0\">\n {/* Editor + Terminal column */}\n <Panel defaultSize={55} minSize={25}>\n <Group orientation=\"vertical\">\n {/* Code editor */}\n <Panel defaultSize={70} minSize={20}>\n <SandpackCodeEditor\n showTabs\n showLineNumbers\n showInlineErrors\n wrapContent\n closableTabs\n style={{ height: '100%' }}\n />\n </Panel>\n\n <ResizeHandle horizontal />\n\n {/* Terminal */}\n <Panel defaultSize={30} minSize={8}>\n <TerminalPane />\n </Panel>\n </Group>\n </Panel>\n\n <ResizeHandle />\n\n {/* Preview */}\n <Panel defaultSize={45} minSize={20}>\n <SandpackPreview\n showNavigator\n showRefreshButton\n showOpenInCodeSandbox={false}\n style={{ height: '100%' }}\n />\n </Panel>\n </Group>\n </div>\n\n <StatusBar />\n </div>\n );\n}\n"
|
|
261
|
+
"content": "import React, { useState } from 'react';\r\nimport {\r\n SandpackCodeEditor,\r\n SandpackPreview,\r\n} from '@codesandbox/sandpack-react';\r\nimport { Group, Panel, Separator } from 'react-resizable-panels';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { FileTree } from './FileTree';\r\nimport { SearchPanel } from './SearchPanel';\r\nimport { DependencyPanel } from './DependencyPanel';\r\nimport { SandboxActivityBar, type SidebarTab } from './SandboxActivityBar';\r\nimport { TerminalPane } from './TerminalPane';\r\nimport { SandboxToolbar } from './SandboxToolbar';\r\nimport { SandboxStatusBar } from './SandboxStatusBar';\r\n\r\n// ─── Resize Handle ───────────────────────────────────────────\r\n\r\nfunction ResizeHandle({ horizontal }: { horizontal?: boolean }) {\r\n return (\r\n <Separator\r\n className={cn(\r\n 'transition-colors shrink-0',\r\n horizontal\r\n ? 'h-[3px] hover:bg-primary/40 cursor-row-resize bg-border/60'\r\n : 'w-[3px] hover:bg-primary/40 cursor-col-resize bg-border/60',\r\n )}\r\n />\r\n );\r\n}\r\n\r\n// ─── Main Layout ───────────────────────���─────────────────────\r\n\r\nexport interface SandboxLayoutProps {\r\n templateId: string;\r\n onTemplateChange: (id: string) => void;\r\n className?: string;\r\n}\r\n\r\nexport function SandboxLayout({\r\n templateId,\r\n onTemplateChange,\r\n className,\r\n}: SandboxLayoutProps) {\r\n const [sidebarTab, setSidebarTab] = useState<SidebarTab | null>('explorer');\r\n\r\n return (\r\n <div\r\n className={cn(\r\n 'flex flex-col h-full w-full bg-background text-foreground overflow-hidden',\r\n className,\r\n )}\r\n >\r\n <SandboxToolbar templateId={templateId} onTemplateChange={onTemplateChange} />\r\n\r\n <div className=\"flex flex-1 min-h-0\">\r\n <SandboxActivityBar activeTab={sidebarTab} onTabChange={setSidebarTab} />\r\n\r\n {sidebarTab && (\r\n <div className=\"w-56 border-r border-border shrink-0 overflow-hidden bg-background\">\r\n {sidebarTab === 'explorer' && <FileTree />}\r\n {sidebarTab === 'search' && <SearchPanel />}\r\n {sidebarTab === 'dependencies' && <DependencyPanel />}\r\n </div>\r\n )}\r\n\r\n <Group orientation=\"horizontal\" className=\"h-full flex-1 min-w-0\">\r\n <Panel defaultSize={55} minSize={25}>\r\n <Group orientation=\"vertical\">\r\n <Panel defaultSize={70} minSize={20}>\r\n <SandpackCodeEditor\r\n showTabs\r\n showLineNumbers\r\n showInlineErrors\r\n wrapContent\r\n closableTabs\r\n style={{ height: '100%' }}\r\n />\r\n </Panel>\r\n <ResizeHandle horizontal />\r\n <Panel defaultSize={30} minSize={8}>\r\n <TerminalPane />\r\n </Panel>\r\n </Group>\r\n </Panel>\r\n\r\n <ResizeHandle />\r\n\r\n <Panel defaultSize={45} minSize={20}>\r\n <SandpackPreview\r\n showNavigator\r\n showRefreshButton\r\n showOpenInCodeSandbox={false}\r\n style={{ height: '100%' }}\r\n />\r\n </Panel>\r\n </Group>\r\n </div>\r\n\r\n <SandboxStatusBar />\r\n </div>\r\n );\r\n}\r\n"
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"path": "src/components/ui/code-sandbox/SandboxStatusBar.tsx",
|
|
265
|
+
"content": "import React from 'react';\r\nimport { useSandpack } from '@codesandbox/sandpack-react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nexport function SandboxStatusBar() {\r\n const { sandpack } = useSandpack();\r\n const fileName = sandpack.activeFile?.split('/').pop() || '';\r\n const ext = fileName.split('.').pop()?.toUpperCase() || '';\r\n\r\n return (\r\n <div className=\"h-6 bg-primary text-primary-foreground flex items-center px-3 text-[10px] font-medium shrink-0 gap-3\">\r\n <span className=\"flex items-center gap-1.5\">\r\n <span\r\n className={cn(\r\n 'w-1.5 h-1.5 rounded-full',\r\n sandpack.status === 'running'\r\n ? 'bg-green-400'\r\n : sandpack.status === 'idle'\r\n ? 'bg-yellow-400'\r\n : 'bg-white/50',\r\n )}\r\n />\r\n {sandpack.status === 'running'\r\n ? 'Running'\r\n : sandpack.status === 'idle'\r\n ? 'Ready'\r\n : 'Loading'}\r\n </span>\r\n\r\n {sandpack.error && (\r\n <span className=\"bg-white/20 px-1.5 py-0.5 rounded text-[9px]\">\r\n 1 Error\r\n </span>\r\n )}\r\n\r\n <div className=\"flex-1\" />\r\n\r\n <span className=\"opacity-75\">{fileName}</span>\r\n <span className=\"opacity-75\">UTF-8</span>\r\n {ext && <span className=\"opacity-75\">{ext}</span>}\r\n </div>\r\n );\r\n}\r\n"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"path": "src/components/ui/code-sandbox/SandboxToolbar.tsx",
|
|
269
|
+
"content": "import React, { useState } from 'react';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { SANDBOX_TEMPLATES } from './templates';\r\n\r\ninterface ToolbarProps {\r\n templateId: string;\r\n onTemplateChange: (id: string) => void;\r\n}\r\n\r\nexport function SandboxToolbar({ templateId, onTemplateChange }: ToolbarProps) {\r\n const [open, setOpen] = useState(false);\r\n const current = SANDBOX_TEMPLATES.find((t) => t.id === templateId);\r\n\r\n return (\r\n <div className=\"h-10 bg-muted/30 border-b border-border flex items-center px-3 shrink-0 gap-3\">\r\n <div className=\"relative\">\r\n <button\r\n onClick={() => setOpen(!open)}\r\n className=\"flex items-center gap-2 bg-background border border-border px-2.5 py-1.5 rounded-md hover:bg-muted transition-colors text-sm\"\r\n >\r\n <span>{current?.icon}</span>\r\n <span className=\"font-medium text-foreground\">{current?.label}</span>\r\n <ChevronDown className=\"w-3.5 h-3.5 text-muted-foreground\" />\r\n </button>\r\n\r\n {open && (\r\n <>\r\n <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\r\n <div className=\"absolute top-full left-0 mt-1 bg-background border border-border rounded-lg shadow-xl z-50 min-w-[260px] py-1 animate-in fade-in slide-in-from-top-2 duration-200\">\r\n {SANDBOX_TEMPLATES.map((t) => (\r\n <button\r\n key={t.id}\r\n onClick={() => {\r\n onTemplateChange(t.id);\r\n setOpen(false);\r\n }}\r\n className={cn(\r\n 'w-full text-left px-3 py-2.5 hover:bg-muted flex items-center gap-3 transition-colors',\r\n t.id === templateId && 'bg-primary/5',\r\n )}\r\n >\r\n <span className=\"text-lg shrink-0\">{t.icon}</span>\r\n <div className=\"min-w-0\">\r\n <div className=\"text-sm font-medium text-foreground\">{t.label}</div>\r\n <div className=\"text-xs text-muted-foreground\">{t.description}</div>\r\n </div>\r\n </button>\r\n ))}\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n\r\n <div className=\"flex-1\" />\r\n\r\n <div className=\"text-xs text-muted-foreground bg-muted px-2.5 py-1 rounded hidden sm:block\">\r\n react-playground\r\n </div>\r\n </div>\r\n );\r\n}\r\n"
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"path": "src/components/ui/code-sandbox/SearchPanel.tsx",
|
|
273
|
+
"content": "import React, { useState, useMemo } from 'react';\r\nimport { useSandpack } from '@codesandbox/sandpack-react';\r\n\r\nexport function SearchPanel() {\r\n const { sandpack } = useSandpack();\r\n const [query, setQuery] = useState('');\r\n\r\n const results = useMemo(() => {\r\n if (!query.trim()) return [];\r\n const q = query.toLowerCase();\r\n const matches: { path: string; line: number; text: string }[] = [];\r\n for (const [path, file] of Object.entries(sandpack.files)) {\r\n file.code.split('\\n').forEach((line, i) => {\r\n if (line.toLowerCase().includes(q)) {\r\n matches.push({ path, line: i + 1, text: line.trim() });\r\n }\r\n });\r\n }\r\n return matches.slice(0, 100);\r\n }, [query, sandpack.files]);\r\n\r\n return (\r\n <div className=\"flex flex-col h-full text-foreground\">\r\n <div className=\"px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0\">\r\n Search\r\n </div>\r\n <div className=\"px-3 pb-2\">\r\n <input\r\n value={query}\r\n onChange={(e) => setQuery(e.target.value)}\r\n placeholder=\"Search in files...\"\r\n className=\"w-full bg-muted border border-border text-foreground text-[13px] px-2 py-1.5 rounded outline-none focus:border-primary transition-colors\"\r\n />\r\n </div>\r\n <div className=\"flex-1 overflow-y-auto\">\r\n {results.length > 0 && (\r\n <div className=\"px-3 pb-1 text-[10px] text-muted-foreground\">\r\n {results.length} result{results.length !== 1 ? 's' : ''}\r\n </div>\r\n )}\r\n {results.map((r, i) => (\r\n <div\r\n key={`${r.path}:${r.line}:${i}`}\r\n className=\"px-3 py-1.5 cursor-pointer hover:bg-muted/50 text-xs border-b border-border/30\"\r\n onClick={() => sandpack.openFile(r.path)}\r\n >\r\n <div className=\"font-medium truncate\">\r\n {r.path.split('/').pop()}\r\n <span className=\"text-muted-foreground ml-1 font-normal\">\r\n {r.path}\r\n </span>\r\n </div>\r\n <div className=\"text-muted-foreground truncate font-mono\">\r\n <span className=\"text-primary mr-1\">{r.line}:</span>\r\n {r.text}\r\n </div>\r\n </div>\r\n ))}\r\n {query && results.length === 0 && (\r\n <div className=\"px-3 py-6 text-xs text-muted-foreground text-center\">\r\n No results found\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n}\r\n"
|
|
254
274
|
},
|
|
255
275
|
{
|
|
256
276
|
"path": "src/components/ui/code-sandbox/templates.ts",
|
|
257
|
-
"content": "export interface SandboxTemplate {\n id: string;\n label: string;\n description: string;\n icon: string;\n template: 'react' | 'react-ts';\n files: Record<string, string>;\n dependencies?: Record<string, string>;\n}\n\nexport const SANDBOX_TEMPLATES: SandboxTemplate[] = [\n {\n id: 'react',\n label: 'React',\n description: 'React with JavaScript',\n icon: '\\u269B\\uFE0F',\n template: 'react',\n files: {\n '/App.js': `import React, { useState } from 'react';\nimport './styles.css';\n\nexport default function App() {\n const [count, setCount] = useState(0);\n\n return (\n <div className=\"app\">\n <h1>React Playground</h1>\n <p className=\"count\">{count}</p>\n <div className=\"actions\">\n <button onClick={() => setCount(c => c - 1)}>-</button>\n <button onClick={() => setCount(0)}>Reset</button>\n <button onClick={() => setCount(c => c + 1)}>+</button>\n </div>\n </div>\n );\n}\n`,\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\n.app { max-width: 600px; margin: 40px auto; padding: 24px; text-align: center; }\nh1 { font-size: 24px; margin-bottom: 16px; }\n.count { font-size: 48px; font-weight: 700; color: #3b82f6; margin: 16px 0; }\n.actions { display: flex; gap: 8px; justify-content: center; }\n.actions button { width: 64px; padding: 8px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; cursor: pointer; font-size: 16px; transition: all 0.15s; }\n.actions button:hover { background: #f1f5f9; border-color: #3b82f6; }\n`,\n },\n },\n {\n id: 'react-ts',\n label: 'React + TypeScript',\n description: 'React with TypeScript strict mode',\n icon: '\\uD83D\\uDC8E',\n template: 'react-ts',\n files: {\n '/App.tsx': `import React, { useState } from 'react';\nimport './styles.css';\n\ninterface AppProps {\n title?: string;\n}\n\nconst App: React.FC<AppProps> = ({ title = 'React + TypeScript' }) => {\n const [count, setCount] = useState<number>(0);\n\n return (\n <div className=\"app\">\n <h1>{title}</h1>\n <p className=\"count\">{count}</p>\n <div className=\"actions\">\n <button onClick={() => setCount(c => c - 1)}>-</button>\n <button onClick={() => setCount(0)}>Reset</button>\n <button onClick={() => setCount(c => c + 1)}>+</button>\n </div>\n </div>\n );\n};\n\nexport default App;\n`,\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\n.app { max-width: 600px; margin: 40px auto; padding: 24px; text-align: center; }\nh1 { font-size: 24px; margin-bottom: 16px; }\n.count { font-size: 48px; font-weight: 700; color: #3b82f6; margin: 16px 0; }\n.actions { display: flex; gap: 8px; justify-content: center; }\n.actions button { width: 64px; padding: 8px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; cursor: pointer; font-size: 16px; transition: all 0.15s; }\n.actions button:hover { background: #f1f5f9; border-color: #3b82f6; }\n`,\n },\n },\n {\n id: 'component',\n label: 'Component Workshop',\n description: 'Build & test React components',\n icon: '\\uD83E\\uDDE9',\n template: 'react-ts',\n files: {\n '/App.tsx': `import React from 'react';\nimport { Button } from './components/Button';\nimport { Card } from './components/Card';\nimport './styles.css';\n\nexport default function App() {\n return (\n <div className=\"app\">\n <h1>Component Workshop</h1>\n <div className=\"grid\">\n <Card title=\"Button Variants\">\n <div className=\"row\">\n <Button variant=\"primary\">Primary</Button>\n <Button variant=\"secondary\">Secondary</Button>\n <Button variant=\"outline\">Outline</Button>\n </div>\n </Card>\n <Card title=\"Button Sizes\">\n <div className=\"row\">\n <Button size=\"sm\">Small</Button>\n <Button size=\"md\">Medium</Button>\n <Button size=\"lg\">Large</Button>\n </div>\n </Card>\n <Card title=\"Your Component\">\n <p style={{ color: '#64748b' }}>Create your own component in /components!</p>\n </Card>\n </div>\n </div>\n );\n}\n`,\n '/components/Button.tsx': `import React from 'react';\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'sm' | 'md' | 'lg';\n}\n\nconst styles: Record<string, React.CSSProperties> = {\n primary: { background: '#3b82f6', color: 'white', border: 'none' },\n secondary: { background: '#e2e8f0', color: '#334155', border: 'none' },\n outline: { background: 'transparent', color: '#3b82f6', border: '1.5px solid #3b82f6' },\n sm: { padding: '6px 12px', fontSize: 12 },\n md: { padding: '8px 16px', fontSize: 14 },\n lg: { padding: '12px 24px', fontSize: 16 },\n};\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'md',\n style,\n ...props\n}) => (\n <button\n style={{\n borderRadius: 8,\n fontWeight: 500,\n cursor: 'pointer',\n transition: 'opacity 0.15s',\n ...styles[variant],\n ...styles[size],\n ...style,\n }}\n {...props}\n >\n {children}\n </button>\n);\n`,\n '/components/Card.tsx': `import React from 'react';\n\ninterface CardProps {\n title: string;\n children: React.ReactNode;\n}\n\nexport const Card: React.FC<CardProps> = ({ title, children }) => (\n <div style={{\n background: 'white',\n border: '1px solid #e2e8f0',\n borderRadius: 12,\n padding: 20,\n }}>\n <h3 style={{ fontSize: 16, marginBottom: 12, color: '#334155' }}>{title}</h3>\n {children}\n </div>\n);\n`,\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\n.app { max-width: 800px; margin: 24px auto; padding: 20px; }\nh1 { font-size: 22px; margin-bottom: 20px; }\n.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }\n.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }\n`,\n },\n },\n {\n id: 'hooks',\n label: 'Hooks Playground',\n description: 'Practice React Hooks patterns',\n icon: '\\uD83E\\uDE9D',\n template: 'react-ts',\n files: {\n '/App.tsx': `import React from 'react';\nimport { Counter } from './examples/Counter';\nimport { TodoList } from './examples/TodoList';\nimport { FetchData } from './examples/FetchData';\nimport './styles.css';\n\nexport default function App() {\n return (\n <div className=\"app\">\n <h1>React Hooks Playground</h1>\n <section>\n <h2>useState + useCallback</h2>\n <Counter />\n </section>\n <section>\n <h2>useState + useRef</h2>\n <TodoList />\n </section>\n <section>\n <h2>useEffect + fetch</h2>\n <FetchData />\n </section>\n </div>\n );\n}\n`,\n '/examples/Counter.tsx': `import React, { useState, useCallback } from 'react';\n\nexport const Counter = () => {\n const [count, setCount] = useState(0);\n\n const increment = useCallback(() => setCount(c => c + 1), []);\n const decrement = useCallback(() => setCount(c => c - 1), []);\n const reset = useCallback(() => setCount(0), []);\n\n return (\n <div className=\"card\">\n <p className=\"count\">{count}</p>\n <div className=\"row center\">\n <button onClick={decrement}>-</button>\n <button onClick={reset}>Reset</button>\n <button onClick={increment}>+</button>\n </div>\n </div>\n );\n};\n`,\n '/examples/TodoList.tsx': `import React, { useState, useRef } from 'react';\n\ninterface Todo {\n id: number;\n text: string;\n done: boolean;\n}\n\nexport const TodoList = () => {\n const [todos, setTodos] = useState<Todo[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const addTodo = () => {\n const text = inputRef.current?.value.trim();\n if (!text) return;\n setTodos(prev => [...prev, { id: Date.now(), text, done: false }]);\n inputRef.current!.value = '';\n inputRef.current!.focus();\n };\n\n const toggle = (id: number) =>\n setTodos(prev =>\n prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))\n );\n\n return (\n <div className=\"card\">\n <div className=\"row\" style={{ marginBottom: 12 }}>\n <input\n ref={inputRef}\n placeholder=\"Add todo...\"\n onKeyDown={e => e.key === 'Enter' && addTodo()}\n style={{\n flex: 1, padding: '8px 12px', border: '1px solid #e2e8f0',\n borderRadius: 6, outline: 'none', fontSize: 14,\n }}\n />\n <button onClick={addTodo}>Add</button>\n </div>\n {todos.map(t => (\n <div\n key={t.id}\n onClick={() => toggle(t.id)}\n style={{\n padding: '8px 0', borderBottom: '1px solid #f1f5f9',\n cursor: 'pointer', textDecoration: t.done ? 'line-through' : 'none',\n color: t.done ? '#94a3b8' : 'inherit',\n }}\n >\n {t.text}\n </div>\n ))}\n {todos.length === 0 && (\n <p style={{ color: '#94a3b8', fontSize: 13, textAlign: 'center', padding: 16 }}>\n No todos yet. Add one above!\n </p>\n )}\n </div>\n );\n};\n`,\n '/examples/FetchData.tsx': `import React, { useState, useEffect } from 'react';\n\ninterface User {\n id: number;\n name: string;\n email: string;\n}\n\nexport const FetchData = () => {\n const [users, setUsers] = useState<User[]>([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<string | null>(null);\n\n useEffect(() => {\n fetch('https://jsonplaceholder.typicode.com/users')\n .then(res => {\n if (!res.ok) throw new Error('Failed to fetch');\n return res.json();\n })\n .then(data => {\n setUsers(data.slice(0, 5));\n setLoading(false);\n })\n .catch(err => {\n setError(err.message);\n setLoading(false);\n });\n }, []);\n\n if (loading) return <div className=\"card\">Loading...</div>;\n if (error) return <div className=\"card\" style={{ color: '#ef4444' }}>Error: {error}</div>;\n\n return (\n <div className=\"card\">\n {users.map(u => (\n <div key={u.id} style={{\n display: 'flex', justifyContent: 'space-between', alignItems: 'center',\n padding: '8px 0', borderBottom: '1px solid #f1f5f9',\n }}>\n <strong style={{ fontSize: 14 }}>{u.name}</strong>\n <span style={{ fontSize: 13, color: '#64748b' }}>{u.email}</span>\n </div>\n ))}\n </div>\n );\n};\n`,\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\n.app { max-width: 680px; margin: 20px auto; padding: 20px; }\nh1 { font-size: 22px; margin-bottom: 20px; }\nh2 { font-size: 12px; color: #64748b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }\nsection { margin-bottom: 24px; }\n.card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }\n.count { font-size: 48px; font-weight: 700; text-align: center; color: #3b82f6; }\n.row { display: flex; gap: 8px; align-items: center; }\n.center { justify-content: center; margin-top: 12px; }\nbutton { padding: 8px 16px; border-radius: 6px; border: 1px solid #e2e8f0; background: white; cursor: pointer; font-size: 14px; transition: all 0.15s; }\nbutton:hover { background: #f1f5f9; border-color: #3b82f6; }\n`,\n },\n },\n {\n id: 'tailwind',\n label: 'React + Tailwind',\n description: 'React with Tailwind CSS via CDN',\n icon: '\\uD83C\\uDFA8',\n template: 'react',\n files: {\n '/public/index.html': `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React + Tailwind</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body>\n <div id=\"root\"></div>\n</body>\n</html>`,\n '/App.js': `import React, { useState } from 'react';\n\nexport default function App() {\n const [count, setCount] = useState(0);\n\n return (\n <div className=\"min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center p-4\">\n <div className=\"bg-white rounded-2xl shadow-xl p-8 w-full max-w-md text-center\">\n <h1 className=\"text-2xl font-bold text-slate-800 mb-2\">\n React + Tailwind\n </h1>\n <p className=\"text-slate-500 mb-6\">Edit App.js to get started</p>\n\n <div className=\"text-6xl font-bold text-blue-500 mb-6\">{count}</div>\n\n <div className=\"flex gap-3 justify-center\">\n <button\n onClick={() => setCount(c => c - 1)}\n className=\"w-12 h-12 rounded-xl bg-slate-100 hover:bg-slate-200 text-lg font-medium transition-colors\"\n >\n -\n </button>\n <button\n onClick={() => setCount(0)}\n className=\"px-6 h-12 rounded-xl bg-slate-100 hover:bg-slate-200 text-sm font-medium transition-colors\"\n >\n Reset\n </button>\n <button\n onClick={() => setCount(c => c + 1)}\n className=\"w-12 h-12 rounded-xl bg-blue-500 hover:bg-blue-600 text-white text-lg font-medium transition-colors\"\n >\n +\n </button>\n </div>\n </div>\n </div>\n );\n}\n`,\n '/index.js': `import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n <StrictMode>\n <App />\n </StrictMode>\n);\n`,\n },\n },\n];\n"
|
|
277
|
+
"content": "export interface SandboxTemplate {\r\n id: string;\r\n label: string;\r\n description: string;\r\n icon: string;\r\n template: 'react' | 'react-ts';\r\n files: Record<string, string>;\r\n dependencies?: Record<string, string>;\r\n}\r\n\r\nexport const SANDBOX_TEMPLATES: SandboxTemplate[] = [\r\n {\r\n id: 'react',\r\n label: 'React',\r\n description: 'React with JavaScript',\r\n icon: '\\u269B\\uFE0F',\r\n template: 'react',\r\n files: {\r\n '/App.js': `import React, { useState } from 'react';\r\nimport './styles.css';\r\n\r\nexport default function App() {\r\n const [count, setCount] = useState(0);\r\n\r\n return (\r\n <div className=\"app\">\r\n <h1>React Playground</h1>\r\n <p className=\"count\">{count}</p>\r\n <div className=\"actions\">\r\n <button onClick={() => setCount(c => c - 1)}>-</button>\r\n <button onClick={() => setCount(0)}>Reset</button>\r\n <button onClick={() => setCount(c => c + 1)}>+</button>\r\n </div>\r\n </div>\r\n );\r\n}\r\n`,\r\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\r\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\r\n.app { max-width: 600px; margin: 40px auto; padding: 24px; text-align: center; }\r\nh1 { font-size: 24px; margin-bottom: 16px; }\r\n.count { font-size: 48px; font-weight: 700; color: #3b82f6; margin: 16px 0; }\r\n.actions { display: flex; gap: 8px; justify-content: center; }\r\n.actions button { width: 64px; padding: 8px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; cursor: pointer; font-size: 16px; transition: all 0.15s; }\r\n.actions button:hover { background: #f1f5f9; border-color: #3b82f6; }\r\n`,\r\n },\r\n },\r\n {\r\n id: 'react-ts',\r\n label: 'React + TypeScript',\r\n description: 'React with TypeScript strict mode',\r\n icon: '\\uD83D\\uDC8E',\r\n template: 'react-ts',\r\n files: {\r\n '/App.tsx': `import React, { useState } from 'react';\r\nimport './styles.css';\r\n\r\ninterface AppProps {\r\n title?: string;\r\n}\r\n\r\nconst App: React.FC<AppProps> = ({ title = 'React + TypeScript' }) => {\r\n const [count, setCount] = useState<number>(0);\r\n\r\n return (\r\n <div className=\"app\">\r\n <h1>{title}</h1>\r\n <p className=\"count\">{count}</p>\r\n <div className=\"actions\">\r\n <button onClick={() => setCount(c => c - 1)}>-</button>\r\n <button onClick={() => setCount(0)}>Reset</button>\r\n <button onClick={() => setCount(c => c + 1)}>+</button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default App;\r\n`,\r\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\r\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\r\n.app { max-width: 600px; margin: 40px auto; padding: 24px; text-align: center; }\r\nh1 { font-size: 24px; margin-bottom: 16px; }\r\n.count { font-size: 48px; font-weight: 700; color: #3b82f6; margin: 16px 0; }\r\n.actions { display: flex; gap: 8px; justify-content: center; }\r\n.actions button { width: 64px; padding: 8px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; cursor: pointer; font-size: 16px; transition: all 0.15s; }\r\n.actions button:hover { background: #f1f5f9; border-color: #3b82f6; }\r\n`,\r\n },\r\n },\r\n {\r\n id: 'component',\r\n label: 'Component Workshop',\r\n description: 'Build & test React components',\r\n icon: '\\uD83E\\uDDE9',\r\n template: 'react-ts',\r\n files: {\r\n '/App.tsx': `import React from 'react';\r\nimport { Button } from './components/Button';\r\nimport { Card } from './components/Card';\r\nimport './styles.css';\r\n\r\nexport default function App() {\r\n return (\r\n <div className=\"app\">\r\n <h1>Component Workshop</h1>\r\n <div className=\"grid\">\r\n <Card title=\"Button Variants\">\r\n <div className=\"row\">\r\n <Button variant=\"primary\">Primary</Button>\r\n <Button variant=\"secondary\">Secondary</Button>\r\n <Button variant=\"outline\">Outline</Button>\r\n </div>\r\n </Card>\r\n <Card title=\"Button Sizes\">\r\n <div className=\"row\">\r\n <Button size=\"sm\">Small</Button>\r\n <Button size=\"md\">Medium</Button>\r\n <Button size=\"lg\">Large</Button>\r\n </div>\r\n </Card>\r\n <Card title=\"Your Component\">\r\n <p style={{ color: '#64748b' }}>Create your own component in /components!</p>\r\n </Card>\r\n </div>\r\n </div>\r\n );\r\n}\r\n`,\r\n '/components/Button.tsx': `import React from 'react';\r\n\r\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n variant?: 'primary' | 'secondary' | 'outline';\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst styles: Record<string, React.CSSProperties> = {\r\n primary: { background: '#3b82f6', color: 'white', border: 'none' },\r\n secondary: { background: '#e2e8f0', color: '#334155', border: 'none' },\r\n outline: { background: 'transparent', color: '#3b82f6', border: '1.5px solid #3b82f6' },\r\n sm: { padding: '6px 12px', fontSize: 12 },\r\n md: { padding: '8px 16px', fontSize: 14 },\r\n lg: { padding: '12px 24px', fontSize: 16 },\r\n};\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n children,\r\n variant = 'primary',\r\n size = 'md',\r\n style,\r\n ...props\r\n}) => (\r\n <button\r\n style={{\r\n borderRadius: 8,\r\n fontWeight: 500,\r\n cursor: 'pointer',\r\n transition: 'opacity 0.15s',\r\n ...styles[variant],\r\n ...styles[size],\r\n ...style,\r\n }}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n);\r\n`,\r\n '/components/Card.tsx': `import React from 'react';\r\n\r\ninterface CardProps {\r\n title: string;\r\n children: React.ReactNode;\r\n}\r\n\r\nexport const Card: React.FC<CardProps> = ({ title, children }) => (\r\n <div style={{\r\n background: 'white',\r\n border: '1px solid #e2e8f0',\r\n borderRadius: 12,\r\n padding: 20,\r\n }}>\r\n <h3 style={{ fontSize: 16, marginBottom: 12, color: '#334155' }}>{title}</h3>\r\n {children}\r\n </div>\r\n);\r\n`,\r\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\r\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\r\n.app { max-width: 800px; margin: 24px auto; padding: 20px; }\r\nh1 { font-size: 22px; margin-bottom: 20px; }\r\n.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\r\n@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }\r\n.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }\r\n`,\r\n },\r\n },\r\n {\r\n id: 'hooks',\r\n label: 'Hooks Playground',\r\n description: 'Practice React Hooks patterns',\r\n icon: '\\uD83E\\uDE9D',\r\n template: 'react-ts',\r\n files: {\r\n '/App.tsx': `import React from 'react';\r\nimport { Counter } from './examples/Counter';\r\nimport { TodoList } from './examples/TodoList';\r\nimport { FetchData } from './examples/FetchData';\r\nimport './styles.css';\r\n\r\nexport default function App() {\r\n return (\r\n <div className=\"app\">\r\n <h1>React Hooks Playground</h1>\r\n <section>\r\n <h2>useState + useCallback</h2>\r\n <Counter />\r\n </section>\r\n <section>\r\n <h2>useState + useRef</h2>\r\n <TodoList />\r\n </section>\r\n <section>\r\n <h2>useEffect + fetch</h2>\r\n <FetchData />\r\n </section>\r\n </div>\r\n );\r\n}\r\n`,\r\n '/examples/Counter.tsx': `import React, { useState, useCallback } from 'react';\r\n\r\nexport const Counter = () => {\r\n const [count, setCount] = useState(0);\r\n\r\n const increment = useCallback(() => setCount(c => c + 1), []);\r\n const decrement = useCallback(() => setCount(c => c - 1), []);\r\n const reset = useCallback(() => setCount(0), []);\r\n\r\n return (\r\n <div className=\"card\">\r\n <p className=\"count\">{count}</p>\r\n <div className=\"row center\">\r\n <button onClick={decrement}>-</button>\r\n <button onClick={reset}>Reset</button>\r\n <button onClick={increment}>+</button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n`,\r\n '/examples/TodoList.tsx': `import React, { useState, useRef } from 'react';\r\n\r\ninterface Todo {\r\n id: number;\r\n text: string;\r\n done: boolean;\r\n}\r\n\r\nexport const TodoList = () => {\r\n const [todos, setTodos] = useState<Todo[]>([]);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n const addTodo = () => {\r\n const text = inputRef.current?.value.trim();\r\n if (!text) return;\r\n setTodos(prev => [...prev, { id: Date.now(), text, done: false }]);\r\n inputRef.current!.value = '';\r\n inputRef.current!.focus();\r\n };\r\n\r\n const toggle = (id: number) =>\r\n setTodos(prev =>\r\n prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))\r\n );\r\n\r\n return (\r\n <div className=\"card\">\r\n <div className=\"row\" style={{ marginBottom: 12 }}>\r\n <input\r\n ref={inputRef}\r\n placeholder=\"Add todo...\"\r\n onKeyDown={e => e.key === 'Enter' && addTodo()}\r\n style={{\r\n flex: 1, padding: '8px 12px', border: '1px solid #e2e8f0',\r\n borderRadius: 6, outline: 'none', fontSize: 14,\r\n }}\r\n />\r\n <button onClick={addTodo}>Add</button>\r\n </div>\r\n {todos.map(t => (\r\n <div\r\n key={t.id}\r\n onClick={() => toggle(t.id)}\r\n style={{\r\n padding: '8px 0', borderBottom: '1px solid #f1f5f9',\r\n cursor: 'pointer', textDecoration: t.done ? 'line-through' : 'none',\r\n color: t.done ? '#94a3b8' : 'inherit',\r\n }}\r\n >\r\n {t.text}\r\n </div>\r\n ))}\r\n {todos.length === 0 && (\r\n <p style={{ color: '#94a3b8', fontSize: 13, textAlign: 'center', padding: 16 }}>\r\n No todos yet. Add one above!\r\n </p>\r\n )}\r\n </div>\r\n );\r\n};\r\n`,\r\n '/examples/FetchData.tsx': `import React, { useState, useEffect } from 'react';\r\n\r\ninterface User {\r\n id: number;\r\n name: string;\r\n email: string;\r\n}\r\n\r\nexport const FetchData = () => {\r\n const [users, setUsers] = useState<User[]>([]);\r\n const [loading, setLoading] = useState(true);\r\n const [error, setError] = useState<string | null>(null);\r\n\r\n useEffect(() => {\r\n fetch('https://jsonplaceholder.typicode.com/users')\r\n .then(res => {\r\n if (!res.ok) throw new Error('Failed to fetch');\r\n return res.json();\r\n })\r\n .then(data => {\r\n setUsers(data.slice(0, 5));\r\n setLoading(false);\r\n })\r\n .catch(err => {\r\n setError(err.message);\r\n setLoading(false);\r\n });\r\n }, []);\r\n\r\n if (loading) return <div className=\"card\">Loading...</div>;\r\n if (error) return <div className=\"card\" style={{ color: '#ef4444' }}>Error: {error}</div>;\r\n\r\n return (\r\n <div className=\"card\">\r\n {users.map(u => (\r\n <div key={u.id} style={{\r\n display: 'flex', justifyContent: 'space-between', alignItems: 'center',\r\n padding: '8px 0', borderBottom: '1px solid #f1f5f9',\r\n }}>\r\n <strong style={{ fontSize: 14 }}>{u.name}</strong>\r\n <span style={{ fontSize: 13, color: '#64748b' }}>{u.email}</span>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n};\r\n`,\r\n '/styles.css': `* { margin: 0; padding: 0; box-sizing: border-box; }\r\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; }\r\n.app { max-width: 680px; margin: 20px auto; padding: 20px; }\r\nh1 { font-size: 22px; margin-bottom: 20px; }\r\nh2 { font-size: 12px; color: #64748b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }\r\nsection { margin-bottom: 24px; }\r\n.card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }\r\n.count { font-size: 48px; font-weight: 700; text-align: center; color: #3b82f6; }\r\n.row { display: flex; gap: 8px; align-items: center; }\r\n.center { justify-content: center; margin-top: 12px; }\r\nbutton { padding: 8px 16px; border-radius: 6px; border: 1px solid #e2e8f0; background: white; cursor: pointer; font-size: 14px; transition: all 0.15s; }\r\nbutton:hover { background: #f1f5f9; border-color: #3b82f6; }\r\n`,\r\n },\r\n },\r\n {\r\n id: 'tailwind',\r\n label: 'React + Tailwind',\r\n description: 'React with Tailwind CSS via CDN',\r\n icon: '\\uD83C\\uDFA8',\r\n template: 'react',\r\n files: {\r\n '/public/index.html': `<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n <title>React + Tailwind</title>\r\n <script src=\"https://cdn.tailwindcss.com\"></script>\r\n</head>\r\n<body>\r\n <div id=\"root\"></div>\r\n</body>\r\n</html>`,\r\n '/App.js': `import React, { useState } from 'react';\r\n\r\nexport default function App() {\r\n const [count, setCount] = useState(0);\r\n\r\n return (\r\n <div className=\"min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center p-4\">\r\n <div className=\"bg-white rounded-2xl shadow-xl p-8 w-full max-w-md text-center\">\r\n <h1 className=\"text-2xl font-bold text-slate-800 mb-2\">\r\n React + Tailwind\r\n </h1>\r\n <p className=\"text-slate-500 mb-6\">Edit App.js to get started</p>\r\n\r\n <div className=\"text-6xl font-bold text-blue-500 mb-6\">{count}</div>\r\n\r\n <div className=\"flex gap-3 justify-center\">\r\n <button\r\n onClick={() => setCount(c => c - 1)}\r\n className=\"w-12 h-12 rounded-xl bg-slate-100 hover:bg-slate-200 text-lg font-medium transition-colors\"\r\n >\r\n -\r\n </button>\r\n <button\r\n onClick={() => setCount(0)}\r\n className=\"px-6 h-12 rounded-xl bg-slate-100 hover:bg-slate-200 text-sm font-medium transition-colors\"\r\n >\r\n Reset\r\n </button>\r\n <button\r\n onClick={() => setCount(c => c + 1)}\r\n className=\"w-12 h-12 rounded-xl bg-blue-500 hover:bg-blue-600 text-white text-lg font-medium transition-colors\"\r\n >\r\n +\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n`,\r\n '/index.js': `import React, { StrictMode } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport App from \"./App\";\r\n\r\nconst root = createRoot(document.getElementById(\"root\"));\r\nroot.render(\r\n <StrictMode>\r\n <App />\r\n </StrictMode>\r\n);\r\n`,\r\n },\r\n },\r\n];\r\n"
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"path": "src/components/ui/code-sandbox/TerminalPane.tsx",
|
|
281
|
+
"content": "import React, { useState } from 'react';\r\nimport { SandpackConsole, useSandpack } from '@codesandbox/sandpack-react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\ntype TerminalTab = 'console' | 'problems';\r\n\r\nexport function TerminalPane() {\r\n const { sandpack } = useSandpack();\r\n const [tab, setTab] = useState<TerminalTab>('console');\r\n\r\n return (\r\n <div className=\"flex flex-col h-full bg-background\">\r\n <div className=\"h-7 shrink-0 bg-muted/30 border-t border-b border-border flex items-center px-3 gap-3 text-[10px] font-semibold tracking-wider\">\r\n {(['console', 'problems'] as TerminalTab[]).map((t) => (\r\n <button\r\n key={t}\r\n onClick={() => setTab(t)}\r\n className={cn(\r\n 'uppercase transition-colors pb-0.5 -mb-px border-b',\r\n tab === t\r\n ? 'text-primary border-primary'\r\n : 'text-muted-foreground border-transparent hover:text-foreground',\r\n )}\r\n >\r\n {t}\r\n {t === 'problems' && sandpack.error && (\r\n <span className=\"ml-1 text-danger font-bold\">1</span>\r\n )}\r\n </button>\r\n ))}\r\n </div>\r\n\r\n <div className=\"flex-1 overflow-auto min-h-0\">\r\n {tab === 'console' && (\r\n <SandpackConsole standalone style={{ height: '100%' }} />\r\n )}\r\n {tab === 'problems' && (\r\n <div className=\"p-3 text-xs\">\r\n {sandpack.error ? (\r\n <div className=\"text-danger font-mono whitespace-pre-wrap break-words\">\r\n {sandpack.error.message}\r\n </div>\r\n ) : (\r\n <div className=\"text-muted-foreground text-center py-4\">\r\n No problems detected\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n}\r\n"
|
|
258
282
|
}
|
|
259
283
|
]
|
|
260
284
|
},
|
|
@@ -284,7 +308,22 @@
|
|
|
284
308
|
"files": [
|
|
285
309
|
{
|
|
286
310
|
"path": "src/components/ui/combobox/ComboBox.tsx",
|
|
287
|
-
"content": "import * as React from 'react';\r\nimport { Combobox as BaseCombobox } from '@base-ui/react';\r\nimport { Check, ChevronDown, X, Loader2 } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst comboboxVariants = tv({\r\n slots: {\r\n root: 'flex flex-col gap-1.5 w-full',\r\n inputContainer: 'flex flex-wrap items-center gap-1.5 min-h-10 w-full rounded-lg border border-border bg-background px-3 py-1.5 text-sm focus-within:border-primary disabled:cursor-not-allowed disabled:opacity-50 transition-shadow transition-colors',\r\n input: 'flex-1 min-w-[120px] bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',\r\n popup: 'z-50 w-[var(--anchor-width,var(--reference-width))] max-w-[var(--available-width)] overflow-hidden rounded-lg border border-border bg-background text-popover-foreground shadow-[rgba(0,0,0,0.08)_0px_4px_16px] animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n item: 'cursor-pointer relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n indicator: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n chip: 'inline-flex items-center gap-1 rounded bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground outline-none focus:ring-1 focus:ring-primary',\r\n chipRemove: 'hover:bg-primary/20 rounded-full p-0.5 transition-colors cursor-pointer',\r\n actionsHeader: 'flex items-center gap-1 p-1 border-b border-border sticky top-0 bg-background z-10',\r\n actionButton: 'flex-1 text-[10px] uppercase tracking-wider font-bold py-1.5 px-2 rounded-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors text-center',\r\n }\r\n});\r\n\r\n/** A single option in the ComboBox dropdown */\r\nexport interface ComboBoxOption {\r\n /** Display text for the option */\r\n label: string;\r\n /** Unique value identifying the option */\r\n value: string;\r\n}\r\n\r\n/** Props for the ComboBox component */\r\nexport interface ComboBoxProps {\r\n /** Array of selectable options */\r\n options: ComboBoxOption[];\r\n /** Label text displayed above the combobox */\r\n label?: string;\r\n placeholder?: string;\r\n /** Controlled selected value (string for single, string[] for multiple) */\r\n value?: string | string[];\r\n /** Initial value for uncontrolled usage */\r\n defaultValue?: string | string[];\r\n /** Callback fired when the selected value changes */\r\n onValueChange?: (value: string | string[]) => void;\r\n /** Enable multi-select mode with chip display */\r\n multiple?: boolean;\r\n /** Shows a loading spinner on the dropdown trigger */\r\n isLoading?: boolean;\r\n className?: string;\r\n /** Enable type-ahead filtering of options (default: true) */\r\n autocomplete?: boolean;\r\n /** Text shown when no options match the filter */\r\n emptyText?: string;\r\n /** Label for the \"select all\" action in multi-select mode */\r\n selectAllText?: string;\r\n /** Label for the \"clear all\" action in multi-select mode */\r\n clearAllText?: string;\r\n /** Icon rendered at the start (left side) of the input */\r\n leftIcon?: React.ReactNode;\r\n}\r\n\r\nconst ComboBox = React.forwardRef<HTMLInputElement, ComboBoxProps>(\r\n ({ options, label, placeholder, value, defaultValue, onValueChange, multiple, isLoading, className, autocomplete = true, emptyText = 'No results found.', selectAllText = 'Select all', clearAllText = 'Clear all', leftIcon }, ref) => {\r\n const [inputValue, setInputValue] = React.useState('');\r\n const [internalValue, setInternalValue] = React.useState<string | string[] | null>(defaultValue || (multiple ? [] : null));\r\n const isSelectingRef = React.useRef(false);\r\n\r\n const activeValue = value !== undefined ? value : internalValue;\r\n\r\n const handleValueChange = (newVal: string | string[] | null) => {\r\n isSelectingRef.current = true;\r\n if (value === undefined) {\r\n setInternalValue(newVal);\r\n }\r\n if (newVal !== null) {\r\n onValueChange?.(newVal);\r\n }\r\n };\r\n\r\n const handleInputValueChange = (val: string) => {\r\n // Bỏ qua cập nhật inputValue khi đang chọn item để tránh nháy popup\r\n if (isSelectingRef.current) {\r\n isSelectingRef.current = false;\r\n return;\r\n }\r\n setInputValue(val);\r\n };\r\n\r\n const handleClear = (e: React.SyntheticEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n handleValueChange(multiple ? [] : null);\r\n setInputValue('');\r\n };\r\n\r\n const hasValue = multiple\r\n ? Array.isArray(activeValue) && activeValue.length > 0\r\n : !!activeValue;\r\n\r\n // Lọc options theo text người dùng đang gõ\r\n const filteredOptions = React.useMemo(() => {\r\n if (!inputValue || !autocomplete) return options;\r\n // Khi đã có value được chọn, input hiển thị label → không filter theo label đó\r\n if (!multiple && activeValue) {\r\n const selectedOption = options.find((o) => o.value === activeValue);\r\n if (selectedOption && inputValue === selectedOption.label) return options;\r\n }\r\n return options.filter(opt =>\r\n opt.label.toLowerCase().includes(inputValue.toLowerCase())\r\n );\r\n }, [options, inputValue, autocomplete, multiple, activeValue]);\r\n\r\n const { root, inputContainer, input, popup, item, indicator, chip, chipRemove, actionsHeader, actionButton } = comboboxVariants();\r\n const inputGroupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n return (\r\n <BaseCombobox.Root\r\n value={activeValue}\r\n onValueChange={handleValueChange}\r\n multiple={multiple}\r\n onInputValueChange={handleInputValueChange}\r\n autoHighlight\r\n itemToStringLabel={(val: string) => options.find((o) => o.value === val)?.label ?? val}\r\n >\r\n <div className={root({ className })}>\r\n {label && <label className=\"text-sm font-medium text-foreground\">{label}</label>}\r\n\r\n <div className=\"relative w-full group\">\r\n <BaseCombobox.InputGroup ref={inputGroupRef} className={cn(inputContainer(), leftIcon && 'pl-9')}>\r\n {leftIcon && (\r\n <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors pointer-events-none\">\r\n {leftIcon}\r\n </div>\r\n )}\r\n {multiple ? (\r\n <BaseCombobox.Chips className=\"flex flex-wrap items-center gap-1.5 flex-1 w-full min-w-0\">\r\n {Array.isArray(activeValue) && activeValue.map((val) => {\r\n const option = options.find(o => o.value === val);\r\n return (\r\n <BaseCombobox.Chip key={val} className={chip()}>\r\n {option?.label || val}\r\n <BaseCombobox.ChipRemove className={chipRemove()}>\r\n <X className=\"h-3 w-3\" />\r\n </BaseCombobox.ChipRemove>\r\n </BaseCombobox.Chip>\r\n );\r\n })}\r\n <BaseCombobox.Input\r\n ref={ref}\r\n readOnly={!autocomplete}\r\n placeholder={Array.isArray(activeValue) && activeValue.length > 0 ? '' : placeholder}\r\n className={input()}\r\n />\r\n </BaseCombobox.Chips>\r\n ) : (\r\n <BaseCombobox.Input\r\n ref={ref}\r\n readOnly={!autocomplete}\r\n placeholder={placeholder}\r\n className={cn(input(), !autocomplete && 'cursor-pointer')}\r\n />\r\n )}\r\n\r\n <div className=\"flex items-center gap-1 shrink-0 ml-auto text-muted-foreground\">\r\n {hasValue ? (\r\n <span\r\n role=\"button\"\r\n aria-label=\"Clear selection\"\r\n onPointerDown={(e) => {\r\n e.stopPropagation();\r\n handleClear(e);\r\n }}\r\n onClick={(e) => e.stopPropagation()}\r\n className=\"cursor-pointer flex h-5 w-5 items-center justify-center rounded-full hover:bg-red-50 hover:text-red-500 transition-colors pointer-events-auto\"\r\n >\r\n <X className=\"h-3.5 w-3.5\" />\r\n </span>\r\n ) : (\r\n <BaseCombobox.Trigger className=\"transition-transform group-data-open:rotate-180\">\r\n {isLoading ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <ChevronDown className=\"h-4 w-4\" />}\r\n </BaseCombobox.Trigger>\r\n )}\r\n </div>\r\n </BaseCombobox.InputGroup>\r\n\r\n <BaseCombobox.Portal>\r\n <BaseCombobox.Positioner\r\n anchor={inputGroupRef}\r\n sideOffset={4}\r\n style={{ width: 'var(--anchor-width)' }}\r\n >\r\n <BaseCombobox.Popup className={cn(popup(), 'min-w-0')}>\r\n {multiple && options.length > 0 && (\r\n <div className={actionsHeader()}>\r\n <button\r\n type=\"button\"\r\n aria-label={selectAllText}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n handleValueChange(options.map((o) => o.value));\r\n }}\r\n className={actionButton()}\r\n >\r\n {selectAllText}\r\n </button>\r\n <div className=\"w-px h-3 bg-border\" />\r\n <button\r\n type=\"button\"\r\n aria-label={clearAllText}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n handleValueChange([]);\r\n }}\r\n className={actionButton()}\r\n >\r\n {clearAllText}\r\n </button>\r\n </div>\r\n )}\r\n <BaseCombobox.List className=\"p-1 max-h-[300px] overflow-auto\">\r\n {filteredOptions.length === 0 ? (\r\n <div className=\"py-2 px-8 text-sm text-muted-foreground italic\">{emptyText}</div>\r\n ) : (\r\n filteredOptions.map((option) => (\r\n <BaseCombobox.Item\r\n key={option.value}\r\n value={option.value}\r\n className={item()}\r\n >\r\n <BaseCombobox.ItemIndicator className={indicator()}>\r\n <Check className=\"h-4 w-4\" />\r\n </BaseCombobox.ItemIndicator>\r\n {option.label}\r\n </BaseCombobox.Item>\r\n ))\r\n )}\r\n </BaseCombobox.List>\r\n </BaseCombobox.Popup>\r\n </BaseCombobox.Positioner>\r\n </BaseCombobox.Portal>\r\n </div>\r\n </div>\r\n </BaseCombobox.Root>\r\n );\r\n }\r\n);\r\n\r\nComboBox.displayName = 'ComboBox';\r\n\r\nexport { ComboBox };\r\n"
|
|
311
|
+
"content": "\"use client\" \r\nimport * as React from 'react';\r\nimport { Combobox as BaseCombobox } from '@base-ui/react';\r\nimport { Check, ChevronDown, X, Loader2 } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst comboboxVariants = tv({\r\n slots: {\r\n root: 'flex flex-col gap-1.5 w-full',\r\n inputContainer: 'flex flex-wrap items-center gap-1.5 min-h-10 w-full rounded-lg border border-border bg-background px-3 py-1.5 text-sm focus-within:border-primary disabled:cursor-not-allowed disabled:opacity-50 transition-shadow transition-colors',\r\n input: 'flex-1 min-w-[120px] bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',\r\n popup: 'z-50 w-[var(--anchor-width,var(--reference-width))] max-w-[var(--available-width)] overflow-hidden rounded-lg border border-border bg-background text-popover-foreground shadow-[rgba(0,0,0,0.08)_0px_4px_16px] animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n item: 'cursor-pointer relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n indicator: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n chip: 'inline-flex items-center gap-1 rounded bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground outline-none focus:ring-1 focus:ring-primary',\r\n chipRemove: 'hover:bg-primary/20 rounded-full p-0.5 transition-colors cursor-pointer',\r\n actionsHeader: 'flex items-center gap-1 p-1 border-b border-border sticky top-0 bg-background z-10',\r\n actionButton: 'flex-1 text-[10px] uppercase tracking-wider font-bold py-1.5 px-2 rounded-sm hover:bg-accent hover:text-accent-foreground text-muted-foreground transition-colors text-center',\r\n }\r\n});\r\n\r\n/** A single option in the ComboBox dropdown */\r\nexport interface ComboBoxOption {\r\n /** Display text for the option */\r\n label: string;\r\n /** Unique value identifying the option */\r\n value: string;\r\n}\r\n\r\n/** Props for the ComboBox component */\r\nexport interface ComboBoxProps {\r\n /** Array of selectable options */\r\n options: ComboBoxOption[];\r\n /** Label text displayed above the combobox */\r\n label?: string;\r\n placeholder?: string;\r\n /** Controlled selected value (string for single, string[] for multiple) */\r\n value?: string | string[];\r\n /** Initial value for uncontrolled usage */\r\n defaultValue?: string | string[];\r\n /** Callback fired when the selected value changes */\r\n onValueChange?: (value: string | string[]) => void;\r\n /** Enable multi-select mode with chip display */\r\n multiple?: boolean;\r\n /** Shows a loading spinner on the dropdown trigger */\r\n isLoading?: boolean;\r\n className?: string;\r\n /** Enable type-ahead filtering of options (default: true) */\r\n autocomplete?: boolean;\r\n /** Text shown when no options match the filter */\r\n emptyText?: string;\r\n /** Label for the \"select all\" action in multi-select mode */\r\n selectAllText?: string;\r\n /** Label for the \"clear all\" action in multi-select mode */\r\n clearAllText?: string;\r\n /** Icon rendered at the start (left side) of the input */\r\n leftIcon?: React.ReactNode;\r\n}\r\n\r\nconst ComboBox = React.forwardRef<HTMLInputElement, ComboBoxProps>(\r\n ({ options, label, placeholder, value, defaultValue, onValueChange, multiple, isLoading, className, autocomplete = true, emptyText = 'No results found.', selectAllText = 'Select all', clearAllText = 'Clear all', leftIcon }, ref) => {\r\n const [inputValue, setInputValue] = React.useState('');\r\n const [internalValue, setInternalValue] = React.useState<string | string[] | null>(defaultValue || (multiple ? [] : null));\r\n const isSelectingRef = React.useRef(false);\r\n\r\n const activeValue = value !== undefined ? value : internalValue;\r\n\r\n const handleValueChange = (newVal: string | string[] | null) => {\r\n isSelectingRef.current = true;\r\n if (value === undefined) {\r\n setInternalValue(newVal);\r\n }\r\n if (newVal !== null) {\r\n onValueChange?.(newVal);\r\n }\r\n };\r\n\r\n const handleInputValueChange = (val: string) => {\r\n // Bỏ qua cập nhật inputValue khi đang chọn item để tránh nháy popup\r\n if (isSelectingRef.current) {\r\n isSelectingRef.current = false;\r\n return;\r\n }\r\n setInputValue(val);\r\n };\r\n\r\n const handleClear = (e: React.SyntheticEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n handleValueChange(multiple ? [] : null);\r\n setInputValue('');\r\n };\r\n\r\n const hasValue = multiple\r\n ? Array.isArray(activeValue) && activeValue.length > 0\r\n : !!activeValue;\r\n\r\n // Lọc options theo text người dùng đang gõ\r\n const filteredOptions = React.useMemo(() => {\r\n if (!inputValue || !autocomplete) return options;\r\n // Khi đã có value được chọn, input hiển thị label → không filter theo label đó\r\n if (!multiple && activeValue) {\r\n const selectedOption = options.find((o) => o.value === activeValue);\r\n if (selectedOption && inputValue === selectedOption.label) return options;\r\n }\r\n return options.filter(opt =>\r\n opt.label.toLowerCase().includes(inputValue.toLowerCase())\r\n );\r\n }, [options, inputValue, autocomplete, multiple, activeValue]);\r\n\r\n const { root, inputContainer, input, popup, item, indicator, chip, chipRemove, actionsHeader, actionButton } = comboboxVariants();\r\n const inputGroupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n return (\r\n <BaseCombobox.Root\r\n value={activeValue}\r\n onValueChange={handleValueChange}\r\n multiple={multiple}\r\n onInputValueChange={handleInputValueChange}\r\n autoHighlight\r\n itemToStringLabel={(val: string) => options.find((o) => o.value === val)?.label ?? val}\r\n >\r\n <div className={root({ className })}>\r\n {label && <label className=\"text-sm font-medium text-foreground\">{label}</label>}\r\n\r\n <div className=\"relative w-full group\">\r\n <BaseCombobox.InputGroup ref={inputGroupRef} className={cn(inputContainer(), leftIcon && 'pl-9')}>\r\n {leftIcon && (\r\n <div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors pointer-events-none\">\r\n {leftIcon}\r\n </div>\r\n )}\r\n {multiple ? (\r\n <BaseCombobox.Chips className=\"flex flex-wrap items-center gap-1.5 flex-1 w-full min-w-0\">\r\n {Array.isArray(activeValue) && activeValue.map((val) => {\r\n const option = options.find(o => o.value === val);\r\n return (\r\n <BaseCombobox.Chip key={val} className={chip()}>\r\n {option?.label || val}\r\n <BaseCombobox.ChipRemove className={chipRemove()}>\r\n <X className=\"h-3 w-3\" />\r\n </BaseCombobox.ChipRemove>\r\n </BaseCombobox.Chip>\r\n );\r\n })}\r\n <BaseCombobox.Input\r\n ref={ref}\r\n readOnly={!autocomplete}\r\n placeholder={Array.isArray(activeValue) && activeValue.length > 0 ? '' : placeholder}\r\n className={input()}\r\n />\r\n </BaseCombobox.Chips>\r\n ) : (\r\n <BaseCombobox.Input\r\n ref={ref}\r\n readOnly={!autocomplete}\r\n placeholder={placeholder}\r\n className={cn(input(), !autocomplete && 'cursor-pointer')}\r\n />\r\n )}\r\n\r\n <div className=\"flex items-center gap-1 shrink-0 ml-auto text-muted-foreground\">\r\n {hasValue ? (\r\n <span\r\n role=\"button\"\r\n aria-label=\"Clear selection\"\r\n onPointerDown={(e) => {\r\n e.stopPropagation();\r\n handleClear(e);\r\n }}\r\n onClick={(e) => e.stopPropagation()}\r\n className=\"cursor-pointer flex h-5 w-5 items-center justify-center rounded-full hover:bg-red-50 hover:text-red-500 transition-colors pointer-events-auto\"\r\n >\r\n <X className=\"h-3.5 w-3.5\" />\r\n </span>\r\n ) : (\r\n <BaseCombobox.Trigger className=\"transition-transform group-data-open:rotate-180\">\r\n {isLoading ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <ChevronDown className=\"h-4 w-4\" />}\r\n </BaseCombobox.Trigger>\r\n )}\r\n </div>\r\n </BaseCombobox.InputGroup>\r\n\r\n <BaseCombobox.Portal>\r\n <BaseCombobox.Positioner\r\n anchor={inputGroupRef}\r\n sideOffset={4}\r\n style={{ width: 'var(--anchor-width)' }}\r\n >\r\n <BaseCombobox.Popup className={cn(popup(), 'min-w-0')}>\r\n {multiple && options.length > 0 && (\r\n <div className={actionsHeader()}>\r\n <button\r\n type=\"button\"\r\n aria-label={selectAllText}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n handleValueChange(options.map((o) => o.value));\r\n }}\r\n className={actionButton()}\r\n >\r\n {selectAllText}\r\n </button>\r\n <div className=\"w-px h-3 bg-border\" />\r\n <button\r\n type=\"button\"\r\n aria-label={clearAllText}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n handleValueChange([]);\r\n }}\r\n className={actionButton()}\r\n >\r\n {clearAllText}\r\n </button>\r\n </div>\r\n )}\r\n <BaseCombobox.List className=\"p-1 max-h-[300px] overflow-auto\">\r\n {filteredOptions.length === 0 ? (\r\n <div className=\"py-2 px-8 text-sm text-muted-foreground italic\">{emptyText}</div>\r\n ) : (\r\n filteredOptions.map((option) => (\r\n <BaseCombobox.Item\r\n key={option.value}\r\n value={option.value}\r\n className={item()}\r\n >\r\n <BaseCombobox.ItemIndicator className={indicator()}>\r\n <Check className=\"h-4 w-4\" />\r\n </BaseCombobox.ItemIndicator>\r\n {option.label}\r\n </BaseCombobox.Item>\r\n ))\r\n )}\r\n </BaseCombobox.List>\r\n </BaseCombobox.Popup>\r\n </BaseCombobox.Positioner>\r\n </BaseCombobox.Portal>\r\n </div>\r\n </div>\r\n </BaseCombobox.Root>\r\n );\r\n }\r\n);\r\n\r\nComboBox.displayName = 'ComboBox';\r\n\r\nexport { ComboBox };\r\n"
|
|
312
|
+
}
|
|
313
|
+
]
|
|
314
|
+
},
|
|
315
|
+
"command": {
|
|
316
|
+
"name": "command",
|
|
317
|
+
"dependencies": [
|
|
318
|
+
"@base-ui/react",
|
|
319
|
+
"tailwind-variants",
|
|
320
|
+
"lucide-react"
|
|
321
|
+
],
|
|
322
|
+
"internalDependencies": [],
|
|
323
|
+
"files": [
|
|
324
|
+
{
|
|
325
|
+
"path": "src/components/ui/command/Command.tsx",
|
|
326
|
+
"content": "import * as React from 'react';\r\nimport { Dialog as BaseDialog } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { Search } from 'lucide-react';\r\n\r\n// ─── Variants ────────────────────────────────────────────────────────────────\r\n\r\nconst commandVariants = tv({\r\n slots: {\r\n overlay:\r\n 'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\r\n content: [\r\n 'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\r\n 'w-full max-w-lg rounded-xl border border-border bg-background shadow-2xl',\r\n 'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 ',\r\n 'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n 'overflow-hidden flex flex-col max-h-[min(80vh,460px)]',\r\n ].join(' '),\r\n input: [\r\n 'flex h-12 w-full bg-transparent px-4 text-sm text-foreground outline-none',\r\n 'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\r\n ].join(' '),\r\n list: 'overflow-y-auto overflow-x-hidden flex-1',\r\n group: 'p-1',\r\n groupLabel: 'px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider',\r\n item: [\r\n 'relative flex cursor-pointer select-none items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-none',\r\n 'transition-colors',\r\n 'data-[highlighted=true]:bg-accent data-[highlighted=true]:text-accent-foreground',\r\n '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground',\r\n ].join(' '),\r\n separator: '-mx-1 my-1 h-px bg-border',\r\n empty: 'py-8 text-center text-sm text-muted-foreground',\r\n shortcut: 'ml-auto text-xs tracking-widest text-muted-foreground/70',\r\n },\r\n});\r\n\r\nconst styles = commandVariants();\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ninterface CommandContextValue {\r\n search: string;\r\n setSearch: React.Dispatch<React.SetStateAction<string>>;\r\n highlightedIndex: number;\r\n setHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;\r\n}\r\n\r\nconst CommandContext = React.createContext<CommandContextValue | null>(null);\r\n\r\nfunction useCommand() {\r\n const ctx = React.useContext(CommandContext);\r\n if (!ctx) throw new Error('useCommand must be used within <Command>');\r\n return ctx;\r\n}\r\n\r\n// ─── Command (Root) ──────────────────────────────────────────────────────────\r\n\r\nexport interface CommandProps {\r\n open?: boolean;\r\n onOpenChange?: (open: boolean) => void;\r\n children: React.ReactNode;\r\n className?: string;\r\n}\r\n\r\nconst Command: React.FC<CommandProps> = ({ open, onOpenChange, children, className }) => {\r\n const [search, setSearch] = React.useState('');\r\n const [highlightedIndex, setHighlightedIndex] = React.useState(0);\r\n\r\n React.useEffect(() => {\r\n if (open) {\r\n setSearch('');\r\n setHighlightedIndex(0);\r\n }\r\n }, [open]);\r\n\r\n return (\r\n <CommandContext.Provider value={{ search, setSearch, highlightedIndex, setHighlightedIndex }}>\r\n <BaseDialog.Root open={open} onOpenChange={onOpenChange}>\r\n <BaseDialog.Portal>\r\n <BaseDialog.Backdrop className={styles.overlay()} />\r\n <BaseDialog.Popup className={cn(styles.content(), className)}>\r\n {children}\r\n </BaseDialog.Popup>\r\n </BaseDialog.Portal>\r\n </BaseDialog.Root>\r\n </CommandContext.Provider>\r\n );\r\n};\r\nCommand.displayName = 'Command';\r\n\r\n// ─── CommandInput ────────────────────────────────────────────────────────────\r\n\r\nexport interface CommandInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\r\n onValueChange?: (value: string) => void;\r\n}\r\n\r\nconst CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(\r\n ({ className, placeholder = 'Type a command or search...', onValueChange, ...props }, ref) => {\r\n const { search, setSearch, setHighlightedIndex } = useCommand();\r\n\r\n return (\r\n <div className=\"flex items-center border-b border-border px-3 shrink-0\">\r\n <Search className=\"mr-2 h-4 w-4 shrink-0 text-muted-foreground\" />\r\n <input\r\n ref={ref}\r\n value={search}\r\n onChange={(e) => {\r\n setSearch(e.target.value);\r\n setHighlightedIndex(0);\r\n onValueChange?.(e.target.value);\r\n }}\r\n placeholder={placeholder}\r\n className={cn(styles.input(), className)}\r\n {...props}\r\n />\r\n </div>\r\n );\r\n },\r\n);\r\nCommandInput.displayName = 'CommandInput';\r\n\r\n// ─── CommandList ─────────────────────────────────────────────────────────────\r\n\r\nconst CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, children, ...props }, ref) => (\r\n <div ref={ref} className={cn(styles.list(), className)} role=\"listbox\" {...props}>\r\n {children}\r\n </div>\r\n ),\r\n);\r\nCommandList.displayName = 'CommandList';\r\n\r\n// ─── CommandGroup ────────────────────────────────────────────────────────────\r\n\r\nexport interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {\r\n heading?: string;\r\n}\r\n\r\nconst CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(\r\n ({ className, heading, children, ...props }, ref) => (\r\n <div ref={ref} className={cn(styles.group(), className)} role=\"group\" {...props}>\r\n {heading && <div className={styles.groupLabel()}>{heading}</div>}\r\n {children}\r\n </div>\r\n ),\r\n);\r\nCommandGroup.displayName = 'CommandGroup';\r\n\r\n// ─── CommandItem ─────────────────────────────────────────────────────────────\r\n\r\nexport interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n disabled?: boolean;\r\n keywords?: string[];\r\n onSelect?: () => void;\r\n value?: string;\r\n}\r\n\r\nconst CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(\r\n ({ className, disabled, keywords = [], onSelect, value, children, ...props }, ref) => {\r\n const { search, highlightedIndex, setHighlightedIndex } = useCommand();\r\n const [itemIndex] = React.useState(() => Math.random());\r\n\r\n // Filter: check value, text content, and keywords\r\n const searchable = [value ?? '', ...(typeof children === 'string' ? [children] : []), ...keywords]\r\n .join(' ')\r\n .toLowerCase();\r\n const isVisible = !search || searchable.includes(search.toLowerCase());\r\n\r\n if (!isVisible) return null;\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"option\"\r\n aria-disabled={disabled || undefined}\r\n className={cn(\r\n styles.item(),\r\n disabled && 'opacity-50 pointer-events-none',\r\n className,\r\n )}\r\n onClick={() => {\r\n if (!disabled) onSelect?.();\r\n }}\r\n onKeyDown={(e) => {\r\n if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\r\n e.preventDefault();\r\n onSelect?.();\r\n }\r\n }}\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n );\r\n },\r\n);\r\nCommandItem.displayName = 'CommandItem';\r\n\r\n// ─── CommandEmpty ────────────────────────────────────────────────────────────\r\n\r\nconst CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, children = 'No results found.', ...props }, ref) => (\r\n <div ref={ref} className={cn(styles.empty(), className)} {...props}>\r\n {children}\r\n </div>\r\n ),\r\n);\r\nCommandEmpty.displayName = 'CommandEmpty';\r\n\r\n// ─── CommandSeparator ────────────────────────────────────────────────────────\r\n\r\nconst CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div ref={ref} className={cn(styles.separator(), className)} {...props} />\r\n ),\r\n);\r\nCommandSeparator.displayName = 'CommandSeparator';\r\n\r\n// ─── CommandShortcut ─────────────────────────────────────────────────────────\r\n\r\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\r\n <span className={cn(styles.shortcut(), className)} {...props} />\r\n);\r\nCommandShortcut.displayName = 'CommandShortcut';\r\n\r\n// ─── Exports ─────────────────────────────────────────────────────────────────\r\n\r\nexport {\r\n Command,\r\n CommandInput,\r\n CommandList,\r\n CommandGroup,\r\n CommandItem,\r\n CommandEmpty,\r\n CommandSeparator,\r\n CommandShortcut,\r\n};\r\n"
|
|
288
327
|
}
|
|
289
328
|
]
|
|
290
329
|
},
|
|
@@ -298,7 +337,7 @@
|
|
|
298
337
|
"files": [
|
|
299
338
|
{
|
|
300
339
|
"path": "src/components/ui/context-menu/ContextMenu.tsx",
|
|
301
|
-
"content": "'use client';\r\n\r\nimport * as React from 'react';\r\nimport * as ReactDOM from 'react-dom';\r\nimport { tv } from 'tailwind-variants';\r\nimport { Check, Circle } from 'lucide-react';\r\n\r\nconst contextMenuVariants = tv({\r\n slots: {\r\n content:\r\n 'fixed z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95',\r\n item: 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n checkboxItem:\r\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\r\n radioItem:\r\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\r\n label: 'px-2 py-1.5 text-sm font-semibold',\r\n separator: '-mx-1 my-1 h-px bg-border',\r\n shortcut: 'ml-auto text-xs tracking-widest opacity-60',\r\n indicatorWrapper: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n },\r\n});\r\n\r\nconst styles = contextMenuVariants();\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ninterface ContextMenuState {\r\n open: boolean;\r\n position: { x: number; y: number };\r\n}\r\n\r\nconst ContextMenuContext = React.createContext<{\r\n state: ContextMenuState;\r\n close: () => void;\r\n}>({ state: { open: false, position: { x: 0, y: 0 } }, close: () => {} });\r\n\r\n// ─── Root ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuProps {\r\n children: React.ReactNode;\r\n}\r\n\r\nconst ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {\r\n const [state, setState] = React.useState<ContextMenuState>({\r\n open: false,\r\n position: { x: 0, y: 0 },\r\n });\r\n\r\n const close = React.useCallback(() => setState(s => ({ ...s, open: false })), []);\r\n\r\n // Close on outside click / second right-click / scroll\r\n React.useEffect(() => {\r\n if (!state.open) return;\r\n const handleClose = () => close();\r\n document.addEventListener('click', handleClose, { capture: true });\r\n document.addEventListener('contextmenu', handleClose, { capture: true });\r\n document.addEventListener('scroll', handleClose, { capture: true, passive: true });\r\n return () => {\r\n document.removeEventListener('click', handleClose, { capture: true });\r\n document.removeEventListener('contextmenu', handleClose, { capture: true });\r\n document.removeEventListener('scroll', handleClose, { capture: true });\r\n };\r\n }, [state.open, close]);\r\n\r\n return (\r\n <ContextMenuContext.Provider value={{ state, close }}>\r\n {React.Children.map(children, child => {\r\n if (React.isValidElement(child) && child.type === ContextMenuTrigger) {\r\n return React.cloneElement(\r\n child as React.ReactElement<{ onContextMenu?: (e: React.MouseEvent) => void }>,\r\n {\r\n onContextMenu: (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setState({ open: true, position: { x: e.clientX, y: e.clientY } });\r\n },\r\n }\r\n );\r\n }\r\n return child;\r\n })}\r\n </ContextMenuContext.Provider>\r\n );\r\n};\r\nContextMenu.displayName = 'ContextMenu';\r\n\r\n// ─── Trigger ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\r\n ({ children, ...props }, ref) => (\r\n <div ref={ref} {...props}>{children}</div>\r\n )\r\n);\r\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\r\n\r\n// ─── Content ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\r\n ({ className, children, ...props }, ref) => {\r\n const { state, close } = React.useContext(ContextMenuContext);\r\n const contentRef = React.useRef<HTMLDivElement>(null);\r\n\r\n // Merge refs\r\n const mergedRef = React.useCallback(\r\n (node: HTMLDivElement | null) => {\r\n (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\r\n },\r\n [ref]\r\n );\r\n\r\n // Focus first item on open\r\n React.useEffect(() => {\r\n if (state.open) {\r\n const first = contentRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]');\r\n first?.focus();\r\n }\r\n }, [state.open]);\r\n\r\n // Keyboard navigation\r\n const handleKeyDown = React.useCallback(\r\n (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n const items = Array.from(\r\n contentRef.current?.querySelectorAll<HTMLElement>(\r\n '[role=\"menuitem\"]:not([disabled]),[role=\"menuitemcheckbox\"]:not([disabled]),[role=\"menuitemradio\"]:not([disabled])'\r\n ) ?? []\r\n );\r\n const current = document.activeElement as HTMLElement;\r\n const idx = items.indexOf(current);\r\n\r\n if (e.key === 'ArrowDown') {\r\n e.preventDefault();\r\n items[(idx + 1) % items.length]?.focus();\r\n } else if (e.key === 'ArrowUp') {\r\n e.preventDefault();\r\n items[(idx - 1 + items.length) % items.length]?.focus();\r\n } else if (e.key === 'Escape') {\r\n e.preventDefault();\r\n close();\r\n } else if (e.key === 'Tab') {\r\n e.preventDefault();\r\n close();\r\n } else if (e.key === 'Home') {\r\n e.preventDefault();\r\n items[0]?.focus();\r\n } else if (e.key === 'End') {\r\n e.preventDefault();\r\n items[items.length - 1]?.focus();\r\n }\r\n },\r\n [close]\r\n );\r\n\r\n if (!state.open) return null;\r\n\r\n // Clamp position to viewport\r\n const vw = typeof window !== 'undefined' ? window.innerWidth : 0;\r\n const vh = typeof window !== 'undefined' ? window.innerHeight : 0;\r\n const MENU_W = 192; // ~min-w-[8rem] generous estimate\r\n const MENU_H = 300;\r\n const x = Math.min(state.position.x, vw - MENU_W - 8);\r\n const y = Math.min(state.position.y, vh - MENU_H - 8);\r\n\r\n return ReactDOM.createPortal(\r\n <div\r\n ref={mergedRef}\r\n className={styles.content({ className })}\r\n style={{ top: y, left: x }}\r\n role=\"menu\"\r\n aria-orientation=\"vertical\"\r\n onKeyDown={handleKeyDown}\r\n {...props}\r\n >\r\n {children}\r\n </div>,\r\n document.body\r\n );\r\n }\r\n);\r\nContextMenuContent.displayName = 'ContextMenuContent';\r\n\r\n// ─── Item ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n inset?: boolean;\r\n disabled?: boolean;\r\n}\r\n\r\nconst ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(\r\n ({ className, inset, disabled, onClick, ...props }, ref) => {\r\n const { close } = React.useContext(ContextMenuContext);\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"menuitem\"\r\n tabIndex={disabled ? undefined : -1}\r\n aria-disabled={disabled || undefined}\r\n className={styles.item({\r\n className: `${inset ? 'pl-8' : ''} ${disabled ? 'opacity-50 pointer-events-none' : ''} ${className ?? ''}`,\r\n })}\r\n onClick={(e) => {\r\n if (disabled) return;\r\n onClick?.(e);\r\n close();\r\n }}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n if (!disabled) {\r\n onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\r\n close();\r\n }\r\n }\r\n }}\r\n {...props}\r\n />\r\n );\r\n }\r\n);\r\nContextMenuItem.displayName = 'ContextMenuItem';\r\n\r\n// ─── CheckboxItem ─────────────────────────────────────────────────────────────\r\n\r\nexport interface ContextMenuCheckboxItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n checked?: boolean;\r\n onCheckedChange?: (checked: boolean) => void;\r\n}\r\n\r\nconst ContextMenuCheckboxItem = React.forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(\r\n ({ className, children, checked, onCheckedChange, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n role=\"menuitemcheckbox\"\r\n tabIndex={-1}\r\n aria-checked={checked}\r\n className={styles.checkboxItem({ className })}\r\n onClick={() => onCheckedChange?.(!checked)}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n onCheckedChange?.(!checked);\r\n }\r\n }}\r\n {...props}\r\n >\r\n <span className={styles.indicatorWrapper()}>\r\n {checked && <Check className=\"h-4 w-4\" />}\r\n </span>\r\n {children}\r\n </div>\r\n )\r\n);\r\nContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';\r\n\r\n// ─── RadioGroup + RadioItem ───────────────────────────────────────────────────\r\n\r\nconst ContextMenuRadioContext = React.createContext<{\r\n value?: string;\r\n onValueChange?: (value: string) => void;\r\n}>({});\r\n\r\nexport interface ContextMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\r\n value?: string;\r\n onValueChange?: (value: string) => void;\r\n}\r\n\r\nconst ContextMenuRadioGroup = React.forwardRef<HTMLDivElement, ContextMenuRadioGroupProps>(\r\n ({ value, onValueChange, ...props }, ref) => (\r\n <ContextMenuRadioContext.Provider value={{ value, onValueChange }}>\r\n <div ref={ref} role=\"group\" {...props} />\r\n </ContextMenuRadioContext.Provider>\r\n )\r\n);\r\nContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup';\r\n\r\nexport interface ContextMenuRadioItemProps extends React.HTMLAttributes<HTMLDivElement> {\r\n value: string;\r\n}\r\n\r\nconst ContextMenuRadioItem = React.forwardRef<HTMLDivElement, ContextMenuRadioItemProps>(\r\n ({ className, children, value, ...props }, ref) => {\r\n const ctx = React.useContext(ContextMenuRadioContext);\r\n const isChecked = ctx.value === value;\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"menuitemradio\"\r\n tabIndex={-1}\r\n aria-checked={isChecked}\r\n className={styles.radioItem({ className })}\r\n onClick={() => ctx.onValueChange?.(value)}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n ctx.onValueChange?.(value);\r\n }\r\n }}\r\n {...props}\r\n >\r\n <span className={styles.indicatorWrapper()}>\r\n {isChecked && <Circle className=\"h-2 w-2 fill-current\" />}\r\n </span>\r\n {children}\r\n </div>\r\n );\r\n }\r\n);\r\nContextMenuRadioItem.displayName = 'ContextMenuRadioItem';\r\n\r\n// ─── Label ────────────────────────────────────────────────────────────────────\r\n\r\nconst ContextMenuLabel = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\r\n ({ className, ...props }, ref) => (\r\n <div ref={ref} className={styles.label({ className })} {...props} />\r\n )\r\n);\r\nContextMenuLabel.displayName = 'ContextMenuLabel';\r\n\r\n// ─── Separator ────────────────────────────────────────────────────────────────\r\n\r\nconst ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\r\n ({ className, ...props }, ref) => (\r\n <div ref={ref} role=\"separator\" className={styles.separator({ className })} {...props} />\r\n )\r\n);\r\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\r\n\r\n// ─── Shortcut ─────────────────────────────────────────────────────────────────\r\n\r\nconst ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\r\n <span aria-hidden=\"true\" className={styles.shortcut({ className })} {...props} />\r\n);\r\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\r\n\r\nexport {\r\n ContextMenu,\r\n ContextMenuTrigger,\r\n ContextMenuContent,\r\n ContextMenuItem,\r\n ContextMenuCheckboxItem,\r\n ContextMenuRadioGroup,\r\n ContextMenuRadioItem,\r\n ContextMenuLabel,\r\n ContextMenuSeparator,\r\n ContextMenuShortcut,\r\n contextMenuVariants,\r\n};\r\n"
|
|
340
|
+
"content": "'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { tv } from 'tailwind-variants';\nimport { Check, Circle } from 'lucide-react';\n\nconst contextMenuVariants = tv({\n slots: {\n content:\n 'fixed z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95',\n item: 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n checkboxItem:\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\n radioItem:\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\n label: 'px-2 py-1.5 text-sm font-semibold',\n separator: '-mx-1 my-1 h-px bg-border',\n shortcut: 'ml-auto text-xs tracking-widest opacity-60',\n indicatorWrapper: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\n },\n});\n\nconst styles = contextMenuVariants();\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface ContextMenuState {\n open: boolean;\n position: { x: number; y: number };\n}\n\nconst ContextMenuContext = React.createContext<{\n state: ContextMenuState;\n close: () => void;\n}>({ state: { open: false, position: { x: 0, y: 0 } }, close: () => {} });\n\n// ─── Root ─────────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuProps {\n children: React.ReactNode;\n}\n\nconst ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {\n const [state, setState] = React.useState<ContextMenuState>({\n open: false,\n position: { x: 0, y: 0 },\n });\n\n const close = React.useCallback(() => setState(s => ({ ...s, open: false })), []);\n\n // Close on outside click / second right-click / scroll\n React.useEffect(() => {\n if (!state.open) return;\n const handleClose = () => close();\n document.addEventListener('click', handleClose, { capture: true });\n document.addEventListener('contextmenu', handleClose, { capture: true });\n document.addEventListener('scroll', handleClose, { capture: true, passive: true });\n return () => {\n document.removeEventListener('click', handleClose, { capture: true });\n document.removeEventListener('contextmenu', handleClose, { capture: true });\n document.removeEventListener('scroll', handleClose, { capture: true });\n };\n }, [state.open, close]);\n\n return (\n <ContextMenuContext.Provider value={{ state, close }}>\n {React.Children.map(children, child => {\n if (React.isValidElement(child) && child.type === ContextMenuTrigger) {\n return React.cloneElement(\n child as React.ReactElement<{ onContextMenu?: (e: React.MouseEvent) => void }>,\n {\n onContextMenu: (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setState({ open: true, position: { x: e.clientX, y: e.clientY } });\n },\n }\n );\n }\n return child;\n })}\n </ContextMenuContext.Provider>\n );\n};\nContextMenu.displayName = 'ContextMenu';\n\n// ─── Trigger ──────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\n ({ children, ...props }, ref) => (\n <div ref={ref} {...props}>{children}</div>\n )\n);\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\n\n// ─── Content ──────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ className, children, ...props }, ref) => {\n const { state, close } = React.useContext(ContextMenuContext);\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n // Merge refs\n const mergedRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref]\n );\n\n // Focus first item on open\n React.useEffect(() => {\n if (state.open) {\n const first = contentRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]');\n first?.focus();\n }\n }, [state.open]);\n\n // Keyboard navigation\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n const items = Array.from(\n contentRef.current?.querySelectorAll<HTMLElement>(\n '[role=\"menuitem\"]:not([disabled]),[role=\"menuitemcheckbox\"]:not([disabled]),[role=\"menuitemradio\"]:not([disabled])'\n ) ?? []\n );\n const current = document.activeElement as HTMLElement;\n const idx = items.indexOf(current);\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n items[(idx + 1) % items.length]?.focus();\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n items[(idx - 1 + items.length) % items.length]?.focus();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n close();\n } else if (e.key === 'Tab') {\n e.preventDefault();\n close();\n } else if (e.key === 'Home') {\n e.preventDefault();\n items[0]?.focus();\n } else if (e.key === 'End') {\n e.preventDefault();\n items[items.length - 1]?.focus();\n }\n },\n [close]\n );\n\n if (!state.open) return null;\n\n // Clamp position to viewport\n const vw = typeof window !== 'undefined' ? window.innerWidth : 0;\n const vh = typeof window !== 'undefined' ? window.innerHeight : 0;\n const MENU_W = 192; // ~min-w-[8rem] generous estimate\n const MENU_H = 300;\n const x = Math.min(state.position.x, vw - MENU_W - 8);\n const y = Math.min(state.position.y, vh - MENU_H - 8);\n\n return ReactDOM.createPortal(\n <div\n ref={mergedRef}\n className={styles.content({ className })}\n style={{ top: y, left: x }}\n role=\"menu\"\n aria-orientation=\"vertical\"\n onKeyDown={handleKeyDown}\n {...props}\n >\n {children}\n </div>,\n document.body\n );\n }\n);\nContextMenuContent.displayName = 'ContextMenuContent';\n\n// ─── Item ─────────────────────────────────────────────────────────────────────\n\nexport interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n inset?: boolean;\n disabled?: boolean;\n}\n\nconst ContextMenuItem = React.forwardRef<HTMLDivElement, ContextMenuItemProps>(\n ({ className, inset, disabled, onClick, ...props }, ref) => {\n const { close } = React.useContext(ContextMenuContext);\n return (\n <div\n ref={ref}\n role=\"menuitem\"\n tabIndex={disabled ? undefined : -1}\n aria-disabled={disabled || undefined}\n className={styles.item({\n className: `${inset ? 'pl-8' : ''} ${disabled ? 'opacity-50 pointer-events-none' : ''} ${className ?? ''}`,\n })}\n onClick={(e) => {\n if (disabled) return;\n onClick?.(e);\n close();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (!disabled) {\n onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n close();\n }\n }\n }}\n {...props}\n />\n );\n }\n);\nContextMenuItem.displayName = 'ContextMenuItem';\n\n// ─── CheckboxItem ─────────────────────────────────────────────────────────────\n\nexport interface ContextMenuCheckboxItemProps extends React.HTMLAttributes<HTMLDivElement> {\n checked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuCheckboxItem = React.forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(\n ({ className, children, checked, onCheckedChange, ...props }, ref) => (\n <div\n ref={ref}\n role=\"menuitemcheckbox\"\n tabIndex={-1}\n aria-checked={checked}\n className={styles.checkboxItem({ className })}\n onClick={() => onCheckedChange?.(!checked)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onCheckedChange?.(!checked);\n }\n }}\n {...props}\n >\n <span className={styles.indicatorWrapper()}>\n {checked && <Check className=\"h-4 w-4\" />}\n </span>\n {children}\n </div>\n )\n);\nContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';\n\n// ─── RadioGroup + RadioItem ───────────────────────────────────────────────────\n\nconst ContextMenuRadioContext = React.createContext<{\n value?: string;\n onValueChange?: (value: string) => void;\n}>({});\n\nexport interface ContextMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n value?: string;\n onValueChange?: (value: string) => void;\n}\n\nconst ContextMenuRadioGroup = React.forwardRef<HTMLDivElement, ContextMenuRadioGroupProps>(\n ({ value, onValueChange, ...props }, ref) => (\n <ContextMenuRadioContext.Provider value={{ value, onValueChange }}>\n <div ref={ref} role=\"group\" {...props} />\n </ContextMenuRadioContext.Provider>\n )\n);\nContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup';\n\nexport interface ContextMenuRadioItemProps extends React.HTMLAttributes<HTMLDivElement> {\n value: string;\n}\n\nconst ContextMenuRadioItem = React.forwardRef<HTMLDivElement, ContextMenuRadioItemProps>(\n ({ className, children, value, ...props }, ref) => {\n const ctx = React.useContext(ContextMenuRadioContext);\n const isChecked = ctx.value === value;\n return (\n <div\n ref={ref}\n role=\"menuitemradio\"\n tabIndex={-1}\n aria-checked={isChecked}\n className={styles.radioItem({ className })}\n onClick={() => ctx.onValueChange?.(value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n ctx.onValueChange?.(value);\n }\n }}\n {...props}\n >\n <span className={styles.indicatorWrapper()}>\n {isChecked && <Circle className=\"h-2 w-2 fill-current\" />}\n </span>\n {children}\n </div>\n );\n }\n);\nContextMenuRadioItem.displayName = 'ContextMenuRadioItem';\n\n// ─── Label ────────────────────────────────────────────────────────────────────\n\nconst ContextMenuLabel = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={styles.label({ className })} {...props} />\n )\n);\nContextMenuLabel.displayName = 'ContextMenuLabel';\n\n// ─── Separator ────────────────────────────────────────────────────────────────\n\nconst ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} role=\"separator\" className={styles.separator({ className })} {...props} />\n )\n);\nContextMenuSeparator.displayName = 'ContextMenuSeparator';\n\n// ─── Shortcut ─────────────────────────────────────────────────────────────────\n\nconst ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\n <span aria-hidden=\"true\" className={styles.shortcut({ className })} {...props} />\n);\nContextMenuShortcut.displayName = 'ContextMenuShortcut';\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n contextMenuVariants,\n};\n"
|
|
302
341
|
}
|
|
303
342
|
]
|
|
304
343
|
},
|
|
@@ -317,7 +356,15 @@
|
|
|
317
356
|
"files": [
|
|
318
357
|
{
|
|
319
358
|
"path": "src/components/ui/datepicker/DatePicker.tsx",
|
|
320
|
-
"content": "import * as React from 'react';\r\nimport { Popover as BasePopover } from '@base-ui/react';\r\nimport { DayPicker, type DateRange } from 'react-day-picker';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon, ChevronDown, Clock } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport * as locales from 'react-day-picker/locale';\r\n\r\nimport 'react-day-picker/dist/style.css';\r\nimport { Button } from '../button/Button';\r\n\r\n// ---------- types ----------\r\n\r\nexport type TimeFormat = 'HH' | 'HH:mm' | 'HH:mm:ss';\r\nexport type DatePickerMode = 'single' | 'range' | 'time-only';\r\nexport type TimePickerStyle = 'input' | 'select';\r\n\r\ninterface TimeParts {\r\n h: string;\r\n m: string;\r\n s: string;\r\n}\r\n\r\n/** Props for the DatePicker component */\r\nexport interface DatePickerProps {\r\n /** Picker mode: single date, date range, or time-only */\r\n mode?: DatePickerMode;\r\n /** Selected date (Date for single, DateRange for range) */\r\n date?: Date | DateRange;\r\n /** Callback fired when the date changes */\r\n onDateChange?: (date: Date | DateRange | undefined) => void;\r\n /** Alternative callback (alias for onDateChange) */\r\n onChange?: (date: Date | DateRange | undefined) => void;\r\n /** Current time string, only used when mode is 'time-only' */\r\n timeValue?: string;\r\n /** Callback fired when the time value changes (time-only mode) */\r\n onTimeChange?: (time: string) => void;\r\n /** Label text displayed above the picker */\r\n label?: string;\r\n /** Placeholder text when no date is selected */\r\n placeholder?: string;\r\n /** Disable all dates before today */\r\n disablePastDates?: boolean;\r\n /** Show time picker alongside the calendar */\r\n showTime?: boolean;\r\n /** Time format: hours only, hours:minutes, or hours:minutes:seconds */\r\n timeFormat?: TimeFormat;\r\n /** Time picker UI style: native input or dropdown selects */\r\n timePickerStyle?: TimePickerStyle;\r\n /** Disable the entire picker */\r\n disabled?: boolean;\r\n className?: string;\r\n /** Helper text displayed below the picker */\r\n description?: string;\r\n /** Error message displayed below the picker (replaces description) */\r\n error?: string;\r\n}\r\n\r\n// ---------- helpers ----------\r\n\r\nconst DEFAULT_TIME: TimeParts = { h: '00', m: '00', s: '00' };\r\n\r\nfunction parseTimeParts(timeStr: string): TimeParts {\r\n const [h = '00', m = '00', s = '00'] = timeStr.split(':');\r\n return {\r\n h: h.padStart(2, '0'),\r\n m: m.padStart(2, '0'),\r\n s: s.padStart(2, '0'),\r\n };\r\n}\r\n\r\nfunction buildTimeString(parts: TimeParts, fmt: TimeFormat): string {\r\n if (fmt === 'HH') return parts.h;\r\n if (fmt === 'HH:mm') return `${parts.h}:${parts.m}`;\r\n return `${parts.h}:${parts.m}:${parts.s}`;\r\n}\r\n\r\nfunction applyTimeToDate(base: Date, parts: TimeParts): Date {\r\n const d = new Date(base);\r\n d.setHours(Number(parts.h), Number(parts.m), Number(parts.s), 0);\r\n return d;\r\n}\r\n\r\nfunction dateToTimeParts(d: Date): TimeParts {\r\n return {\r\n h: d.getHours().toString().padStart(2, '0'),\r\n m: d.getMinutes().toString().padStart(2, '0'),\r\n s: d.getSeconds().toString().padStart(2, '0'),\r\n };\r\n}\r\n\r\nfunction formatDateDisplay(d: Date, showTime: boolean, fmt: TimeFormat): string {\r\n const datePart = format(d, 'dd/MM/yyyy');\r\n if (!showTime) return datePart;\r\n if (fmt === 'HH') return `${datePart} ${format(d, 'HH')}h`;\r\n if (fmt === 'HH:mm') return `${datePart} ${format(d, 'HH:mm')}`;\r\n return `${datePart} ${format(d, 'HH:mm:ss')}`;\r\n}\r\n\r\nfunction padOptions(count: number) {\r\n return Array.from({ length: count }, (_, i) => ({\r\n label: i.toString().padStart(2, '0'),\r\n value: i.toString().padStart(2, '0'),\r\n }));\r\n}\r\n\r\nconst hoursOptions = padOptions(24);\r\nconst minutesOptions = padOptions(60);\r\nconst secondsOptions = padOptions(60);\r\n\r\n// ---------- styles ----------\r\n\r\nconst popoverContent = tv({\r\n base: 'z-50 rounded-xl border border-border bg-background text-foreground shadow-xl outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n});\r\n\r\n// ---------- sub-components ----------\r\n\r\ninterface NativeSelectProps {\r\n value: string;\r\n options: { label: string; value: string }[];\r\n onChange: (val: string) => void;\r\n 'aria-label'?: string;\r\n}\r\n\r\nconst NativeScrollSelect: React.FC<NativeSelectProps> = ({ value, options, onChange, 'aria-label': ariaLabel }) => (\r\n <select\r\n aria-label={ariaLabel}\r\n value={value}\r\n onChange={(e) => onChange(e.target.value)}\r\n className=\"h-9 w-full rounded-md border border-border bg-background px-2 text-sm text-foreground focus:border-primary focus:outline-none\"\r\n >\r\n {options.map((o) => (\r\n <option key={o.value} value={o.value}>{o.label}</option>\r\n ))}\r\n </select>\r\n);\r\n\r\ninterface TimePickerProps {\r\n parts: TimeParts;\r\n onChange: (parts: TimeParts) => void;\r\n timeFormat: TimeFormat;\r\n timePickerStyle: TimePickerStyle;\r\n}\r\n\r\nconst TimePicker: React.FC<TimePickerProps> = ({ parts, onChange, timeFormat, timePickerStyle }) => {\r\n const showMinutes = timeFormat === 'HH:mm' || timeFormat === 'HH:mm:ss';\r\n const showSeconds = timeFormat === 'HH:mm:ss';\r\n\r\n if (timePickerStyle === 'input') {\r\n const inputType = timeFormat === 'HH:mm:ss' ? 'time' : 'time';\r\n\r\n // Native time input — giả lập với step\r\n const step = showSeconds ? 1 : 60;\r\n const rawValue = showSeconds\r\n ? `${parts.h}:${parts.m}:${parts.s}`\r\n : `${parts.h}:${parts.m}`;\r\n\r\n return (\r\n <input\r\n type=\"time\"\r\n value={rawValue}\r\n step={step}\r\n onChange={(e) => {\r\n const [h = '00', m = '00', s = '00'] = e.target.value.split(':');\r\n onChange({ h: h.padStart(2, '0'), m: m.padStart(2, '0'), s: s.padStart(2, '0') });\r\n }}\r\n className=\"h-9 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus:border-primary focus:outline-none\"\r\n />\r\n );\r\n }\r\n\r\n return (\r\n <div className=\"flex items-center gap-1.5\">\r\n <div className=\"flex-1\">\r\n <NativeScrollSelect\r\n aria-label=\"Hours\"\r\n value={parts.h}\r\n options={hoursOptions}\r\n onChange={(val) => onChange({ ...parts, h: val })}\r\n />\r\n </div>\r\n {showMinutes && (\r\n <>\r\n <span className=\"text-sm font-bold text-muted-foreground\">:</span>\r\n <div className=\"flex-1\">\r\n <NativeScrollSelect\r\n aria-label=\"Minutes\"\r\n value={parts.m}\r\n options={minutesOptions}\r\n onChange={(val) => onChange({ ...parts, m: val })}\r\n />\r\n </div>\r\n </>\r\n )}\r\n {showSeconds && (\r\n <>\r\n <span className=\"text-sm font-bold text-muted-foreground\">:</span>\r\n <div className=\"flex-1\">\r\n <NativeScrollSelect\r\n aria-label=\"Seconds\"\r\n value={parts.s}\r\n options={secondsOptions}\r\n onChange={(val) => onChange({ ...parts, s: val })}\r\n />\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\n// ---------- main component ----------\r\n\r\nexport const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({\r\n mode = 'single',\r\n date,\r\n onDateChange,\r\n onChange,\r\n timeValue,\r\n onTimeChange,\r\n label,\r\n placeholder = 'Select date...',\r\n disablePastDates = false,\r\n showTime = false,\r\n timeFormat = 'HH:mm:ss',\r\n timePickerStyle = 'select',\r\n disabled = false,\r\n className,\r\n description,\r\n error,\r\n}, ref) => {\r\n const [open, setOpen] = React.useState(false);\r\n const triggerRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n // Khởi tạo parts từ date prop hoặc timeValue\r\n const initParts = React.useMemo<TimeParts>(() => {\r\n if (mode === 'time-only' && timeValue) return parseTimeParts(timeValue);\r\n if (date instanceof Date) return dateToTimeParts(date);\r\n return DEFAULT_TIME;\r\n }, []);\r\n\r\n const [timeParts, setTimeParts] = React.useState<TimeParts>(initParts);\r\n\r\n // Sync khi prop thay đổi từ ngoài\r\n React.useEffect(() => {\r\n if (mode === 'time-only' && timeValue) {\r\n setTimeParts(parseTimeParts(timeValue));\r\n } else if (date instanceof Date) {\r\n setTimeParts(dateToTimeParts(date));\r\n }\r\n }, [date, timeValue, mode]);\r\n\r\n // Gọi callback khi timeParts thay đổi\r\n const handlePartsChange = (newParts: TimeParts) => {\r\n setTimeParts(newParts);\r\n if (mode === 'time-only') {\r\n onTimeChange?.(buildTimeString(newParts, timeFormat));\r\n return;\r\n }\r\n if (date instanceof Date) {\r\n const newDate = applyTimeToDate(date, newParts);\r\n onDateChange?.(newDate);\r\n onChange?.(newDate);\r\n }\r\n };\r\n\r\n const handleDateSelect = (selectedDate: Date | DateRange | Date[] | undefined) => {\r\n if (!selectedDate) {\r\n onDateChange?.(undefined);\r\n onChange?.(undefined);\r\n return;\r\n }\r\n if (mode === 'single' && showTime && selectedDate instanceof Date) {\r\n const newDate = applyTimeToDate(selectedDate, timeParts);\r\n onDateChange?.(newDate);\r\n onChange?.(newDate);\r\n } else {\r\n // Because of our mode checking, we can be confident here\r\n onDateChange?.(selectedDate as DateRange);\r\n onChange?.(selectedDate as DateRange);\r\n }\r\n };\r\n\r\n // ---------- render trigger label ----------\r\n const triggerLabel = React.useMemo(() => {\r\n if (mode === 'time-only') {\r\n const val = timeValue ?? buildTimeString(timeParts, timeFormat);\r\n if (!val || val === '00' || val === '00:00' || val === '00:00:00')\r\n return <span className=\"text-muted-foreground\">{placeholder || 'Select time...'}</span>;\r\n return <span>{val}</span>;\r\n }\r\n\r\n if (!date) return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n\r\n if (mode === 'single' && date instanceof Date) {\r\n return <span>{formatDateDisplay(date, showTime, timeFormat)}</span>;\r\n }\r\n\r\n if (mode === 'range') {\r\n const range = date as DateRange;\r\n if (range.from && range.to) {\r\n return (\r\n <span>\r\n {format(range.from, 'dd/MM/yyyy')} – {format(range.to, 'dd/MM/yyyy')}\r\n </span>\r\n );\r\n }\r\n if (range.from) return <span>{format(range.from, 'dd/MM/yyyy')} –</span>;\r\n }\r\n\r\n return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n }, [date, mode, showTime, timeFormat, timeValue, timeParts, placeholder]);\r\n\r\n const isTimeMode = mode === 'time-only';\r\n const needsTimePicker = isTimeMode || (mode === 'single' && showTime);\r\n\r\n return (\r\n <div ref={ref} className={`flex flex-col gap-1.5 ${className || ''}`}>\r\n {label && (\r\n <label className=\"text-sm font-medium text-foreground leading-none\">\r\n {label}\r\n </label>\r\n )}\r\n\r\n <BasePopover.Root open={open} onOpenChange={disabled ? undefined : setOpen}>\r\n <BasePopover.Trigger\r\n render={\r\n <button\r\n ref={triggerRef}\r\n type=\"button\"\r\n disabled={disabled}\r\n className={[\r\n 'flex h-10 w-full items-center gap-2 rounded-lg border bg-background px-3 py-2 text-sm',\r\n 'ring-offset-background transition-shadow',\r\n 'hover:border-primary focus:border-primary focus:outline-none',\r\n 'disabled:cursor-not-allowed disabled:opacity-50',\r\n error ? 'border-danger focus:border-danger' : 'border-border',\r\n 'group',\r\n ].join(' ')}\r\n >\r\n {isTimeMode ? (\r\n <Clock className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n ) : (\r\n <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n )}\r\n <div className=\"flex-1 truncate text-left\">{triggerLabel}</div>\r\n <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-open:rotate-180\" />\r\n </button>\r\n }\r\n />\r\n\r\n <BasePopover.Portal>\r\n <BasePopover.Positioner anchor={triggerRef} sideOffset={6} className=\"z-50\">\r\n <BasePopover.Popup className={popoverContent()}>\r\n {!isTimeMode && mode === 'single' && (\r\n <div className=\"p-2 flex justify-center\">\r\n <DayPicker\r\n mode=\"single\"\r\n locale={locales.vi}\r\n selected={date as Date | undefined}\r\n onSelect={(d) => handleDateSelect(d)}\r\n disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n className=\"rdp-custom\"\r\n />\r\n </div>\r\n )}\r\n {!isTimeMode && mode === 'range' && (\r\n <div className=\"p-2 flex justify-center\">\r\n <DayPicker\r\n mode=\"range\"\r\n locale={locales.vi}\r\n selected={date as DateRange | undefined}\r\n onSelect={(d) => handleDateSelect(d)}\r\n disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n className=\"rdp-custom\"\r\n />\r\n </div>\r\n )}\r\n\r\n {/* Time picker */}\r\n {needsTimePicker && (\r\n <div className={`border-t border-border p-3 flex flex-col gap-2 ${isTimeMode ? 'border-t-0' : ''}`}>\r\n <div className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide\">\r\n <Clock className=\"w-3.5 h-3.5\" />\r\n <span>\r\n {timeFormat === 'HH' ? 'Select hour' : timeFormat === 'HH:mm' ? 'Hour : Minute' : 'Hour : Minute : Second'}\r\n </span>\r\n </div>\r\n <TimePicker\r\n parts={timeParts}\r\n onChange={handlePartsChange}\r\n timeFormat={timeFormat}\r\n timePickerStyle={timePickerStyle}\r\n />\r\n </div>\r\n )}\r\n\r\n {/* Footer actions */}\r\n <div className=\"flex items-center justify-between gap-2 p-3 border-t border-border\">\r\n <button\r\n type=\"button\"\r\n onClick={() => {\r\n if (mode === 'time-only') {\r\n setTimeParts(DEFAULT_TIME);\r\n onTimeChange?.('');\r\n } else {\r\n onDateChange?.(undefined);\r\n }\r\n }}\r\n className=\"text-xs text-muted-foreground hover:text-foreground transition-colors underline-offset-2 hover:underline\"\r\n >\r\n Clear\r\n </button>\r\n <Button size=\"sm\" onClick={() => setOpen(false)}>\r\n Confirm\r\n </Button>\r\n </div>\r\n </BasePopover.Popup>\r\n </BasePopover.Positioner>\r\n </BasePopover.Portal>\r\n </BasePopover.Root>\r\n {description && !error && (\r\n <p className=\"text-[0.8rem] text-muted-foreground\">{description}</p>\r\n )}\r\n {error && (\r\n <p className=\"text-[0.8rem] font-medium text-danger\">{error}</p>\r\n )}\r\n </div>\r\n );\r\n});\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"
|
|
359
|
+
"content": "import * as React from 'react';\r\nimport { Popover as BasePopover } from '@base-ui/react';\r\nimport { DayPicker, type DateRange } from 'react-day-picker';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon, ChevronDown, Clock } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport * as locales from 'react-day-picker/locale';\r\n\r\nimport 'react-day-picker/dist/style.css';\r\nimport { Button } from '../button/Button';\r\nimport { TimePicker, type TimePickerStyle } from './TimePicker';\r\nimport {\r\n type TimeFormat,\r\n type TimeParts,\r\n DEFAULT_TIME,\r\n parseTimeParts,\r\n buildTimeString,\r\n applyTimeToDate,\r\n dateToTimeParts,\r\n formatDateDisplay,\r\n} from './time-helpers';\r\n\r\n// ---------- types ----------\r\n\r\nexport type { TimeFormat, TimePickerStyle };\r\nexport type DatePickerMode = 'single' | 'range' | 'time-only';\r\n\r\nexport interface DatePickerProps {\r\n mode?: DatePickerMode;\r\n date?: Date | DateRange;\r\n onDateChange?: (date: Date | DateRange | undefined) => void;\r\n onChange?: (date: Date | DateRange | undefined) => void;\r\n timeValue?: string;\r\n onTimeChange?: (time: string) => void;\r\n label?: string;\r\n placeholder?: string;\r\n disablePastDates?: boolean;\r\n showTime?: boolean;\r\n timeFormat?: TimeFormat;\r\n timePickerStyle?: TimePickerStyle;\r\n disabled?: boolean;\r\n className?: string;\r\n description?: string;\r\n error?: string;\r\n locale?: keyof typeof locales;\r\n}\r\n\r\n// ---------- styles ----------\r\n\r\nconst popoverContent = tv({\r\n base: 'z-50 rounded-xl border border-border bg-background text-foreground shadow-xl outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n});\r\n\r\n// ---------- main component ----------\r\n\r\nexport const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(({\r\n mode = 'single',\r\n date,\r\n onDateChange,\r\n onChange,\r\n timeValue,\r\n onTimeChange,\r\n label,\r\n placeholder = 'Select date...',\r\n disablePastDates = false,\r\n showTime = false,\r\n timeFormat = 'HH:mm:ss',\r\n timePickerStyle = 'select',\r\n disabled = false,\r\n className,\r\n description,\r\n error,\r\n locale: localeKey = 'vi',\r\n}, ref) => {\r\n const [open, setOpen] = React.useState(false);\r\n const triggerRef = React.useRef<HTMLButtonElement>(null);\r\n const resolvedLocale = locales[localeKey];\r\n\r\n const initParts = React.useMemo<TimeParts>(() => {\r\n if (mode === 'time-only' && timeValue) return parseTimeParts(timeValue);\r\n if (date instanceof Date) return dateToTimeParts(date);\r\n return DEFAULT_TIME;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const [timeParts, setTimeParts] = React.useState<TimeParts>(initParts);\r\n\r\n React.useEffect(() => {\r\n if (mode === 'time-only' && timeValue) {\r\n setTimeParts(parseTimeParts(timeValue));\r\n } else if (date instanceof Date) {\r\n setTimeParts(dateToTimeParts(date));\r\n }\r\n }, [date, timeValue, mode]);\r\n\r\n const handlePartsChange = (newParts: TimeParts) => {\r\n setTimeParts(newParts);\r\n if (mode === 'time-only') {\r\n onTimeChange?.(buildTimeString(newParts, timeFormat));\r\n return;\r\n }\r\n if (date instanceof Date) {\r\n const newDate = applyTimeToDate(date, newParts);\r\n onDateChange?.(newDate);\r\n onChange?.(newDate);\r\n }\r\n };\r\n\r\n const handleDateSelect = (selectedDate: Date | DateRange | Date[] | undefined) => {\r\n if (!selectedDate) {\r\n onDateChange?.(undefined);\r\n onChange?.(undefined);\r\n return;\r\n }\r\n if (mode === 'single' && showTime && selectedDate instanceof Date) {\r\n const newDate = applyTimeToDate(selectedDate, timeParts);\r\n onDateChange?.(newDate);\r\n onChange?.(newDate);\r\n } else {\r\n onDateChange?.(selectedDate as DateRange);\r\n onChange?.(selectedDate as DateRange);\r\n }\r\n };\r\n\r\n const triggerLabel = React.useMemo(() => {\r\n if (mode === 'time-only') {\r\n const val = timeValue ?? buildTimeString(timeParts, timeFormat);\r\n if (!val || val === '00' || val === '00:00' || val === '00:00:00')\r\n return <span className=\"text-muted-foreground\">{placeholder || 'Select time...'}</span>;\r\n return <span>{val}</span>;\r\n }\r\n\r\n if (!date) return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n\r\n if (mode === 'single' && date instanceof Date) {\r\n return <span>{formatDateDisplay(date, showTime, timeFormat)}</span>;\r\n }\r\n\r\n if (mode === 'range') {\r\n const range = date as DateRange;\r\n if (range.from && range.to) {\r\n return (\r\n <span>\r\n {format(range.from, 'dd/MM/yyyy')} – {format(range.to, 'dd/MM/yyyy')}\r\n </span>\r\n );\r\n }\r\n if (range.from) return <span>{format(range.from, 'dd/MM/yyyy')} –</span>;\r\n }\r\n\r\n return <span className=\"text-muted-foreground\">{placeholder}</span>;\r\n }, [date, mode, showTime, timeFormat, timeValue, timeParts, placeholder]);\r\n\r\n const isTimeMode = mode === 'time-only';\r\n const needsTimePicker = isTimeMode || (mode === 'single' && showTime);\r\n\r\n return (\r\n <div ref={ref} className={`flex flex-col gap-1.5 ${className || ''}`}>\r\n {label && (\r\n <label className=\"text-sm font-medium text-foreground leading-none\">\r\n {label}\r\n </label>\r\n )}\r\n\r\n <BasePopover.Root open={open} onOpenChange={disabled ? undefined : setOpen}>\r\n <BasePopover.Trigger\r\n render={\r\n <button\r\n ref={triggerRef}\r\n type=\"button\"\r\n disabled={disabled}\r\n className={[\r\n 'flex h-10 w-full items-center gap-2 rounded-lg border bg-background px-3 py-2 text-sm',\r\n 'ring-offset-background transition-shadow',\r\n 'hover:border-primary focus:border-primary focus:outline-none',\r\n 'disabled:cursor-not-allowed disabled:opacity-50',\r\n error ? 'border-danger focus:border-danger' : 'border-border',\r\n 'group',\r\n ].join(' ')}\r\n >\r\n {isTimeMode ? (\r\n <Clock className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n ) : (\r\n <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\r\n )}\r\n <div className=\"flex-1 truncate text-left\">{triggerLabel}</div>\r\n <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-open:rotate-180\" />\r\n </button>\r\n }\r\n />\r\n\r\n <BasePopover.Portal>\r\n <BasePopover.Positioner anchor={triggerRef} sideOffset={6} className=\"z-50\">\r\n <BasePopover.Popup className={popoverContent()}>\r\n {!isTimeMode && mode === 'single' && (\r\n <div className=\"p-2 flex justify-center\">\r\n <DayPicker\r\n mode=\"single\"\r\n locale={resolvedLocale}\r\n selected={date as Date | undefined}\r\n onSelect={(d) => handleDateSelect(d)}\r\n disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n className=\"rdp-custom\"\r\n />\r\n </div>\r\n )}\r\n {!isTimeMode && mode === 'range' && (\r\n <div className=\"p-2 flex justify-center\">\r\n <DayPicker\r\n mode=\"range\"\r\n locale={resolvedLocale}\r\n selected={date as DateRange | undefined}\r\n onSelect={(d) => handleDateSelect(d)}\r\n disabled={disablePastDates ? [{ before: new Date() }] : undefined}\r\n className=\"rdp-custom\"\r\n />\r\n </div>\r\n )}\r\n\r\n {needsTimePicker && (\r\n <div className={`border-t border-border p-3 flex flex-col gap-2 ${isTimeMode ? 'border-t-0' : ''}`}>\r\n <div className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide\">\r\n <Clock className=\"w-3.5 h-3.5\" />\r\n <span>\r\n {timeFormat === 'HH' ? 'Select hour' : timeFormat === 'HH:mm' ? 'Hour : Minute' : 'Hour : Minute : Second'}\r\n </span>\r\n </div>\r\n <TimePicker\r\n parts={timeParts}\r\n onChange={handlePartsChange}\r\n timeFormat={timeFormat}\r\n timePickerStyle={timePickerStyle}\r\n />\r\n </div>\r\n )}\r\n\r\n <div className=\"flex items-center justify-between gap-2 p-3 border-t border-border\">\r\n <button\r\n type=\"button\"\r\n onClick={() => {\r\n if (mode === 'time-only') {\r\n setTimeParts(DEFAULT_TIME);\r\n onTimeChange?.('');\r\n } else {\r\n onDateChange?.(undefined);\r\n }\r\n }}\r\n className=\"text-xs text-muted-foreground hover:text-foreground transition-colors underline-offset-2 hover:underline\"\r\n >\r\n Clear\r\n </button>\r\n <Button size=\"sm\" onClick={() => setOpen(false)}>\r\n Confirm\r\n </Button>\r\n </div>\r\n </BasePopover.Popup>\r\n </BasePopover.Positioner>\r\n </BasePopover.Portal>\r\n </BasePopover.Root>\r\n {description && !error && (\r\n <p className=\"text-[0.8rem] text-muted-foreground\">{description}</p>\r\n )}\r\n {error && (\r\n <p className=\"text-[0.8rem] font-medium text-danger\">{error}</p>\r\n )}\r\n </div>\r\n );\r\n});\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n"
|
|
360
|
+
},
|
|
361
|
+
{
|
|
362
|
+
"path": "src/components/ui/datepicker/time-helpers.ts",
|
|
363
|
+
"content": "import { format } from 'date-fns';\r\n\r\nexport type TimeFormat = 'HH' | 'HH:mm' | 'HH:mm:ss';\r\n\r\nexport interface TimeParts {\r\n h: string;\r\n m: string;\r\n s: string;\r\n}\r\n\r\nexport const DEFAULT_TIME: TimeParts = { h: '00', m: '00', s: '00' };\r\n\r\nexport function parseTimeParts(timeStr: string): TimeParts {\r\n const [h = '00', m = '00', s = '00'] = timeStr.split(':');\r\n return {\r\n h: h.padStart(2, '0'),\r\n m: m.padStart(2, '0'),\r\n s: s.padStart(2, '0'),\r\n };\r\n}\r\n\r\nexport function buildTimeString(parts: TimeParts, fmt: TimeFormat): string {\r\n if (fmt === 'HH') return parts.h;\r\n if (fmt === 'HH:mm') return `${parts.h}:${parts.m}`;\r\n return `${parts.h}:${parts.m}:${parts.s}`;\r\n}\r\n\r\nexport function applyTimeToDate(base: Date, parts: TimeParts): Date {\r\n const d = new Date(base);\r\n d.setHours(Number(parts.h), Number(parts.m), Number(parts.s), 0);\r\n return d;\r\n}\r\n\r\nexport function dateToTimeParts(d: Date): TimeParts {\r\n return {\r\n h: d.getHours().toString().padStart(2, '0'),\r\n m: d.getMinutes().toString().padStart(2, '0'),\r\n s: d.getSeconds().toString().padStart(2, '0'),\r\n };\r\n}\r\n\r\nexport function formatDateDisplay(d: Date, showTime: boolean, fmt: TimeFormat): string {\r\n const datePart = format(d, 'dd/MM/yyyy');\r\n if (!showTime) return datePart;\r\n if (fmt === 'HH') return `${datePart} ${format(d, 'HH')}h`;\r\n if (fmt === 'HH:mm') return `${datePart} ${format(d, 'HH:mm')}`;\r\n return `${datePart} ${format(d, 'HH:mm:ss')}`;\r\n}\r\n\r\nfunction padOptions(count: number) {\r\n return Array.from({ length: count }, (_, i) => ({\r\n label: i.toString().padStart(2, '0'),\r\n value: i.toString().padStart(2, '0'),\r\n }));\r\n}\r\n\r\nexport const hoursOptions = padOptions(24);\r\nexport const minutesOptions = padOptions(60);\r\nexport const secondsOptions = padOptions(60);\r\n"
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
"path": "src/components/ui/datepicker/TimePicker.tsx",
|
|
367
|
+
"content": "import React from 'react';\r\nimport type { TimeParts, TimeFormat } from './time-helpers';\r\nimport { hoursOptions, minutesOptions, secondsOptions } from './time-helpers';\r\n\r\nexport type TimePickerStyle = 'input' | 'select';\r\n\r\n// ─── NativeScrollSelect ───────��─────────────────────────────────────────────\r\n\r\ninterface NativeSelectProps {\r\n value: string;\r\n options: { label: string; value: string }[];\r\n onChange: (val: string) => void;\r\n 'aria-label'?: string;\r\n}\r\n\r\nconst NativeScrollSelect: React.FC<NativeSelectProps> = ({ value, options, onChange, 'aria-label': ariaLabel }) => (\r\n <select\r\n aria-label={ariaLabel}\r\n value={value}\r\n onChange={(e) => onChange(e.target.value)}\r\n className=\"h-9 w-full rounded-md border border-border bg-background px-2 text-sm text-foreground focus:border-primary focus:outline-none\"\r\n >\r\n {options.map((o) => (\r\n <option key={o.value} value={o.value}>{o.label}</option>\r\n ))}\r\n </select>\r\n);\r\n\r\n// ─── TimePicker ──────���──────────────────────────────────────────────────────\r\n\r\nexport interface TimePickerProps {\r\n parts: TimeParts;\r\n onChange: (parts: TimeParts) => void;\r\n timeFormat: TimeFormat;\r\n timePickerStyle: TimePickerStyle;\r\n}\r\n\r\nexport const TimePicker: React.FC<TimePickerProps> = ({ parts, onChange, timeFormat, timePickerStyle }) => {\r\n const showMinutes = timeFormat === 'HH:mm' || timeFormat === 'HH:mm:ss';\r\n const showSeconds = timeFormat === 'HH:mm:ss';\r\n\r\n if (timePickerStyle === 'input') {\r\n const step = showSeconds ? 1 : 60;\r\n const rawValue = showSeconds\r\n ? `${parts.h}:${parts.m}:${parts.s}`\r\n : `${parts.h}:${parts.m}`;\r\n\r\n return (\r\n <input\r\n type=\"time\"\r\n value={rawValue}\r\n step={step}\r\n onChange={(e) => {\r\n const [h = '00', m = '00', s = '00'] = e.target.value.split(':');\r\n onChange({ h: h.padStart(2, '0'), m: m.padStart(2, '0'), s: s.padStart(2, '0') });\r\n }}\r\n className=\"h-9 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus:border-primary focus:outline-none\"\r\n />\r\n );\r\n }\r\n\r\n return (\r\n <div className=\"flex items-center gap-1.5\">\r\n <div className=\"flex-1\">\r\n <NativeScrollSelect\r\n aria-label=\"Hours\"\r\n value={parts.h}\r\n options={hoursOptions}\r\n onChange={(val) => onChange({ ...parts, h: val })}\r\n />\r\n </div>\r\n {showMinutes && (\r\n <>\r\n <span className=\"text-sm font-bold text-muted-foreground\">:</span>\r\n <div className=\"flex-1\">\r\n <NativeScrollSelect\r\n aria-label=\"Minutes\"\r\n value={parts.m}\r\n options={minutesOptions}\r\n onChange={(val) => onChange({ ...parts, m: val })}\r\n />\r\n </div>\r\n </>\r\n )}\r\n {showSeconds && (\r\n <>\r\n <span className=\"text-sm font-bold text-muted-foreground\">:</span>\r\n <div className=\"flex-1\">\r\n <NativeScrollSelect\r\n aria-label=\"Seconds\"\r\n value={parts.s}\r\n options={secondsOptions}\r\n onChange={(val) => onChange({ ...parts, s: val })}\r\n />\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n );\r\n};\r\n"
|
|
321
368
|
}
|
|
322
369
|
]
|
|
323
370
|
},
|
|
@@ -332,7 +379,7 @@
|
|
|
332
379
|
"files": [
|
|
333
380
|
{
|
|
334
381
|
"path": "src/components/ui/dialog/Dialog.tsx",
|
|
335
|
-
"content": "import * as React from 'react';\r\nimport { Dialog as BaseDialog } from '@base-ui/react';\r\nimport { X } from 'lucide-react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\n\r\nconst dialogVariants = tv({\r\n slots: {\r\n overlay:\r\n 'fixed inset-0
|
|
382
|
+
"content": "import * as React from 'react';\r\nimport { Dialog as BaseDialog } from '@base-ui/react';\r\nimport { X } from 'lucide-react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\n\r\nconst dialogVariants = tv({\r\n slots: {\r\n overlay:\r\n 'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\r\n content: [\r\n 'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 p-6',\r\n 'w-full max-w-lg rounded-xl border border-border bg-background shadow-2xl',\r\n 'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 ',\r\n 'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n ].join(' '),\r\n header: 'flex flex-col space-y-1.5 text-center sm:text-left',\r\n footer: 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-auto',\r\n title: 'text-lg font-semibold leading-none tracking-tight',\r\n description: 'text-sm text-muted-foreground',\r\n close:\r\n 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-open:bg-accent data-open:text-muted-foreground',\r\n },\r\n variants: {\r\n size: {\r\n default: {\r\n content: 'max-w-lg sm:rounded-lg',\r\n },\r\n fullScreen: {\r\n content:\r\n 'inset-0 left-0 top-0 translate-x-0 translate-y-0 max-w-none h-full rounded-none border-none',\r\n },\r\n },\r\n },\r\n defaultVariants: {\r\n size: 'default',\r\n },\r\n});\r\n\r\n/* ─── Root ─── */\r\nconst Dialog = BaseDialog.Root;\r\n\r\n/* ─── Trigger ─── */\r\n// Hỗ trợ cả render={} (Base UI) lẫn children trực tiếp.\r\n// Nếu children là một React element (e.g. <Button>), tự động dùng làm render prop\r\n// để tránh nested button (<button><button>…</button></button>).\r\ntype BaseTriggerProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\r\n\r\ninterface DialogTriggerProps extends Omit<BaseTriggerProps, 'render'> {\r\n render?: BaseTriggerProps['render'];\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst DialogTrigger = React.forwardRef<HTMLElement, DialogTriggerProps>(\r\n ({ render: renderProp, children, ...props }, ref) => {\r\n const resolvedRender =\r\n renderProp ?? (React.isValidElement(children) ? children : undefined);\r\n\r\n return (\r\n <BaseDialog.Trigger\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n render={resolvedRender}\r\n {...props}\r\n >\r\n {resolvedRender ? undefined : children}\r\n </BaseDialog.Trigger>\r\n );\r\n },\r\n);\r\nDialogTrigger.displayName = 'DialogTrigger';\r\n\r\n\r\n/* ─── Close (re-export for custom close buttons) ─── */\r\nconst DialogClose = BaseDialog.Close;\r\n\r\n/* ─── Content (Portal + Backdrop + Popup + default X button) ─── */\r\ninterface DialogContentProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>, 'className'>,\r\n VariantProps<typeof dialogVariants> {\r\n className?: string;\r\n}\r\n\r\nconst DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(\r\n ({ className, children, size, ...props }, ref) => {\r\n const slots = dialogVariants({ size });\r\n return (\r\n <BaseDialog.Portal>\r\n <BaseDialog.Backdrop className={slots.overlay()} />\r\n <BaseDialog.Popup ref={ref} className={slots.content({ className })} {...props}>\r\n {children}\r\n <BaseDialog.Close className={slots.close()}>\r\n <X className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">Close</span>\r\n </BaseDialog.Close>\r\n </BaseDialog.Popup>\r\n </BaseDialog.Portal>\r\n );\r\n },\r\n);\r\nDialogContent.displayName = 'DialogContent';\r\n\r\n/* ─── Header ─── */\r\nconst DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const slots = dialogVariants();\r\n return <div ref={ref} className={slots.header({ className })} {...props} />;\r\n },\r\n);\r\nDialogHeader.displayName = 'DialogHeader';\r\n\r\n/* ─── Footer ─── */\r\nconst DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const slots = dialogVariants();\r\n return <div ref={ref} className={slots.footer({ className })} {...props} />;\r\n },\r\n);\r\nDialogFooter.displayName = 'DialogFooter';\r\n\r\n/* ─── Title ─── */\r\nconst DialogTitle = React.forwardRef<\r\n HTMLHeadingElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Title>, 'className'> & { className?: string }\r\n>(({ className, ...props }, ref) => {\r\n const slots = dialogVariants();\r\n return <BaseDialog.Title ref={ref} className={slots.title({ className })} {...props} />;\r\n});\r\nDialogTitle.displayName = 'DialogTitle';\r\n\r\n/* ─── Description ─── */\r\nconst DialogDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Description>, 'className'> & { className?: string }\r\n>(({ className, ...props }, ref) => {\r\n const slots = dialogVariants();\r\n return (\r\n <BaseDialog.Description ref={ref} className={slots.description({ className })} {...props} />\r\n );\r\n});\r\nDialogDescription.displayName = 'DialogDescription';\r\n\r\nexport {\r\n Dialog,\r\n DialogTrigger,\r\n DialogContent,\r\n DialogHeader,\r\n DialogFooter,\r\n DialogTitle,\r\n DialogDescription,\r\n DialogClose,\r\n};\r\n"
|
|
336
383
|
}
|
|
337
384
|
]
|
|
338
385
|
},
|
|
@@ -347,7 +394,7 @@
|
|
|
347
394
|
"files": [
|
|
348
395
|
{
|
|
349
396
|
"path": "src/components/ui/drawer/Drawer.tsx",
|
|
350
|
-
"content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { Dialog as BaseDialog } from '@base-ui/react';\r\nimport { X } from 'lucide-react';\r\n\r\nconst drawerVariants = tv({\r\n slots: {\r\n overlay:\r\n 'fixed inset-0 z-50 bg-black/40 data-starting:animate-in data-ending:animate-out data-ending:fade-out-0 data-starting:fade-in-0',\r\n panel: [\r\n 'fixed z-50 bg-background shadow-2xl flex flex-col',\r\n 'data-starting:animate-in data-ending:animate-out duration-300',\r\n 'outline-none overflow-hidden m-0 p-0 max-w-full max-h-full border-none',\r\n ],\r\n header:\r\n 'flex items-center justify-between px-6 py-4 border-b border-border/50 shrink-0',\r\n title: 'text-base font-semibold text-foreground',\r\n description: 'text-sm text-muted-foreground mt-0.5',\r\n body: 'flex-1 overflow-y-auto px-6 py-4',\r\n footer: 'px-6 py-4 border-t border-border/50 shrink-0',\r\n close:\r\n 'rounded-sm opacity-70 hover:opacity-100 transition-opacity ring-offset-background focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',\r\n },\r\n variants: {\r\n direction: {\r\n left: {\r\n panel:\r\n 'inset-y-0 left-0 h-full data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full transition-transform',\r\n },\r\n right: {\r\n panel:\r\n 'inset-y-0 right-0 h-full data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full transition-transform',\r\n },\r\n top: {\r\n panel:\r\n 'inset-x-0 top-0 w-full data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full transition-transform',\r\n },\r\n bottom: {\r\n panel:\r\n 'inset-x-0 bottom-0 w-full data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full transition-transform',\r\n },\r\n },\r\n size: {\r\n sm: {},\r\n md: {},\r\n lg: {},\r\n full: {},\r\n },\r\n backdropBlur: {\r\n true: { overlay: 'backdrop-blur-sm' },\r\n false: { overlay: '' },\r\n },\r\n },\r\n compoundVariants: [\r\n { direction: 'left', size: 'sm', class: { panel: 'w-64' } },\r\n { direction: 'left', size: 'md', class: { panel: 'w-80' } },\r\n { direction: 'left', size: 'lg', class: { panel: 'w-[500px]' } },\r\n { direction: 'left', size: 'full', class: { panel: 'w-full' } },\r\n { direction: 'right', size: 'sm', class: { panel: 'w-64' } },\r\n { direction: 'right', size: 'md', class: { panel: 'w-80' } },\r\n { direction: 'right', size: 'lg', class: { panel: 'w-[500px]' } },\r\n { direction: 'right', size: 'full', class: { panel: 'w-full' } },\r\n { direction: 'top', size: 'sm', class: { panel: 'h-48' } },\r\n { direction: 'top', size: 'md', class: { panel: 'h-64' } },\r\n { direction: 'top', size: 'lg', class: { panel: 'h-[500px]' } },\r\n { direction: 'top', size: 'full', class: { panel: 'h-full' } },\r\n { direction: 'bottom', size: 'sm', class: { panel: 'h-48' } },\r\n { direction: 'bottom', size: 'md', class: { panel: 'h-64' } },\r\n { direction: 'bottom', size: 'lg', class: { panel: 'h-[500px]' } },\r\n { direction: 'bottom', size: 'full', class: { panel: 'h-full' } },\r\n ],\r\n defaultVariants: {\r\n direction: 'right',\r\n size: 'md',\r\n backdropBlur: true,\r\n },\r\n});\r\n\r\n/* ─── Root ─── */\r\nconst Drawer = BaseDialog.Root;\r\n\r\n/* ─── Trigger ─── */\r\nconst DrawerTrigger = BaseDialog.Trigger;\r\n\r\n/* ─── Close (re-export for custom close buttons) ─── */\r\nconst DrawerClose = BaseDialog.Close;\r\n\r\n/* ─── Content (Portal + Backdrop + Popup) ─── */\r\ninterface DrawerContentProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>, 'className'>,\r\n VariantProps<typeof drawerVariants> {\r\n className?: string;\r\n}\r\n\r\nconst DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(\r\n ({ className, children, direction, size, backdropBlur, ...props }, ref) => {\r\n const slots = drawerVariants({ direction, size, backdropBlur });\r\n return (\r\n <BaseDialog.Portal>\r\n <BaseDialog.Backdrop className={slots.overlay()} />\r\n <BaseDialog.Popup ref={ref} className={slots.panel({ className })} {...props}>\r\n {children}\r\n </BaseDialog.Popup>\r\n </BaseDialog.Portal>\r\n );\r\n },\r\n);\r\nDrawerContent.displayName = 'DrawerContent';\r\n\r\n/* ─── Header (includes close button by default) ─── */\r\ninterface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\r\n hideClose?: boolean;\r\n}\r\n\r\nconst DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\r\n ({ className, children, hideClose, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return (\r\n <div ref={ref} className={slots.header({ className })} {...props}>\r\n <div>{children}</div>\r\n {!hideClose && (\r\n <BaseDialog.Close className={slots.close()} aria-label=\"Close\">\r\n <X className=\"h-4 w-4\" />\r\n </BaseDialog.Close>\r\n )}\r\n </div>\r\n );\r\n },\r\n);\r\nDrawerHeader.displayName = 'DrawerHeader';\r\n\r\n/* ─── Title ─── */\r\nconst DrawerTitle = React.forwardRef<\r\n HTMLHeadingElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Title>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return <BaseDialog.Title ref={ref} className={slots.title({ className })} {...props} />;\r\n});\r\nDrawerTitle.displayName = 'DrawerTitle';\r\n\r\n/* ─── Description ─── */\r\nconst DrawerDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Description>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return (\r\n <BaseDialog.Description ref={ref} className={slots.description({ className })} {...props} />\r\n );\r\n});\r\nDrawerDescription.displayName = 'DrawerDescription';\r\n\r\n/* ─── Body (scrollable content area) ─── */\r\nconst DrawerBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return <div ref={ref} className={slots.body({ className })} {...props} />;\r\n },\r\n);\r\nDrawerBody.displayName = 'DrawerBody';\r\n\r\n/* ─── Footer ─── */\r\nconst DrawerFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return <div ref={ref} className={slots.footer({ className })} {...props} />;\r\n },\r\n);\r\nDrawerFooter.displayName = 'DrawerFooter';\r\n\r\nexport {\r\n Drawer,\r\n DrawerTrigger,\r\n DrawerContent,\r\n DrawerHeader,\r\n DrawerTitle,\r\n DrawerDescription,\r\n DrawerBody,\r\n DrawerFooter,\r\n DrawerClose,\r\n
|
|
397
|
+
"content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { Dialog as BaseDialog } from '@base-ui/react';\r\nimport { X } from 'lucide-react';\r\n\r\nconst drawerVariants = tv({\r\n slots: {\r\n overlay:\r\n 'fixed inset-0 z-50 bg-black/40 data-starting:animate-in data-ending:animate-out data-ending:fade-out-0 data-starting:fade-in-0',\r\n panel: [\r\n 'fixed z-50 bg-background shadow-2xl flex flex-col',\r\n 'data-starting:animate-in data-ending:animate-out duration-300',\r\n 'outline-none overflow-hidden m-0 p-0 max-w-full max-h-full border-none',\r\n ],\r\n header:\r\n 'flex items-center justify-between px-6 py-4 border-b border-border/50 shrink-0',\r\n title: 'text-base font-semibold text-foreground',\r\n description: 'text-sm text-muted-foreground mt-0.5',\r\n body: 'flex-1 overflow-y-auto px-6 py-4',\r\n footer: 'px-6 py-4 border-t border-border/50 shrink-0',\r\n close:\r\n 'rounded-sm opacity-70 hover:opacity-100 transition-opacity ring-offset-background focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',\r\n },\r\n variants: {\r\n direction: {\r\n left: {\r\n panel:\r\n 'inset-y-0 left-0 h-full data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full transition-transform',\r\n },\r\n right: {\r\n panel:\r\n 'inset-y-0 right-0 h-full data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full transition-transform',\r\n },\r\n top: {\r\n panel:\r\n 'inset-x-0 top-0 w-full data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full transition-transform',\r\n },\r\n bottom: {\r\n panel:\r\n 'inset-x-0 bottom-0 w-full data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full transition-transform',\r\n },\r\n },\r\n size: {\r\n sm: {},\r\n md: {},\r\n lg: {},\r\n full: {},\r\n },\r\n backdropBlur: {\r\n true: { overlay: 'backdrop-blur-sm' },\r\n false: { overlay: '' },\r\n },\r\n },\r\n compoundVariants: [\r\n { direction: 'left', size: 'sm', class: { panel: 'w-64' } },\r\n { direction: 'left', size: 'md', class: { panel: 'w-80' } },\r\n { direction: 'left', size: 'lg', class: { panel: 'w-[500px]' } },\r\n { direction: 'left', size: 'full', class: { panel: 'w-full' } },\r\n { direction: 'right', size: 'sm', class: { panel: 'w-64' } },\r\n { direction: 'right', size: 'md', class: { panel: 'w-80' } },\r\n { direction: 'right', size: 'lg', class: { panel: 'w-[500px]' } },\r\n { direction: 'right', size: 'full', class: { panel: 'w-full' } },\r\n { direction: 'top', size: 'sm', class: { panel: 'h-48' } },\r\n { direction: 'top', size: 'md', class: { panel: 'h-64' } },\r\n { direction: 'top', size: 'lg', class: { panel: 'h-[500px]' } },\r\n { direction: 'top', size: 'full', class: { panel: 'h-full' } },\r\n { direction: 'bottom', size: 'sm', class: { panel: 'h-48' } },\r\n { direction: 'bottom', size: 'md', class: { panel: 'h-64' } },\r\n { direction: 'bottom', size: 'lg', class: { panel: 'h-[500px]' } },\r\n { direction: 'bottom', size: 'full', class: { panel: 'h-full' } },\r\n ],\r\n defaultVariants: {\r\n direction: 'right',\r\n size: 'md',\r\n backdropBlur: true,\r\n },\r\n});\r\n\r\n/* ─── Root ─── */\r\nconst Drawer = BaseDialog.Root;\r\n\r\n/* ─── Trigger ─── */\r\nconst DrawerTrigger = BaseDialog.Trigger;\r\n\r\n/* ─── Close (re-export for custom close buttons) ─── */\r\nconst DrawerClose = BaseDialog.Close;\r\n\r\n/* ─── Content (Portal + Backdrop + Popup) ─── */\r\ninterface DrawerContentProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>, 'className'>,\r\n VariantProps<typeof drawerVariants> {\r\n className?: string;\r\n}\r\n\r\nconst DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(\r\n ({ className, children, direction, size, backdropBlur, ...props }, ref) => {\r\n const slots = drawerVariants({ direction, size, backdropBlur });\r\n return (\r\n <BaseDialog.Portal>\r\n <BaseDialog.Backdrop className={slots.overlay()} />\r\n <BaseDialog.Popup ref={ref} className={slots.panel({ className })} {...props}>\r\n {children}\r\n </BaseDialog.Popup>\r\n </BaseDialog.Portal>\r\n );\r\n },\r\n);\r\nDrawerContent.displayName = 'DrawerContent';\r\n\r\n/* ─── Header (includes close button by default) ─── */\r\ninterface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\r\n hideClose?: boolean;\r\n}\r\n\r\nconst DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\r\n ({ className, children, hideClose, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return (\r\n <div ref={ref} className={slots.header({ className })} {...props}>\r\n <div>{children}</div>\r\n {!hideClose && (\r\n <BaseDialog.Close className={slots.close()} aria-label=\"Close\">\r\n <X className=\"h-4 w-4\" />\r\n </BaseDialog.Close>\r\n )}\r\n </div>\r\n );\r\n },\r\n);\r\nDrawerHeader.displayName = 'DrawerHeader';\r\n\r\n/* ─── Title ─── */\r\nconst DrawerTitle = React.forwardRef<\r\n HTMLHeadingElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Title>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return <BaseDialog.Title ref={ref} className={slots.title({ className })} {...props} />;\r\n});\r\nDrawerTitle.displayName = 'DrawerTitle';\r\n\r\n/* ─── Description ─── */\r\nconst DrawerDescription = React.forwardRef<\r\n HTMLParagraphElement,\r\n Omit<React.ComponentPropsWithoutRef<typeof BaseDialog.Description>, 'className'> & {\r\n className?: string;\r\n }\r\n>(({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return (\r\n <BaseDialog.Description ref={ref} className={slots.description({ className })} {...props} />\r\n );\r\n});\r\nDrawerDescription.displayName = 'DrawerDescription';\r\n\r\n/* ─── Body (scrollable content area) ─── */\r\nconst DrawerBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return <div ref={ref} className={slots.body({ className })} {...props} />;\r\n },\r\n);\r\nDrawerBody.displayName = 'DrawerBody';\r\n\r\n/* ─── Footer ─── */\r\nconst DrawerFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const slots = drawerVariants();\r\n return <div ref={ref} className={slots.footer({ className })} {...props} />;\r\n },\r\n);\r\nDrawerFooter.displayName = 'DrawerFooter';\r\n\r\nexport {\r\n Drawer,\r\n DrawerTrigger,\r\n DrawerContent,\r\n DrawerHeader,\r\n DrawerTitle,\r\n DrawerDescription,\r\n DrawerBody,\r\n DrawerFooter,\r\n DrawerClose,\r\n};\r\nexport type { DrawerContentProps, DrawerHeaderProps };\r\n"
|
|
351
398
|
}
|
|
352
399
|
]
|
|
353
400
|
},
|
|
@@ -362,7 +409,7 @@
|
|
|
362
409
|
"files": [
|
|
363
410
|
{
|
|
364
411
|
"path": "src/components/ui/dropdown-menu/DropdownMenu.tsx",
|
|
365
|
-
"content": "import * as React from 'react';\r\nimport { Menu as BaseMenu } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { Check, ChevronRight, Circle } from 'lucide-react';\r\n\r\nconst dropdownMenuVariants = tv({\r\n slots: {\r\n content:\r\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n item: 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n checkboxItem:\r\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n radioItem:\r\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n label: 'px-2 py-1.5 text-sm font-semibold',\r\n separator: '-mx-1 my-1 h-px bg-border',\r\n shortcut: 'ml-auto text-xs tracking-widest opacity-60',\r\n subTrigger:\r\n 'flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-open:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n subContent:\r\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n indicatorWrapper: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n },\r\n});\r\n\r\nconst styles = dropdownMenuVariants();\r\n\r\n/* ─── Root ──────────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenu = BaseMenu.Root;\r\n\r\n/* ─── Trigger ───────────────────────────────────────────────────────── */\r\n\r\nexport interface DropdownMenuTriggerProps\r\n extends React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger> { }\r\n\r\nconst DropdownMenuTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n DropdownMenuTriggerProps\r\n>(({ ...props }, ref) => <BaseMenu.Trigger ref={ref as React.Ref<HTMLButtonElement>} {...props} />);\r\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\r\n\r\n/* ─── Content ───────────────────────────────────────────────────────── */\r\n\r\n/** Props for the DropdownMenuContent component */\r\nexport interface DropdownMenuContentProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\r\n /** Which side of the trigger to render the menu */\r\n side?: 'top' | 'right' | 'bottom' | 'left';\r\n /** Alignment relative to the trigger */\r\n align?: 'start' | 'center' | 'end';\r\n /** Distance in px between the trigger and the menu */\r\n sideOffset?: number;\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuContent = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Popup>,\r\n DropdownMenuContentProps\r\n>(({ className, side = 'bottom', align = 'start', sideOffset = 4, ...props }, ref) => (\r\n <BaseMenu.Portal>\r\n <BaseMenu.Positioner side={side} align={align} sideOffset={sideOffset}>\r\n <BaseMenu.Popup ref={ref} className={styles.content({ className })} {...props} />\r\n </BaseMenu.Positioner>\r\n </BaseMenu.Portal>\r\n));\r\nDropdownMenuContent.displayName = 'DropdownMenuContent';\r\n\r\n/* ─── Item ──────────────────────────────────────────────────────────── */\r\n\r\n/** Props for the DropdownMenuItem component */\r\nexport interface DropdownMenuItemProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>, 'className'> {\r\n /** Add left padding to align with items that have icons */\r\n inset?: boolean;\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuItem = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Item>,\r\n DropdownMenuItemProps\r\n>(({ className, inset, ...props }, ref) => (\r\n <BaseMenu.Item\r\n ref={ref}\r\n className={styles.item({ className: `${inset ? 'pl-8' : ''} ${className ?? ''}` })}\r\n {...props}\r\n />\r\n));\r\nDropdownMenuItem.displayName = 'DropdownMenuItem';\r\n\r\n/* ─── CheckboxItem ──────────────────────────────────────────────────── */\r\n\r\nexport interface DropdownMenuCheckboxItemProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItem>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuCheckboxItem = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.CheckboxItem>,\r\n DropdownMenuCheckboxItemProps\r\n>(({ className, children, checked, ...props }, ref) => (\r\n <BaseMenu.CheckboxItem\r\n ref={ref}\r\n className={styles.checkboxItem({ className })}\r\n checked={checked}\r\n {...props}\r\n >\r\n <span className={styles.indicatorWrapper()}>\r\n <BaseMenu.CheckboxItemIndicator>\r\n <Check className=\"h-4 w-4\" />\r\n </BaseMenu.CheckboxItemIndicator>\r\n </span>\r\n {children}\r\n </BaseMenu.CheckboxItem>\r\n));\r\nDropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';\r\n\r\n/* ─── RadioGroup ────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuRadioGroup = BaseMenu.RadioGroup;\r\n\r\n/* ─── RadioItem ─────────────────────────────────────────────────────── */\r\n\r\nexport interface DropdownMenuRadioItemProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.RadioItem>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuRadioItem = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.RadioItem>,\r\n DropdownMenuRadioItemProps\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseMenu.RadioItem ref={ref} className={styles.radioItem({ className })} {...props}>\r\n <span className={styles.indicatorWrapper()}>\r\n <BaseMenu.RadioItemIndicator>\r\n <Circle className=\"h-2 w-2 fill-current\" />\r\n </BaseMenu.RadioItemIndicator>\r\n </span>\r\n {children}\r\n </BaseMenu.RadioItem>\r\n));\r\nDropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';\r\n\r\n/* ─── Label ─────────────────────────────────────────────────────────── */\r\n\r\n/** Props for the DropdownMenuLabel component */\r\nexport interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<'div'> {\r\n /** Add left padding to align with items that have icons */\r\n inset?: boolean;\r\n}\r\n\r\nconst DropdownMenuLabel = React.forwardRef<HTMLDivElement, DropdownMenuLabelProps>(\r\n ({ className, inset, ...props }, ref) => (\r\n <div ref={ref} className={styles.label({ className: `${inset ? 'pl-8' : ''} ${className ?? ''}` })} {...props} />\r\n )\r\n);\r\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\r\n\r\n/* ─── Separator ─────────────────────────────────────────────────────── */\r\n\r\nexport interface DropdownMenuSeparatorProps extends React.ComponentPropsWithoutRef<'div'> { }\r\n\r\nconst DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(\r\n ({ className, ...props }, ref) => (\r\n <div ref={ref} className={styles.separator({ className })} {...props} />\r\n )\r\n);\r\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\r\n\r\n/* ─── Shortcut ──────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\r\n <span className={styles.shortcut({ className })} {...props} />\r\n);\r\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\r\n\r\n/* ─── Sub ───────────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuSub = BaseMenu.SubmenuRoot;\r\n\r\n/** Props for the DropdownMenuSubTrigger component */\r\nexport interface DropdownMenuSubTriggerProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>, 'className'> {\r\n /** Add left padding to align with items that have icons */\r\n inset?: boolean;\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuSubTrigger = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.SubmenuTrigger>,\r\n DropdownMenuSubTriggerProps\r\n>(({ className, inset, children, ...props }, ref) => (\r\n <BaseMenu.SubmenuTrigger\r\n ref={ref}\r\n className={styles.subTrigger({ className: `${inset ? 'pl-8' : ''} ${className ?? ''}` })}\r\n {...props}\r\n >\r\n {children}\r\n <ChevronRight className=\"ml-auto\" />\r\n </BaseMenu.SubmenuTrigger>\r\n));\r\nDropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';\r\n\r\nexport interface DropdownMenuSubContentProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuSubContent = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Popup>,\r\n DropdownMenuSubContentProps\r\n>(({ className, ...props }, ref) => (\r\n <BaseMenu.Portal>\r\n <BaseMenu.Positioner sideOffset={-4}>\r\n <BaseMenu.Popup ref={ref} className={styles.subContent({ className })} {...props} />\r\n </BaseMenu.Positioner>\r\n </BaseMenu.Portal>\r\n));\r\nDropdownMenuSubContent.displayName = 'DropdownMenuSubContent';\r\n\r\n/* ─── Group ─────────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuGroup = BaseMenu.Group;\r\n\r\nexport {\r\n DropdownMenu,\r\n DropdownMenuTrigger,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuRadioGroup,\r\n DropdownMenuRadioItem,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuShortcut,\r\n DropdownMenuSub,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuSubContent,\r\n DropdownMenuGroup,\r\n dropdownMenuVariants,\r\n};\r\n"
|
|
412
|
+
"content": "import * as React from 'react';\r\nimport { Menu as BaseMenu } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { Check, ChevronRight, Circle } from 'lucide-react';\r\n\r\nconst dropdownMenuVariants = tv({\r\n slots: {\r\n content:\r\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n item: 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n checkboxItem:\r\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n radioItem:\r\n 'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',\r\n label: 'px-2 py-1.5 text-sm font-semibold',\r\n separator: '-mx-1 my-1 h-px bg-border',\r\n shortcut: 'ml-auto text-xs tracking-widest opacity-60',\r\n subTrigger:\r\n 'flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-open:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n subContent:\r\n 'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\r\n indicatorWrapper: 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',\r\n },\r\n});\r\n\r\nconst styles = dropdownMenuVariants();\r\n\r\n/* ─── Root ──────────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenu = BaseMenu.Root;\r\n\r\n/* ─── Trigger ───────────────────────────────────────────────────────── */\r\n\r\nexport type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger>;\r\n\r\nconst DropdownMenuTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n DropdownMenuTriggerProps\r\n>(({ ...props }, ref) => <BaseMenu.Trigger ref={ref as React.Ref<HTMLButtonElement>} {...props} />);\r\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\r\n\r\n/* ─── Content ───────────────────────────────────────────────────────── */\r\n\r\n/** Props for the DropdownMenuContent component */\r\nexport interface DropdownMenuContentProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\r\n /** Which side of the trigger to render the menu */\r\n side?: 'top' | 'right' | 'bottom' | 'left';\r\n /** Alignment relative to the trigger */\r\n align?: 'start' | 'center' | 'end';\r\n /** Distance in px between the trigger and the menu */\r\n sideOffset?: number;\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuContent = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Popup>,\r\n DropdownMenuContentProps\r\n>(({ className, side = 'bottom', align = 'start', sideOffset = 4, ...props }, ref) => (\r\n <BaseMenu.Portal>\r\n <BaseMenu.Positioner side={side} align={align} sideOffset={sideOffset}>\r\n <BaseMenu.Popup ref={ref} className={styles.content({ className })} {...props} />\r\n </BaseMenu.Positioner>\r\n </BaseMenu.Portal>\r\n));\r\nDropdownMenuContent.displayName = 'DropdownMenuContent';\r\n\r\n/* ─── Item ──────────────────────────────────────────────────────────── */\r\n\r\n/** Props for the DropdownMenuItem component */\r\nexport interface DropdownMenuItemProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>, 'className'> {\r\n /** Add left padding to align with items that have icons */\r\n inset?: boolean;\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuItem = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Item>,\r\n DropdownMenuItemProps\r\n>(({ className, inset, ...props }, ref) => (\r\n <BaseMenu.Item\r\n ref={ref}\r\n className={styles.item({ className: `${inset ? 'pl-8' : ''} ${className ?? ''}` })}\r\n {...props}\r\n />\r\n));\r\nDropdownMenuItem.displayName = 'DropdownMenuItem';\r\n\r\n/* ─── CheckboxItem ──────────────────────────────────────────────────── */\r\n\r\nexport interface DropdownMenuCheckboxItemProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItem>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuCheckboxItem = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.CheckboxItem>,\r\n DropdownMenuCheckboxItemProps\r\n>(({ className, children, checked, ...props }, ref) => (\r\n <BaseMenu.CheckboxItem\r\n ref={ref}\r\n className={styles.checkboxItem({ className })}\r\n checked={checked}\r\n {...props}\r\n >\r\n <span className={styles.indicatorWrapper()}>\r\n <BaseMenu.CheckboxItemIndicator>\r\n <Check className=\"h-4 w-4\" />\r\n </BaseMenu.CheckboxItemIndicator>\r\n </span>\r\n {children}\r\n </BaseMenu.CheckboxItem>\r\n));\r\nDropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';\r\n\r\n/* ─── RadioGroup ────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuRadioGroup = BaseMenu.RadioGroup;\r\n\r\n/* ─── RadioItem ─────────────────────────────────────────────────────── */\r\n\r\nexport interface DropdownMenuRadioItemProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.RadioItem>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuRadioItem = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.RadioItem>,\r\n DropdownMenuRadioItemProps\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseMenu.RadioItem ref={ref} className={styles.radioItem({ className })} {...props}>\r\n <span className={styles.indicatorWrapper()}>\r\n <BaseMenu.RadioItemIndicator>\r\n <Circle className=\"h-2 w-2 fill-current\" />\r\n </BaseMenu.RadioItemIndicator>\r\n </span>\r\n {children}\r\n </BaseMenu.RadioItem>\r\n));\r\nDropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';\r\n\r\n/* ─── Label ─────────────────────────────────────────────────────────── */\r\n\r\n/** Props for the DropdownMenuLabel component */\r\nexport interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<'div'> {\r\n /** Add left padding to align with items that have icons */\r\n inset?: boolean;\r\n}\r\n\r\nconst DropdownMenuLabel = React.forwardRef<HTMLDivElement, DropdownMenuLabelProps>(\r\n ({ className, inset, ...props }, ref) => (\r\n <div ref={ref} className={styles.label({ className: `${inset ? 'pl-8' : ''} ${className ?? ''}` })} {...props} />\r\n )\r\n);\r\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\r\n\r\n/* ─── Separator ─────────────────────────────────────────────────────── */\r\n\r\nexport type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;\r\n\r\nconst DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(\r\n ({ className, ...props }, ref) => (\r\n <div ref={ref} className={styles.separator({ className })} {...props} />\r\n )\r\n);\r\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\r\n\r\n/* ─── Shortcut ──────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\r\n <span className={styles.shortcut({ className })} {...props} />\r\n);\r\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\r\n\r\n/* ─── Sub ───────────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuSub = BaseMenu.SubmenuRoot;\r\n\r\n/** Props for the DropdownMenuSubTrigger component */\r\nexport interface DropdownMenuSubTriggerProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>, 'className'> {\r\n /** Add left padding to align with items that have icons */\r\n inset?: boolean;\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuSubTrigger = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.SubmenuTrigger>,\r\n DropdownMenuSubTriggerProps\r\n>(({ className, inset, children, ...props }, ref) => (\r\n <BaseMenu.SubmenuTrigger\r\n ref={ref}\r\n className={styles.subTrigger({ className: `${inset ? 'pl-8' : ''} ${className ?? ''}` })}\r\n {...props}\r\n >\r\n {children}\r\n <ChevronRight className=\"ml-auto\" />\r\n </BaseMenu.SubmenuTrigger>\r\n));\r\nDropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';\r\n\r\nexport interface DropdownMenuSubContentProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst DropdownMenuSubContent = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Popup>,\r\n DropdownMenuSubContentProps\r\n>(({ className, ...props }, ref) => (\r\n <BaseMenu.Portal>\r\n <BaseMenu.Positioner sideOffset={-4}>\r\n <BaseMenu.Popup ref={ref} className={styles.subContent({ className })} {...props} />\r\n </BaseMenu.Positioner>\r\n </BaseMenu.Portal>\r\n));\r\nDropdownMenuSubContent.displayName = 'DropdownMenuSubContent';\r\n\r\n/* ─── Group ─────────────────────────────────────────────────────────── */\r\n\r\nconst DropdownMenuGroup = BaseMenu.Group;\r\n\r\nexport {\r\n DropdownMenu,\r\n DropdownMenuTrigger,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuRadioGroup,\r\n DropdownMenuRadioItem,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuShortcut,\r\n DropdownMenuSub,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuSubContent,\r\n DropdownMenuGroup,\r\n};\r\n"
|
|
366
413
|
}
|
|
367
414
|
]
|
|
368
415
|
},
|
|
@@ -375,7 +422,21 @@
|
|
|
375
422
|
"files": [
|
|
376
423
|
{
|
|
377
424
|
"path": "src/components/ui/empty/Empty.tsx",
|
|
378
|
-
"content": "import * as React from 'react';\nimport { cn } from '@/lib/utils/cn';\nimport {\n Users,\n FileText,\n Bell,\n SearchX,\n Database,\n FolderOpen,\n ShoppingCart,\n MessageSquare,\n ImageIcon,\n Inbox,\n Package,\n BarChart3,\n WifiOff,\n} from 'lucide-react';\n\n// ─── Preset definitions ───────────────────────────────────────────────────────\n\nexport type EmptyPreset =\n | 'users'\n | 'documents'\n | 'notifications'\n | 'search'\n | 'data'\n | 'inbox'\n | 'orders'\n | 'messages'\n | 'images'\n | 'folders'\n | 'stats'\n | 'offline'\n | 'general';\n\ninterface PresetConfig {\n icon: React.ElementType;\n title: string;\n description: string;\n /** Tailwind gradient classes for the icon circle background */\n bg: string;\n /** Tailwind bg class for decorative dot accents */\n dot: string;\n /** Tailwind text-color class for the icon */\n iconColor: string;\n}\n\nconst PRESETS: Record<EmptyPreset, PresetConfig> = {\n users: {\n icon: Users,\n title: 'Chưa có người dùng',\n description: 'Bắt đầu bằng cách mời thành viên đầu tiên vào hệ thống.',\n bg: 'from-blue-100 to-indigo-200 dark:from-blue-900/50 dark:to-indigo-800/50',\n dot: 'bg-indigo-400/50',\n iconColor: 'text-indigo-600 dark:text-indigo-300',\n },\n documents: {\n icon: FileText,\n title: 'Chưa có tài liệu',\n description: 'Tạo tài liệu đầu tiên để bắt đầu quản lý nội dung.',\n bg: 'from-amber-100 to-orange-200 dark:from-amber-900/50 dark:to-orange-800/50',\n dot: 'bg-orange-400/50',\n iconColor: 'text-orange-600 dark:text-orange-300',\n },\n notifications: {\n icon: Bell,\n title: 'Không có thông báo',\n description: 'Bạn đã đọc hết tất cả thông báo. Tuyệt vời!',\n bg: 'from-violet-100 to-purple-200 dark:from-violet-900/50 dark:to-purple-800/50',\n dot: 'bg-purple-400/50',\n iconColor: 'text-purple-600 dark:text-purple-300',\n },\n search: {\n icon: SearchX,\n title: 'Không tìm thấy kết quả',\n description: 'Thử thay đổi từ khóa hoặc điều chỉnh bộ lọc của bạn.',\n bg: 'from-slate-100 to-gray-200 dark:from-slate-800/60 dark:to-gray-700/50',\n dot: 'bg-slate-400/50',\n iconColor: 'text-slate-500 dark:text-slate-400',\n },\n data: {\n icon: Database,\n title: 'Chưa có dữ liệu',\n description: 'Dữ liệu sẽ hiển thị tại đây sau khi bạn thêm thông tin.',\n bg: 'from-teal-100 to-emerald-200 dark:from-teal-900/50 dark:to-emerald-800/50',\n dot: 'bg-emerald-400/50',\n iconColor: 'text-emerald-600 dark:text-emerald-300',\n },\n inbox: {\n icon: Inbox,\n title: 'Hộp thư trống',\n description: 'Không có tin nhắn nào. Thưởng thức khoảnh khắc yên bình!',\n bg: 'from-pink-100 to-rose-200 dark:from-pink-900/50 dark:to-rose-800/50',\n dot: 'bg-rose-400/50',\n iconColor: 'text-rose-600 dark:text-rose-300',\n },\n orders: {\n icon: ShoppingCart,\n title: 'Chưa có đơn hàng',\n description: 'Các đơn hàng sẽ xuất hiện ở đây sau khi được tạo.',\n bg: 'from-emerald-100 to-green-200 dark:from-emerald-900/50 dark:to-green-800/50',\n dot: 'bg-green-400/50',\n iconColor: 'text-green-700 dark:text-green-300',\n },\n messages: {\n icon: MessageSquare,\n title: 'Chưa có tin nhắn',\n description: 'Bắt đầu cuộc trò chuyện mới để kết nối với mọi người.',\n bg: 'from-cyan-100 to-sky-200 dark:from-cyan-900/50 dark:to-sky-800/50',\n dot: 'bg-sky-400/50',\n iconColor: 'text-sky-600 dark:text-sky-300',\n },\n images: {\n icon: ImageIcon,\n title: 'Chưa có hình ảnh',\n description: 'Tải lên hình ảnh đầu tiên để xây dựng thư viện media.',\n bg: 'from-fuchsia-100 to-pink-200 dark:from-fuchsia-900/50 dark:to-pink-800/50',\n dot: 'bg-fuchsia-400/50',\n iconColor: 'text-fuchsia-600 dark:text-fuchsia-300',\n },\n folders: {\n icon: FolderOpen,\n title: 'Thư mục trống',\n description: 'Chưa có file nào. Kéo thả hoặc nhấn để thêm mới.',\n bg: 'from-yellow-100 to-amber-200 dark:from-yellow-900/50 dark:to-amber-800/50',\n dot: 'bg-amber-400/50',\n iconColor: 'text-amber-600 dark:text-amber-300',\n },\n stats: {\n icon: BarChart3,\n title: 'Chưa có thống kê',\n description: 'Dữ liệu phân tích sẽ hiển thị khi có hoạt động.',\n bg: 'from-blue-100 to-violet-200 dark:from-blue-900/50 dark:to-violet-800/50',\n dot: 'bg-violet-400/50',\n iconColor: 'text-blue-600 dark:text-blue-300',\n },\n offline: {\n icon: WifiOff,\n title: 'Mất kết nối',\n description: 'Không thể tải dữ liệu. Kiểm tra kết nối mạng và thử lại.',\n bg: 'from-red-100 to-rose-200 dark:from-red-900/50 dark:to-rose-800/50',\n dot: 'bg-red-400/50',\n iconColor: 'text-red-600 dark:text-red-300',\n },\n general: {\n icon: Package,\n title: 'Không có gì ở đây',\n description: 'Nội dung sẽ xuất hiện sau khi bạn thêm dữ liệu mới.',\n bg: 'from-slate-100 to-gray-200 dark:from-slate-800/60 dark:to-gray-700/50',\n dot: 'bg-slate-400/50',\n iconColor: 'text-slate-500 dark:text-slate-400',\n },\n};\n\n// ─── Size config ──────────────────────────────────────────────────────────────\n\nexport type EmptyStateSize = 'sm' | 'md' | 'lg';\n\nconst SIZE = {\n sm: {\n root: 'py-8 px-6 gap-3',\n iconBg: 'w-16 h-16',\n outerRing: 'w-28 h-28',\n iconSize: 'w-7 h-7',\n dot: ['w-2 h-2', 'w-2.5 h-2.5', 'w-1.5 h-1.5'],\n title: 'text-base font-semibold',\n desc: 'text-xs max-w-xs',\n },\n md: {\n root: 'py-12 px-8 gap-4',\n iconBg: 'w-24 h-24',\n outerRing: 'w-40 h-40',\n iconSize: 'w-10 h-10',\n dot: ['w-3 h-3', 'w-3.5 h-3.5', 'w-2 h-2'],\n title: 'text-xl font-semibold',\n desc: 'text-sm max-w-sm',\n },\n lg: {\n root: 'py-20 px-12 gap-5',\n iconBg: 'w-32 h-32',\n outerRing: 'w-52 h-52',\n iconSize: 'w-14 h-14',\n dot: ['w-4 h-4', 'w-5 h-5', 'w-3 h-3'],\n title: 'text-2xl font-bold',\n desc: 'text-base max-w-md',\n },\n} satisfies Record<EmptyStateSize, object>;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface EmptyStateProps {\n /** Use a predefined empty state design */\n preset?: EmptyPreset;\n /** Override the icon (pass a lucide-react component) */\n icon?: React.ElementType;\n /** Override the title */\n title?: string;\n /** Override the description */\n description?: string;\n /** Action element(s) rendered below the description */\n action?: React.ReactNode;\n size?: EmptyStateSize;\n className?: string;\n /** Extra content rendered after the action */\n children?: React.ReactNode;\n}\n\nexport const EmptyState: React.FC<EmptyStateProps> = ({\n preset = 'general',\n icon: CustomIcon,\n title: customTitle,\n description: customDescription,\n action,\n size = 'md',\n className,\n children,\n}) => {\n const cfg = PRESETS[preset];\n const s = SIZE[size];\n const Icon = CustomIcon ?? cfg.icon;\n const title = customTitle ?? cfg.title;\n const description = customDescription ?? cfg.description;\n\n return (\n <div\n className={cn(\n 'flex flex-col items-center justify-center text-center',\n 'animate-in fade-in slide-in-from-bottom-4 duration-500',\n s.root,\n className,\n )}\n >\n {/* ── Icon area ──────────────────────────────────────────────────── */}\n <div className=\"relative inline-flex items-center justify-center\">\n {/* Outer glow halo */}\n <div\n className={cn(\n 'absolute rounded-full opacity-20 bg-gradient-to-br pointer-events-none',\n cfg.bg,\n s.outerRing,\n )}\n />\n\n {/* Icon circle */}\n <div\n className={cn(\n 'relative rounded-full flex items-center justify-center shadow-lg overflow-hidden',\n 'bg-gradient-to-br',\n cfg.bg,\n s.iconBg,\n )}\n >\n {/* Gloss highlight */}\n <div className=\"absolute inset-0 bg-gradient-to-b from-white/30 to-transparent pointer-events-none\" />\n <Icon className={cn(cfg.iconColor, s.iconSize)} strokeWidth={1.5} />\n </div>\n\n {/* Decorative dot — top-right */}\n <span\n className={cn(\n 'absolute rounded-full animate-pulse',\n cfg.dot,\n s.dot[0],\n 'top-0.5 right-0.5',\n )}\n />\n {/* Decorative dot — bottom-left */}\n <span\n className={cn(\n 'absolute rounded-full animate-pulse [animation-delay:450ms]',\n cfg.dot,\n s.dot[1],\n 'bottom-1 left-0.5',\n )}\n />\n {/* Decorative dot — left-middle */}\n <span\n className={cn(\n 'absolute rounded-full animate-pulse [animation-delay:900ms]',\n cfg.dot,\n s.dot[2],\n 'top-1/3 -left-1',\n )}\n />\n </div>\n\n {/* ── Text ───────────────────────────────────────────────────────── */}\n <div className=\"space-y-1.5\">\n <h3 className={cn('text-foreground', s.title)}>{title}</h3>\n <p className={cn('text-muted-foreground leading-relaxed mx-auto', s.desc)}>\n {description}\n </p>\n </div>\n\n {/* ── Actions ────────────────────────────────────────────────────── */}\n {action && (\n <div className=\"flex flex-wrap gap-3 justify-center\">{action}</div>\n )}\n\n {children}\n </div>\n );\n};\n\nEmptyState.displayName = 'EmptyState';\n"
|
|
425
|
+
"content": "import * as React from 'react';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport {\r\n Users,\r\n FileText,\r\n Bell,\r\n SearchX,\r\n Database,\r\n FolderOpen,\r\n ShoppingCart,\r\n MessageSquare,\r\n ImageIcon,\r\n Inbox,\r\n Package,\r\n BarChart3,\r\n WifiOff,\r\n} from 'lucide-react';\r\n\r\n// ─── Preset definitions ───────────────────────────────────────────────────────\r\n\r\nexport type EmptyPreset =\r\n | 'users'\r\n | 'documents'\r\n | 'notifications'\r\n | 'search'\r\n | 'data'\r\n | 'inbox'\r\n | 'orders'\r\n | 'messages'\r\n | 'images'\r\n | 'folders'\r\n | 'stats'\r\n | 'offline'\r\n | 'general';\r\n\r\ninterface PresetConfig {\r\n icon: React.ElementType;\r\n title: string;\r\n description: string;\r\n /** Tailwind gradient classes for the icon circle background */\r\n bg: string;\r\n /** Tailwind bg class for decorative dot accents */\r\n dot: string;\r\n /** Tailwind text-color class for the icon */\r\n iconColor: string;\r\n}\r\n\r\nconst PRESETS: Record<EmptyPreset, PresetConfig> = {\r\n users: {\r\n icon: Users,\r\n title: 'Chưa có người dùng',\r\n description: 'Bắt đầu bằng cách mời thành viên đầu tiên vào hệ thống.',\r\n bg: 'from-blue-100 to-indigo-200 dark:from-blue-900/50 dark:to-indigo-800/50',\r\n dot: 'bg-indigo-400/50',\r\n iconColor: 'text-indigo-600 dark:text-indigo-300',\r\n },\r\n documents: {\r\n icon: FileText,\r\n title: 'Chưa có tài liệu',\r\n description: 'Tạo tài liệu đầu tiên để bắt đầu quản lý nội dung.',\r\n bg: 'from-amber-100 to-orange-200 dark:from-amber-900/50 dark:to-orange-800/50',\r\n dot: 'bg-orange-400/50',\r\n iconColor: 'text-orange-600 dark:text-orange-300',\r\n },\r\n notifications: {\r\n icon: Bell,\r\n title: 'Không có thông báo',\r\n description: 'Bạn đã đọc hết tất cả thông báo. Tuyệt vời!',\r\n bg: 'from-violet-100 to-purple-200 dark:from-violet-900/50 dark:to-purple-800/50',\r\n dot: 'bg-purple-400/50',\r\n iconColor: 'text-purple-600 dark:text-purple-300',\r\n },\r\n search: {\r\n icon: SearchX,\r\n title: 'Không tìm thấy kết quả',\r\n description: 'Thử thay đổi từ khóa hoặc điều chỉnh bộ lọc của bạn.',\r\n bg: 'from-slate-100 to-gray-200 dark:from-slate-800/60 dark:to-gray-700/50',\r\n dot: 'bg-slate-400/50',\r\n iconColor: 'text-slate-500 dark:text-slate-400',\r\n },\r\n data: {\r\n icon: Database,\r\n title: 'Chưa có dữ liệu',\r\n description: 'Dữ liệu sẽ hiển thị tại đây sau khi bạn thêm thông tin.',\r\n bg: 'from-teal-100 to-emerald-200 dark:from-teal-900/50 dark:to-emerald-800/50',\r\n dot: 'bg-emerald-400/50',\r\n iconColor: 'text-emerald-600 dark:text-emerald-300',\r\n },\r\n inbox: {\r\n icon: Inbox,\r\n title: 'Hộp thư trống',\r\n description: 'Không có tin nhắn nào. Thưởng thức khoảnh khắc yên bình!',\r\n bg: 'from-pink-100 to-rose-200 dark:from-pink-900/50 dark:to-rose-800/50',\r\n dot: 'bg-rose-400/50',\r\n iconColor: 'text-rose-600 dark:text-rose-300',\r\n },\r\n orders: {\r\n icon: ShoppingCart,\r\n title: 'Chưa có đơn hàng',\r\n description: 'Các đơn hàng sẽ xuất hiện ở đây sau khi được tạo.',\r\n bg: 'from-emerald-100 to-green-200 dark:from-emerald-900/50 dark:to-green-800/50',\r\n dot: 'bg-green-400/50',\r\n iconColor: 'text-green-700 dark:text-green-300',\r\n },\r\n messages: {\r\n icon: MessageSquare,\r\n title: 'Chưa có tin nhắn',\r\n description: 'Bắt đầu cuộc trò chuyện mới để kết nối với mọi người.',\r\n bg: 'from-cyan-100 to-sky-200 dark:from-cyan-900/50 dark:to-sky-800/50',\r\n dot: 'bg-sky-400/50',\r\n iconColor: 'text-sky-600 dark:text-sky-300',\r\n },\r\n images: {\r\n icon: ImageIcon,\r\n title: 'Chưa có hình ảnh',\r\n description: 'Tải lên hình ảnh đầu tiên để xây dựng thư viện media.',\r\n bg: 'from-fuchsia-100 to-pink-200 dark:from-fuchsia-900/50 dark:to-pink-800/50',\r\n dot: 'bg-fuchsia-400/50',\r\n iconColor: 'text-fuchsia-600 dark:text-fuchsia-300',\r\n },\r\n folders: {\r\n icon: FolderOpen,\r\n title: 'Thư mục trống',\r\n description: 'Chưa có file nào. Kéo thả hoặc nhấn để thêm mới.',\r\n bg: 'from-yellow-100 to-amber-200 dark:from-yellow-900/50 dark:to-amber-800/50',\r\n dot: 'bg-amber-400/50',\r\n iconColor: 'text-amber-600 dark:text-amber-300',\r\n },\r\n stats: {\r\n icon: BarChart3,\r\n title: 'Chưa có thống kê',\r\n description: 'Dữ liệu phân tích sẽ hiển thị khi có hoạt động.',\r\n bg: 'from-blue-100 to-violet-200 dark:from-blue-900/50 dark:to-violet-800/50',\r\n dot: 'bg-violet-400/50',\r\n iconColor: 'text-blue-600 dark:text-blue-300',\r\n },\r\n offline: {\r\n icon: WifiOff,\r\n title: 'Mất kết nối',\r\n description: 'Không thể tải dữ liệu. Kiểm tra kết nối mạng và thử lại.',\r\n bg: 'from-red-100 to-rose-200 dark:from-red-900/50 dark:to-rose-800/50',\r\n dot: 'bg-red-400/50',\r\n iconColor: 'text-red-600 dark:text-red-300',\r\n },\r\n general: {\r\n icon: Package,\r\n title: 'Không có gì ở đây',\r\n description: 'Nội dung sẽ xuất hiện sau khi bạn thêm dữ liệu mới.',\r\n bg: 'from-slate-100 to-gray-200 dark:from-slate-800/60 dark:to-gray-700/50',\r\n dot: 'bg-slate-400/50',\r\n iconColor: 'text-slate-500 dark:text-slate-400',\r\n },\r\n};\r\n\r\n// ─── Size config ──────────────────────────────────────────────────────────────\r\n\r\nexport type EmptyStateSize = 'sm' | 'md' | 'lg';\r\n\r\nconst SIZE = {\r\n sm: {\r\n root: 'py-8 px-6 gap-3',\r\n iconBg: 'w-16 h-16',\r\n outerRing: 'w-28 h-28',\r\n iconSize: 'w-7 h-7',\r\n dot: ['w-2 h-2', 'w-2.5 h-2.5', 'w-1.5 h-1.5'],\r\n title: 'text-base font-semibold',\r\n desc: 'text-xs max-w-xs',\r\n },\r\n md: {\r\n root: 'py-12 px-8 gap-4',\r\n iconBg: 'w-24 h-24',\r\n outerRing: 'w-40 h-40',\r\n iconSize: 'w-10 h-10',\r\n dot: ['w-3 h-3', 'w-3.5 h-3.5', 'w-2 h-2'],\r\n title: 'text-xl font-semibold',\r\n desc: 'text-sm max-w-sm',\r\n },\r\n lg: {\r\n root: 'py-20 px-12 gap-5',\r\n iconBg: 'w-32 h-32',\r\n outerRing: 'w-52 h-52',\r\n iconSize: 'w-14 h-14',\r\n dot: ['w-4 h-4', 'w-5 h-5', 'w-3 h-3'],\r\n title: 'text-2xl font-bold',\r\n desc: 'text-base max-w-md',\r\n },\r\n} satisfies Record<EmptyStateSize, object>;\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport interface EmptyStateProps {\r\n /** Use a predefined empty state design */\r\n preset?: EmptyPreset;\r\n /** Override the icon (pass a lucide-react component) */\r\n icon?: React.ElementType;\r\n /** Override the title */\r\n title?: string;\r\n /** Override the description */\r\n description?: string;\r\n /** Action element(s) rendered below the description */\r\n action?: React.ReactNode;\r\n size?: EmptyStateSize;\r\n className?: string;\r\n /** Extra content rendered after the action */\r\n children?: React.ReactNode;\r\n}\r\n\r\nexport const EmptyState: React.FC<EmptyStateProps> = ({\r\n preset = 'general',\r\n icon: CustomIcon,\r\n title: customTitle,\r\n description: customDescription,\r\n action,\r\n size = 'md',\r\n className,\r\n children,\r\n}) => {\r\n const cfg = PRESETS[preset];\r\n const s = SIZE[size];\r\n const Icon = CustomIcon ?? cfg.icon;\r\n const title = customTitle ?? cfg.title;\r\n const description = customDescription ?? cfg.description;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n 'flex flex-col items-center justify-center text-center',\r\n 'animate-in fade-in slide-in-from-bottom-4 duration-500',\r\n s.root,\r\n className,\r\n )}\r\n >\r\n {/* ── Icon area ──────────────────────────────────────────────────── */}\r\n <div className=\"relative inline-flex items-center justify-center\">\r\n {/* Outer glow halo */}\r\n <div\r\n className={cn(\r\n 'absolute rounded-full opacity-20 bg-gradient-to-br pointer-events-none',\r\n cfg.bg,\r\n s.outerRing,\r\n )}\r\n />\r\n\r\n {/* Icon circle */}\r\n <div\r\n className={cn(\r\n 'relative rounded-full flex items-center justify-center shadow-lg overflow-hidden',\r\n 'bg-gradient-to-br',\r\n cfg.bg,\r\n s.iconBg,\r\n )}\r\n >\r\n {/* Gloss highlight */}\r\n <div className=\"absolute inset-0 bg-gradient-to-b from-white/30 to-transparent pointer-events-none\" />\r\n <Icon className={cn(cfg.iconColor, s.iconSize)} strokeWidth={1.5} />\r\n </div>\r\n\r\n {/* Decorative dot — top-right */}\r\n <span\r\n className={cn(\r\n 'absolute rounded-full animate-pulse',\r\n cfg.dot,\r\n s.dot[0],\r\n 'top-0.5 right-0.5',\r\n )}\r\n />\r\n {/* Decorative dot — bottom-left */}\r\n <span\r\n className={cn(\r\n 'absolute rounded-full animate-pulse [animation-delay:450ms]',\r\n cfg.dot,\r\n s.dot[1],\r\n 'bottom-1 left-0.5',\r\n )}\r\n />\r\n {/* Decorative dot — left-middle */}\r\n <span\r\n className={cn(\r\n 'absolute rounded-full animate-pulse [animation-delay:900ms]',\r\n cfg.dot,\r\n s.dot[2],\r\n 'top-1/3 -left-1',\r\n )}\r\n />\r\n </div>\r\n\r\n {/* ── Text ───────────────────────────────────────────────────────── */}\r\n <div className=\"space-y-1.5\">\r\n <h3 className={cn('text-foreground', s.title)}>{title}</h3>\r\n <p className={cn('text-muted-foreground leading-relaxed mx-auto', s.desc)}>\r\n {description}\r\n </p>\r\n </div>\r\n\r\n {/* ── Actions ────────────────────────────────────────────────────── */}\r\n {action && (\r\n <div className=\"flex flex-wrap gap-3 justify-center\">{action}</div>\r\n )}\r\n\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nEmptyState.displayName = 'EmptyState';\r\n"
|
|
426
|
+
}
|
|
427
|
+
]
|
|
428
|
+
},
|
|
429
|
+
"file-upload": {
|
|
430
|
+
"name": "file-upload",
|
|
431
|
+
"dependencies": [
|
|
432
|
+
"tailwind-variants",
|
|
433
|
+
"lucide-react"
|
|
434
|
+
],
|
|
435
|
+
"internalDependencies": [],
|
|
436
|
+
"files": [
|
|
437
|
+
{
|
|
438
|
+
"path": "src/components/ui/file-upload/FileUpload.tsx",
|
|
439
|
+
"content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { Upload, X, FileIcon, ImageIcon, FileText, FileArchive } from 'lucide-react';\r\n\r\n// ─── Variants ────────────────────────────────────────────────────────────────\r\n\r\nconst fileUploadVariants = tv({\r\n slots: {\r\n root: 'flex flex-col gap-3',\r\n dropzone: [\r\n 'relative flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed',\r\n 'cursor-pointer transition-all duration-200',\r\n 'hover:border-primary/50 hover:bg-primary/5',\r\n ].join(' '),\r\n fileList: 'flex flex-col gap-2',\r\n fileItem: [\r\n 'flex items-center gap-3 rounded-lg border border-border bg-background p-3',\r\n 'transition-colors hover:bg-muted/50 group',\r\n ].join(' '),\r\n removeBtn: [\r\n 'shrink-0 p-1 rounded-md text-muted-foreground',\r\n 'hover:text-danger hover:bg-danger/10 transition-colors',\r\n 'opacity-0 group-hover:opacity-100',\r\n ].join(' '),\r\n },\r\n variants: {\r\n size: {\r\n sm: { dropzone: 'px-4 py-6 text-xs' },\r\n md: { dropzone: 'px-6 py-10 text-sm' },\r\n lg: { dropzone: 'px-8 py-14 text-base' },\r\n },\r\n isDragActive: {\r\n true: { dropzone: 'border-primary bg-primary/10 scale-[1.01]' },\r\n false: { dropzone: 'border-border' },\r\n },\r\n isError: {\r\n true: { dropzone: 'border-danger bg-danger/5' },\r\n },\r\n disabled: {\r\n true: { dropzone: 'opacity-50 cursor-not-allowed hover:border-border hover:bg-transparent' },\r\n },\r\n },\r\n defaultVariants: {\r\n size: 'md',\r\n isDragActive: false,\r\n },\r\n});\r\n\r\n// ─── Helpers ─────────────────────────────────────────────────────────────────\r\n\r\nfunction formatFileSize(bytes: number): string {\r\n if (bytes === 0) return '0 B';\r\n const k = 1024;\r\n const sizes = ['B', 'KB', 'MB', 'GB'];\r\n const i = Math.floor(Math.log(bytes) / Math.log(k));\r\n return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\r\n}\r\n\r\nfunction getFileIcon(type: string) {\r\n if (type.startsWith('image/')) return ImageIcon;\r\n if (type.includes('pdf') || type.includes('document')) return FileText;\r\n if (type.includes('zip') || type.includes('archive') || type.includes('rar')) return FileArchive;\r\n return FileIcon;\r\n}\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport interface FileUploadProps extends VariantProps<typeof fileUploadVariants> {\r\n /** Accepted file types (e.g. \"image/*,.pdf\") */\r\n accept?: string;\r\n /** Allow multiple files */\r\n multiple?: boolean;\r\n /** Max file size in bytes */\r\n maxSize?: number;\r\n /** Max number of files */\r\n maxFiles?: number;\r\n /** Current files (controlled) */\r\n value?: File[];\r\n /** Called when files change */\r\n onChange?: (files: File[]) => void;\r\n /** Called on validation error */\r\n onError?: (message: string) => void;\r\n /** Disable the dropzone */\r\n disabled?: boolean;\r\n /** Error message */\r\n error?: string;\r\n /** Label */\r\n label?: string;\r\n /** Description */\r\n description?: string;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\n// ─── Component ───────────────────────────────────────────────────────────────\r\n\r\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\r\n (\r\n {\r\n accept,\r\n multiple = false,\r\n maxSize,\r\n maxFiles,\r\n value = [],\r\n onChange,\r\n onError,\r\n disabled = false,\r\n error,\r\n label,\r\n description,\r\n size = 'md',\r\n className,\r\n children,\r\n },\r\n ref,\r\n ) => {\r\n const [isDragActive, setIsDragActive] = React.useState(false);\r\n const inputRef = React.useRef<HTMLInputElement>(null);\r\n const rootId = React.useId();\r\n\r\n const styles = fileUploadVariants({\r\n size,\r\n isDragActive,\r\n isError: !!error,\r\n disabled,\r\n });\r\n\r\n const validateFiles = React.useCallback(\r\n (fileList: File[]): File[] => {\r\n const valid: File[] = [];\r\n for (const file of fileList) {\r\n if (maxSize && file.size > maxSize) {\r\n onError?.(`\"${file.name}\" exceeds ${formatFileSize(maxSize)} limit`);\r\n continue;\r\n }\r\n valid.push(file);\r\n }\r\n if (maxFiles && value.length + valid.length > maxFiles) {\r\n onError?.(`Maximum ${maxFiles} file${maxFiles > 1 ? 's' : ''} allowed`);\r\n return valid.slice(0, maxFiles - value.length);\r\n }\r\n return valid;\r\n },\r\n [maxSize, maxFiles, onError, value.length],\r\n );\r\n\r\n const addFiles = React.useCallback(\r\n (newFiles: File[]) => {\r\n const validated = validateFiles(newFiles);\r\n if (validated.length === 0) return;\r\n onChange?.(multiple ? [...value, ...validated] : [validated[0]]);\r\n },\r\n [validateFiles, onChange, multiple, value],\r\n );\r\n\r\n const removeFile = React.useCallback(\r\n (index: number) => {\r\n const next = [...value];\r\n next.splice(index, 1);\r\n onChange?.(next);\r\n },\r\n [value, onChange],\r\n );\r\n\r\n const handleDrop = React.useCallback(\r\n (e: React.DragEvent) => {\r\n e.preventDefault();\r\n setIsDragActive(false);\r\n if (disabled) return;\r\n const files = Array.from(e.dataTransfer.files);\r\n addFiles(files);\r\n },\r\n [disabled, addFiles],\r\n );\r\n\r\n const handleDragOver = React.useCallback(\r\n (e: React.DragEvent) => {\r\n e.preventDefault();\r\n if (!disabled) setIsDragActive(true);\r\n },\r\n [disabled],\r\n );\r\n\r\n const handleDragLeave = React.useCallback(() => {\r\n setIsDragActive(false);\r\n }, []);\r\n\r\n const handleInputChange = React.useCallback(\r\n (e: React.ChangeEvent<HTMLInputElement>) => {\r\n const files = Array.from(e.target.files || []);\r\n addFiles(files);\r\n e.target.value = '';\r\n },\r\n [addFiles],\r\n );\r\n\r\n return (\r\n <div ref={ref} className={cn(styles.root(), className)}>\r\n {label && (\r\n <label htmlFor={rootId} className=\"text-sm font-medium text-foreground leading-none\">\r\n {label}\r\n </label>\r\n )}\r\n\r\n <div\r\n className={styles.dropzone()}\r\n onClick={() => !disabled && inputRef.current?.click()}\r\n onDrop={handleDrop}\r\n onDragOver={handleDragOver}\r\n onDragLeave={handleDragLeave}\r\n >\r\n <input\r\n ref={inputRef}\r\n id={rootId}\r\n type=\"file\"\r\n accept={accept}\r\n multiple={multiple}\r\n onChange={handleInputChange}\r\n disabled={disabled}\r\n className=\"sr-only\"\r\n />\r\n\r\n {children ?? (\r\n <>\r\n <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-muted\">\r\n <Upload className=\"h-5 w-5 text-muted-foreground\" />\r\n </div>\r\n <div className=\"text-center\">\r\n <p className=\"font-medium text-foreground\">\r\n Drop files here or <span className=\"text-primary\">browse</span>\r\n </p>\r\n {description && (\r\n <p className=\"mt-1 text-muted-foreground text-xs\">{description}</p>\r\n )}\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n\r\n {error && (\r\n <p className=\"text-[0.8rem] font-medium text-danger\">{error}</p>\r\n )}\r\n\r\n {value.length > 0 && (\r\n <div className={styles.fileList()}>\r\n {value.map((file, i) => {\r\n const Icon = getFileIcon(file.type);\r\n return (\r\n <div key={`${file.name}-${i}`} className={styles.fileItem()}>\r\n <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted\">\r\n <Icon className=\"h-4 w-4 text-muted-foreground\" />\r\n </div>\r\n <div className=\"min-w-0 flex-1\">\r\n <p className=\"text-sm font-medium text-foreground truncate\">{file.name}</p>\r\n <p className=\"text-xs text-muted-foreground\">{formatFileSize(file.size)}</p>\r\n </div>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n removeFile(i);\r\n }}\r\n className={styles.removeBtn()}\r\n aria-label={`Remove ${file.name}`}\r\n >\r\n <X className=\"h-4 w-4\" />\r\n </button>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n },\r\n);\r\n\r\nFileUpload.displayName = 'FileUpload';\r\n\r\nexport { FileUpload, fileUploadVariants };\r\n"
|
|
379
440
|
}
|
|
380
441
|
]
|
|
381
442
|
},
|
|
@@ -417,7 +478,11 @@
|
|
|
417
478
|
"files": [
|
|
418
479
|
{
|
|
419
480
|
"path": "src/components/ui/input-otp/InputOtp.tsx",
|
|
420
|
-
"content": "import * as React from 'react';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nconst inputOTPVariants = tv({\n slots: {\n root: 'flex items-center gap-2',\n slot: [\n 'relative flex items-center justify-center',\n 'border border-border bg-background text-foreground font-semibold',\n 'transition-all duration-200 outline-none',\n 'select-none',\n ].join(' '),\n separator: 'flex items-center justify-center text-muted-foreground shrink-0',\n caret: 'absolute inset-0 flex items-center justify-center pointer-events-none',\n caretBlink: 'w-px bg-foreground animate-blink',\n },\n variants: {\n variant: {\n outline: {\n slot: 'rounded-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',\n },\n filled: {\n slot: 'rounded-md bg-muted border-transparent focus-within:bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',\n },\n underline: {\n slot: 'border-0 border-b-2 border-b-border rounded-none bg-transparent focus-within:border-b-primary',\n },\n glass: {\n slot: 'rounded-xl bg-white/10 dark:bg-white/5 backdrop-blur-md border-white/20 dark:border-white/10 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/20 shadow-sm',\n },\n },\n size: {\n sm: {\n slot: 'h-9 w-9 text-sm',\n separator: 'text-lg px-0.5',\n caretBlink: 'h-4',\n },\n md: {\n slot: 'h-12 w-12 text-lg',\n separator: 'text-xl px-1',\n caretBlink: 'h-5',\n },\n lg: {\n slot: 'h-14 w-14 text-2xl',\n separator: 'text-2xl px-1.5',\n caretBlink: 'h-6',\n },\n },\n shape: {\n square: { slot: '' },\n rounded: { slot: '' },\n circle: { slot: '' },\n },\n },\n compoundVariants: [\n { shape: 'rounded', variant: 'outline', className: { slot: 'rounded-xl' } },\n { shape: 'rounded', variant: 'filled', className: { slot: 'rounded-xl' } },\n { shape: 'rounded', variant: 'glass', className: { slot: 'rounded-2xl' } },\n { shape: 'circle', variant: 'outline', className: { slot: 'rounded-full' } },\n { shape: 'circle', variant: 'filled', className: { slot: 'rounded-full' } },\n { shape: 'circle', variant: 'glass', className: { slot: 'rounded-full' } },\n ],\n defaultVariants: {\n variant: 'outline',\n size: 'md',\n shape: 'square',\n },\n});\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\ntype InputMode = 'numeric' | 'alphanumeric' | 'alpha' | 'custom';\ntype SeparatorType = 'dash' | 'dot' | 'space' | React.ReactNode;\n\nexport interface InputOTPProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'inputMode'>,\n VariantProps<typeof inputOTPVariants> {\n /** Total number of OTP slots */\n length?: number;\n /** Current value (controlled) */\n value?: string;\n /** Default value (uncontrolled) */\n defaultValue?: string;\n /** Fired on every value change */\n onChange?: (value: string) => void;\n /** Fired when all slots are filled */\n onComplete?: (value: string) => void;\n /** What characters are allowed */\n inputMode?: InputMode;\n /** Custom regex pattern when inputMode='custom' */\n pattern?: RegExp;\n /** Mask character for entered values (e.g. '*' for password-style) */\n mask?: string | boolean;\n /** Disable the entire input */\n disabled?: boolean;\n /** Show error state */\n error?: boolean;\n /** Error message */\n errorMessage?: string;\n /** Label */\n label?: string;\n /** Description */\n description?: string;\n /** Auto focus on mount */\n autoFocus?: boolean;\n /** Separator config: insert separator after these indices, or every N slots */\n separatorAfter?: number[] | number;\n /** Separator visual */\n separator?: SeparatorType;\n /** Auto-submit on complete */\n autoSubmit?: boolean;\n /** Slot className override */\n slotClassName?: string;\n /** Render filled slots with success style */\n successOnComplete?: boolean;\n /** Placeholder per slot */\n placeholder?: string;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\nconst INPUT_PATTERNS: Record<Exclude<InputMode, 'custom'>, RegExp> = {\n numeric: /^[0-9]$/,\n alphanumeric: /^[a-zA-Z0-9]$/,\n alpha: /^[a-zA-Z]$/,\n};\n\nfunction getPattern(mode: InputMode, custom?: RegExp): RegExp {\n if (mode === 'custom' && custom) return custom;\n return INPUT_PATTERNS[mode as Exclude<InputMode, 'custom'>] ?? INPUT_PATTERNS.numeric;\n}\n\nfunction getSeparatorPositions(config: number[] | number | undefined, length: number): Set<number> {\n if (!config) return new Set();\n if (Array.isArray(config)) return new Set(config);\n // every N slots\n const positions = new Set<number>();\n for (let i = config - 1; i < length - 1; i += config) {\n positions.add(i);\n }\n return positions;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<HTMLDivElement, InputOTPProps>(\n (\n {\n className,\n variant,\n size,\n shape,\n length = 6,\n value: controlledValue,\n defaultValue = '',\n onChange,\n onComplete,\n inputMode = 'numeric',\n pattern: customPattern,\n mask,\n disabled = false,\n error = false,\n errorMessage,\n label,\n description,\n autoFocus = false,\n separatorAfter,\n separator = 'dash',\n autoSubmit = false,\n slotClassName,\n successOnComplete = false,\n placeholder,\n ...props\n },\n ref,\n ) => {\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = React.useState(defaultValue);\n const currentValue = isControlled ? controlledValue : internalValue;\n\n const [focusedIndex, setFocusedIndex] = React.useState<number | null>(null);\n const inputRefs = React.useRef<(HTMLInputElement | null)[]>([]);\n const rootId = React.useId();\n\n const pat = getPattern(inputMode, customPattern);\n const separatorPositions = getSeparatorPositions(separatorAfter, length);\n const slots = inputOTPVariants({ variant, size, shape });\n\n const chars = React.useMemo(() => {\n const arr = currentValue.split('');\n while (arr.length < length) arr.push('');\n return arr.slice(0, length);\n }, [currentValue, length]);\n\n const isComplete = chars.every((c) => c !== '');\n\n // ─── Value helpers ─────────────────────────────────────────────────\n\n const updateValue = React.useCallback(\n (newChars: string[]) => {\n const val = newChars.join('');\n if (!isControlled) setInternalValue(val);\n onChange?.(val);\n if (val.length === length && newChars.every((c) => c !== '')) {\n onComplete?.(val);\n }\n },\n [isControlled, onChange, onComplete, length],\n );\n\n const focusSlot = React.useCallback((index: number) => {\n const clamped = Math.max(0, Math.min(index, length - 1));\n inputRefs.current[clamped]?.focus();\n }, [length]);\n\n // ─── Handlers ──────────────────────────────────────────────────────\n\n const handleInput = React.useCallback(\n (index: number, char: string) => {\n if (!pat.test(char)) return;\n const next = [...chars];\n next[index] = char;\n updateValue(next);\n if (index < length - 1) {\n focusSlot(index + 1);\n }\n },\n [chars, pat, updateValue, length, focusSlot],\n );\n\n const handleKeyDown = React.useCallback(\n (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'Backspace': {\n e.preventDefault();\n const next = [...chars];\n if (chars[index] !== '') {\n next[index] = '';\n updateValue(next);\n } else if (index > 0) {\n next[index - 1] = '';\n updateValue(next);\n focusSlot(index - 1);\n }\n break;\n }\n case 'Delete': {\n e.preventDefault();\n const next = [...chars];\n next[index] = '';\n updateValue(next);\n break;\n }\n case 'ArrowLeft':\n e.preventDefault();\n if (index > 0) focusSlot(index - 1);\n break;\n case 'ArrowRight':\n e.preventDefault();\n if (index < length - 1) focusSlot(index + 1);\n break;\n case 'Home':\n e.preventDefault();\n focusSlot(0);\n break;\n case 'End':\n e.preventDefault();\n focusSlot(length - 1);\n break;\n }\n },\n [chars, updateValue, focusSlot, length],\n );\n\n const handlePaste = React.useCallback(\n (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n const pasted = e.clipboardData.getData('text/plain').trim();\n const next = [...chars];\n let cursor = focusedIndex ?? 0;\n for (const ch of pasted) {\n if (cursor >= length) break;\n if (pat.test(ch)) {\n next[cursor] = ch;\n cursor++;\n }\n }\n updateValue(next);\n focusSlot(Math.min(cursor, length - 1));\n },\n [chars, focusedIndex, length, pat, updateValue, focusSlot],\n );\n\n // ─── Auto focus ────────────────────────────────────────────────────\n\n React.useEffect(() => {\n if (autoFocus) {\n const firstEmpty = chars.findIndex((c) => c === '');\n focusSlot(firstEmpty === -1 ? 0 : firstEmpty);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // ─── Auto submit ───────────────────────────────────────────────────\n\n React.useEffect(() => {\n if (autoSubmit && isComplete) {\n const form = inputRefs.current[0]?.closest('form');\n if (form) {\n form.requestSubmit();\n }\n }\n }, [autoSubmit, isComplete]);\n\n // ─── Render separator ──────────────────────────────────────────────\n\n const renderSeparator = () => {\n if (separator === 'dash') return <span>–</span>;\n if (separator === 'dot') return <span>•</span>;\n if (separator === 'space') return <span> </span>;\n return separator;\n };\n\n // ─── Render display char ───────────────────────────────────────────\n\n const getDisplayChar = (char: string, index: number) => {\n if (char === '') {\n if (placeholder && placeholder[index]) {\n return <span className=\"text-muted-foreground/50 font-normal\">{placeholder[index]}</span>;\n }\n return null;\n }\n if (mask) {\n const maskChar = typeof mask === 'string' ? mask : '\\u2022';\n return <span>{maskChar}</span>;\n }\n return <span>{char}</span>;\n };\n\n // ─── Render ────────────────────────────────────────────────────────\n\n return (\n <div ref={ref} className=\"flex flex-col gap-1.5\" {...props}>\n {label && (\n <label htmlFor={`${rootId}-0`} className=\"text-sm font-medium text-foreground leading-none\">\n {label}\n </label>\n )}\n\n <div\n className={cn(slots.root(), className)}\n role=\"group\"\n aria-label={label || 'OTP Input'}\n aria-describedby={description ? `${rootId}-desc` : errorMessage ? `${rootId}-err` : undefined}\n >\n {Array.from({ length }).map((_, i) => {\n const isFocused = focusedIndex === i;\n const isFilled = chars[i] !== '';\n const showSuccess = successOnComplete && isComplete;\n const showError = error && !showSuccess;\n\n return (\n <React.Fragment key={i}>\n <div\n className={cn(\n slots.slot(),\n isFocused && !showError && 'border-primary ring-2 ring-primary/20',\n showError && 'border-danger',\n showSuccess && 'border-success text-success',\n disabled && 'opacity-50 cursor-not-allowed',\n slotClassName,\n )}\n >\n <input\n ref={(el) => { inputRefs.current[i] = el; }}\n id={i === 0 ? `${rootId}-0` : undefined}\n type=\"text\"\n inputMode={inputMode === 'numeric' ? 'numeric' : 'text'}\n autoComplete={i === 0 ? 'one-time-code' : 'off'}\n aria-label={`Digit ${i + 1} of ${length}`}\n aria-invalid={error || undefined}\n maxLength={1}\n value=\"\"\n disabled={disabled}\n className=\"sr-only\"\n onFocus={() => setFocusedIndex(i)}\n onBlur={() => setFocusedIndex(null)}\n onChange={(e) => {\n const char = e.target.value;\n if (char) handleInput(i, char);\n }}\n onKeyDown={(e) => handleKeyDown(i, e)}\n onPaste={handlePaste}\n />\n {/* Display */}\n <div\n className=\"flex items-center justify-center w-full h-full cursor-text\"\n onClick={() => !disabled && focusSlot(i)}\n >\n {getDisplayChar(chars[i], i)}\n </div>\n {/* Caret */}\n {isFocused && !isFilled && !disabled && (\n <div className={slots.caret()}>\n <div className={slots.caretBlink()} />\n </div>\n )}\n </div>\n\n {/* Separator */}\n {separatorPositions.has(i) && (\n <div className={slots.separator()} aria-hidden=\"true\">\n {renderSeparator()}\n </div>\n )}\n </React.Fragment>\n );\n })}\n </div>\n\n {description && !error && !errorMessage && (\n <p id={`${rootId}-desc`} className=\"text-[0.8rem] text-muted-foreground\">{description}</p>\n )}\n {(error || errorMessage) && (\n <p id={`${rootId}-err`} className=\"text-[0.8rem] font-medium text-danger\">{errorMessage || 'Invalid code'}</p>\n )}\n </div>\n );\n },\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport { InputOTP, inputOTPVariants };\n"
|
|
481
|
+
"content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { useInputOTP, getSeparatorPositions } from './useInputOTP';\r\n\r\n// ─── Variants ────────────────────────────────────────────────────────────────\r\n\r\nconst inputOTPVariants = tv({\r\n slots: {\r\n root: 'flex items-center gap-2',\r\n slot: [\r\n 'relative flex items-center justify-center',\r\n 'border border-border bg-background text-foreground font-semibold',\r\n 'transition-all duration-200 outline-none',\r\n 'select-none',\r\n ].join(' '),\r\n separator: 'flex items-center justify-center text-muted-foreground shrink-0',\r\n caret: 'absolute inset-0 flex items-center justify-center pointer-events-none',\r\n caretBlink: 'w-px bg-foreground animate-blink',\r\n },\r\n variants: {\r\n variant: {\r\n outline: {\r\n slot: 'rounded-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',\r\n },\r\n filled: {\r\n slot: 'rounded-md bg-muted border-transparent focus-within:bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',\r\n },\r\n underline: {\r\n slot: 'border-0 border-b-2 border-b-border rounded-none bg-transparent focus-within:border-b-primary',\r\n },\r\n glass: {\r\n slot: 'rounded-xl bg-white/10 dark:bg-white/5 backdrop-blur-md border-white/20 dark:border-white/10 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/20 shadow-sm',\r\n },\r\n },\r\n size: {\r\n sm: {\r\n slot: 'h-9 w-9 text-sm',\r\n separator: 'text-lg px-0.5',\r\n caretBlink: 'h-4',\r\n },\r\n md: {\r\n slot: 'h-12 w-12 text-lg',\r\n separator: 'text-xl px-1',\r\n caretBlink: 'h-5',\r\n },\r\n lg: {\r\n slot: 'h-14 w-14 text-2xl',\r\n separator: 'text-2xl px-1.5',\r\n caretBlink: 'h-6',\r\n },\r\n },\r\n shape: {\r\n square: { slot: '' },\r\n rounded: { slot: '' },\r\n circle: { slot: '' },\r\n },\r\n },\r\n compoundVariants: [\r\n { shape: 'rounded', variant: 'outline', className: { slot: 'rounded-xl' } },\r\n { shape: 'rounded', variant: 'filled', className: { slot: 'rounded-xl' } },\r\n { shape: 'rounded', variant: 'glass', className: { slot: 'rounded-2xl' } },\r\n { shape: 'circle', variant: 'outline', className: { slot: 'rounded-full' } },\r\n { shape: 'circle', variant: 'filled', className: { slot: 'rounded-full' } },\r\n { shape: 'circle', variant: 'glass', className: { slot: 'rounded-full' } },\r\n ],\r\n defaultVariants: {\r\n variant: 'outline',\r\n size: 'md',\r\n shape: 'square',\r\n },\r\n});\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\ntype InputMode = 'numeric' | 'alphanumeric' | 'alpha' | 'custom';\r\ntype SeparatorType = 'dash' | 'dot' | 'space' | React.ReactNode;\r\n\r\nexport interface InputOTPProps\r\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'inputMode'>,\r\n VariantProps<typeof inputOTPVariants> {\r\n length?: number;\r\n value?: string;\r\n defaultValue?: string;\r\n onChange?: (value: string) => void;\r\n onComplete?: (value: string) => void;\r\n inputMode?: InputMode;\r\n pattern?: RegExp;\r\n mask?: string | boolean;\r\n disabled?: boolean;\r\n error?: boolean;\r\n errorMessage?: string;\r\n label?: string;\r\n description?: string;\r\n autoFocus?: boolean;\r\n separatorAfter?: number[] | number;\r\n separator?: SeparatorType;\r\n autoSubmit?: boolean;\r\n slotClassName?: string;\r\n successOnComplete?: boolean;\r\n placeholder?: string;\r\n}\r\n\r\n// ─── Separator Renderer ─────────────────────────────────────────────────────\r\n\r\nfunction renderSeparatorContent(separator: SeparatorType) {\r\n if (separator === 'dash') return <span>–</span>;\r\n if (separator === 'dot') return <span>•</span>;\r\n if (separator === 'space') return <span> </span>;\r\n return separator;\r\n}\r\n\r\n// ─── Display Char ───────────────────────────────────────────────────────────\r\n\r\nfunction getDisplayChar(\r\n char: string,\r\n index: number,\r\n mask: string | boolean | undefined,\r\n placeholder: string | undefined,\r\n) {\r\n if (char === '') {\r\n if (placeholder && placeholder[index]) {\r\n return <span className=\"text-muted-foreground/50 font-normal\">{placeholder[index]}</span>;\r\n }\r\n return null;\r\n }\r\n if (mask) {\r\n const maskChar = typeof mask === 'string' ? mask : '\\u2022';\r\n return <span>{maskChar}</span>;\r\n }\r\n return <span>{char}</span>;\r\n}\r\n\r\n// ─── Component ───────────────────────────────────────────────────────────────\r\n\r\nconst InputOTP = React.forwardRef<HTMLDivElement, InputOTPProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n size,\r\n shape,\r\n length = 6,\r\n value: controlledValue,\r\n defaultValue = '',\r\n onChange,\r\n onComplete,\r\n inputMode = 'numeric',\r\n pattern: customPattern,\r\n mask,\r\n disabled = false,\r\n error = false,\r\n errorMessage,\r\n label,\r\n description,\r\n autoFocus = false,\r\n separatorAfter,\r\n separator = 'dash',\r\n autoSubmit = false,\r\n slotClassName,\r\n successOnComplete = false,\r\n placeholder,\r\n ...props\r\n },\r\n ref,\r\n ) => {\r\n const rootId = React.useId();\r\n const slots = inputOTPVariants({ variant, size, shape });\r\n const separatorPositions = getSeparatorPositions(separatorAfter, length);\r\n\r\n const {\r\n chars,\r\n isComplete,\r\n focusedIndex,\r\n setFocusedIndex,\r\n inputRefs,\r\n focusSlot,\r\n handleInput,\r\n handleKeyDown,\r\n handlePaste,\r\n } = useInputOTP({\r\n length,\r\n controlledValue,\r\n defaultValue,\r\n onChange,\r\n onComplete,\r\n inputMode,\r\n pattern: customPattern,\r\n autoFocus,\r\n autoSubmit,\r\n });\r\n\r\n return (\r\n <div ref={ref} className=\"flex flex-col gap-1.5\" {...props}>\r\n {label && (\r\n <label htmlFor={`${rootId}-0`} className=\"text-sm font-medium text-foreground leading-none\">\r\n {label}\r\n </label>\r\n )}\r\n\r\n <div\r\n className={cn(slots.root(), className)}\r\n role=\"group\"\r\n aria-label={label || 'OTP Input'}\r\n aria-describedby={description ? `${rootId}-desc` : errorMessage ? `${rootId}-err` : undefined}\r\n >\r\n {Array.from({ length }).map((_, i) => {\r\n const isFocused = focusedIndex === i;\r\n const isFilled = chars[i] !== '';\r\n const showSuccess = successOnComplete && isComplete;\r\n const showError = error && !showSuccess;\r\n\r\n return (\r\n <React.Fragment key={i}>\r\n <div\r\n className={cn(\r\n slots.slot(),\r\n isFocused && !showError && 'border-primary ring-2 ring-primary/20',\r\n showError && 'border-danger',\r\n showSuccess && 'border-success text-success',\r\n disabled && 'opacity-50 cursor-not-allowed',\r\n slotClassName,\r\n )}\r\n >\r\n <input\r\n ref={(el) => { inputRefs.current[i] = el; }}\r\n id={i === 0 ? `${rootId}-0` : undefined}\r\n type=\"text\"\r\n inputMode={inputMode === 'numeric' ? 'numeric' : 'text'}\r\n autoComplete={i === 0 ? 'one-time-code' : 'off'}\r\n aria-label={`Digit ${i + 1} of ${length}`}\r\n aria-invalid={error || undefined}\r\n maxLength={1}\r\n value=\"\"\r\n disabled={disabled}\r\n className=\"sr-only\"\r\n onFocus={() => setFocusedIndex(i)}\r\n onBlur={() => setFocusedIndex(null)}\r\n onChange={(e) => {\r\n const char = e.target.value;\r\n if (char) handleInput(i, char);\r\n }}\r\n onKeyDown={(e) => handleKeyDown(i, e)}\r\n onPaste={handlePaste}\r\n />\r\n <div\r\n className=\"flex items-center justify-center w-full h-full cursor-text\"\r\n onClick={() => !disabled && focusSlot(i)}\r\n >\r\n {getDisplayChar(chars[i], i, mask, placeholder)}\r\n </div>\r\n {isFocused && !isFilled && !disabled && (\r\n <div className={slots.caret()}>\r\n <div className={slots.caretBlink()} />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {separatorPositions.has(i) && (\r\n <div className={slots.separator()} aria-hidden=\"true\">\r\n {renderSeparatorContent(separator)}\r\n </div>\r\n )}\r\n </React.Fragment>\r\n );\r\n })}\r\n </div>\r\n\r\n {description && !error && !errorMessage && (\r\n <p id={`${rootId}-desc`} className=\"text-[0.8rem] text-muted-foreground\">{description}</p>\r\n )}\r\n {(error || errorMessage) && (\r\n <p id={`${rootId}-err`} className=\"text-[0.8rem] font-medium text-danger\">{errorMessage || 'Invalid code'}</p>\r\n )}\r\n </div>\r\n );\r\n },\r\n);\r\n\r\nInputOTP.displayName = 'InputOTP';\r\n\r\nexport { InputOTP, inputOTPVariants };\r\n"
|
|
482
|
+
},
|
|
483
|
+
{
|
|
484
|
+
"path": "src/components/ui/input-otp/useInputOTP.ts",
|
|
485
|
+
"content": "import * as React from 'react';\r\n\r\ntype InputMode = 'numeric' | 'alphanumeric' | 'alpha' | 'custom';\r\n\r\nconst INPUT_PATTERNS: Record<Exclude<InputMode, 'custom'>, RegExp> = {\r\n numeric: /^[0-9]$/,\r\n alphanumeric: /^[a-zA-Z0-9]$/,\r\n alpha: /^[a-zA-Z]$/,\r\n};\r\n\r\nfunction getPattern(mode: InputMode, custom?: RegExp): RegExp {\r\n if (mode === 'custom' && custom) return custom;\r\n return INPUT_PATTERNS[mode as Exclude<InputMode, 'custom'>] ?? INPUT_PATTERNS.numeric;\r\n}\r\n\r\nexport function getSeparatorPositions(config: number[] | number | undefined, length: number): Set<number> {\r\n if (!config) return new Set();\r\n if (Array.isArray(config)) return new Set(config);\r\n const positions = new Set<number>();\r\n for (let i = config - 1; i < length - 1; i += config) {\r\n positions.add(i);\r\n }\r\n return positions;\r\n}\r\n\r\nexport interface UseInputOTPOptions {\r\n length: number;\r\n controlledValue?: string;\r\n defaultValue: string;\r\n onChange?: (value: string) => void;\r\n onComplete?: (value: string) => void;\r\n inputMode: InputMode;\r\n pattern?: RegExp;\r\n autoFocus: boolean;\r\n autoSubmit: boolean;\r\n}\r\n\r\nexport function useInputOTP({\r\n length,\r\n controlledValue,\r\n defaultValue,\r\n onChange,\r\n onComplete,\r\n inputMode,\r\n pattern: customPattern,\r\n autoFocus,\r\n autoSubmit,\r\n}: UseInputOTPOptions) {\r\n const isControlled = controlledValue !== undefined;\r\n const [internalValue, setInternalValue] = React.useState(defaultValue);\r\n const currentValue = isControlled ? controlledValue : internalValue;\r\n\r\n const [focusedIndex, setFocusedIndex] = React.useState<number | null>(null);\r\n const inputRefs = React.useRef<(HTMLInputElement | null)[]>([]);\r\n\r\n const pat = getPattern(inputMode, customPattern);\r\n\r\n const chars = React.useMemo(() => {\r\n const arr = currentValue.split('');\r\n while (arr.length < length) arr.push('');\r\n return arr.slice(0, length);\r\n }, [currentValue, length]);\r\n\r\n const isComplete = chars.every((c) => c !== '');\r\n\r\n const updateValue = React.useCallback(\r\n (newChars: string[]) => {\r\n const val = newChars.join('');\r\n if (!isControlled) setInternalValue(val);\r\n onChange?.(val);\r\n if (val.length === length && newChars.every((c) => c !== '')) {\r\n onComplete?.(val);\r\n }\r\n },\r\n [isControlled, onChange, onComplete, length],\r\n );\r\n\r\n const focusSlot = React.useCallback((index: number) => {\r\n const clamped = Math.max(0, Math.min(index, length - 1));\r\n inputRefs.current[clamped]?.focus();\r\n }, [length]);\r\n\r\n const handleInput = React.useCallback(\r\n (index: number, char: string) => {\r\n if (!pat.test(char)) return;\r\n const next = [...chars];\r\n next[index] = char;\r\n updateValue(next);\r\n if (index < length - 1) {\r\n focusSlot(index + 1);\r\n }\r\n },\r\n [chars, pat, updateValue, length, focusSlot],\r\n );\r\n\r\n const handleKeyDown = React.useCallback(\r\n (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\r\n switch (e.key) {\r\n case 'Backspace': {\r\n e.preventDefault();\r\n const next = [...chars];\r\n if (chars[index] !== '') {\r\n next[index] = '';\r\n updateValue(next);\r\n } else if (index > 0) {\r\n next[index - 1] = '';\r\n updateValue(next);\r\n focusSlot(index - 1);\r\n }\r\n break;\r\n }\r\n case 'Delete': {\r\n e.preventDefault();\r\n const next = [...chars];\r\n next[index] = '';\r\n updateValue(next);\r\n break;\r\n }\r\n case 'ArrowLeft':\r\n e.preventDefault();\r\n if (index > 0) focusSlot(index - 1);\r\n break;\r\n case 'ArrowRight':\r\n e.preventDefault();\r\n if (index < length - 1) focusSlot(index + 1);\r\n break;\r\n case 'Home':\r\n e.preventDefault();\r\n focusSlot(0);\r\n break;\r\n case 'End':\r\n e.preventDefault();\r\n focusSlot(length - 1);\r\n break;\r\n }\r\n },\r\n [chars, updateValue, focusSlot, length],\r\n );\r\n\r\n const handlePaste = React.useCallback(\r\n (e: React.ClipboardEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n const pasted = e.clipboardData.getData('text/plain').trim();\r\n const next = [...chars];\r\n let cursor = focusedIndex ?? 0;\r\n for (const ch of pasted) {\r\n if (cursor >= length) break;\r\n if (pat.test(ch)) {\r\n next[cursor] = ch;\r\n cursor++;\r\n }\r\n }\r\n updateValue(next);\r\n focusSlot(Math.min(cursor, length - 1));\r\n },\r\n [chars, focusedIndex, length, pat, updateValue, focusSlot],\r\n );\r\n\r\n // Auto focus\r\n React.useEffect(() => {\r\n if (autoFocus) {\r\n const firstEmpty = chars.findIndex((c) => c === '');\r\n focusSlot(firstEmpty === -1 ? 0 : firstEmpty);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n // Auto submit\r\n React.useEffect(() => {\r\n if (autoSubmit && isComplete) {\r\n const form = inputRefs.current[0]?.closest('form');\r\n if (form) {\r\n form.requestSubmit();\r\n }\r\n }\r\n }, [autoSubmit, isComplete]);\r\n\r\n return {\r\n chars,\r\n isComplete,\r\n focusedIndex,\r\n setFocusedIndex,\r\n inputRefs,\r\n focusSlot,\r\n handleInput,\r\n handleKeyDown,\r\n handlePaste,\r\n };\r\n}\r\n"
|
|
421
486
|
}
|
|
422
487
|
]
|
|
423
488
|
},
|
|
@@ -433,7 +498,22 @@
|
|
|
433
498
|
"files": [
|
|
434
499
|
{
|
|
435
500
|
"path": "src/components/ui/menu-bar/MenuBar.tsx",
|
|
436
|
-
"content": "\"use client\"\nimport * as React from 'react';\nimport { Menu as BaseMenu } from '@base-ui/react';\nimport { useNavigate, useMatch } from 'react-router-dom';\nimport { tv } from 'tailwind-variants';\nimport { ChevronRight, ExternalLink } from 'lucide-react';\nimport { cn } from '@/lib/utils/cn';\n\n/* ─── Types ─────────────────────────────────────────────────────────────── */\n\n/** How the menu item behaves when clicked */\nexport type MenuBarItemType = 'link' | 'button' | 'modal' | 'external';\n\n/** Config for a single item inside a menu */\nexport interface MenuBarItemConfig {\n id: string;\n label: React.ReactNode;\n icon?: React.ReactNode;\n /** @default 'button' */\n type?: MenuBarItemType;\n /** Route path for type='link', full URL for type='external' */\n href?: string;\n /** Called on click for type='button' | 'modal', and as fallback for 'link' | 'external' */\n onClick?: () => void;\n shortcut?: string;\n disabled?: boolean;\n /** Renders a separator line before this item */\n separator?: boolean;\n /** Nested items — renders as a flyout submenu (unlimited depth) */\n children?: MenuBarItemConfig[];\n}\n\n/** Config for one top-level menu entry.\n *\n * - Có `items` → dropdown menu bình thường\n * - Không có `items` → click thẳng vào entry (dùng `type` + `href` / `onClick`)\n */\nexport interface MenuBarMenuConfig {\n id: string;\n label: React.ReactNode;\n icon?: React.ReactNode;\n /** Nếu có items → render dropdown. Nếu bỏ qua → render trực tiếp như button/link */\n items?: MenuBarItemConfig[];\n disabled?: boolean;\n /** Chỉ dùng khi không có items. @default 'button' */\n type?: MenuBarItemType;\n /** Route path (type='link') hoặc URL (type='external') */\n href?: string;\n /** Callback khi click (type='button' | 'modal') */\n onClick?: () => void;\n}\n\n/* ─── Variants ──────────────────────────────────────────────────────────── */\n\nconst menuBarVariants = tv({\n slots: {\n root: 'flex items-center gap-0.5 rounded-md border border-border bg-background p-1',\n trigger:\n 'inline-flex items-center gap-1.5 rounded-sm px-3 py-1.5 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none',\n content:\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n item:\n 'relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n itemActive: 'bg-accent/50 font-medium',\n subTrigger:\n 'relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n subContent:\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n separator: '-mx-1 my-1 h-px bg-border',\n label: 'px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider',\n shortcut: 'ml-auto text-xs tracking-widest opacity-60',\n },\n});\n\nconst styles = menuBarVariants();\n\n/* ─── MenuBar ───────────────────────────────────────────────────────────── */\n\nexport interface MenuBarProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst MenuBar = React.forwardRef<HTMLDivElement, MenuBarProps>(({ className, ...props }, ref) => (\n <div ref={ref} role=\"menubar\" className={styles.root({ className })} {...props} />\n));\nMenuBar.displayName = 'MenuBar';\n\n/* ─── MenuBarMenu ───────────────────────────────────────────────────────── */\n\nconst MenuBarMenu = BaseMenu.Root;\n\n/* ─── MenuBarTrigger ────────────────────────────────────────────────────── */\n\nexport interface MenuBarTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger>, 'className'> {\n className?: string;\n}\n\nconst MenuBarTrigger = React.forwardRef<HTMLButtonElement, MenuBarTriggerProps>(\n ({ className, ...props }, ref) => (\n <BaseMenu.Trigger\n ref={ref as React.Ref<HTMLButtonElement>}\n className={styles.trigger({ className })}\n {...props}\n />\n )\n);\nMenuBarTrigger.displayName = 'MenuBarTrigger';\n\n/* ─── MenuBarButton (top-level direct item, no dropdown) ───────────────── */\n\nexport interface MenuBarButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Highlights the button (e.g. active route) */\n active?: boolean;\n}\n\nconst MenuBarButton = React.forwardRef<HTMLButtonElement, MenuBarButtonProps>(\n ({ className, active, ...props }, ref) => (\n <button\n ref={ref}\n className={styles.trigger({ className: cn(active && styles.itemActive(), className) })}\n {...props}\n />\n )\n);\nMenuBarButton.displayName = 'MenuBarButton';\n\n/* ─── MenuBarContent ────────────────────────────────────────────────────── */\n\nexport interface MenuBarContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\n className?: string;\n side?: 'top' | 'right' | 'bottom' | 'left';\n align?: 'start' | 'center' | 'end';\n sideOffset?: number;\n}\n\nconst MenuBarContent = React.forwardRef<\n React.ComponentRef<typeof BaseMenu.Popup>,\n MenuBarContentProps\n>(({ className, side = 'bottom', align = 'start', sideOffset = 4, ...props }, ref) => (\n <BaseMenu.Portal>\n <BaseMenu.Positioner side={side} align={align} sideOffset={sideOffset}>\n <BaseMenu.Popup ref={ref} className={styles.content({ className })} {...props} />\n </BaseMenu.Positioner>\n </BaseMenu.Portal>\n));\nMenuBarContent.displayName = 'MenuBarContent';\n\n/* ─── MenuBarItem ───────────────────────────────────────────────────────── */\n\nexport interface MenuBarItemProps\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>, 'className'> {\n className?: string;\n /** Applies active/highlighted styling (e.g. current route) */\n active?: boolean;\n}\n\nconst MenuBarItem = React.forwardRef<React.ComponentRef<typeof BaseMenu.Item>, MenuBarItemProps>(\n ({ className, active, children, ...props }, ref) => (\n <BaseMenu.Item\n ref={ref}\n className={styles.item({ className: cn(active && styles.itemActive(), className) })}\n {...props}\n >\n {children}\n </BaseMenu.Item>\n )\n);\nMenuBarItem.displayName = 'MenuBarItem';\n\n/* ─── MenuBarSeparator ──────────────────────────────────────────────────── */\n\nexport interface MenuBarSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst MenuBarSeparator = React.forwardRef<HTMLDivElement, MenuBarSeparatorProps>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={styles.separator({ className })} {...props} />\n )\n);\nMenuBarSeparator.displayName = 'MenuBarSeparator';\n\n/* ─── MenuBarLabel ──────────────────────────────────────────────────────── */\n\nexport interface MenuBarLabelProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst MenuBarLabel = React.forwardRef<HTMLDivElement, MenuBarLabelProps>(\n ({ className, ...props }, ref) => (\n <div ref={ref} className={styles.label({ className })} {...props} />\n )\n);\nMenuBarLabel.displayName = 'MenuBarLabel';\n\n/* ─── MenuBarShortcut ───────────────────────────────────────────────────── */\n\nconst MenuBarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\n <span className={styles.shortcut({ className })} {...props} />\n);\nMenuBarShortcut.displayName = 'MenuBarShortcut';\n\n/* ─── MenuBarSub ────────────────────────────────────────────────────────── */\n\nconst MenuBarSub = BaseMenu.SubmenuRoot;\n\n/* ─── MenuBarSubTrigger ─────────────────────────────────────────────────── */\n\nexport interface MenuBarSubTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>, 'className'> {\n className?: string;\n}\n\nconst MenuBarSubTrigger = React.forwardRef<\n React.ComponentRef<typeof BaseMenu.SubmenuTrigger>,\n MenuBarSubTriggerProps\n>(({ className, children, ...props }, ref) => (\n <BaseMenu.SubmenuTrigger ref={ref} className={styles.subTrigger({ className })} {...props}>\n {children}\n <ChevronRight className=\"ml-auto\" />\n </BaseMenu.SubmenuTrigger>\n));\nMenuBarSubTrigger.displayName = 'MenuBarSubTrigger';\n\n/* ─── MenuBarSubContent ─────────────────────────────────────────────────── */\n\nexport interface MenuBarSubContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\n className?: string;\n}\n\nconst MenuBarSubContent = React.forwardRef<\n React.ComponentRef<typeof BaseMenu.Popup>,\n MenuBarSubContentProps\n>(({ className, ...props }, ref) => (\n <BaseMenu.Portal>\n <BaseMenu.Positioner sideOffset={-4}>\n <BaseMenu.Popup ref={ref} className={styles.subContent({ className })} {...props} />\n </BaseMenu.Positioner>\n </BaseMenu.Portal>\n));\nMenuBarSubContent.displayName = 'MenuBarSubContent';\n\n/* ─── MenuBarGroup ──────────────────────────────────────────────────────── */\n\nconst MenuBarGroup = BaseMenu.Group;\n\n/* ─── Config-driven layer ───────────────────────────────────────────────── */\n\n/**\n * Internal recursive renderer for MenuBarItemConfig.\n * Handles all 4 item types, separators, and unlimited submenu depth.\n */\nconst MenuBarItemRenderer = ({ item }: { item: MenuBarItemConfig }) => {\n const navigate = useNavigate();\n const isLinkType = item.type === 'link' && !!item.href;\n const match = useMatch(isLinkType ? item.href! : '__NO_MATCH__');\n const isActive = isLinkType && !!match;\n\n const handleClick = React.useCallback(() => {\n if (item.type === 'link' && item.href) {\n navigate(item.href);\n } else if (item.type === 'external' && item.href) {\n window.open(item.href, '_blank', 'noopener,noreferrer');\n } else {\n item.onClick?.();\n }\n }, [item, navigate]);\n\n if (item.children && item.children.length > 0) {\n return (\n <>\n {item.separator && <MenuBarSeparator />}\n <MenuBarSub>\n <MenuBarSubTrigger disabled={item.disabled}>\n {item.icon}\n {item.label}\n </MenuBarSubTrigger>\n <MenuBarSubContent>\n {item.children.map((child) => (\n <MenuBarItemRenderer key={child.id} item={child} />\n ))}\n </MenuBarSubContent>\n </MenuBarSub>\n </>\n );\n }\n\n return (\n <>\n {item.separator && <MenuBarSeparator />}\n <MenuBarItem active={isActive} onClick={handleClick} disabled={item.disabled}>\n {item.icon}\n {item.label}\n {item.shortcut && <MenuBarShortcut>{item.shortcut}</MenuBarShortcut>}\n {item.type === 'external' && <ExternalLink className=\"ml-auto !size-3 opacity-50\" />}\n </MenuBarItem>\n </>\n );\n};\n\n/** Props for the config-driven MenuBarNav component */\nexport interface MenuBarNavProps extends Omit<MenuBarProps, 'children'> {\n /** Array of top-level menus, each with nested items supporting unlimited depth */\n menus: MenuBarMenuConfig[];\n}\n\n/**\n * Config-driven menu bar. Pass a `menus` array and it renders everything —\n * triggers, dropdowns, submenus, separators, active link states.\n *\n * @example\n * ```tsx\n * <MenuBarNav menus={[\n * {\n * id: 'file', label: 'File',\n * items: [\n * { id: 'new', label: 'New', type: 'button', onClick: handleNew, shortcut: '⌘N' },\n * { id: 'open', label: 'Open', type: 'link', href: '/open' },\n * { id: 'sep', label: '---', separator: true, ... },\n * ],\n * },\n * ]} />\n * ```\n */\n/** Internal: renders a direct (no-dropdown) top-level entry */\nconst MenuBarDirectRenderer = ({ menu }: { menu: MenuBarMenuConfig }) => {\n const navigate = useNavigate();\n const isLink = menu.type === 'link' && !!menu.href;\n const match = useMatch(isLink ? menu.href! : '__NO_MATCH__');\n\n const handleClick = React.useCallback(() => {\n if (menu.type === 'link' && menu.href) navigate(menu.href);\n else if (menu.type === 'external' && menu.href) window.open(menu.href, '_blank', 'noopener,noreferrer');\n else menu.onClick?.();\n }, [menu, navigate]);\n\n return (\n <MenuBarButton active={isLink && !!match} disabled={menu.disabled} onClick={handleClick}>\n {menu.icon}\n {menu.label}\n {menu.type === 'external' && <ExternalLink className=\"!size-3 opacity-50\" />}\n </MenuBarButton>\n );\n};\n\nconst MenuBarNav = React.forwardRef<HTMLDivElement, MenuBarNavProps>(\n ({ menus, className, ...props }, ref) => (\n <MenuBar ref={ref} className={className} {...props}>\n {menus.map((menu) =>\n !menu.items || menu.items.length === 0 ? (\n // Direct item — không có dropdown\n <MenuBarDirectRenderer key={menu.id} menu={menu} />\n ) : (\n // Dropdown menu bình thường\n <MenuBarMenu key={menu.id}>\n <MenuBarTrigger disabled={menu.disabled}>\n {menu.icon}\n {menu.label}\n </MenuBarTrigger>\n <MenuBarContent>\n {menu.items.map((item) => (\n <MenuBarItemRenderer key={item.id} item={item} />\n ))}\n </MenuBarContent>\n </MenuBarMenu>\n )\n )}\n </MenuBar>\n )\n);\nMenuBarNav.displayName = 'MenuBarNav';\n\n/* ─── Exports ───────────────────────────────────────────────────────────── */\n\nexport {\n menuBarVariants,\n // Primitive API\n MenuBar,\n MenuBarMenu,\n MenuBarTrigger,\n MenuBarButton,\n MenuBarContent,\n MenuBarItem,\n MenuBarSeparator,\n MenuBarLabel,\n MenuBarShortcut,\n MenuBarSub,\n MenuBarSubTrigger,\n MenuBarSubContent,\n MenuBarGroup,\n // Config-driven API\n MenuBarNav,\n};\n"
|
|
501
|
+
"content": "import * as React from 'react';\r\nimport { Menu as BaseMenu } from '@base-ui/react';\r\nimport { useNavigate, useMatch } from 'react-router-dom';\r\nimport { tv } from 'tailwind-variants';\r\nimport { ChevronRight, ExternalLink } from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\n/* ─── Types ─────────────────────────────────────────────────────────────── */\r\n\r\n/** How the menu item behaves when clicked */\r\nexport type MenuBarItemType = 'link' | 'button' | 'modal' | 'external';\r\n\r\n/** Config for a single item inside a menu */\r\nexport interface MenuBarItemConfig {\r\n id: string;\r\n label: React.ReactNode;\r\n icon?: React.ReactNode;\r\n /** @default 'button' */\r\n type?: MenuBarItemType;\r\n /** Route path for type='link', full URL for type='external' */\r\n href?: string;\r\n /** Called on click for type='button' | 'modal', and as fallback for 'link' | 'external' */\r\n onClick?: () => void;\r\n shortcut?: string;\r\n disabled?: boolean;\r\n /** Renders a separator line before this item */\r\n separator?: boolean;\r\n /** Nested items — renders as a flyout submenu (unlimited depth) */\r\n children?: MenuBarItemConfig[];\r\n}\r\n\r\n/** Config for one top-level menu entry.\r\n *\r\n * - Có `items` → dropdown menu bình thường\r\n * - Không có `items` → click thẳng vào entry (dùng `type` + `href` / `onClick`)\r\n */\r\nexport interface MenuBarMenuConfig {\r\n id: string;\r\n label: React.ReactNode;\r\n icon?: React.ReactNode;\r\n /** Nếu có items → render dropdown. Nếu bỏ qua → render trực tiếp như button/link */\r\n items?: MenuBarItemConfig[];\r\n disabled?: boolean;\r\n /** Chỉ dùng khi không có items. @default 'button' */\r\n type?: MenuBarItemType;\r\n /** Route path (type='link') hoặc URL (type='external') */\r\n href?: string;\r\n /** Callback khi click (type='button' | 'modal') */\r\n onClick?: () => void;\r\n}\r\n\r\n/* ─── Variants ──────────────────────────────────────────────────────────── */\r\n\r\nconst menuBarVariants = tv({\r\n slots: {\r\n root: 'flex items-center gap-0.5 rounded-md border border-border bg-background p-1',\r\n trigger:\r\n 'inline-flex items-center gap-1.5 rounded-sm px-3 py-1.5 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none',\r\n content:\r\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n item:\r\n 'relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n itemActive: 'bg-accent/50 font-medium',\r\n subTrigger:\r\n 'relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\r\n subContent:\r\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border border-border bg-background p-1 text-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\r\n separator: '-mx-1 my-1 h-px bg-border',\r\n label: 'px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider',\r\n shortcut: 'ml-auto text-xs tracking-widest opacity-60',\r\n },\r\n});\r\n\r\nconst styles = menuBarVariants();\r\n\r\n/* ─── MenuBar ───────────────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarProps extends React.ComponentPropsWithoutRef<'div'> {}\r\n\r\nconst MenuBar = React.forwardRef<HTMLDivElement, MenuBarProps>(({ className, ...props }, ref) => (\r\n <div ref={ref} role=\"menubar\" className={styles.root({ className })} {...props} />\r\n));\r\nMenuBar.displayName = 'MenuBar';\r\n\r\n/* ─── MenuBarMenu ───────────────────────────────────────────────────────── */\r\n\r\nconst MenuBarMenu = BaseMenu.Root;\r\n\r\n/* ─── MenuBarTrigger ────────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarTriggerProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst MenuBarTrigger = React.forwardRef<HTMLButtonElement, MenuBarTriggerProps>(\r\n ({ className, ...props }, ref) => (\r\n <BaseMenu.Trigger\r\n ref={ref as React.Ref<HTMLButtonElement>}\r\n className={styles.trigger({ className })}\r\n {...props}\r\n />\r\n )\r\n);\r\nMenuBarTrigger.displayName = 'MenuBarTrigger';\r\n\r\n/* ─── MenuBarButton (top-level direct item, no dropdown) ───────────────── */\r\n\r\nexport interface MenuBarButtonProps extends React.ComponentPropsWithoutRef<'button'> {\r\n /** Highlights the button (e.g. active route) */\r\n active?: boolean;\r\n}\r\n\r\nconst MenuBarButton = React.forwardRef<HTMLButtonElement, MenuBarButtonProps>(\r\n ({ className, active, ...props }, ref) => (\r\n <button\r\n ref={ref}\r\n className={styles.trigger({ className: cn(active && styles.itemActive(), className) })}\r\n {...props}\r\n />\r\n )\r\n);\r\nMenuBarButton.displayName = 'MenuBarButton';\r\n\r\n/* ─── MenuBarContent ────────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarContentProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\r\n className?: string;\r\n side?: 'top' | 'right' | 'bottom' | 'left';\r\n align?: 'start' | 'center' | 'end';\r\n sideOffset?: number;\r\n}\r\n\r\nconst MenuBarContent = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Popup>,\r\n MenuBarContentProps\r\n>(({ className, side = 'bottom', align = 'start', sideOffset = 4, ...props }, ref) => (\r\n <BaseMenu.Portal>\r\n <BaseMenu.Positioner side={side} align={align} sideOffset={sideOffset}>\r\n <BaseMenu.Popup ref={ref} className={styles.content({ className })} {...props} />\r\n </BaseMenu.Positioner>\r\n </BaseMenu.Portal>\r\n));\r\nMenuBarContent.displayName = 'MenuBarContent';\r\n\r\n/* ─── MenuBarItem ───────────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarItemProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>, 'className'> {\r\n className?: string;\r\n /** Applies active/highlighted styling (e.g. current route) */\r\n active?: boolean;\r\n}\r\n\r\nconst MenuBarItem = React.forwardRef<React.ComponentRef<typeof BaseMenu.Item>, MenuBarItemProps>(\r\n ({ className, active, children, ...props }, ref) => (\r\n <BaseMenu.Item\r\n ref={ref}\r\n className={styles.item({ className: cn(active && styles.itemActive(), className) })}\r\n {...props}\r\n >\r\n {children}\r\n </BaseMenu.Item>\r\n )\r\n);\r\nMenuBarItem.displayName = 'MenuBarItem';\r\n\r\n/* ─── MenuBarSeparator ──────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {}\r\n\r\nconst MenuBarSeparator = React.forwardRef<HTMLDivElement, MenuBarSeparatorProps>(\r\n ({ className, ...props }, ref) => (\r\n <div ref={ref} className={styles.separator({ className })} {...props} />\r\n )\r\n);\r\nMenuBarSeparator.displayName = 'MenuBarSeparator';\r\n\r\n/* ─── MenuBarLabel ──────────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarLabelProps extends React.ComponentPropsWithoutRef<'div'> {}\r\n\r\nconst MenuBarLabel = React.forwardRef<HTMLDivElement, MenuBarLabelProps>(\r\n ({ className, ...props }, ref) => (\r\n <div ref={ref} className={styles.label({ className })} {...props} />\r\n )\r\n);\r\nMenuBarLabel.displayName = 'MenuBarLabel';\r\n\r\n/* ─── MenuBarShortcut ───────────────────────────────────────────────────── */\r\n\r\nconst MenuBarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\r\n <span className={styles.shortcut({ className })} {...props} />\r\n);\r\nMenuBarShortcut.displayName = 'MenuBarShortcut';\r\n\r\n/* ─── MenuBarSub ────────────────────────────────────────────────────────── */\r\n\r\nconst MenuBarSub = BaseMenu.SubmenuRoot;\r\n\r\n/* ─── MenuBarSubTrigger ─────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarSubTriggerProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst MenuBarSubTrigger = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.SubmenuTrigger>,\r\n MenuBarSubTriggerProps\r\n>(({ className, children, ...props }, ref) => (\r\n <BaseMenu.SubmenuTrigger ref={ref} className={styles.subTrigger({ className })} {...props}>\r\n {children}\r\n <ChevronRight className=\"ml-auto\" />\r\n </BaseMenu.SubmenuTrigger>\r\n));\r\nMenuBarSubTrigger.displayName = 'MenuBarSubTrigger';\r\n\r\n/* ─── MenuBarSubContent ─────────────────────────────────────────────────── */\r\n\r\nexport interface MenuBarSubContentProps\r\n extends Omit<React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>, 'className'> {\r\n className?: string;\r\n}\r\n\r\nconst MenuBarSubContent = React.forwardRef<\r\n React.ComponentRef<typeof BaseMenu.Popup>,\r\n MenuBarSubContentProps\r\n>(({ className, ...props }, ref) => (\r\n <BaseMenu.Portal>\r\n <BaseMenu.Positioner sideOffset={-4}>\r\n <BaseMenu.Popup ref={ref} className={styles.subContent({ className })} {...props} />\r\n </BaseMenu.Positioner>\r\n </BaseMenu.Portal>\r\n));\r\nMenuBarSubContent.displayName = 'MenuBarSubContent';\r\n\r\n/* ─── MenuBarGroup ──────────────────────────────────────────────────────── */\r\n\r\nconst MenuBarGroup = BaseMenu.Group;\r\n\r\n/* ─── Config-driven layer ───────────────────────────────────────────────── */\r\n\r\n/**\r\n * Internal recursive renderer for MenuBarItemConfig.\r\n * Handles all 4 item types, separators, and unlimited submenu depth.\r\n */\r\nconst MenuBarItemRenderer = ({ item }: { item: MenuBarItemConfig }) => {\r\n const navigate = useNavigate();\r\n const isLinkType = item.type === 'link' && !!item.href;\r\n const match = useMatch(isLinkType ? item.href! : '__NO_MATCH__');\r\n const isActive = isLinkType && !!match;\r\n\r\n const handleClick = React.useCallback(() => {\r\n if (item.type === 'link' && item.href) {\r\n navigate(item.href);\r\n } else if (item.type === 'external' && item.href) {\r\n window.open(item.href, '_blank', 'noopener,noreferrer');\r\n } else {\r\n item.onClick?.();\r\n }\r\n }, [item, navigate]);\r\n\r\n if (item.children && item.children.length > 0) {\r\n return (\r\n <>\r\n {item.separator && <MenuBarSeparator />}\r\n <MenuBarSub>\r\n <MenuBarSubTrigger disabled={item.disabled}>\r\n {item.icon}\r\n {item.label}\r\n </MenuBarSubTrigger>\r\n <MenuBarSubContent>\r\n {item.children.map((child) => (\r\n <MenuBarItemRenderer key={child.id} item={child} />\r\n ))}\r\n </MenuBarSubContent>\r\n </MenuBarSub>\r\n </>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n {item.separator && <MenuBarSeparator />}\r\n <MenuBarItem active={isActive} onClick={handleClick} disabled={item.disabled}>\r\n {item.icon}\r\n {item.label}\r\n {item.shortcut && <MenuBarShortcut>{item.shortcut}</MenuBarShortcut>}\r\n {item.type === 'external' && <ExternalLink className=\"ml-auto !size-3 opacity-50\" />}\r\n </MenuBarItem>\r\n </>\r\n );\r\n};\r\n\r\n/** Props for the config-driven MenuBarNav component */\r\nexport interface MenuBarNavProps extends Omit<MenuBarProps, 'children'> {\r\n /** Array of top-level menus, each with nested items supporting unlimited depth */\r\n menus: MenuBarMenuConfig[];\r\n}\r\n\r\n/**\r\n * Config-driven menu bar. Pass a `menus` array and it renders everything —\r\n * triggers, dropdowns, submenus, separators, active link states.\r\n *\r\n * @example\r\n * ```tsx\r\n * <MenuBarNav menus={[\r\n * {\r\n * id: 'file', label: 'File',\r\n * items: [\r\n * { id: 'new', label: 'New', type: 'button', onClick: handleNew, shortcut: '⌘N' },\r\n * { id: 'open', label: 'Open', type: 'link', href: '/open' },\r\n * { id: 'sep', label: '---', separator: true, ... },\r\n * ],\r\n * },\r\n * ]} />\r\n * ```\r\n */\r\n/** Internal: renders a direct (no-dropdown) top-level entry */\r\nconst MenuBarDirectRenderer = ({ menu }: { menu: MenuBarMenuConfig }) => {\r\n const navigate = useNavigate();\r\n const isLink = menu.type === 'link' && !!menu.href;\r\n const match = useMatch(isLink ? menu.href! : '__NO_MATCH__');\r\n\r\n const handleClick = React.useCallback(() => {\r\n if (menu.type === 'link' && menu.href) navigate(menu.href);\r\n else if (menu.type === 'external' && menu.href) window.open(menu.href, '_blank', 'noopener,noreferrer');\r\n else menu.onClick?.();\r\n }, [menu, navigate]);\r\n\r\n return (\r\n <MenuBarButton active={isLink && !!match} disabled={menu.disabled} onClick={handleClick}>\r\n {menu.icon}\r\n {menu.label}\r\n {menu.type === 'external' && <ExternalLink className=\"!size-3 opacity-50\" />}\r\n </MenuBarButton>\r\n );\r\n};\r\n\r\nconst MenuBarNav = React.forwardRef<HTMLDivElement, MenuBarNavProps>(\r\n ({ menus, className, ...props }, ref) => (\r\n <MenuBar ref={ref} className={className} {...props}>\r\n {menus.map((menu) =>\r\n !menu.items || menu.items.length === 0 ? (\r\n // Direct item — không có dropdown\r\n <MenuBarDirectRenderer key={menu.id} menu={menu} />\r\n ) : (\r\n // Dropdown menu bình thường\r\n <MenuBarMenu key={menu.id}>\r\n <MenuBarTrigger disabled={menu.disabled}>\r\n {menu.icon}\r\n {menu.label}\r\n </MenuBarTrigger>\r\n <MenuBarContent>\r\n {menu.items.map((item) => (\r\n <MenuBarItemRenderer key={item.id} item={item} />\r\n ))}\r\n </MenuBarContent>\r\n </MenuBarMenu>\r\n )\r\n )}\r\n </MenuBar>\r\n )\r\n);\r\nMenuBarNav.displayName = 'MenuBarNav';\r\n\r\n/* ─── Exports ───────────────────────────────────────────────────────────── */\r\n\r\nexport {\r\n menuBarVariants,\r\n // Primitive API\r\n MenuBar,\r\n MenuBarMenu,\r\n MenuBarTrigger,\r\n MenuBarButton,\r\n MenuBarContent,\r\n MenuBarItem,\r\n MenuBarSeparator,\r\n MenuBarLabel,\r\n MenuBarShortcut,\r\n MenuBarSub,\r\n MenuBarSubTrigger,\r\n MenuBarSubContent,\r\n MenuBarGroup,\r\n // Config-driven API\r\n MenuBarNav,\r\n};\r\n"
|
|
502
|
+
}
|
|
503
|
+
]
|
|
504
|
+
},
|
|
505
|
+
"number-input": {
|
|
506
|
+
"name": "number-input",
|
|
507
|
+
"dependencies": [
|
|
508
|
+
"@base-ui/react",
|
|
509
|
+
"tailwind-variants",
|
|
510
|
+
"lucide-react"
|
|
511
|
+
],
|
|
512
|
+
"internalDependencies": [],
|
|
513
|
+
"files": [
|
|
514
|
+
{
|
|
515
|
+
"path": "src/components/ui/number-input/NumberInput.tsx",
|
|
516
|
+
"content": "import * as React from 'react';\r\nimport { NumberField } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { Minus, Plus } from 'lucide-react';\r\n\r\n// ─── Variants ────────────────────────────────────────────────────────────────\r\n\r\nconst numberInputVariants = tv({\r\n slots: {\r\n root: 'flex flex-col gap-1.5',\r\n group: 'inline-flex items-center border border-border rounded-lg bg-background overflow-hidden transition-colors focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',\r\n input: [\r\n 'h-full bg-transparent text-center text-sm font-medium text-foreground outline-none',\r\n 'placeholder:text-muted-foreground',\r\n '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\r\n ].join(' '),\r\n button: [\r\n 'inline-flex items-center justify-center shrink-0 border-0 bg-transparent text-muted-foreground',\r\n 'transition-colors hover:bg-muted hover:text-foreground',\r\n 'disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent',\r\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset',\r\n ].join(' '),\r\n label: 'text-sm font-medium text-foreground leading-none',\r\n description: 'text-[0.8rem] text-muted-foreground',\r\n error: 'text-[0.8rem] font-medium text-danger',\r\n },\r\n variants: {\r\n size: {\r\n sm: {\r\n group: 'h-8',\r\n input: 'w-12 text-xs',\r\n button: 'w-8 h-8',\r\n },\r\n md: {\r\n group: 'h-10',\r\n input: 'w-14 text-sm',\r\n button: 'w-10 h-10',\r\n },\r\n lg: {\r\n group: 'h-12',\r\n input: 'w-16 text-base',\r\n button: 'w-12 h-12',\r\n },\r\n },\r\n isError: {\r\n true: { group: 'border-danger focus-within:border-danger focus-within:ring-danger/20' },\r\n },\r\n disabled: {\r\n true: { group: 'opacity-50 cursor-not-allowed' },\r\n },\r\n },\r\n defaultVariants: {\r\n size: 'md',\r\n },\r\n});\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport interface NumberInputProps extends VariantProps<typeof numberInputVariants> {\r\n value?: number | null;\r\n defaultValue?: number;\r\n onChange?: (value: number | null) => void;\r\n min?: number;\r\n max?: number;\r\n step?: number;\r\n disabled?: boolean;\r\n label?: string;\r\n description?: string;\r\n error?: string;\r\n placeholder?: string;\r\n className?: string;\r\n}\r\n\r\n// ─── Component ───────────────────────────────────────────────────────────────\r\n\r\nconst NumberInput = React.forwardRef<HTMLDivElement, NumberInputProps>(\r\n (\r\n {\r\n value,\r\n defaultValue = 0,\r\n onChange,\r\n min,\r\n max,\r\n step = 1,\r\n disabled = false,\r\n label,\r\n description,\r\n error,\r\n placeholder = '0',\r\n size = 'md',\r\n className,\r\n },\r\n ref,\r\n ) => {\r\n const styles = numberInputVariants({ size, isError: !!error, disabled });\r\n const rootId = React.useId();\r\n\r\n return (\r\n <NumberField.Root\r\n ref={ref}\r\n value={value ?? undefined}\r\n defaultValue={defaultValue}\r\n onValueChange={(val) => onChange?.(val)}\r\n min={min}\r\n max={max}\r\n step={step}\r\n disabled={disabled}\r\n className={cn(styles.root(), className)}\r\n >\r\n {label && (\r\n <label htmlFor={rootId} className={styles.label()}>\r\n {label}\r\n </label>\r\n )}\r\n\r\n <NumberField.Group className={styles.group()}>\r\n <NumberField.Decrement\r\n className={cn(styles.button(), 'border-r border-border')}\r\n aria-label=\"Decrease\"\r\n >\r\n <Minus className=\"h-3.5 w-3.5\" />\r\n </NumberField.Decrement>\r\n\r\n <NumberField.Input\r\n id={rootId}\r\n placeholder={placeholder}\r\n className={styles.input()}\r\n />\r\n\r\n <NumberField.Increment\r\n className={cn(styles.button(), 'border-l border-border')}\r\n aria-label=\"Increase\"\r\n >\r\n <Plus className=\"h-3.5 w-3.5\" />\r\n </NumberField.Increment>\r\n </NumberField.Group>\r\n\r\n {description && !error && (\r\n <p className={styles.description()}>{description}</p>\r\n )}\r\n {error && (\r\n <p className={styles.error()}>{error}</p>\r\n )}\r\n </NumberField.Root>\r\n );\r\n },\r\n);\r\n\r\nNumberInput.displayName = 'NumberInput';\r\n\r\nexport { NumberInput, numberInputVariants };\r\n"
|
|
437
517
|
}
|
|
438
518
|
]
|
|
439
519
|
},
|
|
@@ -461,7 +541,7 @@
|
|
|
461
541
|
"files": [
|
|
462
542
|
{
|
|
463
543
|
"path": "src/components/ui/popover/Popover.tsx",
|
|
464
|
-
"content": "'use client';\
|
|
544
|
+
"content": "'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react';\nimport { tv } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\nconst popoverVariants = tv({\n slots: {\n popup: 'z-50 w-72 rounded-md border border-border bg-background p-4 text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-ending:animate-out data-ending:fade-out-0 data-ending:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\n arrow: 'fill-popover stroke-border stroke-[1px]',\n },\n});\n\nconst { popup, arrow } = popoverVariants();\n\n// ─── Compound Components ─────────────────────────────────────────────────────\n\nconst Popover = BasePopover.Root;\n\nconst PopoverTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentPropsWithoutRef<typeof BasePopover.Trigger>\n>(({ children, render: renderProp, ...props }, ref) => {\n // Wrap pattern: <PopoverTrigger><Button /></PopoverTrigger>\n // → forward the element as `render` so Base UI merges trigger props into it (no nested <button>)\n const isElement = React.isValidElement(children);\n return (\n <BasePopover.Trigger\n ref={ref}\n render={renderProp ?? (isElement ? (children as React.ReactElement) : undefined)}\n {...props}\n >\n {isElement ? undefined : children}\n </BasePopover.Trigger>\n );\n});\nPopoverTrigger.displayName = 'PopoverTrigger';\n\nexport interface PopoverContentProps\n extends React.ComponentPropsWithoutRef<typeof BasePopover.Popup> {\n /** Side offset from the trigger (default: 4) */\n sideOffset?: number;\n /** Side to display the popover (default: 'bottom') */\n side?: 'top' | 'right' | 'bottom' | 'left';\n /** Alignment relative to the trigger (default: 'center') */\n align?: 'start' | 'center' | 'end';\n /** Show the arrow indicator */\n showArrow?: boolean;\n}\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n ({ className, sideOffset = 4, side = 'bottom', align = 'center', showArrow = true, children, ...props }, ref) => (\n <BasePopover.Portal>\n <BasePopover.Positioner sideOffset={sideOffset} side={side} align={align}>\n <BasePopover.Popup ref={ref} className={cn(popup(), className)} {...props}>\n {showArrow && <BasePopover.Arrow className={arrow()} />}\n {children}\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n )\n);\nPopoverContent.displayName = 'PopoverContent';\n\nconst PopoverClose = BasePopover.Close;\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverClose };\n"
|
|
465
545
|
}
|
|
466
546
|
]
|
|
467
547
|
},
|
|
@@ -478,7 +558,7 @@
|
|
|
478
558
|
"files": [
|
|
479
559
|
{
|
|
480
560
|
"path": "src/components/ui/pretty-code/PrettyCode.tsx",
|
|
481
|
-
"content": "import React, { useState, useEffect, useCallback } from 'react';\
|
|
561
|
+
"content": "import React, { useState, useEffect, useCallback } from 'react';\nimport { createHighlighter, type Highlighter } from 'shiki';\nimport { unified } from 'unified';\nimport rehypeParse from 'rehype-parse';\nimport rehypeReact from 'rehype-react';\nimport * as prod from 'react/jsx-runtime';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Singleton highlighter ────────────────────────────────────────────────────\nlet globalHighlighter: Highlighter | null = null;\n\nconst getHighlighter = async () => {\n if (globalHighlighter) return globalHighlighter;\n globalHighlighter = await createHighlighter({\n themes: ['nord'],\n langs: ['tsx', 'typescript', 'javascript', 'bash', 'json'],\n });\n return globalHighlighter;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\nconst LANG_LABELS: Record<string, string> = {\n tsx: 'TSX',\n typescript: 'TypeScript',\n javascript: 'JavaScript',\n bash: 'Bash',\n json: 'JSON',\n};\n\n// Fixed widths for loading skeleton rows\nconst SKELETON_WIDTHS = ['68%', '82%', '54%', '76%', '45%', '60%'];\n\n// ─── Types ────────────────────────────────────────────────────────────────────\ninterface PrettyCodeProps {\n code: string;\n lang?: string;\n /** Optional filename shown in the header bar */\n filename?: string;\n className?: string;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\nexport const PrettyCode: React.FC<PrettyCodeProps> = ({\n code,\n lang = 'tsx',\n filename,\n className,\n}) => {\n const [nodes, setNodes] = useState<React.ReactNode>(null);\n const [loading, setLoading] = useState(true);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n let isMounted = true;\n setLoading(true);\n setNodes(null);\n\n const highlight = async () => {\n try {\n const highlighter = await getHighlighter();\n const html = highlighter.codeToHtml(code, { lang, theme: 'nord' });\n\n const file = await unified()\n .use(rehypeParse, { fragment: true })\n .use(rehypeReact, { ...prod })\n .process(html);\n\n if (isMounted) {\n setNodes(file.result as React.ReactNode);\n setLoading(false);\n }\n } catch (err) {\n console.error('Failed to highlight code:', err);\n if (isMounted) setLoading(false);\n }\n };\n\n highlight();\n return () => { isMounted = false; };\n }, [code, lang]);\n\n const handleCopy = useCallback(async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n } catch {\n // clipboard not available\n }\n }, [code]);\n\n const langLabel = LANG_LABELS[lang] ?? lang.toUpperCase();\n\n return (\n <div className={cn('rounded-xl overflow-hidden border border-white/[0.07] bg-[#2e3440] shadow-2xl', className)}>\n\n {/* ── Header bar ── */}\n <div className=\"flex items-center justify-between px-4 py-2.5 bg-[#252b37] border-b border-white/[0.07] select-none\">\n\n {/* Left: window dots + filename */}\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <span className=\"w-3 h-3 rounded-full bg-[#ff5f57]\" />\n <span className=\"w-3 h-3 rounded-full bg-[#febc2e]\" />\n <span className=\"w-3 h-3 rounded-full bg-[#28c840]\" />\n </div>\n {filename && (\n <span className=\"text-[11px] text-zinc-400 font-mono truncate leading-none\">\n {filename}\n </span>\n )}\n </div>\n\n {/* Right: language badge + copy button */}\n <div className=\"flex items-center gap-2 shrink-0 ml-4\">\n <span className=\"hidden sm:block text-[10px] font-bold tracking-widest text-zinc-600 uppercase\">\n {langLabel}\n </span>\n\n <button\n onClick={handleCopy}\n aria-label=\"Copy code\"\n className={cn(\n 'flex items-center gap-1.5 px-2 py-1 rounded-md',\n 'text-xs font-medium transition-all duration-150 active:scale-95',\n copied\n ? 'text-emerald-400 bg-emerald-400/10'\n : 'text-zinc-400 hover:text-zinc-100 hover:bg-white/10',\n )}\n >\n {copied\n ? <Check className=\"w-3.5 h-3.5 shrink-0\" />\n : <Copy className=\"w-3.5 h-3.5 shrink-0\" />\n }\n <span className=\"hidden sm:inline w-[42px]\">\n {copied ? 'Copied!' : 'Copy'}\n </span>\n </button>\n </div>\n </div>\n\n {/* ── Code area ── */}\n {loading ? (\n <div className=\"p-5 space-y-3 animate-pulse\" aria-hidden>\n {SKELETON_WIDTHS.map((w, i) => (\n <div\n key={i}\n className=\"h-3.5 rounded-full bg-white/[0.08]\"\n style={{ width: w }}\n />\n ))}\n </div>\n ) : (\n <div\n className=\"overflow-x-auto\n [&_pre]:!bg-transparent [&_pre]:m-0\n [&_pre]:px-5 [&_pre]:py-4\n [&_pre]:text-[13px] [&_pre]:leading-[1.7]\n [&_code]:font-mono [&_code]:text-[13px]\"\n >\n {nodes}\n </div>\n )}\n </div>\n );\n};\n"
|
|
482
562
|
}
|
|
483
563
|
]
|
|
484
564
|
},
|
|
@@ -522,7 +602,7 @@
|
|
|
522
602
|
"files": [
|
|
523
603
|
{
|
|
524
604
|
"path": "src/components/ui/radio/Radio.tsx",
|
|
525
|
-
"content": "import * as React from 'react';\nimport { Radio as BaseRadio } from '@base-ui/react';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\nconst radioVariants = tv({\n slots: {\n root: 'group flex shrink-0 items-center justify-center rounded-full border border-border bg-background transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:border-primary data-checked:border-primary',\n indicator: 'flex items-center justify-center',\n dot: 'rounded-full bg-primary',\n card: 'group/card relative flex flex-row items-start gap-4 cursor-pointer rounded-xl border border-border bg-card p-4 w-full shadow-sm outline-none transition-all hover:bg-accent/50 hover:text-accent-foreground data-[checked]:border-primary data-[checked]:bg-primary/5 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 overflow-hidden',\n cardCircle: 'flex shrink-0 items-center justify-center rounded-full border border-border bg-background transition-all group-data-[checked]/card:border-primary group-data-[checked]/card:text-primary mt-0.5',\n },\n variants: {\n size: {\n sm: { root: 'h-4 w-4', cardCircle: 'h-4 w-4', dot: 'h-1.5 w-1.5' },\n md: { root: 'h-5 w-5', cardCircle: 'h-5 w-5', dot: 'h-2 w-2' },\n lg: { root: 'h-6 w-6', cardCircle: 'h-6 w-6', dot: 'h-2.5 w-2.5' },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport interface RadioProps\n extends Omit<BaseRadio.Root.Props, 'className'>,\n VariantProps<typeof radioVariants> {\n variant?: 'default' | 'card';\n label?: string;\n className?: string;\n /** Hiện/ẩn indicator (circle). Card variant mặc định ẩn. */\n showIndicator?: boolean;\n}\n\nconst Radio = React.forwardRef<React.ElementRef<typeof BaseRadio.Root>, RadioProps>(\n ({ variant = 'default', className, size, label, id, children, showIndicator, ...props }, ref) => {\n const defaultId = React.useId();\n const radioId = id || defaultId;\n\n const { root, indicator, dot, card, cardCircle } = radioVariants({ size });\n\n if (variant === 'card') {\n return (\n <BaseRadio.Root\n ref={ref}\n id={radioId}\n className={card({ className })}\n {...props}\n >\n {showIndicator && (\n <div className={cardCircle()}>\n <BaseRadio.Indicator className={indicator()}>\n <div className={dot()} />\n </BaseRadio.Indicator>\n </div>\n )}\n {children}\n </BaseRadio.Root>\n );\n }\n\n return (\n <div className=\"flex items-center gap-2 w-fit\">\n <BaseRadio.Root\n ref={ref}\n id={radioId}\n className={root({ className })}\n {...props}\n >\n <BaseRadio.Indicator className={indicator()}>\n <div className={dot()} />\n </BaseRadio.Indicator>\n </BaseRadio.Root>\n {children}\n {label && (\n <label\n htmlFor={radioId}\n className=\"text-sm font-medium leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n >\n {label}\n </label>\n )}\n </div>\n );\n }\n);\n\nRadio.displayName = 'Radio';\n\nexport { Radio };\n"
|
|
605
|
+
"content": "import * as React from 'react';\r\nimport { Radio as BaseRadio } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst radioVariants = tv({\r\n slots: {\r\n root: 'group flex shrink-0 items-center justify-center rounded-full border border-border bg-background transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:border-primary data-checked:border-primary',\r\n indicator: 'flex items-center justify-center',\r\n dot: 'rounded-full bg-primary',\r\n card: 'group/card relative flex flex-row items-start gap-4 cursor-pointer rounded-xl border border-border bg-card p-4 w-full shadow-sm outline-none transition-all hover:bg-accent/50 hover:text-accent-foreground data-[checked]:border-primary data-[checked]:bg-primary/5 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 overflow-hidden',\r\n cardCircle: 'flex shrink-0 items-center justify-center rounded-full border border-border bg-background transition-all group-data-[checked]/card:border-primary group-data-[checked]/card:text-primary mt-0.5',\r\n },\r\n variants: {\r\n size: {\r\n sm: { root: 'h-4 w-4', cardCircle: 'h-4 w-4', dot: 'h-1.5 w-1.5' },\r\n md: { root: 'h-5 w-5', cardCircle: 'h-5 w-5', dot: 'h-2 w-2' },\r\n lg: { root: 'h-6 w-6', cardCircle: 'h-6 w-6', dot: 'h-2.5 w-2.5' },\r\n },\r\n },\r\n defaultVariants: {\r\n size: 'md',\r\n },\r\n});\r\n\r\nexport interface RadioProps\r\n extends Omit<BaseRadio.Root.Props, 'className'>,\r\n VariantProps<typeof radioVariants> {\r\n variant?: 'default' | 'card';\r\n label?: string;\r\n className?: string;\r\n /** Hiện/ẩn indicator (circle). Card variant mặc định ẩn. */\r\n showIndicator?: boolean;\r\n}\r\n\r\nconst Radio = React.forwardRef<React.ElementRef<typeof BaseRadio.Root>, RadioProps>(\r\n ({ variant = 'default', className, size, label, id, children, showIndicator, ...props }, ref) => {\r\n const defaultId = React.useId();\r\n const radioId = id || defaultId;\r\n\r\n const { root, indicator, dot, card, cardCircle } = radioVariants({ size });\r\n\r\n if (variant === 'card') {\r\n return (\r\n <BaseRadio.Root\r\n ref={ref}\r\n id={radioId}\r\n className={card({ className })}\r\n {...props}\r\n >\r\n {showIndicator && (\r\n <div className={cardCircle()}>\r\n <BaseRadio.Indicator className={indicator()}>\r\n <div className={dot()} />\r\n </BaseRadio.Indicator>\r\n </div>\r\n )}\r\n {children}\r\n </BaseRadio.Root>\r\n );\r\n }\r\n\r\n return (\r\n <div className=\"flex items-center gap-2 w-fit\">\r\n <BaseRadio.Root\r\n ref={ref}\r\n id={radioId}\r\n className={root({ className })}\r\n {...props}\r\n >\r\n <BaseRadio.Indicator className={indicator()}>\r\n <div className={dot()} />\r\n </BaseRadio.Indicator>\r\n </BaseRadio.Root>\r\n {children}\r\n {label && (\r\n <label\r\n htmlFor={radioId}\r\n className=\"text-sm font-medium leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\r\n >\r\n {label}\r\n </label>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nRadio.displayName = 'Radio';\r\n\r\nexport { Radio };\r\n"
|
|
526
606
|
}
|
|
527
607
|
]
|
|
528
608
|
},
|
|
@@ -550,7 +630,7 @@
|
|
|
550
630
|
"files": [
|
|
551
631
|
{
|
|
552
632
|
"path": "src/components/ui/rate/Rate.tsx",
|
|
553
|
-
"content": "'use client';\
|
|
633
|
+
"content": "'use client';\n\nimport * as React from 'react';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { Star } from 'lucide-react';\n\nconst rateVariants = tv({\n slots: {\n root: 'inline-flex items-center gap-0.5',\n star: 'relative cursor-pointer transition-transform duration-100 hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm',\n starIcon: 'transition-colors duration-150',\n },\n variants: {\n size: {\n sm: { star: 'w-4 h-4', starIcon: 'w-4 h-4' },\n md: { star: 'w-6 h-6', starIcon: 'w-6 h-6' },\n lg: { star: 'w-8 h-8', starIcon: 'w-8 h-8' },\n xl: { star: 'w-10 h-10', starIcon: 'w-10 h-10' },\n },\n readonly: {\n true: { star: 'cursor-default hover:scale-100' },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\n/** Props for the Rate component */\nexport interface RateProps extends VariantProps<typeof rateVariants> {\n /** Controlled rating value */\n value?: number;\n /** Default rating value (uncontrolled) */\n defaultValue?: number;\n /** Callback fired when the rating changes */\n onChange?: (value: number) => void;\n /** Total number of stars */\n count?: number;\n /** Allow half-star precision */\n allowHalf?: boolean;\n /** Allow clicking the current value to reset to 0 */\n allowClear?: boolean;\n /** Display as read-only (no interaction) */\n readonly?: boolean;\n /** Disable the rating component */\n disabled?: boolean;\n /** Custom element to render instead of the default star icon */\n character?: React.ReactNode;\n /** Tailwind text color class for filled stars */\n activeColor?: string;\n /** Tailwind text color class for empty stars */\n inactiveColor?: string;\n className?: string;\n /** Accessible label for the rating group */\n 'aria-label'?: string;\n /**\n * Custom label for individual stars.\n * Receives the star index (1-based) and returns a string.\n * Defaults to \"1 star\", \"2 stars\", etc.\n */\n getStarLabel?: (index: number) => string;\n}\n\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(({\n value: controlledValue,\n defaultValue = 0,\n onChange,\n count = 5,\n allowHalf = false,\n allowClear = true,\n readonly = false,\n disabled = false,\n character,\n activeColor = 'text-amber-400',\n inactiveColor = 'text-muted-foreground/30',\n size,\n className,\n 'aria-label': ariaLabel,\n getStarLabel,\n}, ref) => {\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = React.useState(defaultValue);\n const [hoverValue, setHoverValue] = React.useState<number | null>(null);\n\n const value = isControlled ? controlledValue! : internalValue;\n\n const handleChange = (newVal: number) => {\n if (readonly || disabled) return;\n const next = allowClear && newVal === value ? 0 : newVal;\n if (!isControlled) setInternalValue(next);\n onChange?.(next);\n };\n\n const defaultGetStarLabel = (index: number) =>\n index === 1 ? '1 star' : `${index} stars`;\n\n const resolveLabel = getStarLabel ?? defaultGetStarLabel;\n\n const getStarFraction = (starIndex: number, displayValue: number): number => {\n const full = starIndex + 1;\n const half = starIndex + 0.5;\n if (displayValue >= full) return 1;\n if (allowHalf && displayValue >= half) return 0.5;\n return 0;\n };\n\n const slots = rateVariants({ size, readonly: readonly || disabled });\n const display = hoverValue ?? value;\n\n return (\n <div\n ref={ref}\n className={slots.root({ className })}\n role=\"radiogroup\"\n aria-label={ariaLabel || 'Rating'}\n >\n {Array.from({ length: count }, (_, i) => {\n const fraction = getStarFraction(i, display);\n const full = i + 1;\n const half = i + 0.5;\n\n const renderStar = (frac: number) => {\n if (character) {\n if (frac === 0.5) {\n return (\n <span className=\"relative inline-flex items-center justify-center w-full h-full\">\n <span className={`absolute inset-0 overflow-hidden ${inactiveColor}`}>{character}</span>\n <span className=\"absolute inset-0 overflow-hidden w-1/2\" style={{ color: 'inherit' }}>\n <span className={activeColor}>{character}</span>\n </span>\n </span>\n );\n }\n return <span className={frac === 1 ? activeColor : inactiveColor}>{character}</span>;\n }\n\n if (frac === 0.5) {\n return (\n <span className=\"relative inline-flex items-center justify-center w-full h-full\">\n <Star className={`${slots.starIcon()} ${inactiveColor}`} fill=\"currentColor\" />\n <span\n className=\"absolute inset-0 overflow-hidden\"\n style={{ width: '50%' }}\n aria-hidden=\"true\"\n >\n <Star className={`${slots.starIcon()} ${activeColor}`} fill=\"currentColor\" />\n </span>\n </span>\n );\n }\n\n return (\n <Star\n className={`${slots.starIcon()} ${frac === 1 ? activeColor : inactiveColor}`}\n fill=\"currentColor\"\n />\n );\n };\n\n return (\n <button\n key={i}\n type=\"button\"\n role=\"radio\"\n aria-checked={full <= value}\n aria-label={resolveLabel(full)}\n disabled={disabled}\n className={slots.star()}\n onMouseMove={(e) => {\n if (readonly || disabled) return;\n if (allowHalf) {\n const rect = e.currentTarget.getBoundingClientRect();\n const isLeft = e.clientX - rect.left < rect.width / 2;\n setHoverValue(isLeft ? half : full);\n } else {\n setHoverValue(full);\n }\n }}\n onMouseLeave={() => setHoverValue(null)}\n onClick={(e) => {\n if (readonly || disabled) return;\n if (allowHalf) {\n const rect = e.currentTarget.getBoundingClientRect();\n const isLeft = e.clientX - rect.left < rect.width / 2;\n handleChange(isLeft ? half : full);\n } else {\n handleChange(full);\n }\n }}\n onKeyDown={(e) => {\n if (readonly || disabled) return;\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n handleChange(Math.min(count, value + (allowHalf ? 0.5 : 1)));\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n handleChange(Math.max(0, value - (allowHalf ? 0.5 : 1)));\n }\n }}\n >\n {renderStar(fraction)}\n </button>\n );\n })}\n </div>\n );\n});\n\nRate.displayName = 'Rate';\n\nexport { Rate };\n"
|
|
554
634
|
}
|
|
555
635
|
]
|
|
556
636
|
},
|
|
@@ -564,7 +644,7 @@
|
|
|
564
644
|
"files": [
|
|
565
645
|
{
|
|
566
646
|
"path": "src/components/ui/resizable/Resizable.tsx",
|
|
567
|
-
"content": "import * as React from 'react';\nimport { Group, Panel, Separator } from 'react-resizable-panels';\nimport type { GroupProps, PanelProps, SeparatorProps } from 'react-resizable-panels';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Direction Context ────────────────────────────────────────\n\ninterface ResizableContextValue {\n direction: 'horizontal' | 'vertical';\n}\n\nconst ResizableContext = React.createContext<ResizableContextValue>({\n direction: 'horizontal',\n});\n\n// ─── Grip Dots ────────────────────────────────────────────────\n\nfunction GripDots({ isVerticalHandle, className }: { isVerticalHandle: boolean; className?: string }) {\n if (isVerticalHandle) {\n return (\n <div className={cn('flex flex-col gap-[3px]', className)}>\n {[0, 1, 2].map((r) => (\n <div key={r} className=\"flex gap-[3px]\">\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\n </div>\n ))}\n </div>\n );\n }\n return (\n <div className={cn('flex gap-[3px]', className)}>\n {[0, 1, 2].map((c) => (\n <div key={c} className=\"flex flex-col gap-[3px]\">\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\n </div>\n ))}\n </div>\n );\n}\n\n// ─── Handle Variants ─────────────────────────────────────────\n\nconst handleVariants = tv({\n base: [\n 'relative flex items-center justify-center shrink-0',\n 'select-none touch-none outline-none',\n 'group/handle',\n ].join(' '),\n variants: {\n variant: {\n line: '',\n bar: '',\n handle: '',\n ghost: '',\n },\n },\n defaultVariants: { variant: 'line' },\n});\n\n// ─── Types ────────────────────────────────────────────────────\n\nexport type ResizablePanelGroupProps = Omit<GroupProps, 'orientation'> & {\n direction?: 'horizontal' | 'vertical';\n};\n\nexport type ResizablePanelProps = PanelProps;\n\nexport type ResizableHandleProps = Omit<SeparatorProps, 'className'> &\n VariantProps<typeof handleVariants> & {\n withGrip?: boolean;\n className?: string;\n };\n\n// ─── ResizablePanelGroup ──────────────────────────────────────\n\nfunction ResizablePanelGroup({\n direction = 'horizontal',\n className,\n children,\n ...props\n}: ResizablePanelGroupProps) {\n return (\n <ResizableContext.Provider value={{ direction }}>\n <Group\n orientation={direction}\n className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\n {...props}\n >\n {children}\n </Group>\n </ResizableContext.Provider>\n );\n}\nResizablePanelGroup.displayName = 'ResizablePanelGroup';\n\n// ─── ResizablePanel ───────────────────────────────────────────\n\nfunction ResizablePanel({ className, ...props }: ResizablePanelProps) {\n return <Panel className={cn('overflow-auto', className)} {...props} />;\n}\nResizablePanel.displayName = 'ResizablePanel';\n\n// ─── ResizableHandle ─────────────────────────────────────────\n\nfunction ResizableHandle({\n variant = 'line',\n withGrip = false,\n className,\n disabled,\n ...props\n}: ResizableHandleProps) {\n const { direction } = React.useContext(ResizableContext);\n const [isDragging, setIsDragging] = React.useState(false);\n\n const isVerticalHandle = direction === 'horizontal';\n\n // Shared thin-line indicator position styles\n const linePos = isVerticalHandle\n ? 'absolute inset-y-0 left-1/2 -translate-x-1/2 w-px'\n : 'absolute inset-x-0 top-1/2 -translate-y-1/2 h-px';\n\n return (\n <Separator\n disabled={disabled}\n onPointerDown={() => setIsDragging(true)}\n onPointerUp={() => setIsDragging(false)}\n onPointerLeave={() => setIsDragging(false)}\n className={cn(\n handleVariants({ variant }),\n\n // ── orientation & cursor ──────────────────────────────\n isVerticalHandle\n ? 'h-full cursor-col-resize'\n : 'w-full cursor-row-resize',\n\n // ── per-variant zone width ────────────────────────────\n // line: 4 px transparent zone\n variant === 'line' && (isVerticalHandle ? 'w-1' : 'h-1'),\n\n // bar: 8 px transparent zone — easy to grab anywhere along sidebar edge\n variant === 'bar' && (isVerticalHandle ? 'w-2' : 'h-2'),\n\n // handle: 12 px zone with visible pill on hover\n variant === 'handle' && (isVerticalHandle ? 'w-3' : 'h-3'),\n\n // ghost: 8 px invisible zone\n variant === 'ghost' && (isVerticalHandle ? 'w-2' : 'h-2'),\n\n // all non-ghost: transparent background\n variant !== 'ghost' && 'bg-transparent',\n\n // drag shadow — secondary tint\n isDragging && variant !== 'ghost' && 'shadow-[0_0_0_1px] shadow-secondary/30',\n\n className,\n )}\n {...props}\n >\n {/* ── LINE: thin border-colored line ────────────────── */}\n {variant === 'line' && (\n <div\n className={cn(\n linePos,\n 'transition-colors duration-150 rounded-full',\n isDragging\n ? 'bg-secondary/70'\n : 'bg-border group-hover/handle:bg-secondary/50',\n )}\n />\n )}\n\n {/* ── BAR: full-height thin line + centered grip pill ── */}\n {variant === 'bar' && (\n <>\n {/* full-height thin line */}\n <div\n className={cn(\n linePos,\n 'transition-colors duration-150',\n isDragging\n ? 'bg-secondary/60'\n : 'bg-border/70 group-hover/handle:bg-secondary/40',\n )}\n />\n {/* centered grip pill */}\n <div\n className={cn(\n 'relative z-10 rounded-full transition-colors duration-150',\n isVerticalHandle ? 'w-[3px] h-6' : 'h-[3px] w-6',\n isDragging\n ? 'bg-secondary/70'\n : 'bg-muted-foreground/25 group-hover/handle:bg-secondary/50',\n )}\n />\n </>\n )}\n\n {/* ── HANDLE: bordered pill on hover ────────────────── */}\n {variant === 'handle' && (\n <div\n className={cn(\n 'z-10 flex items-center justify-center rounded-sm border border-border bg-background',\n 'opacity-0 group-hover/handle:opacity-100 transition-opacity duration-150',\n isDragging && 'opacity-100 border-secondary/60',\n 'shadow-sm',\n isVerticalHandle ? 'w-5 h-8' : 'h-5 w-8',\n )}\n >\n <GripDots\n isVerticalHandle={isVerticalHandle}\n className={isDragging ? 'text-secondary/70' : 'text-muted-foreground/70'}\n />\n </div>\n )}\n\n {/* ── withGrip: overlay dots on line / ghost ─────────── */}\n {withGrip && variant !== 'handle' && variant !== 'bar' && (\n <div className=\"z-10 opacity-0 group-hover/handle:opacity-100 transition-opacity duration-150\">\n <GripDots\n isVerticalHandle={isVerticalHandle}\n className=\"text-muted-foreground/50 group-hover/handle:text-muted-foreground/70 transition-colors\"\n />\n </div>\n )}\n </Separator>\n );\n}\nResizableHandle.displayName = 'ResizableHandle';\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport {\n ResizablePanelGroup,\n ResizablePanel,\n ResizableHandle,\n handleVariants,\n};\n"
|
|
647
|
+
"content": "import * as React from 'react';\r\nimport { Group, Panel, Separator } from 'react-resizable-panels';\r\nimport type { GroupProps, PanelProps, SeparatorProps } from 'react-resizable-panels';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\n// ─── Direction Context ────────────────────────────────────────\r\n\r\ninterface ResizableContextValue {\r\n direction: 'horizontal' | 'vertical';\r\n}\r\n\r\nconst ResizableContext = React.createContext<ResizableContextValue>({\r\n direction: 'horizontal',\r\n});\r\n\r\n// ─── Grip Dots ────────────────────────────────────────────────\r\n\r\nfunction GripDots({ isVerticalHandle, className }: { isVerticalHandle: boolean; className?: string }) {\r\n if (isVerticalHandle) {\r\n return (\r\n <div className={cn('flex flex-col gap-[3px]', className)}>\r\n {[0, 1, 2].map((r) => (\r\n <div key={r} className=\"flex gap-[3px]\">\r\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\r\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n }\r\n return (\r\n <div className={cn('flex gap-[3px]', className)}>\r\n {[0, 1, 2].map((c) => (\r\n <div key={c} className=\"flex flex-col gap-[3px]\">\r\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\r\n <div className=\"w-[3px] h-[3px] rounded-full bg-current\" />\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\n// ─── Handle Variants ─────────────────────────────────────────\r\n\r\nconst handleVariants = tv({\r\n base: [\r\n 'relative flex items-center justify-center shrink-0',\r\n 'select-none touch-none outline-none',\r\n 'group/handle',\r\n ].join(' '),\r\n variants: {\r\n variant: {\r\n line: '',\r\n bar: '',\r\n handle: '',\r\n ghost: '',\r\n },\r\n },\r\n defaultVariants: { variant: 'line' },\r\n});\r\n\r\n// ─── Types ────────────────────────────────────────────────────\r\n\r\nexport type ResizablePanelGroupProps = Omit<GroupProps, 'orientation'> & {\r\n direction?: 'horizontal' | 'vertical';\r\n};\r\n\r\nexport type ResizablePanelProps = PanelProps;\r\n\r\nexport type ResizableHandleProps = Omit<SeparatorProps, 'className'> &\r\n VariantProps<typeof handleVariants> & {\r\n withGrip?: boolean;\r\n className?: string;\r\n };\r\n\r\n// ─── ResizablePanelGroup ──────────────────────────────────────\r\n\r\nfunction ResizablePanelGroup({\r\n direction = 'horizontal',\r\n className,\r\n children,\r\n ...props\r\n}: ResizablePanelGroupProps) {\r\n return (\r\n <ResizableContext.Provider value={{ direction }}>\r\n <Group\r\n orientation={direction}\r\n className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}\r\n {...props}\r\n >\r\n {children}\r\n </Group>\r\n </ResizableContext.Provider>\r\n );\r\n}\r\nResizablePanelGroup.displayName = 'ResizablePanelGroup';\r\n\r\n// ─── ResizablePanel ───────────────────────────────────────────\r\n\r\nfunction ResizablePanel({ className, ...props }: ResizablePanelProps) {\r\n return <Panel className={cn('overflow-auto', className)} {...props} />;\r\n}\r\nResizablePanel.displayName = 'ResizablePanel';\r\n\r\n// ─── ResizableHandle ─────────────────────────────────────────\r\n\r\nfunction ResizableHandle({\r\n variant = 'line',\r\n withGrip = false,\r\n className,\r\n disabled,\r\n ...props\r\n}: ResizableHandleProps) {\r\n const { direction } = React.useContext(ResizableContext);\r\n const [isDragging, setIsDragging] = React.useState(false);\r\n\r\n const isVerticalHandle = direction === 'horizontal';\r\n\r\n // Shared thin-line indicator position styles\r\n const linePos = isVerticalHandle\r\n ? 'absolute inset-y-0 left-1/2 -translate-x-1/2 w-px'\r\n : 'absolute inset-x-0 top-1/2 -translate-y-1/2 h-px';\r\n\r\n return (\r\n <Separator\r\n disabled={disabled}\r\n onPointerDown={() => setIsDragging(true)}\r\n onPointerUp={() => setIsDragging(false)}\r\n onPointerLeave={() => setIsDragging(false)}\r\n className={cn(\r\n handleVariants({ variant }),\r\n\r\n // ── orientation & cursor ──────────────────────────────\r\n isVerticalHandle\r\n ? 'h-full cursor-col-resize'\r\n : 'w-full cursor-row-resize',\r\n\r\n // ── per-variant zone width ────────────────────────────\r\n // line: 4 px transparent zone\r\n variant === 'line' && (isVerticalHandle ? 'w-1' : 'h-1'),\r\n\r\n // bar: 8 px transparent zone — easy to grab anywhere along sidebar edge\r\n variant === 'bar' && (isVerticalHandle ? 'w-2' : 'h-2'),\r\n\r\n // handle: 12 px zone with visible pill on hover\r\n variant === 'handle' && (isVerticalHandle ? 'w-3' : 'h-3'),\r\n\r\n // ghost: 8 px invisible zone\r\n variant === 'ghost' && (isVerticalHandle ? 'w-2' : 'h-2'),\r\n\r\n // all non-ghost: transparent background\r\n variant !== 'ghost' && 'bg-transparent',\r\n\r\n // drag shadow — secondary tint\r\n isDragging && variant !== 'ghost' && 'shadow-[0_0_0_1px] shadow-secondary/30',\r\n\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {/* ── LINE: thin border-colored line ────────────────── */}\r\n {variant === 'line' && (\r\n <div\r\n className={cn(\r\n linePos,\r\n 'transition-colors duration-150 rounded-full',\r\n isDragging\r\n ? 'bg-secondary/70'\r\n : 'bg-border group-hover/handle:bg-secondary/50',\r\n )}\r\n />\r\n )}\r\n\r\n {/* ── BAR: full-height thin line + centered grip pill ── */}\r\n {variant === 'bar' && (\r\n <>\r\n {/* full-height thin line */}\r\n <div\r\n className={cn(\r\n linePos,\r\n 'transition-colors duration-150',\r\n isDragging\r\n ? 'bg-secondary/60'\r\n : 'bg-border/70 group-hover/handle:bg-secondary/40',\r\n )}\r\n />\r\n {/* centered grip pill */}\r\n <div\r\n className={cn(\r\n 'relative z-10 rounded-full transition-colors duration-150',\r\n isVerticalHandle ? 'w-[3px] h-6' : 'h-[3px] w-6',\r\n isDragging\r\n ? 'bg-secondary/70'\r\n : 'bg-muted-foreground/25 group-hover/handle:bg-secondary/50',\r\n )}\r\n />\r\n </>\r\n )}\r\n\r\n {/* ── HANDLE: bordered pill on hover ────────────────── */}\r\n {variant === 'handle' && (\r\n <div\r\n className={cn(\r\n 'z-10 flex items-center justify-center rounded-sm border border-border bg-background',\r\n 'opacity-0 group-hover/handle:opacity-100 transition-opacity duration-150',\r\n isDragging && 'opacity-100 border-secondary/60',\r\n 'shadow-sm',\r\n isVerticalHandle ? 'w-5 h-8' : 'h-5 w-8',\r\n )}\r\n >\r\n <GripDots\r\n isVerticalHandle={isVerticalHandle}\r\n className={isDragging ? 'text-secondary/70' : 'text-muted-foreground/70'}\r\n />\r\n </div>\r\n )}\r\n\r\n {/* ── withGrip: overlay dots on line / ghost ─────────── */}\r\n {withGrip && variant !== 'handle' && variant !== 'bar' && (\r\n <div className=\"z-10 opacity-0 group-hover/handle:opacity-100 transition-opacity duration-150\">\r\n <GripDots\r\n isVerticalHandle={isVerticalHandle}\r\n className=\"text-muted-foreground/50 group-hover/handle:text-muted-foreground/70 transition-colors\"\r\n />\r\n </div>\r\n )}\r\n </Separator>\r\n );\r\n}\r\nResizableHandle.displayName = 'ResizableHandle';\r\n\r\n// ─── Exports ─────────────────────────────────────────────────\r\n\r\nexport {\r\n ResizablePanelGroup,\r\n ResizablePanel,\r\n ResizableHandle,\r\n handleVariants,\r\n};\r\n"
|
|
568
648
|
}
|
|
569
649
|
]
|
|
570
650
|
},
|
|
@@ -577,7 +657,7 @@
|
|
|
577
657
|
"files": [
|
|
578
658
|
{
|
|
579
659
|
"path": "src/components/ui/scroll-area/ScrollArea.tsx",
|
|
580
|
-
"content": "'use client';\
|
|
660
|
+
"content": "'use client';\n\nimport * as React from 'react';\nimport { tv, type VariantProps } from 'tailwind-variants';\n\nconst scrollAreaVariants = tv({\n slots: {\n root: 'relative overflow-hidden',\n viewport: 'h-full w-full rounded-[inherit] [&>div]:!block',\n scrollbar: 'flex touch-none select-none transition-colors',\n thumb: 'relative rounded-full bg-border hover:bg-muted-foreground/30 transition-colors',\n },\n variants: {\n size: {\n sm: { scrollbar: '', thumb: '' },\n md: {},\n lg: {},\n },\n orientation: {\n vertical: {\n scrollbar: 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n thumb: 'flex-1',\n },\n horizontal: {\n scrollbar: 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n thumb: '',\n },\n },\n },\n defaultVariants: {\n size: 'md',\n orientation: 'vertical',\n },\n});\n\n/** Props for the ScrollArea component */\nexport interface ScrollAreaProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Omit<VariantProps<typeof scrollAreaVariants>, 'orientation'> {\n /** Scroll direction: vertical, horizontal, or both */\n orientation?: 'vertical' | 'horizontal' | 'both';\n /** Accessible label for the scrollable region */\n 'aria-label'?: string;\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n ({ className, children, orientation = 'vertical', size, 'aria-label': ariaLabel, ...props }, ref) => {\n const { root, viewport } = scrollAreaVariants({ size });\n\n const overflowClass =\n orientation === 'both'\n ? 'overflow-auto'\n : orientation === 'horizontal'\n ? 'overflow-x-auto overflow-y-hidden'\n : 'overflow-y-auto overflow-x-hidden';\n\n return (\n <div\n ref={ref}\n className={root({ className })}\n role=\"region\"\n aria-label={ariaLabel}\n {...props}\n >\n <div\n className={viewport({\n className: `${overflowClass} scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent`,\n })}\n >\n {children}\n </div>\n </div>\n );\n }\n);\nScrollArea.displayName = 'ScrollArea';\n\n/** Props for the ScrollBar component */\nexport interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Scrollbar axis direction */\n orientation?: 'vertical' | 'horizontal';\n}\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n ({ className, orientation = 'vertical', ...props }, ref) => {\n const { scrollbar, thumb } = scrollAreaVariants({ orientation });\n return (\n <div ref={ref} className={scrollbar({ className })} {...props}>\n <div className={thumb()} />\n </div>\n );\n }\n);\nScrollBar.displayName = 'ScrollBar';\n\nexport { ScrollArea, ScrollBar, scrollAreaVariants };\n"
|
|
581
661
|
}
|
|
582
662
|
]
|
|
583
663
|
},
|
|
@@ -640,11 +720,11 @@
|
|
|
640
720
|
"files": [
|
|
641
721
|
{
|
|
642
722
|
"path": "src/components/ui/sidebar/Sidebar.tsx",
|
|
643
|
-
"content": "// Sidebar — barrel re-export\
|
|
723
|
+
"content": "// Sidebar — barrel re-export\n// Split into: SidebarContext, SidebarLayout, SidebarMenu, SidebarUserMenu\n\nexport { useSidebar, SidebarProvider } from './SidebarContext';\nexport type { SidebarProviderProps } from './SidebarContext';\n\nexport {\n SidebarTrigger,\n Sidebar,\n SidebarRail,\n SidebarInset,\n SidebarHeader,\n SidebarFooter,\n SidebarContent,\n SidebarSeparator,\n} from './SidebarLayout';\nexport type { SidebarProps } from './SidebarLayout';\n\nexport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n SidebarNavLink,\n SidebarMenuCollapsible,\n SidebarMenuSub,\n SidebarMenuSubItem,\n SidebarMenuBadge,\n SidebarMenuSkeleton,\n} from './SidebarMenu';\nexport type { SidebarMenuButtonProps, SidebarNavLinkProps, SidebarMenuCollapsibleProps } from './SidebarMenu';\n\nexport { UserMenuPopover, UserMenuItem } from './SidebarUserMenu';\n"
|
|
644
724
|
},
|
|
645
725
|
{
|
|
646
726
|
"path": "src/components/ui/sidebar/SidebarContext.tsx",
|
|
647
|
-
"content": "import * as React from 'react';\
|
|
727
|
+
"content": "import * as React from 'react';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Constants ────────────────────────────────────────────────────────────────\n\nexport const SIDEBAR_WIDTH_DEFAULT = 256; // px\nexport const SIDEBAR_WIDTH_MIN = 160; // px\nexport const SIDEBAR_WIDTH_MAX = 480; // px\nexport const SIDEBAR_WIDTH_ICON = '4rem';\nexport const MOBILE_BREAKPOINT = 768;\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type SidebarState = 'expanded' | 'collapsed';\n\nexport interface SidebarContextValue {\n state: SidebarState;\n open: boolean;\n setOpen: (open: boolean) => void;\n toggleSidebar: () => void;\n isMobile: boolean;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n sidebarWidth: number;\n setSidebarWidth: (w: number) => void;\n}\n\nexport const SidebarContext = React.createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar() {\n const ctx = React.useContext(SidebarContext);\n if (!ctx) throw new Error('useSidebar must be used within SidebarProvider');\n return ctx;\n}\n\n// ─── Provider ─────────────────────────────────────────────────────────────────\n\n/** Props for the SidebarProvider that manages sidebar state (open/collapsed, mobile, width) */\nexport interface SidebarProviderProps {\n children: React.ReactNode;\n /** Initial open state for uncontrolled usage (default: true) */\n defaultOpen?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Callback fired when the sidebar opens or closes */\n onOpenChange?: (open: boolean) => void;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n ({ children, defaultOpen = true, open: controlledOpen, onOpenChange, className, style }, ref) => {\n const [isMobile, setIsMobile] = React.useState(false);\n const [openMobile, setOpenMobile] = React.useState(false);\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const [sidebarWidth, setSidebarWidth] = React.useState(SIDEBAR_WIDTH_DEFAULT);\n\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen! : internalOpen;\n\n React.useEffect(() => {\n const check = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n check();\n window.addEventListener('resize', check);\n return () => window.removeEventListener('resize', check);\n }, []);\n\n const setOpen = React.useCallback(\n (val: boolean) => {\n if (!isControlled) setInternalOpen(val);\n onOpenChange?.(val);\n },\n [isControlled, onOpenChange]\n );\n\n const toggleSidebar = React.useCallback(() => {\n if (isMobile) setOpenMobile((v) => !v);\n else setOpen(!open);\n }, [isMobile, open, setOpen]);\n\n React.useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if ((e.metaKey || e.ctrlKey) && e.key === 'b') {\n e.preventDefault();\n toggleSidebar();\n }\n };\n window.addEventListener('keydown', onKey);\n return () => window.removeEventListener('keydown', onKey);\n }, [toggleSidebar]);\n\n const state: SidebarState = open ? 'expanded' : 'collapsed';\n\n return (\n <SidebarContext.Provider\n value={{ state, open, setOpen, toggleSidebar, isMobile, openMobile, setOpenMobile, sidebarWidth, setSidebarWidth }}\n >\n <div\n ref={ref}\n data-sidebar-state={state}\n style={\n {\n '--sidebar-width': `${sidebarWidth}px`,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex min-h-screen w-full has-data-[variant=inset]:bg-muted/30', className)}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n }\n);\nSidebarProvider.displayName = 'SidebarProvider';\n"
|
|
648
728
|
},
|
|
649
729
|
{
|
|
650
730
|
"path": "src/components/ui/sidebar/SidebarLayout.tsx",
|
|
@@ -652,11 +732,11 @@
|
|
|
652
732
|
},
|
|
653
733
|
{
|
|
654
734
|
"path": "src/components/ui/sidebar/SidebarMenu.tsx",
|
|
655
|
-
"content": "import * as React from 'react';\r\nimport { NavLink } from 'react-router-dom';\r\nimport { ChevronRight } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/Tooltip';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { useSidebar } from './SidebarContext';\r\n\r\n// ─── Group ────────────────────────────────────────────────────────────────────\r\n\r\nexport const SidebarGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"group\"\r\n className={cn('relative flex flex-col w-full min-w-0 px-2 py-1', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarGroup.displayName = 'SidebarGroup';\r\n\r\nexport const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const { state } = useSidebar();\r\n return (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"group-label\"\r\n className={cn(\r\n 'flex h-8 shrink-0 items-center rounded-md px-2',\r\n 'text-xs font-semibold text-sidebar-foreground/50 uppercase tracking-wider',\r\n 'motion-safe:transition-all motion-safe:duration-200 overflow-hidden whitespace-nowrap select-none',\r\n state === 'collapsed' ? 'opacity-0 h-0 mb-0 hidden' : 'opacity-100',\r\n className\r\n )}\r\n {...props}\r\n />\r\n );\r\n }\r\n);\r\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\r\n\r\nexport const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"group-content\"\r\n className={cn('w-full', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarGroupContent.displayName = 'SidebarGroupContent';\r\n\r\n// ─── Menu ─────────────────────────────────────────────────────────────────────\r\n\r\nexport const SidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\r\n ({ className, ...props }, ref) => (\r\n <ul\r\n ref={ref}\r\n data-sidebar=\"menu\"\r\n className={cn('flex flex-col gap-0.5 list-none m-0 p-0 w-full', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarMenu.displayName = 'SidebarMenu';\r\n\r\nexport const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\r\n ({ className, ...props }, ref) => (\r\n <li\r\n ref={ref}\r\n data-sidebar=\"menu-item\"\r\n className={cn('group/menu-item relative', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarMenuItem.displayName = 'SidebarMenuItem';\r\n\r\n// ─── SidebarMenuButton ────────────────────────────────────────────────────────\r\n\r\nexport const menuButtonVariants = tv({\r\n base: [\r\n 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md',\r\n 'text-sm font-medium outline-none ring-sidebar-ring motion-safe:transition-all motion-safe:duration-150',\r\n 'hover:bg-accent hover:text-accent-foreground',\r\n 'focus-visible:ring-2 active:bg-accent/80',\r\n 'disabled:pointer-events-none disabled:opacity-50',\r\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\r\n // Data state active\r\n 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground data-[active=true]:font-semibold',\r\n ],\r\n variants: {\r\n size: {\r\n sm: 'h-7 text-xs px-2',\r\n md: 'h-9 px-2',\r\n lg: 'h-11 text-base px-3',\r\n },\r\n collapsed: {\r\n true: 'justify-center px-0',\r\n false: 'justify-start',\r\n },\r\n },\r\n defaultVariants: { size: 'md', collapsed: false },\r\n});\r\n\r\n/** Props for a sidebar menu button */\r\nexport interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n /** Render as child element instead of a button */\r\n asChild?: boolean;\r\n /** Marks the button as the currently active item */\r\n isActive?: boolean;\r\n /** Tooltip text shown when the sidebar is collapsed */\r\n tooltip?: string;\r\n /** Button size variant */\r\n size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nexport const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\r\n ({ className, isActive = false, tooltip, size = 'md', children, ...props }, ref) => {\r\n const { state } = useSidebar();\r\n const isCollapsed = state === 'collapsed';\r\n\r\n const button = (\r\n <button\r\n ref={ref}\r\n type=\"button\"\r\n data-sidebar=\"menu-button\"\r\n data-active={isActive}\r\n data-size={size}\r\n className={menuButtonVariants({ size, collapsed: isCollapsed, className })}\r\n {...props}\r\n >\r\n {isCollapsed\r\n ? React.Children.toArray(children)[0]\r\n : children}\r\n </button>\r\n );\r\n\r\n if (isCollapsed && tooltip) {\r\n return (\r\n <Tooltip>\r\n <TooltipTrigger render={button} />\r\n <TooltipContent side=\"right\">{tooltip}</TooltipContent>\r\n </Tooltip>\r\n );\r\n }\r\n\r\n return button;\r\n }\r\n);\r\nSidebarMenuButton.displayName = 'SidebarMenuButton';\r\n\r\n// ─── SidebarNavLink — wraps React Router NavLink ─────────────────────────────\r\n\r\n/** Props for a sidebar navigation link (wraps React Router NavLink) */\r\nexport interface SidebarNavLinkProps {\r\n /** Route path for the link */\r\n to: string;\r\n /** Icon rendered before the label */\r\n icon?: React.ReactNode;\r\n /** Display text for the link; also used as tooltip when collapsed */\r\n label: string;\r\n /** Match route exactly (React Router `end` prop) */\r\n end?: boolean;\r\n /** Badge element rendered after the label */\r\n badge?: React.ReactNode;\r\n /** Link size variant */\r\n size?: 'sm' | 'md' | 'lg';\r\n className?: string;\r\n}\r\n\r\nexport const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({\r\n to,\r\n icon,\r\n label,\r\n end = false,\r\n badge,\r\n size = 'md',\r\n className,\r\n}) => {\r\n const { state } = useSidebar();\r\n const isCollapsed = state === 'collapsed';\r\n\r\n const link = (\r\n <NavLink\r\n to={to}\r\n end={end}\r\n className={({ isActive }) => cn(\r\n menuButtonVariants({ size, collapsed: isCollapsed, className }),\r\n isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground font-semibold' : 'text-sidebar-foreground/70'\r\n )}\r\n >\r\n {icon && (\r\n <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">\r\n {icon}\r\n </span>\r\n )}\r\n {!isCollapsed && (\r\n <>\r\n <span className=\"flex-1 truncate\">{label}</span>\r\n {badge && <span className=\"ml-auto shrink-0\">{badge}</span>}\r\n </>\r\n )}\r\n </NavLink>\r\n );\r\n\r\n if (isCollapsed && label) {\r\n return (\r\n <Tooltip>\r\n <TooltipTrigger render={link} />\r\n <TooltipContent side=\"right\">{label}</TooltipContent>\r\n </Tooltip>\r\n );\r\n }\r\n\r\n return link;\r\n};\r\nSidebarNavLink.displayName = 'SidebarNavLink';\r\n\r\n// ─── SidebarMenuCollapsible — nhóm có sub-items ───────────────────────────────\r\n\r\n/** Props for a collapsible sidebar menu group with sub-items */\r\nexport interface SidebarMenuCollapsibleProps {\r\n /** Unique identifier for the group */\r\n id: string;\r\n /** Icon displayed next to the group label */\r\n icon: React.ReactNode;\r\n /** Display text for the collapsible group header */\r\n label: string;\r\n children: React.ReactNode;\r\n /** Whether the group is initially expanded */\r\n defaultOpen?: boolean;\r\n /** When true, the group auto-expands and shows an active indicator */\r\n isChildActive?: boolean;\r\n}\r\n\r\nexport const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({\r\n icon,\r\n label,\r\n children,\r\n defaultOpen = false,\r\n isChildActive = false,\r\n}) => {\r\n const { state } = useSidebar();\r\n const isCollapsed = state === 'collapsed';\r\n\r\n const [isOpen, setIsOpen] = React.useState(defaultOpen || isChildActive);\r\n const prevOpenRef = React.useRef(isOpen);\r\n\r\n // Khi sidebar collapse → đóng tất cả sub-menu, ghi nhớ state\r\n // Khi sidebar expand → khôi phục state cũ\r\n React.useEffect(() => {\r\n if (isCollapsed) {\r\n prevOpenRef.current = isOpen;\r\n setIsOpen(false);\r\n } else {\r\n setIsOpen(prevOpenRef.current);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [isCollapsed]);\r\n\r\n // Khi có child active, mở group\r\n React.useEffect(() => {\r\n if (isChildActive && !isCollapsed) {\r\n setIsOpen(true);\r\n prevOpenRef.current = true;\r\n }\r\n }, [isChildActive, isCollapsed]);\r\n\r\n const trigger = (\r\n <button\r\n type=\"button\"\r\n aria-expanded={isOpen}\r\n data-active={isChildActive && isCollapsed}\r\n onClick={() => {\r\n if (!isCollapsed) {\r\n const next = !isOpen;\r\n setIsOpen(next);\r\n prevOpenRef.current = next;\r\n }\r\n }}\r\n className={menuButtonVariants({\r\n collapsed: isCollapsed,\r\n className:\r\n isChildActive && isCollapsed\r\n ? 'text-sidebar-accent-foreground'\r\n : 'text-sidebar-foreground/70',\r\n })}\r\n >\r\n <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">{icon}</span>\r\n {!isCollapsed && (\r\n <>\r\n <span className=\"flex-1 truncate text-left\">{label}</span>\r\n <ChevronRight\r\n className={cn(\r\n 'ml-auto h-3.5 w-3.5 shrink-0 text-sidebar-foreground/40',\r\n 'motion-safe:transition-transform motion-safe:duration-200',\r\n isOpen && 'rotate-90'\r\n )}\r\n />\r\n </>\r\n )}\r\n </button>\r\n );\r\n\r\n return (\r\n <>\r\n {isCollapsed ? (\r\n <Tooltip>\r\n <TooltipTrigger render={trigger} />\r\n <TooltipContent side=\"right\">{label}</TooltipContent>\r\n </Tooltip>\r\n ) : (\r\n trigger\r\n )}\r\n\r\n {/* Sub-items với animation mượt - Sử dụng SidebarMenuSub (ul) để hợp lệ HTML */}\r\n <SidebarMenuSub\r\n className={cn(\r\n 'overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-in-out',\r\n !isCollapsed && isOpen ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0'\r\n )}\r\n >\r\n {children}\r\n </SidebarMenuSub>\r\n </>\r\n );\r\n};\r\nSidebarMenuCollapsible.displayName = 'SidebarMenuCollapsible';\r\n\r\n// ─── SidebarMenuSub ───────────────────────────────────────────────────────────\r\n\r\nexport const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\r\n ({ className, ...props }, ref) => {\r\n const { state } = useSidebar();\r\n if (state === 'collapsed') return null;\r\n return (\r\n <ul\r\n ref={ref}\r\n data-sidebar=\"menu-sub\"\r\n className={cn('mx-3.5 flex min-w-0 flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 list-none', className)}\r\n {...props}\r\n />\r\n );\r\n }\r\n);\r\nSidebarMenuSub.displayName = 'SidebarMenuSub';\r\n\r\nexport const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\r\n (props, ref) => <li ref={ref} {...props} />\r\n);\r\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem';\r\n\r\n// ─── Badge & Skeleton ─────────────────────────────────────────────────────────\r\n\r\nexport const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"menu-badge\"\r\n className={cn('ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1 text-xs font-medium text-primary', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarMenuBadge.displayName = 'SidebarMenuBadge';\r\n\r\nexport const SidebarMenuSkeleton: React.FC<{ showIcon?: boolean }> = ({ showIcon = true }) => (\r\n <div className=\"flex h-9 items-center gap-2 rounded-md px-2\">\r\n {showIcon && <div className=\"h-4 w-4 rounded bg-sidebar-accent motion-safe:animate-pulse shrink-0\" />}\r\n <div className=\"h-4 flex-1 rounded bg-sidebar-accent motion-safe:animate-pulse\" />\r\n </div>\r\n);\r\n"
|
|
735
|
+
"content": "import * as React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport { ChevronRight } from 'lucide-react';\nimport { tv } from 'tailwind-variants';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/Tooltip';\nimport { cn } from '@/lib/utils/cn';\nimport { useSidebar } from './SidebarContext';\n\n// ─── Group ────────────────────────────────────────────────────────────────────\n\nexport const SidebarGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn('relative flex flex-col w-full min-w-0 px-2 py-1', className)}\n {...props}\n />\n )\n);\nSidebarGroup.displayName = 'SidebarGroup';\n\nexport const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { state } = useSidebar();\n return (\n <div\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2',\n 'text-xs font-semibold text-sidebar-foreground/50 uppercase tracking-wider',\n 'motion-safe:transition-all motion-safe:duration-200 overflow-hidden whitespace-nowrap select-none',\n state === 'collapsed' ? 'opacity-0 h-0 mb-0 hidden' : 'opacity-100',\n className\n )}\n {...props}\n />\n );\n }\n);\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nexport const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn('w-full', className)}\n {...props}\n />\n )\n);\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\n// ─── Menu ─────────────────────────────────────────────────────────────────────\n\nexport const SidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\n ({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n className={cn('flex flex-col gap-0.5 list-none m-0 p-0 w-full', className)}\n {...props}\n />\n )\n);\nSidebarMenu.displayName = 'SidebarMenu';\n\nexport const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n )\n);\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\n// ─── SidebarMenuButton ────────────────────────────────────────────────────────\n\nexport const menuButtonVariants = tv({\n base: [\n 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md',\n 'text-sm font-medium outline-none ring-sidebar-ring motion-safe:transition-all motion-safe:duration-150',\n 'hover:bg-accent hover:text-accent-foreground',\n 'focus-visible:ring-2 active:bg-accent/80',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n // Data state active\n 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground data-[active=true]:font-semibold',\n ],\n variants: {\n size: {\n sm: 'h-7 text-xs px-2',\n md: 'h-9 px-2',\n lg: 'h-11 text-base px-3',\n },\n collapsed: {\n true: 'justify-center px-0',\n false: 'justify-start',\n },\n },\n defaultVariants: { size: 'md', collapsed: false },\n});\n\n/** Props for a sidebar menu button */\nexport interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Render as child element instead of a button */\n asChild?: boolean;\n /** Marks the button as the currently active item */\n isActive?: boolean;\n /** Tooltip text shown when the sidebar is collapsed */\n tooltip?: string;\n /** Button size variant */\n size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n ({ className, isActive = false, tooltip, size = 'md', children, ...props }, ref) => {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n\n const button = (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"menu-button\"\n data-active={isActive}\n data-size={size}\n className={menuButtonVariants({ size, collapsed: isCollapsed, className })}\n {...props}\n >\n {isCollapsed\n ? React.Children.toArray(children)[0]\n : children}\n </button>\n );\n\n if (isCollapsed && tooltip) {\n return (\n <Tooltip>\n <TooltipTrigger render={button} />\n <TooltipContent side=\"right\">{tooltip}</TooltipContent>\n </Tooltip>\n );\n }\n\n return button;\n }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\n// ─── SidebarNavLink — wraps React Router NavLink ─────────────────────────────\n\n/** Props for a sidebar navigation link (wraps React Router NavLink) */\nexport interface SidebarNavLinkProps {\n /** Route path for the link */\n to: string;\n /** Icon rendered before the label */\n icon?: React.ReactNode;\n /** Display text for the link; also used as tooltip when collapsed */\n label: string;\n /** Match route exactly (React Router `end` prop) */\n end?: boolean;\n /** Badge element rendered after the label */\n badge?: React.ReactNode;\n /** Link size variant */\n size?: 'sm' | 'md' | 'lg';\n className?: string;\n}\n\nexport const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({\n to,\n icon,\n label,\n end = false,\n badge,\n size = 'md',\n className,\n}) => {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n\n const link = (\n <NavLink\n to={to}\n end={end}\n className={({ isActive }) => cn(\n menuButtonVariants({ size, collapsed: isCollapsed, className }),\n isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground font-semibold' : 'text-sidebar-foreground/70'\n )}\n >\n {icon && (\n <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">\n {icon}\n </span>\n )}\n {!isCollapsed && (\n <>\n <span className=\"flex-1 truncate\">{label}</span>\n {badge && <span className=\"ml-auto shrink-0\">{badge}</span>}\n </>\n )}\n </NavLink>\n );\n\n if (isCollapsed && label) {\n return (\n <Tooltip>\n <TooltipTrigger render={link} />\n <TooltipContent side=\"right\">{label}</TooltipContent>\n </Tooltip>\n );\n }\n\n return link;\n};\nSidebarNavLink.displayName = 'SidebarNavLink';\n\n// ─── SidebarMenuCollapsible — nhóm có sub-items ───────────────────────────────\n\n/** Props for a collapsible sidebar menu group with sub-items */\nexport interface SidebarMenuCollapsibleProps {\n /** Unique identifier for the group */\n id: string;\n /** Icon displayed next to the group label */\n icon: React.ReactNode;\n /** Display text for the collapsible group header */\n label: string;\n children: React.ReactNode;\n /** Whether the group is initially expanded */\n defaultOpen?: boolean;\n /** When true, the group auto-expands and shows an active indicator */\n isChildActive?: boolean;\n}\n\nexport const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({\n icon,\n label,\n children,\n defaultOpen = false,\n isChildActive = false,\n}) => {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n\n const [isOpen, setIsOpen] = React.useState(defaultOpen || isChildActive);\n const prevOpenRef = React.useRef(isOpen);\n\n // Khi sidebar collapse → đóng tất cả sub-menu, ghi nhớ state\n // Khi sidebar expand → khôi phục state cũ\n React.useEffect(() => {\n if (isCollapsed) {\n prevOpenRef.current = isOpen;\n setIsOpen(false);\n } else {\n setIsOpen(prevOpenRef.current);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isCollapsed]);\n\n // Khi có child active, mở group\n React.useEffect(() => {\n if (isChildActive && !isCollapsed) {\n setIsOpen(true);\n prevOpenRef.current = true;\n }\n }, [isChildActive, isCollapsed]);\n\n const trigger = (\n <button\n type=\"button\"\n aria-expanded={isOpen}\n data-active={isChildActive && isCollapsed}\n onClick={() => {\n if (!isCollapsed) {\n const next = !isOpen;\n setIsOpen(next);\n prevOpenRef.current = next;\n }\n }}\n className={menuButtonVariants({\n collapsed: isCollapsed,\n className:\n isChildActive && isCollapsed\n ? 'text-sidebar-accent-foreground'\n : 'text-sidebar-foreground/70',\n })}\n >\n <span className=\"shrink-0 flex h-4 w-4 items-center justify-center\">{icon}</span>\n {!isCollapsed && (\n <>\n <span className=\"flex-1 truncate text-left\">{label}</span>\n <ChevronRight\n className={cn(\n 'ml-auto h-3.5 w-3.5 shrink-0 text-sidebar-foreground/40',\n 'motion-safe:transition-transform motion-safe:duration-200',\n isOpen && 'rotate-90'\n )}\n />\n </>\n )}\n </button>\n );\n\n return (\n <>\n {isCollapsed ? (\n <Tooltip>\n <TooltipTrigger render={trigger} />\n <TooltipContent side=\"right\">{label}</TooltipContent>\n </Tooltip>\n ) : (\n trigger\n )}\n\n {/* Sub-items với animation mượt - Sử dụng SidebarMenuSub (ul) để hợp lệ HTML */}\n <SidebarMenuSub\n className={cn(\n 'overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-in-out',\n !isCollapsed && isOpen ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0'\n )}\n >\n {children}\n </SidebarMenuSub>\n </>\n );\n};\nSidebarMenuCollapsible.displayName = 'SidebarMenuCollapsible';\n\n// ─── SidebarMenuSub ───────────────────────────────────────────────────────────\n\nexport const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\n ({ className, ...props }, ref) => {\n const { state } = useSidebar();\n if (state === 'collapsed') return null;\n return (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn('mx-3.5 flex min-w-0 flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 list-none', className)}\n {...props}\n />\n );\n }\n);\nSidebarMenuSub.displayName = 'SidebarMenuSub';\n\nexport const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTMLLIElement>>(\n (props, ref) => <li ref={ref} {...props} />\n);\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem';\n\n// ─── Badge & Skeleton ─────────────────────────────────────────────────────────\n\nexport const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn('ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1 text-xs font-medium text-primary', className)}\n {...props}\n />\n )\n);\nSidebarMenuBadge.displayName = 'SidebarMenuBadge';\n\nexport const SidebarMenuSkeleton: React.FC<{ showIcon?: boolean }> = ({ showIcon = true }) => (\n <div className=\"flex h-9 items-center gap-2 rounded-md px-2\">\n {showIcon && <div className=\"h-4 w-4 rounded bg-sidebar-accent motion-safe:animate-pulse shrink-0\" />}\n <div className=\"h-4 flex-1 rounded bg-sidebar-accent motion-safe:animate-pulse\" />\n </div>\n);\n"
|
|
656
736
|
},
|
|
657
737
|
{
|
|
658
738
|
"path": "src/components/ui/sidebar/SidebarUserMenu.tsx",
|
|
659
|
-
"content": "import * as React from 'react';\
|
|
739
|
+
"content": "import * as React from 'react';\nimport { ChevronsUpDown } from 'lucide-react';\nimport { Popover as BasePopover } from '@base-ui/react';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/Tooltip';\nimport { cn } from '@/lib/utils/cn';\nimport { useSidebar } from './SidebarContext';\nimport { menuButtonVariants } from './SidebarMenu';\n\n// ─── User Menu Popover (shadcn style) ─────────────────────────────────────────\n\ninterface UserMenuPopoverProps {\n name: string;\n email: string;\n avatar?: string;\n children?: React.ReactNode;\n}\n\nexport const UserMenuPopover: React.FC<UserMenuPopoverProps> = ({ name, email, avatar, children }) => {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n const [open, setOpen] = React.useState(false);\n\n const trigger = (\n <BasePopover.Trigger\n render={\n <button\n type=\"button\"\n data-active={open}\n className={cn(\n menuButtonVariants({ size: 'lg', collapsed: isCollapsed }),\n 'data-[active=true]:bg-sidebar-accent'\n )}\n >\n <img\n src={avatar || 'https://i.pravatar.cc/100'}\n alt={name}\n className=\"w-8 h-8 rounded-lg shrink-0 object-cover border border-sidebar-border\"\n />\n {!isCollapsed && (\n <>\n <div className=\"flex-1 text-left overflow-hidden grid\">\n <span className=\"text-sm font-semibold truncate leading-tight\">{name}</span>\n <span className=\"text-xs text-sidebar-foreground/50 truncate leading-tight\">{email}</span>\n </div>\n <ChevronsUpDown className=\"ml-auto h-4 w-4 shrink-0 text-sidebar-foreground/40\" />\n </>\n )}\n </button>\n }\n />\n );\n\n return (\n <BasePopover.Root open={open} onOpenChange={setOpen}>\n {isCollapsed ? (\n <Tooltip>\n <TooltipTrigger render={trigger} />\n <TooltipContent side=\"right\">{name}</TooltipContent>\n </Tooltip>\n ) : (\n trigger\n )}\n <BasePopover.Portal>\n <BasePopover.Positioner side=\"right\" align=\"end\" sideOffset={8}>\n <BasePopover.Popup\n className={cn(\n 'z-50 w-64 rounded-xl border border-border bg-popover shadow-xl outline-none p-1',\n 'motion-safe:data-open:animate-in motion-safe:data-open:fade-in-0 motion-safe:data-open:zoom-in-95',\n 'motion-safe:data-closed:animate-out motion-safe:data-closed:fade-out-0 motion-safe:data-closed:zoom-out-95'\n )}\n >\n {/* User info header */}\n <div className=\"flex items-center gap-3 p-3 pb-2 border-b border-border/50\">\n <img\n src={avatar || 'https://i.pravatar.cc/100'}\n alt={name}\n className=\"w-10 h-10 rounded-lg object-cover border border-border\"\n />\n <div className=\"flex-1 overflow-hidden\">\n <p className=\"text-sm font-semibold truncate\">{name}</p>\n <p className=\"text-xs text-muted-foreground truncate\">{email}</p>\n </div>\n </div>\n\n {/* Menu items */}\n <div className=\"py-1\">{children}</div>\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n </BasePopover.Root>\n );\n};\n\n// ─── UserMenuItem (item trong popover) ───────────────────────────────────────\n\ninterface UserMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n icon?: React.ReactNode;\n destructive?: boolean;\n}\n\nexport const UserMenuItem: React.FC<UserMenuItemProps> = ({ icon, children, destructive, className, ...props }) => (\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm motion-safe:transition-colors',\n 'hover:bg-muted outline-none focus-visible:bg-muted',\n destructive ? 'text-destructive hover:text-destructive' : 'text-foreground',\n className\n )}\n {...props}\n >\n {icon && <span className=\"shrink-0 h-4 w-4 flex items-center justify-center\">{icon}</span>}\n {children}\n </button>\n);\n"
|
|
660
740
|
}
|
|
661
741
|
]
|
|
662
742
|
},
|
|
@@ -683,7 +763,7 @@
|
|
|
683
763
|
"files": [
|
|
684
764
|
{
|
|
685
765
|
"path": "src/components/ui/slider/Slider.tsx",
|
|
686
|
-
"content": "import * as React from 'react';\
|
|
766
|
+
"content": "import * as React from 'react';\nimport { Slider as BaseSlider } from '@base-ui/react';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\nconst sliderVariants = tv({\n slots: {\n root: 'relative flex w-full touch-none select-none items-center py-4 data-disabled:opacity-50 data-disabled:cursor-not-allowed',\n control: 'relative flex w-full items-center',\n track: 'relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary data-disabled:bg-muted',\n indicator: 'absolute h-full bg-primary data-disabled:bg-muted-foreground/30',\n thumb: 'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 data-disabled:border-muted-foreground data-disabled:bg-muted data-disabled:pointer-events-none',\n }\n});\n\nconst { root, control, track, indicator, thumb } = sliderVariants();\n\n/** Props for the Slider component */\nexport interface SliderProps extends React.ComponentPropsWithoutRef<typeof BaseSlider.Root> {\n className?: string;\n /** Hiển thị tooltip số khi kéo / hover thumb */\n showTooltip?: boolean;\n}\n\nconst toArray = (v: unknown): number[] => {\n if (Array.isArray(v)) return v as number[];\n if (typeof v === 'number') return [v];\n return [0];\n};\n\nconst Slider = React.forwardRef<React.ElementRef<typeof BaseSlider.Root>, SliderProps>(\n ({ className, showTooltip, value: valueProp, defaultValue, onValueChange, ...props }, ref) => {\n const isControlled = valueProp !== undefined;\n const [internalValues, setInternalValues] = React.useState<number[]>(\n () => toArray(isControlled ? valueProp : defaultValue)\n );\n\n // Sync khi prop value thay đổi từ bên ngoài (controlled)\n React.useEffect(() => {\n if (isControlled) setInternalValues(toArray(valueProp));\n }, [isControlled, valueProp]);\n\n const currentValues = isControlled ? toArray(valueProp) : internalValues;\n\n const handleValueChange: NonNullable<SliderProps['onValueChange']> = (newValues, eventDetails) => {\n if (!isControlled) setInternalValues(toArray(newValues));\n onValueChange?.(newValues, eventDetails);\n };\n\n return (\n <BaseSlider.Root\n ref={ref}\n className={root({ className })}\n aria-label={props['aria-label'] ?? 'Slider'}\n value={valueProp}\n defaultValue={defaultValue}\n onValueChange={handleValueChange}\n {...props}\n >\n <BaseSlider.Control className={control()}>\n <BaseSlider.Track className={track()}>\n <BaseSlider.Indicator className={indicator()} />\n </BaseSlider.Track>\n\n {currentValues.map((val, index) => (\n <BaseSlider.Thumb\n key={index}\n className={cn(thumb(), showTooltip && 'relative group')}\n >\n {showTooltip && (\n <span className=\"\n absolute -top-9 left-1/2 -translate-x-1/2\n min-w-[28px] text-center\n bg-primary text-primary-foreground\n text-xs font-medium leading-none\n px-1.5 py-1 rounded shadow-sm\n opacity-0 group-hover:opacity-100 group-data-[dragging]:opacity-100\n transition-opacity duration-150\n pointer-events-none select-none\n \">\n {val}\n </span>\n )}\n </BaseSlider.Thumb>\n ))}\n </BaseSlider.Control>\n </BaseSlider.Root>\n );\n }\n);\nSlider.displayName = 'Slider';\n\nexport { Slider };\n"
|
|
687
767
|
}
|
|
688
768
|
]
|
|
689
769
|
},
|
|
@@ -722,14 +802,25 @@
|
|
|
722
802
|
"lucide-react"
|
|
723
803
|
],
|
|
724
804
|
"internalDependencies": [
|
|
725
|
-
"button",
|
|
726
805
|
"checkbox",
|
|
727
806
|
"spinner"
|
|
728
807
|
],
|
|
729
808
|
"files": [
|
|
730
809
|
{
|
|
731
810
|
"path": "src/components/ui/table/Table.tsx",
|
|
732
|
-
"content": "'use client';\r\n\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport {\r\n useReactTable,\r\n getCoreRowModel,\r\n getSortedRowModel,\r\n getPaginationRowModel,\r\n getFilteredRowModel,\r\n getExpandedRowModel,\r\n flexRender,\r\n type ColumnDef,\r\n type SortingState,\r\n type PaginationState,\r\n type RowSelectionState,\r\n type RowData,\r\n type ColumnResizeMode,\r\n} from '@tanstack/react-table';\r\nimport { useVirtualizer } from '@tanstack/react-virtual';\r\n\r\ndeclare module '@tanstack/react-table' {\r\n interface ColumnMeta<TData extends RowData, TValue> {\r\n align?: 'left' | 'center' | 'right';\r\n }\r\n}\r\nimport { cn } from '@lib/utils/cn';\r\nimport { ChevronDown, ChevronUp, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\r\nimport { Button } from '../button/Button';\r\nimport { Checkbox } from '../checkbox/Checkbox';\r\nimport { Spinner } from '../spinner/Spinner';\r\n\r\n// ─── Pagination Config ───────────────────────────────────────────────────────\r\n\r\nexport interface PaginationConfig {\r\n /** Trang hiện tại, 1-based (dùng để controlled ở server mode) */\r\n current?: number;\r\n /** Số dòng mỗi trang, default 10 */\r\n pageSize?: number;\r\n /** Tổng bản ghi từ BE — có giá trị → tự động bật server mode */\r\n total?: number;\r\n /** Danh sách page size options, default [5,10,20,50,100] */\r\n pageSizeOptions?: number[];\r\n /** Hiển thị info tổng. (total, range) => ReactNode */\r\n showTotal?: (total: number, range: [number, number]) => React.ReactNode;\r\n /** Ẩn/hiện page size selector, default true */\r\n showSizeChanger?: boolean;\r\n /**\r\n * Callback khi đổi trang / pageSize.\r\n * - Client mode: tuỳ chọn, chỉ để notify\r\n * - Server mode: bắt buộc, dùng để fetch API\r\n */\r\n onChange?: (page: number, pageSize: number) => void;\r\n}\r\n\r\n/** i18n labels for Table UI strings */\r\nexport interface TableLabels {\r\n /** Label for the page input prefix. Default: \"Page\" */\r\n page?: string;\r\n /** Suffix for page size selector. Default: \"/ page\" */\r\n perPage?: string;\r\n /** Text shown when there is no data. Default: \"No data\" */\r\n empty?: string;\r\n}\r\n\r\nexport interface TableProps<TData, TValue = unknown> {\r\n data: TData[];\r\n columns: ColumnDef<TData, TValue>[];\r\n isLoading?: boolean;\r\n enableSorting?: boolean;\r\n enableRowSelection?: boolean;\r\n enableExpanding?: boolean;\r\n renderSubComponent?: (props: { row: TData }) => React.ReactNode;\r\n getRowCanExpand?: (row: TData) => boolean;\r\n onSelectionChange?: (selectedRows: TData[]) => void;\r\n className?: string;\r\n enableColumnResizing?: boolean;\r\n columnResizeMode?: ColumnResizeMode;\r\n /**\r\n * Pagination config.\r\n * - false / omitted: disable pagination\r\n * - {} object: enable (client-side by default)\r\n * - { total }: enable server-side mode\r\n */\r\n pagination?: PaginationConfig | false;\r\n /** @deprecated Use `labels.empty` instead */\r\n emptyText?: string;\r\n /** i18n labels for UI strings */\r\n labels?: TableLabels;\r\n /**\r\n * Enable row virtualization for large datasets.\r\n * Requires @tanstack/react-virtual to be installed.\r\n * When enabled, `pagination` is ignored.\r\n */\r\n virtualize?: boolean;\r\n /**\r\n * Height (px) of the virtualized scroll container.\r\n * Only used when `virtualize={true}`. Default: 400\r\n */\r\n virtualHeight?: number;\r\n /**\r\n * Estimated row height (px) for the virtualizer.\r\n * Only used when `virtualize={true}`. Default: 45\r\n */\r\n estimatedRowHeight?: number;\r\n}\r\n\r\nexport function Table<TData, TValue = unknown>({\r\n data = [],\r\n columns,\r\n isLoading = false,\r\n enableSorting = true,\r\n enableRowSelection = false,\r\n enableExpanding = false,\r\n renderSubComponent,\r\n getRowCanExpand,\r\n onSelectionChange,\r\n className,\r\n enableColumnResizing = false,\r\n columnResizeMode = 'onChange',\r\n pagination: paginationProp = {},\r\n emptyText,\r\n labels,\r\n virtualize = false,\r\n virtualHeight = 400,\r\n estimatedRowHeight = 45,\r\n}: TableProps<TData>) {\r\n const resolvedEmptyText = emptyText ?? labels?.empty ?? 'No data';\r\n // Virtualization setup\r\n const scrollContainerRef = useRef<HTMLDivElement>(null);\r\n // Xác định có bật pagination không\r\n const paginationEnabled = paginationProp !== false;\r\n const cfg = paginationEnabled ? (paginationProp as PaginationConfig) : {};\r\n\r\n // Server mode khi có cfg.total\r\n const isServerMode = paginationEnabled && cfg.total !== undefined;\r\n const pageSizeOptions = cfg.pageSizeOptions ?? [5, 10, 20, 50, 100];\r\n\r\n // Internal pagination state (0-based pageIndex cho tanstack)\r\n const [page, setPage] = useState(cfg.current ?? 1); // 1-based\r\n const [pageSize, setPageSize] = useState(cfg.pageSize ?? 10);\r\n\r\n // Sync controlled current/pageSize từ ngoài vào (server mode)\r\n useEffect(() => {\r\n if (cfg.current !== undefined) setPage(cfg.current);\r\n }, [cfg.current]);\r\n\r\n useEffect(() => {\r\n if (cfg.pageSize !== undefined) setPageSize(cfg.pageSize);\r\n }, [cfg.pageSize]);\r\n\r\n // Derived\r\n const pageIndex = page - 1; // 0-based cho tanstack\r\n const totalRows = isServerMode ? cfg.total! : data.length;\r\n const pageCount = isServerMode ? Math.ceil(totalRows / pageSize) : undefined;\r\n\r\n const tanstackPagination: PaginationState = { pageIndex, pageSize };\r\n\r\n const handlePaginationChange = (updater: PaginationState | ((prev: PaginationState) => PaginationState)) => {\r\n const next = typeof updater === 'function' ? updater(tanstackPagination) : updater;\r\n const newPage = next.pageIndex + 1; // convert về 1-based\r\n const newPageSize = next.pageSize;\r\n\r\n if (!isServerMode) {\r\n setPage(newPage);\r\n setPageSize(newPageSize);\r\n }\r\n cfg.onChange?.(newPage, newPageSize);\r\n };\r\n\r\n const [sorting, setSorting] = useState<SortingState>([]);\r\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\r\n\r\n const finalColumns = React.useMemo(() => {\r\n const cols = [...columns];\r\n if (enableRowSelection) {\r\n cols.unshift({\r\n id: 'select',\r\n size: 10,\r\n minSize: 5,\r\n maxSize: 10,\r\n meta: { align: 'center' },\r\n header: ({ table }) => (\r\n <div className=\"flex items-center justify-center\">\r\n <Checkbox\r\n size=\"sm\"\r\n checked={table.getIsAllRowsSelected()}\r\n indeterminate={table.getIsSomeRowsSelected()}\r\n onCheckedChange={(checked) => table.toggleAllRowsSelected(!!checked)}\r\n />\r\n </div>\r\n ),\r\n cell: ({ row }) => (\r\n <div className=\"flex items-center justify-center\">\r\n <Checkbox\r\n size=\"sm\"\r\n checked={row.getIsSelected()}\r\n disabled={!row.getCanSelect()}\r\n onCheckedChange={(checked) => row.toggleSelected(!!checked)}\r\n />\r\n </div>\r\n ),\r\n enableSorting: false,\r\n });\r\n }\r\n if (enableExpanding) {\r\n cols.unshift({\r\n id: 'expander',\r\n header: () => null,\r\n size: 10,\r\n minSize: 10,\r\n maxSize: 10,\r\n meta: { align: 'center' },\r\n cell: ({ row }) => row.getCanExpand() ? (\r\n <div className=\"flex items-center justify-center\">\r\n <span\r\n onClick={row.getToggleExpandedHandler()}\r\n className=\"hover:bg-muted text-muted-foreground transition-colors cursor-pointer outline-none focus:ring-2 focus:ring-primary/50 p-1 rounded-md border border-border\"\r\n >\r\n {row.getIsExpanded() ? <ChevronDown className=\"w-3 h-3\" /> : <ChevronRight className=\"w-3 h-3\" />}\r\n </span>\r\n </div>\r\n ) : null,\r\n enableSorting: false,\r\n });\r\n }\r\n return cols;\r\n }, [columns, enableRowSelection, enableExpanding]);\r\n\r\n const table = useReactTable({\r\n data,\r\n columns: finalColumns,\r\n state: { sorting, rowSelection, pagination: tanstackPagination },\r\n onSortingChange: setSorting,\r\n onRowSelectionChange: setRowSelection,\r\n onPaginationChange: handlePaginationChange,\r\n getCoreRowModel: getCoreRowModel(),\r\n getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,\r\n getPaginationRowModel: paginationEnabled ? getPaginationRowModel() : undefined,\r\n getFilteredRowModel: getFilteredRowModel(),\r\n getExpandedRowModel: getExpandedRowModel(),\r\n columnResizeMode,\r\n enableColumnResizing,\r\n enableRowSelection,\r\n manualPagination: isServerMode,\r\n pageCount: isServerMode ? pageCount : undefined,\r\n getRowCanExpand: getRowCanExpand ? (row) => getRowCanExpand(row.original) : () => !!renderSubComponent,\r\n });\r\n\r\n // Input go-to-page\r\n const [inputValue, setInputValue] = useState<string | number>(page);\r\n useEffect(() => { setInputValue(page); }, [page]);\r\n\r\n useEffect(() => {\r\n if (onSelectionChange) {\r\n const selected = table.getSelectedRowModel().rows.map(row => row.original);\r\n onSelectionChange(selected);\r\n }\r\n }, [rowSelection, onSelectionChange, table]);\r\n\r\n // Computed display values\r\n const currentPageIndex = table.getState().pagination.pageIndex;\r\n const currentPageSize = table.getState().pagination.pageSize;\r\n const from = currentPageIndex * currentPageSize + 1;\r\n const to = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);\r\n const totalPageCount = isServerMode ? (pageCount ?? 1) : (table.getPageCount() || 1);\r\n\r\n // Virtualizer — only active when virtualize=true\r\n const allRows = virtualize ? table.getCoreRowModel().rows : [];\r\n const rowVirtualizer = useVirtualizer({\r\n count: virtualize ? allRows.length : 0,\r\n getScrollElement: () => scrollContainerRef.current,\r\n estimateSize: () => estimatedRowHeight,\r\n overscan: 8,\r\n enabled: virtualize,\r\n });\r\n const virtualItems = virtualize ? rowVirtualizer.getVirtualItems() : [];\r\n\r\n return (\r\n <div className={cn(\"relative w-full rounded-md border border-border bg-background flex flex-col overflow-hidden\", className)}>\r\n\r\n {/* Loading Overlay */}\r\n {isLoading && (\r\n <div className=\"absolute inset-0 bg-white/60 z-10 flex items-center justify-center backdrop-blur-[0.5px]\">\r\n <Spinner size=\"lg\" variant=\"primary\" />\r\n </div>\r\n )}\r\n\r\n <div\r\n ref={scrollContainerRef}\r\n className=\"overflow-x-auto w-full\"\r\n style={virtualize ? { overflowY: 'auto', maxHeight: virtualHeight } : undefined}\r\n >\r\n <table\r\n className=\"w-full text-sm text-left text-foreground whitespace-nowrap\"\r\n style={{\r\n width: enableColumnResizing ? table.getCenterTotalSize() : undefined,\r\n tableLayout: enableColumnResizing ? 'fixed' : 'auto'\r\n }}\r\n >\r\n <thead className=\"text-xs text-muted-foreground bg-muted/50 border-b border-border\">\r\n {table.getHeaderGroups().map(headerGroup => (\r\n <tr key={headerGroup.id} >\r\n {headerGroup.headers.map(header => {\r\n const meta = header.column.columnDef.meta;\r\n const align = meta?.align || 'left';\r\n const canSort = header.column.getCanSort() && enableSorting && header.column.id !== 'select';\r\n\r\n return (\r\n <th\r\n key={header.id}\r\n colSpan={header.colSpan}\r\n style={{\r\n width: enableColumnResizing ? header.getSize() : header.column.columnDef.size,\r\n position: 'relative'\r\n }}\r\n aria-sort={\r\n canSort\r\n ? header.column.getIsSorted() === 'desc'\r\n ? 'descending'\r\n : header.column.getIsSorted() === 'asc'\r\n ? 'ascending'\r\n : 'none'\r\n : undefined\r\n }\r\n className={cn(\r\n header.column.id === 'select' || header.column.id === 'expander' ? \"px-1\" : \"px-2\",\r\n \"py-3 font-semibold tracking-wide border border-border transition-colors group/header\",\r\n canSort ? \"cursor-pointer select-none hover:bg-muted\" : \"\",\r\n align === 'center' ? \"text-center\" : align === 'right' ? \"text-right\" : \"text-left\"\r\n )}\r\n >\r\n <div\r\n className={cn(\"flex flex-col h-full\")}\r\n onClick={canSort ? header.column.getToggleSortingHandler() : undefined}\r\n >\r\n {header.isPlaceholder ? null : (\r\n <div className={cn(\r\n \"flex items-center gap-2\",\r\n align === 'center' ? \"justify-center\" : align === 'right' ? \"justify-end\" : \"justify-between\"\r\n )}>\r\n <span>{flexRender(header.column.columnDef.header, header.getContext())}</span>\r\n {canSort && (\r\n <span className=\"shrink-0\">\r\n {{\r\n asc: <ChevronUp className=\"w-4 h-4 text-primary\" />,\r\n desc: <ChevronDown className=\"w-4 h-4 text-primary\" />,\r\n }[header.column.getIsSorted() as string] ?? (\r\n <div className=\"flex flex-col opacity-30 -space-y-1 hover:opacity-100 transition-opacity\">\r\n <ChevronUp className=\"w-3 h-3\" />\r\n <ChevronDown className=\"w-3 h-3\" />\r\n </div>\r\n )}\r\n </span>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Resize Handle */}\r\n {enableColumnResizing && header.column.getCanResize() && (\r\n <div\r\n {...{\r\n onMouseDown: header.getResizeHandler(),\r\n onTouchStart: header.getResizeHandler(),\r\n className: cn(\r\n \"absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none hover:bg-primary/50 transition-colors\",\r\n header.column.getIsResizing() ? \"bg-primary w-1.5 z-10\" : \"bg-transparent\"\r\n ),\r\n }}\r\n />\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n ))}\r\n </thead>\r\n <tbody className=\"\">\r\n {!isLoading && data.length === 0 ? (\r\n <tr>\r\n <td colSpan={finalColumns.length} className=\" px-4 py-16 text-center text-muted-foreground\">\r\n <div className=\"flex flex-col items-center justify-center space-y-2\">\r\n <span className=\"text-muted-foreground/50\">\r\n <svg className=\"w-12 h-12\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1} d=\"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4\" />\r\n </svg>\r\n </span>\r\n <span>{resolvedEmptyText}</span>\r\n </div>\r\n </td>\r\n </tr>\r\n ) : virtualize ? (\r\n // ── Virtual rows ──────────────────────────────────\r\n <>\r\n {rowVirtualizer.getTotalSize() > 0 && (\r\n <tr aria-hidden=\"true\">\r\n <td style={{ height: virtualItems[0]?.start ?? 0, padding: 0, border: 0 }} colSpan={finalColumns.length} />\r\n </tr>\r\n )}\r\n {virtualItems.map(virtualRow => {\r\n const row = allRows[virtualRow.index];\r\n if (!row) return null;\r\n return (\r\n <tr\r\n key={row.id}\r\n data-index={virtualRow.index}\r\n ref={rowVirtualizer.measureElement}\r\n className={cn(\r\n \"hover:bg-muted/50 transition-colors\",\r\n row.getIsSelected() ? \"bg-primary/5 hover:bg-primary/10\" : \"\"\r\n )}\r\n >\r\n {row.getVisibleCells().map(cell => {\r\n const meta = cell.column.columnDef.meta;\r\n const align = meta?.align || 'left';\r\n return (\r\n <td\r\n key={cell.id}\r\n style={{ width: enableColumnResizing ? cell.column.getSize() : cell.column.columnDef.size }}\r\n className={cn(\r\n cell.column.id === 'select' || cell.column.id === 'expander' ? \"px-1\" : \"px-2\",\r\n \"py-3 border border-border align-middle\",\r\n align === 'center' ? \"text-center\" : align === 'right' ? \"text-right\" : \"text-left\"\r\n )}\r\n >\r\n <div className={cn(\r\n \"flex items-center\",\r\n align === 'center' ? \"justify-center\" : align === 'right' ? \"justify-end\" : \"justify-start\"\r\n )}>\r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n </div>\r\n </td>\r\n );\r\n })}\r\n </tr>\r\n );\r\n })}\r\n {rowVirtualizer.getTotalSize() > 0 && (\r\n <tr aria-hidden=\"true\">\r\n <td\r\n style={{\r\n height: rowVirtualizer.getTotalSize() - (virtualItems[virtualItems.length - 1]?.end ?? 0),\r\n padding: 0,\r\n border: 0,\r\n }}\r\n colSpan={finalColumns.length}\r\n />\r\n </tr>\r\n )}\r\n </>\r\n ) : (\r\n // ── Normal rows ───────────────────────────────────\r\n table.getRowModel().rows.map(row => (\r\n <React.Fragment key={row.id}>\r\n <tr\r\n className={cn(\r\n \"hover:bg-muted/50 transition-colors group\",\r\n row.getIsSelected() ? \"bg-primary/5 hover:bg-primary/10\" : \"\",\r\n row.getIsExpanded() ? \"bg-primary/5\" : \"\"\r\n )}\r\n >\r\n {row.getVisibleCells().map(cell => {\r\n const meta = cell.column.columnDef.meta;\r\n const align = meta?.align || 'left';\r\n return (\r\n <td\r\n key={cell.id}\r\n style={{ width: enableColumnResizing ? cell.column.getSize() : cell.column.columnDef.size }}\r\n className={cn(\r\n cell.column.id === 'select' || cell.column.id === 'expander' ? \"px-1\" : \"px-2\",\r\n \"py-3 border border-border align-middle\",\r\n align === 'center' ? \"text-center\" : align === 'right' ? \"text-right\" : \"text-left\"\r\n )}\r\n >\r\n <div className={cn(\r\n \"flex items-center\",\r\n align === 'center' ? \"justify-center\" : align === 'right' ? \"justify-end\" : \"justify-start\"\r\n )}>\r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n </div>\r\n </td>\r\n );\r\n })}\r\n </tr>\r\n {row.getIsExpanded() && renderSubComponent && (\r\n <tr>\r\n <td colSpan={row.getVisibleCells().length} className=\"p-0 border-b border-border whitespace-normal\">\r\n <div className=\"bg-muted/50 px-4 py-5 shadow-inner w-full border-l-4 border-l-primary/40 wrap-break-word\">\r\n {renderSubComponent({ row: row.original })}\r\n </div>\r\n </td>\r\n </tr>\r\n )}\r\n </React.Fragment>\r\n ))\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n {/* Pagination Controls — hidden in virtualize mode */}\r\n {!virtualize && paginationEnabled && totalPageCount > 0 && (\r\n <div className=\"flex flex-col sm:flex-row items-center justify-between px-3 py-2.5 border-t border-border bg-muted/50 gap-2\">\r\n {/* showTotal info */}\r\n <div className=\"text-xs text-muted-foreground shrink-0 order-2 sm:order-1\">\r\n {cfg.showTotal\r\n ? cfg.showTotal(totalRows, [from, to])\r\n : <>Show <b>{from}</b>–<b>{to}</b> of <b>{totalRows}</b> results</>\r\n }\r\n </div>\r\n\r\n {/* Controls */}\r\n <div className=\"flex items-center gap-2 overflow-x-auto order-1 sm:order-2 w-full sm:w-auto pb-0.5 sm:pb-0\">\r\n {/* Page size */}\r\n {(cfg.showSizeChanger !== false) && (\r\n <select\r\n value={currentPageSize}\r\n onChange={e => table.setPageSize(Number(e.target.value))}\r\n className=\"shrink-0 px-2 py-1 text-xs border border-border rounded-md bg-background text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary cursor-pointer\"\r\n >\r\n {pageSizeOptions.map(s => (\r\n <option key={s} value={s}>{s}{labels?.perPage ?? ' / page'}</option>\r\n ))}\r\n </select>\r\n )}\r\n\r\n {/* Nav buttons */}\r\n <div className=\"flex items-center gap-1 shrink-0\">\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.setPageIndex(0)}\r\n disabled={!table.getCanPreviousPage()}\r\n aria-label=\"First page\"\r\n >\r\n <ChevronsLeft className=\"w-3.5 h-3.5\" />\r\n </button>\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.previousPage()}\r\n disabled={!table.getCanPreviousPage()}\r\n aria-label=\"Previous page\"\r\n >\r\n <ChevronLeft className=\"w-3.5 h-3.5\" />\r\n </button>\r\n\r\n <span className=\"text-xs font-medium px-2.5 py-1 bg-background border border-border rounded shrink-0 min-w-14 text-center text-foreground\">\r\n {currentPageIndex + 1} / {totalPageCount}\r\n </span>\r\n\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.nextPage()}\r\n disabled={!table.getCanNextPage()}\r\n aria-label=\"Next page\"\r\n >\r\n <ChevronRight className=\"w-3.5 h-3.5\" />\r\n </button>\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.setPageIndex(totalPageCount - 1)}\r\n disabled={!table.getCanNextPage()}\r\n aria-label=\"Last page\"\r\n >\r\n <ChevronsRight className=\"w-3.5 h-3.5\" />\r\n </button>\r\n </div>\r\n\r\n {/* Go to page */}\r\n <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground border-l border-border pl-2 ml-1 shrink-0\">\r\n <span className=\"hidden sm:inline\">{labels?.page ?? 'Page'}</span>\r\n <input\r\n type=\"number\"\r\n min={1}\r\n max={totalPageCount}\r\n value={inputValue}\r\n onChange={e => {\r\n const val = e.target.value;\r\n setInputValue(val);\r\n const p = val ? Number(val) - 1 : 0;\r\n if (val && p >= 0 && p < totalPageCount) {\r\n table.setPageIndex(p);\r\n }\r\n }}\r\n onBlur={() => setInputValue(currentPageIndex + 1)}\r\n className=\"w-10 px-1 py-1 text-xs border border-border rounded bg-background text-foreground text-center outline-none focus:border-primary focus:ring-1 focus:ring-primary\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"
|
|
811
|
+
"content": "import React, { useEffect, useRef, useState } from 'react';\r\nimport {\r\n useReactTable,\r\n getCoreRowModel,\r\n getSortedRowModel,\r\n getPaginationRowModel,\r\n getFilteredRowModel,\r\n getExpandedRowModel,\r\n type ColumnDef,\r\n type SortingState,\r\n type PaginationState,\r\n type RowSelectionState,\r\n type RowData,\r\n type ColumnResizeMode,\r\n} from '@tanstack/react-table';\r\nimport { useVirtualizer } from '@tanstack/react-virtual';\r\n\r\ndeclare module '@tanstack/react-table' {\r\n interface ColumnMeta<TData extends RowData, TValue> {\r\n align?: 'left' | 'center' | 'right';\r\n }\r\n}\r\nimport { cn } from '@lib/utils/cn';\r\nimport { ChevronDown, ChevronRight } from 'lucide-react';\r\nimport { Checkbox } from '../checkbox/Checkbox';\r\nimport { Spinner } from '../spinner/Spinner';\r\nimport { TableHeader } from './TableHeader';\r\nimport { TableEmpty, TableNormalRows, TableVirtualRows } from './TableBody';\r\nimport { TablePagination } from './TablePagination';\r\n\r\n// ─── Pagination Config ───────────────────────────────────────────────────────\r\n\r\nexport interface PaginationConfig {\r\n current?: number;\r\n pageSize?: number;\r\n total?: number;\r\n pageSizeOptions?: number[];\r\n showTotal?: (total: number, range: [number, number]) => React.ReactNode;\r\n showSizeChanger?: boolean;\r\n onChange?: (page: number, pageSize: number) => void;\r\n}\r\n\r\nexport interface TableLabels {\r\n page?: string;\r\n perPage?: string;\r\n empty?: string;\r\n}\r\n\r\nexport interface TableProps<TData, TValue = unknown> {\r\n data: TData[];\r\n columns: ColumnDef<TData, TValue>[];\r\n isLoading?: boolean;\r\n enableSorting?: boolean;\r\n enableRowSelection?: boolean;\r\n enableExpanding?: boolean;\r\n renderSubComponent?: (props: { row: TData }) => React.ReactNode;\r\n getRowCanExpand?: (row: TData) => boolean;\r\n onSelectionChange?: (selectedRows: TData[]) => void;\r\n className?: string;\r\n enableColumnResizing?: boolean;\r\n columnResizeMode?: ColumnResizeMode;\r\n pagination?: PaginationConfig | false;\r\n /** @deprecated Use `labels.empty` instead */\r\n emptyText?: string;\r\n labels?: TableLabels;\r\n virtualize?: boolean;\r\n virtualHeight?: number;\r\n estimatedRowHeight?: number;\r\n}\r\n\r\nexport function Table<TData, TValue = unknown>({\r\n data = [],\r\n columns,\r\n isLoading = false,\r\n enableSorting = true,\r\n enableRowSelection = false,\r\n enableExpanding = false,\r\n renderSubComponent,\r\n getRowCanExpand,\r\n onSelectionChange,\r\n className,\r\n enableColumnResizing = false,\r\n columnResizeMode = 'onChange',\r\n pagination: paginationProp = {},\r\n emptyText,\r\n labels,\r\n virtualize = false,\r\n virtualHeight = 400,\r\n estimatedRowHeight = 45,\r\n}: TableProps<TData>) {\r\n const resolvedEmptyText = emptyText ?? labels?.empty ?? 'No data';\r\n const scrollContainerRef = useRef<HTMLDivElement>(null);\r\n const paginationEnabled = paginationProp !== false;\r\n const cfg = paginationEnabled ? (paginationProp as PaginationConfig) : {};\r\n\r\n const isServerMode = paginationEnabled && cfg.total !== undefined;\r\n const [page, setPage] = useState(cfg.current ?? 1);\r\n const [pageSize, setPageSize] = useState(cfg.pageSize ?? 10);\r\n\r\n useEffect(() => {\r\n if (cfg.current !== undefined) setPage(cfg.current);\r\n }, [cfg.current]);\r\n\r\n useEffect(() => {\r\n if (cfg.pageSize !== undefined) setPageSize(cfg.pageSize);\r\n }, [cfg.pageSize]);\r\n\r\n const pageIndex = page - 1;\r\n const totalRows = isServerMode ? cfg.total! : data.length;\r\n const pageCount = isServerMode ? Math.ceil(totalRows / pageSize) : undefined;\r\n const tanstackPagination: PaginationState = { pageIndex, pageSize };\r\n\r\n const handlePaginationChange = (updater: PaginationState | ((prev: PaginationState) => PaginationState)) => {\r\n const next = typeof updater === 'function' ? updater(tanstackPagination) : updater;\r\n const newPage = next.pageIndex + 1;\r\n const newPageSize = next.pageSize;\r\n\r\n if (!isServerMode) {\r\n setPage(newPage);\r\n setPageSize(newPageSize);\r\n }\r\n cfg.onChange?.(newPage, newPageSize);\r\n };\r\n\r\n const [sorting, setSorting] = useState<SortingState>([]);\r\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\r\n\r\n const finalColumns = React.useMemo(() => {\r\n const cols = [...columns];\r\n if (enableRowSelection) {\r\n cols.unshift({\r\n id: 'select',\r\n size: 10,\r\n minSize: 5,\r\n maxSize: 10,\r\n meta: { align: 'center' },\r\n header: ({ table }) => (\r\n <div className=\"flex items-center justify-center\">\r\n <Checkbox\r\n size=\"sm\"\r\n checked={table.getIsAllRowsSelected()}\r\n indeterminate={table.getIsSomeRowsSelected()}\r\n onCheckedChange={(checked) => table.toggleAllRowsSelected(!!checked)}\r\n />\r\n </div>\r\n ),\r\n cell: ({ row }) => (\r\n <div className=\"flex items-center justify-center\">\r\n <Checkbox\r\n size=\"sm\"\r\n checked={row.getIsSelected()}\r\n disabled={!row.getCanSelect()}\r\n onCheckedChange={(checked) => row.toggleSelected(!!checked)}\r\n />\r\n </div>\r\n ),\r\n enableSorting: false,\r\n });\r\n }\r\n if (enableExpanding) {\r\n cols.unshift({\r\n id: 'expander',\r\n header: () => null,\r\n size: 10,\r\n minSize: 10,\r\n maxSize: 10,\r\n meta: { align: 'center' },\r\n cell: ({ row }) => row.getCanExpand() ? (\r\n <div className=\"flex items-center justify-center\">\r\n <span\r\n onClick={row.getToggleExpandedHandler()}\r\n className=\"hover:bg-muted text-muted-foreground transition-colors cursor-pointer outline-none focus:ring-2 focus:ring-primary/50 p-1 rounded-md border border-border\"\r\n >\r\n {row.getIsExpanded() ? <ChevronDown className=\"w-3 h-3\" /> : <ChevronRight className=\"w-3 h-3\" />}\r\n </span>\r\n </div>\r\n ) : null,\r\n enableSorting: false,\r\n });\r\n }\r\n return cols;\r\n }, [columns, enableRowSelection, enableExpanding]);\r\n\r\n const table = useReactTable({\r\n data,\r\n columns: finalColumns,\r\n state: { sorting, rowSelection, pagination: tanstackPagination },\r\n onSortingChange: setSorting,\r\n onRowSelectionChange: setRowSelection,\r\n onPaginationChange: handlePaginationChange,\r\n getCoreRowModel: getCoreRowModel(),\r\n getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,\r\n getPaginationRowModel: paginationEnabled ? getPaginationRowModel() : undefined,\r\n getFilteredRowModel: getFilteredRowModel(),\r\n getExpandedRowModel: getExpandedRowModel(),\r\n columnResizeMode,\r\n enableColumnResizing,\r\n enableRowSelection,\r\n manualPagination: isServerMode,\r\n pageCount: isServerMode ? pageCount : undefined,\r\n getRowCanExpand: getRowCanExpand ? (row) => getRowCanExpand(row.original) : () => !!renderSubComponent,\r\n });\r\n\r\n useEffect(() => {\r\n if (onSelectionChange) {\r\n const selected = table.getSelectedRowModel().rows.map(row => row.original);\r\n onSelectionChange(selected);\r\n }\r\n }, [rowSelection, onSelectionChange, table]);\r\n\r\n const totalPageCount = isServerMode ? (pageCount ?? 1) : (table.getPageCount() || 1);\r\n\r\n // Virtualizer\r\n const allRows = virtualize ? table.getCoreRowModel().rows : [];\r\n const rowVirtualizer = useVirtualizer({\r\n count: virtualize ? allRows.length : 0,\r\n getScrollElement: () => scrollContainerRef.current,\r\n estimateSize: () => estimatedRowHeight,\r\n overscan: 8,\r\n enabled: virtualize,\r\n });\r\n\r\n return (\r\n <div className={cn(\"relative w-full rounded-md border border-border bg-background flex flex-col overflow-hidden\", className)}>\r\n {isLoading && (\r\n <div className=\"absolute inset-0 bg-white/60 z-10 flex items-center justify-center backdrop-blur-[0.5px]\">\r\n <Spinner size=\"lg\" variant=\"primary\" />\r\n </div>\r\n )}\r\n\r\n <div\r\n ref={scrollContainerRef}\r\n className=\"overflow-x-auto w-full\"\r\n style={virtualize ? { overflowY: 'auto', maxHeight: virtualHeight } : undefined}\r\n >\r\n <table\r\n className=\"w-full text-sm text-left text-foreground whitespace-nowrap\"\r\n style={{\r\n width: enableColumnResizing ? table.getCenterTotalSize() : undefined,\r\n tableLayout: enableColumnResizing ? 'fixed' : 'auto'\r\n }}\r\n >\r\n <TableHeader\r\n headerGroups={table.getHeaderGroups()}\r\n enableSorting={enableSorting}\r\n enableColumnResizing={enableColumnResizing}\r\n />\r\n <tbody>\r\n {!isLoading && data.length === 0 ? (\r\n <TableEmpty colSpan={finalColumns.length} text={resolvedEmptyText} />\r\n ) : virtualize ? (\r\n <TableVirtualRows\r\n allRows={allRows}\r\n rowVirtualizer={rowVirtualizer}\r\n enableColumnResizing={enableColumnResizing}\r\n colSpan={finalColumns.length}\r\n />\r\n ) : (\r\n <TableNormalRows\r\n rows={table.getRowModel().rows}\r\n enableColumnResizing={enableColumnResizing}\r\n renderSubComponent={renderSubComponent}\r\n />\r\n )}\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n {!virtualize && paginationEnabled && (\r\n <TablePagination\r\n table={table}\r\n totalRows={totalRows}\r\n totalPageCount={totalPageCount}\r\n isServerMode={isServerMode}\r\n cfg={cfg}\r\n labels={labels}\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n"
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"path": "src/components/ui/table/TableBody.tsx",
|
|
815
|
+
"content": "import React from 'react';\r\nimport {\r\n flexRender,\r\n type Row,\r\n type ColumnDef,\r\n type RowData,\r\n} from '@tanstack/react-table';\r\nimport { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';\r\nimport { cn } from '@lib/utils/cn';\r\n\r\n// ─── Empty State ────────────────────────────────────────────────────────────\r\n\r\ninterface TableEmptyProps {\r\n colSpan: number;\r\n text: string;\r\n}\r\n\r\nexport function TableEmpty({ colSpan, text }: TableEmptyProps) {\r\n return (\r\n <tr>\r\n <td colSpan={colSpan} className=\"px-4 py-16 text-center text-muted-foreground\">\r\n <div className=\"flex flex-col items-center justify-center space-y-2\">\r\n <span className=\"text-muted-foreground/50\">\r\n <svg className=\"w-12 h-12\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1} d=\"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4\" />\r\n </svg>\r\n </span>\r\n <span>{text}</span>\r\n </div>\r\n </td>\r\n </tr>\r\n );\r\n}\r\n\r\n// ─── Row Cell Renderer ──────────────────────────────────────────────────────\r\n\r\ninterface TableRowCellsProps<TData extends RowData> {\r\n row: Row<TData>;\r\n enableColumnResizing: boolean;\r\n}\r\n\r\nfunction TableRowCells<TData extends RowData>({ row, enableColumnResizing }: TableRowCellsProps<TData>) {\r\n return (\r\n <>\r\n {row.getVisibleCells().map(cell => {\r\n const meta = cell.column.columnDef.meta;\r\n const align = meta?.align || 'left';\r\n return (\r\n <td\r\n key={cell.id}\r\n style={{ width: enableColumnResizing ? cell.column.getSize() : cell.column.columnDef.size }}\r\n className={cn(\r\n cell.column.id === 'select' || cell.column.id === 'expander' ? \"px-1\" : \"px-2\",\r\n \"py-3 border border-border align-middle\",\r\n align === 'center' ? \"text-center\" : align === 'right' ? \"text-right\" : \"text-left\"\r\n )}\r\n >\r\n <div className={cn(\r\n \"flex items-center\",\r\n align === 'center' ? \"justify-center\" : align === 'right' ? \"justify-end\" : \"justify-start\"\r\n )}>\r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n </div>\r\n </td>\r\n );\r\n })}\r\n </>\r\n );\r\n}\r\n\r\n// ─── Normal Rows ────────────────────────────────────────────────────────────\r\n\r\ninterface TableNormalRowsProps<TData extends RowData> {\r\n rows: Row<TData>[];\r\n enableColumnResizing: boolean;\r\n renderSubComponent?: (props: { row: TData }) => React.ReactNode;\r\n}\r\n\r\nexport function TableNormalRows<TData extends RowData>({\r\n rows,\r\n enableColumnResizing,\r\n renderSubComponent,\r\n}: TableNormalRowsProps<TData>) {\r\n return (\r\n <>\r\n {rows.map(row => (\r\n <React.Fragment key={row.id}>\r\n <tr\r\n className={cn(\r\n \"hover:bg-muted/50 transition-colors group\",\r\n row.getIsSelected() ? \"bg-primary/5 hover:bg-primary/10\" : \"\",\r\n row.getIsExpanded() ? \"bg-primary/5\" : \"\"\r\n )}\r\n >\r\n <TableRowCells row={row} enableColumnResizing={enableColumnResizing} />\r\n </tr>\r\n {row.getIsExpanded() && renderSubComponent && (\r\n <tr>\r\n <td colSpan={row.getVisibleCells().length} className=\"p-0 border-b border-border whitespace-normal\">\r\n <div className=\"bg-muted/50 px-4 py-5 shadow-inner w-full border-l-4 border-l-primary/40 wrap-break-word\">\r\n {renderSubComponent({ row: row.original })}\r\n </div>\r\n </td>\r\n </tr>\r\n )}\r\n </React.Fragment>\r\n ))}\r\n </>\r\n );\r\n}\r\n\r\n// ─── Virtual Rows ───────────────────────────────────────────────────────────\r\n\r\ninterface TableVirtualRowsProps<TData extends RowData> {\r\n allRows: Row<TData>[];\r\n rowVirtualizer: Virtualizer<HTMLDivElement, Element>;\r\n enableColumnResizing: boolean;\r\n colSpan: number;\r\n}\r\n\r\nexport function TableVirtualRows<TData extends RowData>({\r\n allRows,\r\n rowVirtualizer,\r\n enableColumnResizing,\r\n colSpan,\r\n}: TableVirtualRowsProps<TData>) {\r\n const virtualItems = rowVirtualizer.getVirtualItems();\r\n\r\n return (\r\n <>\r\n {rowVirtualizer.getTotalSize() > 0 && (\r\n <tr aria-hidden=\"true\">\r\n <td style={{ height: virtualItems[0]?.start ?? 0, padding: 0, border: 0 }} colSpan={colSpan} />\r\n </tr>\r\n )}\r\n {virtualItems.map(virtualRow => {\r\n const row = allRows[virtualRow.index];\r\n if (!row) return null;\r\n return (\r\n <tr\r\n key={row.id}\r\n data-index={virtualRow.index}\r\n ref={rowVirtualizer.measureElement}\r\n className={cn(\r\n \"hover:bg-muted/50 transition-colors\",\r\n row.getIsSelected() ? \"bg-primary/5 hover:bg-primary/10\" : \"\"\r\n )}\r\n >\r\n <TableRowCells row={row} enableColumnResizing={enableColumnResizing} />\r\n </tr>\r\n );\r\n })}\r\n {rowVirtualizer.getTotalSize() > 0 && (\r\n <tr aria-hidden=\"true\">\r\n <td\r\n style={{\r\n height: rowVirtualizer.getTotalSize() - (virtualItems[virtualItems.length - 1]?.end ?? 0),\r\n padding: 0,\r\n border: 0,\r\n }}\r\n colSpan={colSpan}\r\n />\r\n </tr>\r\n )}\r\n </>\r\n );\r\n}\r\n"
|
|
816
|
+
},
|
|
817
|
+
{
|
|
818
|
+
"path": "src/components/ui/table/TableHeader.tsx",
|
|
819
|
+
"content": "import React from 'react';\r\nimport {\r\n flexRender,\r\n type HeaderGroup,\r\n type RowData,\r\n} from '@tanstack/react-table';\r\nimport { cn } from '@lib/utils/cn';\r\nimport { ChevronDown, ChevronUp } from 'lucide-react';\r\n\r\nexport interface TableHeaderProps<TData extends RowData> {\r\n headerGroups: HeaderGroup<TData>[];\r\n enableSorting: boolean;\r\n enableColumnResizing: boolean;\r\n}\r\n\r\nexport function TableHeader<TData extends RowData>({\r\n headerGroups,\r\n enableSorting,\r\n enableColumnResizing,\r\n}: TableHeaderProps<TData>) {\r\n return (\r\n <thead className=\"text-xs text-muted-foreground bg-muted/50 border-b border-border\">\r\n {headerGroups.map(headerGroup => (\r\n <tr key={headerGroup.id}>\r\n {headerGroup.headers.map(header => {\r\n const meta = header.column.columnDef.meta;\r\n const align = meta?.align || 'left';\r\n const canSort = header.column.getCanSort() && enableSorting && header.column.id !== 'select';\r\n\r\n return (\r\n <th\r\n key={header.id}\r\n colSpan={header.colSpan}\r\n style={{\r\n width: enableColumnResizing ? header.getSize() : header.column.columnDef.size,\r\n position: 'relative'\r\n }}\r\n aria-sort={\r\n canSort\r\n ? header.column.getIsSorted() === 'desc'\r\n ? 'descending'\r\n : header.column.getIsSorted() === 'asc'\r\n ? 'ascending'\r\n : 'none'\r\n : undefined\r\n }\r\n className={cn(\r\n header.column.id === 'select' || header.column.id === 'expander' ? \"px-1\" : \"px-2\",\r\n \"py-3 font-semibold tracking-wide border border-border transition-colors group/header\",\r\n canSort ? \"cursor-pointer select-none hover:bg-muted\" : \"\",\r\n align === 'center' ? \"text-center\" : align === 'right' ? \"text-right\" : \"text-left\"\r\n )}\r\n >\r\n <div\r\n className={cn(\"flex flex-col h-full\")}\r\n onClick={canSort ? header.column.getToggleSortingHandler() : undefined}\r\n >\r\n {header.isPlaceholder ? null : (\r\n <div className={cn(\r\n \"flex items-center gap-2\",\r\n align === 'center' ? \"justify-center\" : align === 'right' ? \"justify-end\" : \"justify-between\"\r\n )}>\r\n <span>{flexRender(header.column.columnDef.header, header.getContext())}</span>\r\n {canSort && (\r\n <span className=\"shrink-0\">\r\n {{\r\n asc: <ChevronUp className=\"w-4 h-4 text-primary\" />,\r\n desc: <ChevronDown className=\"w-4 h-4 text-primary\" />,\r\n }[header.column.getIsSorted() as string] ?? (\r\n <div className=\"flex flex-col opacity-30 -space-y-1 hover:opacity-100 transition-opacity\">\r\n <ChevronUp className=\"w-3 h-3\" />\r\n <ChevronDown className=\"w-3 h-3\" />\r\n </div>\r\n )}\r\n </span>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Resize Handle */}\r\n {enableColumnResizing && header.column.getCanResize() && (\r\n <div\r\n {...{\r\n onMouseDown: header.getResizeHandler(),\r\n onTouchStart: header.getResizeHandler(),\r\n className: cn(\r\n \"absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none hover:bg-primary/50 transition-colors\",\r\n header.column.getIsResizing() ? \"bg-primary w-1.5 z-10\" : \"bg-transparent\"\r\n ),\r\n }}\r\n />\r\n )}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n ))}\r\n </thead>\r\n );\r\n}\r\n"
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
"path": "src/components/ui/table/TablePagination.tsx",
|
|
823
|
+
"content": "import React, { useState, useEffect } from 'react';\r\nimport { type Table as TanstackTable, type RowData } from '@tanstack/react-table';\r\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\r\nimport type { PaginationConfig, TableLabels } from './Table';\r\n\r\ninterface TablePaginationProps<TData extends RowData> {\r\n table: TanstackTable<TData>;\r\n totalRows: number;\r\n totalPageCount: number;\r\n isServerMode: boolean;\r\n cfg: PaginationConfig;\r\n labels?: TableLabels;\r\n}\r\n\r\nexport function TablePagination<TData extends RowData>({\r\n table,\r\n totalRows,\r\n totalPageCount,\r\n isServerMode,\r\n cfg,\r\n labels,\r\n}: TablePaginationProps<TData>) {\r\n const currentPageIndex = table.getState().pagination.pageIndex;\r\n const currentPageSize = table.getState().pagination.pageSize;\r\n const from = currentPageIndex * currentPageSize + 1;\r\n const to = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);\r\n const pageSizeOptions = cfg.pageSizeOptions ?? [5, 10, 20, 50, 100];\r\n\r\n const [inputValue, setInputValue] = useState<string | number>(currentPageIndex + 1);\r\n\r\n useEffect(() => {\r\n setInputValue(currentPageIndex + 1);\r\n }, [currentPageIndex]);\r\n\r\n if (totalPageCount <= 0) return null;\r\n\r\n return (\r\n <div className=\"flex flex-col sm:flex-row items-center justify-between px-3 py-2.5 border-t border-border bg-muted/50 gap-2\">\r\n {/* showTotal info */}\r\n <div className=\"text-xs text-muted-foreground shrink-0 order-2 sm:order-1\">\r\n {cfg.showTotal\r\n ? cfg.showTotal(totalRows, [from, to])\r\n : <>Show <b>{from}</b>–<b>{to}</b> of <b>{totalRows}</b> results</>\r\n }\r\n </div>\r\n\r\n {/* Controls */}\r\n <div className=\"flex items-center gap-2 overflow-x-auto order-1 sm:order-2 w-full sm:w-auto pb-0.5 sm:pb-0\">\r\n {/* Page size */}\r\n {(cfg.showSizeChanger !== false) && (\r\n <select\r\n value={currentPageSize}\r\n onChange={e => table.setPageSize(Number(e.target.value))}\r\n className=\"shrink-0 px-2 py-1 text-xs border border-border rounded-md bg-background text-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary cursor-pointer\"\r\n >\r\n {pageSizeOptions.map(s => (\r\n <option key={s} value={s}>{s}{labels?.perPage ?? ' / page'}</option>\r\n ))}\r\n </select>\r\n )}\r\n\r\n {/* Nav buttons */}\r\n <div className=\"flex items-center gap-1 shrink-0\">\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.setPageIndex(0)}\r\n disabled={!table.getCanPreviousPage()}\r\n aria-label=\"First page\"\r\n >\r\n <ChevronsLeft className=\"w-3.5 h-3.5\" />\r\n </button>\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.previousPage()}\r\n disabled={!table.getCanPreviousPage()}\r\n aria-label=\"Previous page\"\r\n >\r\n <ChevronLeft className=\"w-3.5 h-3.5\" />\r\n </button>\r\n\r\n <span className=\"text-xs font-medium px-2.5 py-1 bg-background border border-border rounded shrink-0 min-w-14 text-center text-foreground\">\r\n {currentPageIndex + 1} / {totalPageCount}\r\n </span>\r\n\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.nextPage()}\r\n disabled={!table.getCanNextPage()}\r\n aria-label=\"Next page\"\r\n >\r\n <ChevronRight className=\"w-3.5 h-3.5\" />\r\n </button>\r\n <button\r\n className=\"p-1 rounded border border-border text-muted-foreground bg-background hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\r\n onClick={() => table.setPageIndex(totalPageCount - 1)}\r\n disabled={!table.getCanNextPage()}\r\n aria-label=\"Last page\"\r\n >\r\n <ChevronsRight className=\"w-3.5 h-3.5\" />\r\n </button>\r\n </div>\r\n\r\n {/* Go to page */}\r\n <div className=\"flex items-center gap-1.5 text-xs text-muted-foreground border-l border-border pl-2 ml-1 shrink-0\">\r\n <span className=\"hidden sm:inline\">{labels?.page ?? 'Page'}</span>\r\n <input\r\n type=\"number\"\r\n min={1}\r\n max={totalPageCount}\r\n value={inputValue}\r\n onChange={e => {\r\n const val = e.target.value;\r\n setInputValue(val);\r\n const p = val ? Number(val) - 1 : 0;\r\n if (val && p >= 0 && p < totalPageCount) {\r\n table.setPageIndex(p);\r\n }\r\n }}\r\n onBlur={() => setInputValue(currentPageIndex + 1)}\r\n className=\"w-10 px-1 py-1 text-xs border border-border rounded bg-background text-foreground text-center outline-none focus:border-primary focus:ring-1 focus:ring-primary\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n"
|
|
733
824
|
}
|
|
734
825
|
]
|
|
735
826
|
},
|
|
@@ -740,7 +831,7 @@
|
|
|
740
831
|
"files": [
|
|
741
832
|
{
|
|
742
833
|
"path": "src/components/ui/table-contents/TableContents.tsx",
|
|
743
|
-
"content": "import * as React from 'react';\nimport { cn } from '@/lib/utils/cn';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\nexport type TocItem = {\n id: string;\n label: string;\n level?: 1 | 2 | 3;\n};\n\nexport interface TableContentsProps {\n items: TocItem[];\n /** Offset (px) từ top khi scroll — dành cho sticky header */\n offset?: number;\n /** Title hiển thị trên danh sách */\n title?: string;\n className?: string;\n}\n\n// ─── Helper: tìm scrollable ancestor gần nhất ────────────────────────────────\nfunction getScrollParent(el: HTMLElement | null): HTMLElement | null {\n let node = el?.parentElement ?? null;\n while (node && node !== document.body) {\n const { overflow, overflowY } = getComputedStyle(node);\n if (/auto|scroll/.test(overflow + overflowY)) return node;\n node = node.parentElement;\n }\n return null;\n}\n\n// ─── Hook: theo dõi section đang active qua IntersectionObserver ──────────────\nfunction useActiveSection(ids: string[], offset: number): string {\n const [activeId, setActiveId] = React.useState('');\n\n React.useEffect(() => {\n if (!ids.length) return;\n\n // Dùng scrollable container làm root để rootMargin hoạt động đúng\n const firstEl = document.getElementById(ids[0]);\n const root = firstEl ? getScrollParent(firstEl) : null;\n\n const observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n setActiveId(entry.target.id);\n break;\n }\n }\n },\n { root, rootMargin: `-${offset + 8}px 0px -70% 0px`, threshold: 0 },\n );\n\n ids.forEach((id) => {\n const el = document.getElementById(id);\n if (el) observer.observe(el);\n });\n\n return () => observer.disconnect();\n }, [ids, offset]);\n\n return activeId;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\nexport const TableContents: React.FC<TableContentsProps> = ({\n items,\n offset = 80,\n title = 'Trên trang này',\n className,\n}) => {\n const ids = React.useMemo(() => items.map((i) => i.id), [items]);\n const activeId = useActiveSection(ids, offset);\n\n const scrollTo = (id: string) => {\n const el = document.getElementById(id);\n if (!el) return;\n\n const container = getScrollParent(el);\n if (!container) {\n // Fallback: window scroll\n window.scrollTo({\n top: el.getBoundingClientRect().top + window.scrollY - offset,\n behavior: 'smooth',\n });\n return;\n }\n\n const top =\n el.getBoundingClientRect().top -\n container.getBoundingClientRect().top +\n container.scrollTop -\n offset;\n container.scrollTo({ top, behavior: 'smooth' });\n };\n\n return (\n <nav className={cn('select-none', className)} aria-label=\"Table of contents\">\n {title && (\n <p className=\"mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground\">\n {title}\n </p>\n )}\n\n <ul className=\"space-y-0.5 border-l border-border\">\n {items.map((item) => {\n const level = item.level ?? 1;\n const isActive = activeId === item.id;\n\n return (\n <li key={item.id}>\n <button\n onClick={() => scrollTo(item.id)}\n className={cn(\n 'block w-full text-left text-sm leading-5 transition-all duration-150',\n 'py-1 pr-2 hover:text-foreground',\n // Indentation theo level\n level === 1 && 'pl-3 font-medium',\n level === 2 && 'pl-5 font-normal',\n level === 3 && 'pl-8 font-normal text-xs',\n // Border left indicator\n isActive\n ? '-ml-px border-l-2 border-primary pl-[calc(theme(spacing.3)-1px)] text-primary'\n : 'text-muted-foreground',\n level === 2 && isActive && 'pl-[calc(theme(spacing.5)-1px)]',\n level === 3 && isActive && 'pl-[calc(theme(spacing.8)-1px)]',\n )}\n aria-current={isActive ? 'location' : undefined}\n >\n {item.label}\n </button>\n </li>\n );\n })}\n </ul>\n </nav>\n );\n};\n\nexport default TableContents;\n"
|
|
834
|
+
"content": "import * as React from 'react';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\nexport type TocItem = {\r\n id: string;\r\n label: string;\r\n level?: 1 | 2 | 3;\r\n};\r\n\r\nexport interface TableContentsProps {\r\n items: TocItem[];\r\n /** Offset (px) từ top khi scroll — dành cho sticky header */\r\n offset?: number;\r\n /** Title hiển thị trên danh sách */\r\n title?: string;\r\n className?: string;\r\n}\r\n\r\n// ─── Helper: tìm scrollable ancestor gần nhất ────────────────────────────────\r\nfunction getScrollParent(el: HTMLElement | null): HTMLElement | null {\r\n let node = el?.parentElement ?? null;\r\n while (node && node !== document.body) {\r\n const { overflow, overflowY } = getComputedStyle(node);\r\n if (/auto|scroll/.test(overflow + overflowY)) return node;\r\n node = node.parentElement;\r\n }\r\n return null;\r\n}\r\n\r\n// ─── Hook: theo dõi section đang active qua IntersectionObserver ──────────────\r\nfunction useActiveSection(ids: string[], offset: number): string {\r\n const [activeId, setActiveId] = React.useState('');\r\n\r\n React.useEffect(() => {\r\n if (!ids.length) return;\r\n\r\n // Dùng scrollable container làm root để rootMargin hoạt động đúng\r\n const firstEl = document.getElementById(ids[0]);\r\n const root = firstEl ? getScrollParent(firstEl) : null;\r\n\r\n const observer = new IntersectionObserver(\r\n (entries) => {\r\n for (const entry of entries) {\r\n if (entry.isIntersecting) {\r\n setActiveId(entry.target.id);\r\n break;\r\n }\r\n }\r\n },\r\n { root, rootMargin: `-${offset + 8}px 0px -70% 0px`, threshold: 0 },\r\n );\r\n\r\n ids.forEach((id) => {\r\n const el = document.getElementById(id);\r\n if (el) observer.observe(el);\r\n });\r\n\r\n return () => observer.disconnect();\r\n }, [ids, offset]);\r\n\r\n return activeId;\r\n}\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\nexport const TableContents: React.FC<TableContentsProps> = ({\r\n items,\r\n offset = 80,\r\n title = 'Trên trang này',\r\n className,\r\n}) => {\r\n const ids = React.useMemo(() => items.map((i) => i.id), [items]);\r\n const activeId = useActiveSection(ids, offset);\r\n\r\n const scrollTo = (id: string) => {\r\n const el = document.getElementById(id);\r\n if (!el) return;\r\n\r\n const container = getScrollParent(el);\r\n if (!container) {\r\n // Fallback: window scroll\r\n window.scrollTo({\r\n top: el.getBoundingClientRect().top + window.scrollY - offset,\r\n behavior: 'smooth',\r\n });\r\n return;\r\n }\r\n\r\n const top =\r\n el.getBoundingClientRect().top -\r\n container.getBoundingClientRect().top +\r\n container.scrollTop -\r\n offset;\r\n container.scrollTo({ top, behavior: 'smooth' });\r\n };\r\n\r\n return (\r\n <nav className={cn('select-none', className)} aria-label=\"Table of contents\">\r\n {title && (\r\n <p className=\"mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground\">\r\n {title}\r\n </p>\r\n )}\r\n\r\n <ul className=\"space-y-0.5 border-l border-border\">\r\n {items.map((item) => {\r\n const level = item.level ?? 1;\r\n const isActive = activeId === item.id;\r\n\r\n return (\r\n <li key={item.id}>\r\n <button\r\n onClick={() => scrollTo(item.id)}\r\n className={cn(\r\n 'block w-full text-left text-sm leading-5 transition-all duration-150',\r\n 'py-1 pr-2 hover:text-foreground',\r\n // Indentation theo level\r\n level === 1 && 'pl-3 font-medium',\r\n level === 2 && 'pl-5 font-normal',\r\n level === 3 && 'pl-8 font-normal text-xs',\r\n // Border left indicator\r\n isActive\r\n ? '-ml-px border-l-2 border-primary pl-[calc(theme(spacing.3)-1px)] text-primary'\r\n : 'text-muted-foreground',\r\n level === 2 && isActive && 'pl-[calc(theme(spacing.5)-1px)]',\r\n level === 3 && isActive && 'pl-[calc(theme(spacing.8)-1px)]',\r\n )}\r\n aria-current={isActive ? 'location' : undefined}\r\n >\r\n {item.label}\r\n </button>\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n </nav>\r\n );\r\n};\r\n\r\nexport default TableContents;\r\n"
|
|
744
835
|
}
|
|
745
836
|
]
|
|
746
837
|
},
|
|
@@ -768,7 +859,20 @@
|
|
|
768
859
|
"files": [
|
|
769
860
|
{
|
|
770
861
|
"path": "src/components/ui/textarea/Textarea.tsx",
|
|
771
|
-
"content": "import * as React from 'react';\r\nimport { Field as BaseField } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst textareaVariants = tv({\r\n base: 'flex min-h-[80px] w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:border-primary focus:ring-0 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-shadow',\r\n variants: {\r\n variant: {\r\n default: '',\r\n filled: 'bg-accent border-transparent focus-visible:border-primary focus-visible:ring-0',\r\n }\r\n },\r\n defaultVariants: {\r\n variant: 'default'\r\n }\r\n});\r\n\r\n/** Props for the Textarea component */\r\nexport interface TextareaProps\r\n extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\r\n VariantProps<typeof textareaVariants> {\r\n /** Label text displayed above the textarea */\r\n label?: string;\r\n /** Error message displayed below the textarea (replaces description) */\r\n error?: string;\r\n /** Helper text displayed below the textarea */\r\n description?: string;\r\n}\r\n\r\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n ({ className, variant, label, error, description,
|
|
862
|
+
"content": "import * as React from 'react';\r\nimport { Field as BaseField } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst textareaVariants = tv({\r\n base: 'flex min-h-[80px] w-full rounded-lg border border-border bg-background px-3 py-2 text-sm focus:border-primary focus:ring-0 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-shadow',\r\n variants: {\r\n variant: {\r\n default: '',\r\n filled: 'bg-accent border-transparent focus-visible:border-primary focus-visible:ring-0',\r\n }\r\n },\r\n defaultVariants: {\r\n variant: 'default'\r\n }\r\n});\r\n\r\n/** Props for the Textarea component */\r\nexport interface TextareaProps\r\n extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\r\n VariantProps<typeof textareaVariants> {\r\n /** Label text displayed above the textarea */\r\n label?: string;\r\n /** Error message displayed below the textarea (replaces description) */\r\n error?: string;\r\n /** Helper text displayed below the textarea */\r\n description?: string;\r\n}\r\n\r\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n ({ className, variant, label, error, description, ...props }, ref) => {\r\n return (\r\n <BaseField.Root className=\"flex flex-col gap-1.5 w-full\">\r\n {label && (\r\n <BaseField.Label className=\"text-sm font-medium text-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\r\n {label}\r\n </BaseField.Label>\r\n )}\r\n\r\n <BaseField.Control render={\r\n <textarea\r\n ref={ref}\r\n className={cn(\r\n textareaVariants({ variant }),\r\n error && 'border-danger focus-visible:ring-danger',\r\n className\r\n )}\r\n {...props}\r\n />\r\n } />\r\n \r\n {description && !error && (\r\n <BaseField.Description className=\"text-[0.8rem] text-muted-foreground\">\r\n {description}\r\n </BaseField.Description>\r\n )}\r\n {error && (\r\n <p className=\"text-[0.8rem] font-medium text-danger\">\r\n {error}\r\n </p>\r\n )}\r\n </BaseField.Root>\r\n );\r\n }\r\n);\r\nTextarea.displayName = 'Textarea';\r\n\r\nexport { Textarea };\r\n"
|
|
863
|
+
}
|
|
864
|
+
]
|
|
865
|
+
},
|
|
866
|
+
"timeline": {
|
|
867
|
+
"name": "timeline",
|
|
868
|
+
"dependencies": [
|
|
869
|
+
"tailwind-variants"
|
|
870
|
+
],
|
|
871
|
+
"internalDependencies": [],
|
|
872
|
+
"files": [
|
|
873
|
+
{
|
|
874
|
+
"path": "src/components/ui/timeline/Timeline.tsx",
|
|
875
|
+
"content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\n// ─── Variants ────────────────────────────────────────────────────────────────\r\n\r\nconst timelineVariants = tv({\r\n slots: {\r\n root: 'relative flex flex-col',\r\n item: 'relative flex gap-4 pb-8 last:pb-0',\r\n indicator: [\r\n 'relative z-10 flex shrink-0 items-center justify-center rounded-full',\r\n 'border-2 border-background bg-muted ring-2 ring-background',\r\n ].join(' '),\r\n connector: 'absolute left-0 top-0 bottom-0 flex justify-center',\r\n connectorLine: 'w-px bg-border',\r\n content: 'flex-1 pt-0.5',\r\n title: 'text-sm font-semibold text-foreground leading-none',\r\n description: 'mt-1 text-sm text-muted-foreground leading-relaxed',\r\n time: 'mt-1.5 text-xs text-muted-foreground/70',\r\n },\r\n variants: {\r\n size: {\r\n sm: {\r\n indicator: 'h-6 w-6 [&_svg]:h-3 [&_svg]:w-3',\r\n connector: 'w-6',\r\n },\r\n md: {\r\n indicator: 'h-8 w-8 [&_svg]:h-4 [&_svg]:w-4',\r\n connector: 'w-8',\r\n },\r\n lg: {\r\n indicator: 'h-10 w-10 [&_svg]:h-5 [&_svg]:w-5',\r\n connector: 'w-10',\r\n },\r\n },\r\n variant: {\r\n default: { indicator: 'bg-muted text-muted-foreground' },\r\n primary: { indicator: 'bg-primary/15 text-primary border-primary/30' },\r\n success: { indicator: 'bg-success/15 text-success border-success/30' },\r\n warning: { indicator: 'bg-warning/15 text-warning border-warning/30' },\r\n danger: { indicator: 'bg-danger/15 text-danger border-danger/30' },\r\n },\r\n },\r\n defaultVariants: {\r\n size: 'md',\r\n variant: 'default',\r\n },\r\n});\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport interface TimelineItemData {\r\n title: string;\r\n description?: string;\r\n time?: string;\r\n icon?: React.ReactNode;\r\n variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\r\n}\r\n\r\nexport interface TimelineProps extends VariantProps<typeof timelineVariants> {\r\n items: TimelineItemData[];\r\n className?: string;\r\n}\r\n\r\n// ─── Component ───────────────────────────────────────────────────────────────\r\n\r\nconst Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(\r\n ({ items, size = 'md', variant: defaultVariant = 'default', className }, ref) => {\r\n const styles = timelineVariants({ size });\r\n\r\n return (\r\n <div ref={ref} className={cn(styles.root(), className)} role=\"list\">\r\n {items.map((item, index) => {\r\n const itemVariant = item.variant ?? defaultVariant;\r\n const itemStyles = timelineVariants({ size, variant: itemVariant });\r\n const isLast = index === items.length - 1;\r\n\r\n return (\r\n <div key={index} className={styles.item()} role=\"listitem\">\r\n {/* Connector line */}\r\n {!isLast && (\r\n <div className={styles.connector()}>\r\n <div className={cn(styles.connectorLine(), 'mt-8')} />\r\n </div>\r\n )}\r\n\r\n {/* Indicator dot */}\r\n <div className={itemStyles.indicator()}>\r\n {item.icon}\r\n </div>\r\n\r\n {/* Content */}\r\n <div className={styles.content()}>\r\n <p className={styles.title()}>{item.title}</p>\r\n {item.description && (\r\n <p className={styles.description()}>{item.description}</p>\r\n )}\r\n {item.time && (\r\n <p className={styles.time()}>{item.time}</p>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n );\r\n },\r\n);\r\n\r\nTimeline.displayName = 'Timeline';\r\n\r\nexport { Timeline, timelineVariants };\r\n"
|
|
772
876
|
}
|
|
773
877
|
]
|
|
774
878
|
},
|
|
@@ -808,7 +912,22 @@
|
|
|
808
912
|
"files": [
|
|
809
913
|
{
|
|
810
914
|
"path": "src/components/ui/tooltip/Tooltip.tsx",
|
|
811
|
-
"content": "'use client';\
|
|
915
|
+
"content": "'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react';\nimport { tv } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\n\nconst tooltipVariants = tv({\n slots: {\n popup: 'z-50 overflow-hidden rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2',\n arrow: 'fill-popover',\n },\n});\n\nconst { popup, arrow } = tooltipVariants();\n\n// ─── Compound Components ─────────────────────────────────────────────────────\n\n/** Wrap multiple Tooltip instances in a shared provider for better performance */\nconst TooltipProvider = BaseTooltip.Provider;\n\nconst Tooltip = BaseTooltip.Root;\n\nconst TooltipTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentPropsWithoutRef<typeof BaseTooltip.Trigger>\n>(({ children, render, ...props }, ref) => (\n <BaseTooltip.Trigger\n ref={ref}\n render={render ?? (React.isValidElement(children) ? children : undefined)}\n {...props}\n >\n {React.isValidElement(children) ? undefined : children}\n </BaseTooltip.Trigger>\n));\nTooltipTrigger.displayName = 'TooltipTrigger';\n\nexport interface TooltipContentProps\n extends React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup> {\n /** Side offset from the trigger (default: 4) */\n sideOffset?: number;\n /** Side to display the tooltip (default: 'top') */\n side?: 'top' | 'right' | 'bottom' | 'left';\n /** Alignment relative to the trigger (default: 'center') */\n align?: 'start' | 'center' | 'end';\n /** Show the arrow indicator */\n showArrow?: boolean;\n}\n\nconst TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(\n ({ className, sideOffset = 4, side = 'top', align = 'center', showArrow = true, children, ...props }, ref) => (\n <BaseTooltip.Portal>\n <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset}>\n <BaseTooltip.Popup ref={ref} className={cn(popup(), className)} role=\"tooltip\" {...props}>\n {showArrow && <BaseTooltip.Arrow className={arrow()} />}\n {children}\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n </BaseTooltip.Portal>\n )\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, tooltipVariants };\n"
|
|
916
|
+
}
|
|
917
|
+
]
|
|
918
|
+
},
|
|
919
|
+
"tree-view": {
|
|
920
|
+
"name": "tree-view",
|
|
921
|
+
"dependencies": [
|
|
922
|
+
"@base-ui/react",
|
|
923
|
+
"tailwind-variants",
|
|
924
|
+
"lucide-react"
|
|
925
|
+
],
|
|
926
|
+
"internalDependencies": [],
|
|
927
|
+
"files": [
|
|
928
|
+
{
|
|
929
|
+
"path": "src/components/ui/tree-view/TreeView.tsx",
|
|
930
|
+
"content": "import * as React from 'react';\r\nimport { Collapsible } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { ChevronRight, FileIcon, FolderIcon, FolderOpen } from 'lucide-react';\r\n\r\n// ─── Variants ────────────────────────────────────────────────────────────────\r\n\r\nconst treeViewVariants = tv({\r\n slots: {\r\n root: 'flex flex-col text-sm',\r\n item: [\r\n 'flex items-center gap-1.5 rounded-md px-2 py-1.5 cursor-pointer',\r\n 'transition-colors hover:bg-muted/50',\r\n 'outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset',\r\n ].join(' '),\r\n itemActive: 'bg-primary/10 text-primary hover:bg-primary/15',\r\n chevron: 'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200',\r\n chevronOpen: 'rotate-90',\r\n icon: 'h-4 w-4 shrink-0 text-muted-foreground',\r\n label: 'truncate select-none',\r\n children: 'pl-4',\r\n },\r\n});\r\n\r\nconst styles = treeViewVariants();\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport interface TreeNode {\r\n id: string;\r\n label: string;\r\n icon?: React.ReactNode;\r\n children?: TreeNode[];\r\n disabled?: boolean;\r\n}\r\n\r\nexport interface TreeViewProps {\r\n data: TreeNode[];\r\n /** Currently selected node id */\r\n selectedId?: string;\r\n /** Called when a node is selected */\r\n onSelect?: (id: string) => void;\r\n /** Default expanded node ids */\r\n defaultExpanded?: string[];\r\n className?: string;\r\n}\r\n\r\n// ─── TreeItem (recursive) ──────────────────────────────────────���─────────────\r\n\r\ninterface TreeItemProps {\r\n node: TreeNode;\r\n level: number;\r\n selectedId?: string;\r\n onSelect?: (id: string) => void;\r\n expandedSet: Set<string>;\r\n toggleExpanded: (id: string) => void;\r\n}\r\n\r\nfunction TreeItem({ node, level, selectedId, onSelect, expandedSet, toggleExpanded }: TreeItemProps) {\r\n const hasChildren = node.children && node.children.length > 0;\r\n const isExpanded = expandedSet.has(node.id);\r\n const isSelected = selectedId === node.id;\r\n\r\n const handleClick = () => {\r\n if (node.disabled) return;\r\n if (hasChildren) {\r\n toggleExpanded(node.id);\r\n }\r\n onSelect?.(node.id);\r\n };\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n handleClick();\r\n }\r\n if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\r\n e.preventDefault();\r\n toggleExpanded(node.id);\r\n }\r\n if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\r\n e.preventDefault();\r\n toggleExpanded(node.id);\r\n }\r\n };\r\n\r\n const defaultIcon = hasChildren\r\n ? (isExpanded ? <FolderOpen className={styles.icon()} /> : <FolderIcon className={styles.icon()} />)\r\n : <FileIcon className={styles.icon()} />;\r\n\r\n return (\r\n <div role=\"treeitem\" aria-expanded={hasChildren ? isExpanded : undefined} aria-selected={isSelected}>\r\n <div\r\n className={cn(\r\n styles.item(),\r\n isSelected && styles.itemActive(),\r\n node.disabled && 'opacity-50 pointer-events-none',\r\n )}\r\n style={{ paddingLeft: `${level * 16 + 8}px` }}\r\n tabIndex={node.disabled ? undefined : 0}\r\n onClick={handleClick}\r\n onKeyDown={handleKeyDown}\r\n >\r\n {hasChildren ? (\r\n <ChevronRight className={cn(styles.chevron(), isExpanded && styles.chevronOpen())} />\r\n ) : (\r\n <span className=\"w-4 shrink-0\" />\r\n )}\r\n\r\n {node.icon ?? defaultIcon}\r\n <span className={styles.label()}>{node.label}</span>\r\n </div>\r\n\r\n {hasChildren && isExpanded && (\r\n <div role=\"group\">\r\n {node.children!.map((child) => (\r\n <TreeItem\r\n key={child.id}\r\n node={child}\r\n level={level + 1}\r\n selectedId={selectedId}\r\n onSelect={onSelect}\r\n expandedSet={expandedSet}\r\n toggleExpanded={toggleExpanded}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\n// ─── TreeView ────────────────────────────────────────────────────────────────\r\n\r\nconst TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(\r\n ({ data, selectedId, onSelect, defaultExpanded = [], className }, ref) => {\r\n const [expandedSet, setExpandedSet] = React.useState<Set<string>>(\r\n () => new Set(defaultExpanded),\r\n );\r\n\r\n const toggleExpanded = React.useCallback((id: string) => {\r\n setExpandedSet((prev) => {\r\n const next = new Set(prev);\r\n if (next.has(id)) {\r\n next.delete(id);\r\n } else {\r\n next.add(id);\r\n }\r\n return next;\r\n });\r\n }, []);\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"tree\"\r\n aria-label=\"Tree view\"\r\n className={cn(styles.root(), className)}\r\n >\r\n {data.map((node) => (\r\n <TreeItem\r\n key={node.id}\r\n node={node}\r\n level={0}\r\n selectedId={selectedId}\r\n onSelect={onSelect}\r\n expandedSet={expandedSet}\r\n toggleExpanded={toggleExpanded}\r\n />\r\n ))}\r\n </div>\r\n );\r\n },\r\n);\r\n\r\nTreeView.displayName = 'TreeView';\r\n\r\nexport { TreeView, treeViewVariants };\r\n"
|
|
812
931
|
}
|
|
813
932
|
]
|
|
814
933
|
},
|
|
@@ -822,7 +941,7 @@
|
|
|
822
941
|
"files": [
|
|
823
942
|
{
|
|
824
943
|
"path": "src/components/ui/typography/Typography.tsx",
|
|
825
|
-
"content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { Copy, Check, ExternalLink } from 'lucide-react';\r\n\r\n// ─── Shared text style variants ───────────────────────────────────────────────\r\n\r\nconst textVariants = tv({\r\n base: '',\r\n variants: {\r\n size: {\r\n xs: 'text-xs',\r\n sm: 'text-sm',\r\n md: 'text-base',\r\n lg: 'text-lg',\r\n xl: 'text-xl',\r\n '2xl': 'text-2xl',\r\n '3xl': 'text-3xl',\r\n },\r\n weight: {\r\n thin: 'font-thin',\r\n light: 'font-light',\r\n normal: 'font-normal',\r\n medium: 'font-medium',\r\n semibold: 'font-semibold',\r\n bold: 'font-bold',\r\n extrabold: 'font-extrabold',\r\n },\r\n color: {\r\n default: 'text-foreground',\r\n muted: 'text-muted-foreground',\r\n primary: 'text-primary',\r\n success: 'text-success',\r\n warning: 'text-warning',\r\n danger: 'text-danger',\r\n inherit: 'text-inherit',\r\n },\r\n align: {\r\n left: 'text-left',\r\n center: 'text-center',\r\n right: 'text-right',\r\n justify: 'text-justify',\r\n },\r\n leading: {\r\n none: 'leading-none',\r\n tight: 'leading-tight',\r\n normal: 'leading-normal',\r\n relaxed: 'leading-relaxed',\r\n loose: 'leading-loose',\r\n },\r\n tracking: {\r\n tighter: 'tracking-tighter',\r\n tight: 'tracking-tight',\r\n normal: 'tracking-normal',\r\n wide: 'tracking-wide',\r\n widest: 'tracking-widest',\r\n },\r\n },\r\n defaultVariants: {\r\n color: 'default',\r\n },\r\n});\r\n\r\n// ─── useCopy hook ─────────────────────────────────────────────────────────────\r\n\r\nfunction useCopy() {\r\n const [copied, setCopied] = React.useState(false);\r\n const copy = React.useCallback(async (text: string) => {\r\n try {\r\n await navigator.clipboard.writeText(text);\r\n setCopied(true);\r\n setTimeout(() => setCopied(false), 2000);\r\n } catch { /* noop */ }\r\n }, []);\r\n return { copied, copy };\r\n}\r\n\r\n// ─── Text ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface TextProps\r\n extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\r\n VariantProps<typeof textVariants> {\r\n /** HTML tag to render — default `span` */\r\n as?: React.ElementType;\r\n /** Bold */\r\n strong?: boolean;\r\n /** Italic */\r\n italic?: boolean;\r\n /** Underline */\r\n underline?: boolean;\r\n /** Strikethrough */\r\n strikethrough?: boolean;\r\n /** Gradient text (primary → indigo) */\r\n gradient?: boolean;\r\n /** Highlighted mark background */\r\n mark?: boolean;\r\n /** Single-line truncate with ellipsis */\r\n truncate?: boolean;\r\n /** Multi-line clamp (number of lines) */\r\n lines?: 1 | 2 | 3 | 4 | 5;\r\n /** Tabular numbers — fixed-width digits */\r\n numeric?: boolean;\r\n /** Inline code styling */\r\n code?: boolean;\r\n /** Show copy icon on hover, copies text content on click */\r\n copyable?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst LINES_MAP: Record<number, string> = {\r\n 1: 'line-clamp-1',\r\n 2: 'line-clamp-2',\r\n 3: 'line-clamp-3',\r\n 4: 'line-clamp-4',\r\n 5: 'line-clamp-5',\r\n};\r\n\r\nconst Text = React.forwardRef<HTMLElement, TextProps>(\r\n (\r\n {\r\n as: Tag = 'span',\r\n size,\r\n weight,\r\n color,\r\n align,\r\n leading,\r\n tracking,\r\n strong,\r\n italic,\r\n underline,\r\n strikethrough,\r\n gradient,\r\n mark,\r\n truncate,\r\n lines,\r\n numeric,\r\n code,\r\n copyable,\r\n className,\r\n children,\r\n onClick,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const { copied, copy } = useCopy();\r\n const elRef = React.useRef<HTMLElement>(null);\r\n const mergedRef = (node: HTMLElement | null) => {\r\n (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\r\n };\r\n\r\n const handleClick = (e: React.MouseEvent<HTMLElement>) => {\r\n if (copyable && elRef.current) {\r\n copy(elRef.current.innerText);\r\n }\r\n onClick?.(e);\r\n };\r\n\r\n return (\r\n <Tag\r\n ref={mergedRef}\r\n className={cn(\r\n textVariants({ size, weight, color, align, leading, tracking }),\r\n strong && 'font-bold',\r\n italic && 'italic',\r\n underline && 'underline underline-offset-2',\r\n strikethrough && 'line-through',\r\n gradient && 'bg-gradient-to-r from-primary to-indigo-500 bg-clip-text text-transparent',\r\n mark && 'bg-warning/20 text-warning-foreground rounded px-0.5',\r\n truncate && 'block max-w-full truncate',\r\n lines && cn('block', LINES_MAP[lines]),\r\n numeric && 'tabular-nums',\r\n code && 'font-mono text-[0.9em] bg-muted rounded px-1 py-0.5 border border-border/50',\r\n copyable && 'cursor-pointer group/copy inline-flex items-center gap-1.5',\r\n className,\r\n )}\r\n onClick={handleClick}\r\n {...props}\r\n >\r\n {children}\r\n {copyable && (\r\n <span className=\"opacity-0 group-hover/copy:opacity-60 transition-opacity shrink-0\">\r\n {copied\r\n ? <Check className=\"w-3.5 h-3.5 text-success\" />\r\n : <Copy className=\"w-3.5 h-3.5\" />\r\n }\r\n </span>\r\n )}\r\n </Tag>\r\n );\r\n }\r\n);\r\nText.displayName = 'Text';\r\n\r\n// ─── Heading ──────────────────────────────────────────────────────────────────\r\n\r\nconst HEADING_SIZE: Record<1 | 2 | 3 | 4 | 5 | 6, string> = {\r\n 1: 'text-4xl font-extrabold tracking-tight',\r\n 2: 'text-3xl font-bold tracking-tight',\r\n 3: 'text-2xl font-semibold tracking-tight',\r\n 4: 'text-xl font-semibold',\r\n 5: 'text-lg font-medium',\r\n 6: 'text-base font-medium',\r\n};\r\n\r\nexport interface HeadingProps\r\n extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,\r\n VariantProps<typeof textVariants> {\r\n /** Heading level 1–6, also sets default size (default: 2) */\r\n level?: 1 | 2 | 3 | 4 | 5 | 6;\r\n /** Show copy icon on hover */\r\n copyable?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\r\n ({ level = 2, size, weight, color = 'default', align, className, copyable, children, ...props }, ref) => {\r\n const Tag = `h${level}` as React.ElementType;\r\n const { copied, copy } = useCopy();\r\n const elRef = React.useRef<HTMLHeadingElement>(null);\r\n const mergedRef = (node: HTMLHeadingElement | null) => {\r\n (elRef as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\r\n };\r\n\r\n return (\r\n <Tag\r\n ref={mergedRef}\r\n className={cn(\r\n HEADING_SIZE[level],\r\n textVariants({ size, weight, color, align }),\r\n copyable && 'cursor-pointer group/copy inline-flex items-center gap-2',\r\n className,\r\n )}\r\n onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\r\n {...props}\r\n >\r\n {children}\r\n {copyable && (\r\n <span className=\"opacity-0 group-hover/copy:opacity-50 transition-opacity shrink-0\">\r\n {copied\r\n ? <Check className=\"w-4 h-4 text-success\" />\r\n : <Copy className=\"w-4 h-4\" />\r\n }\r\n </span>\r\n )}\r\n </Tag>\r\n );\r\n }\r\n);\r\nHeading.displayName = 'Heading';\r\n\r\n// ─── Paragraph ────────────────────────────────────────────────────────────────\r\n\r\nexport interface ParagraphProps\r\n extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'color'>,\r\n VariantProps<typeof textVariants> {\r\n /** Larger intro-text styling */\r\n lead?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(\r\n ({ lead, size, weight, color = 'default', align, leading = 'relaxed', className, children, ...props }, ref) => (\r\n <p\r\n ref={ref}\r\n className={cn(\r\n textVariants({ size, weight, color, align, leading }),\r\n lead && 'text-xl text-muted-foreground',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n )\r\n);\r\nParagraph.displayName = 'Paragraph';\r\n\r\n// ─── Lead ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface LeadProps extends React.HTMLAttributes<HTMLParagraphElement> {\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Lead = React.forwardRef<HTMLParagraphElement, LeadProps>(\r\n ({ className, children, ...props }, ref) => (\r\n <p\r\n ref={ref}\r\n className={cn('text-xl text-muted-foreground leading-relaxed', className)}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n )\r\n);\r\nLead.displayName = 'Lead';\r\n\r\n// ─── Blockquote ───────────────────────────────────────────────────────────────\r\n\r\nexport interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {\r\n /** Citation source text shown below the quote */\r\n cite?: string;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Blockquote = React.forwardRef<HTMLQuoteElement, BlockquoteProps>(\r\n ({ cite, className, children, ...props }, ref) => (\r\n <figure className=\"my-1\">\r\n <blockquote\r\n ref={ref}\r\n className={cn(\r\n 'border-l-4 border-primary pl-4 py-1 italic text-muted-foreground leading-relaxed',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </blockquote>\r\n {cite && (\r\n <figcaption className=\"mt-2 pl-4 text-sm text-muted-foreground/70 not-italic\">\r\n — {cite}\r\n </figcaption>\r\n )}\r\n </figure>\r\n )\r\n);\r\nBlockquote.displayName = 'Blockquote';\r\n\r\n// ─── Code (inline) ────────────────────────────────────────────────────────────\r\n\r\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\r\n /** Copy content on click */\r\n copyable?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Code = React.forwardRef<HTMLElement, CodeProps>(\r\n ({ copyable, className, children, ...props }, ref) => {\r\n const { copied, copy } = useCopy();\r\n const elRef = React.useRef<HTMLElement>(null);\r\n const mergedRef = (node: HTMLElement | null) => {\r\n (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\r\n };\r\n\r\n return (\r\n <code\r\n ref={mergedRef}\r\n onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\r\n className={cn(\r\n 'font-mono text-[0.875em] bg-muted text-foreground rounded px-1.5 py-0.5 border border-border/50',\r\n copyable && 'cursor-pointer hover:bg-muted/70 transition-colors group/code inline-flex items-center gap-1',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {copyable && (\r\n <span className=\"opacity-0 group-hover/code:opacity-60 transition-opacity\">\r\n {copied\r\n ? <Check className=\"w-3 h-3 text-success inline\" />\r\n : <Copy className=\"w-3 h-3 inline\" />\r\n }\r\n </span>\r\n )}\r\n </code>\r\n );\r\n }\r\n);\r\nCode.displayName = 'Code';\r\n\r\n// ─── Kbd ──────────────────────────────────────────────────────────────────────\r\n\r\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\r\n /** Array of keys to display; joined with `+` separator */\r\n keys?: string[];\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst KbdKey = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { className?: string }>(\r\n ({ className, children, ...props }, ref) => (\r\n <kbd\r\n ref={ref as React.Ref<HTMLElement>}\r\n className={cn(\r\n 'inline-flex items-center justify-center h-6 min-w-[1.5rem] px-1.5',\r\n 'font-mono text-xs font-medium',\r\n 'bg-background border border-border rounded shadow-[0_2px_0_0_hsl(var(--border))]',\r\n 'text-muted-foreground',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </kbd>\r\n )\r\n);\r\nKbdKey.displayName = 'KbdKey';\r\n\r\nconst Kbd = React.forwardRef<HTMLSpanElement, KbdProps>(\r\n ({ keys, className, children, ...props }, ref) => {\r\n const items = keys ?? (children ? [children] : []);\r\n\r\n return (\r\n <span ref={ref} className={cn('inline-flex items-center gap-0.5', className)} {...props}>\r\n {items.map((key, i) => (\r\n <React.Fragment key={i}>\r\n {i > 0 && <span className=\"text-[10px] text-muted-foreground/60 px-0.5\">+</span>}\r\n <KbdKey>{key}</KbdKey>\r\n </React.Fragment>\r\n ))}\r\n </span>\r\n );\r\n }\r\n);\r\nKbd.displayName = 'Kbd';\r\n\r\n// ─── Link ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n /** Open in new tab with rel=\"noopener noreferrer\" */\r\n external?: boolean;\r\n /** Underline behaviour — default `hover` */\r\n underline?: 'always' | 'hover' | 'none';\r\n /** Color variant */\r\n color?: 'primary' | 'muted' | 'danger' | 'foreground';\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\r\n ({ external, underline = 'hover', color = 'primary', className, children, ...props }, ref) => (\r\n <a\r\n ref={ref}\r\n target={external ? '_blank' : props.target}\r\n rel={external ? 'noopener noreferrer' : props.rel}\r\n className={cn(\r\n 'inline-flex items-center gap-0.5 transition-colors',\r\n color === 'primary' && 'text-primary',\r\n color === 'muted' && 'text-muted-foreground',\r\n color === 'danger' && 'text-danger',\r\n color === 'foreground' && 'text-foreground',\r\n underline === 'always' && 'underline underline-offset-2',\r\n underline === 'hover' && 'hover:underline underline-offset-2',\r\n underline === 'none' && 'no-underline',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {external && <ExternalLink className=\"w-3 h-3 shrink-0 opacity-70\" />}\r\n </a>\r\n )\r\n);\r\nLink.displayName = 'Link';\r\n\r\n// ─── Mark ─────────────────────────────────────────────────────────────────────\r\n\r\nconst markVariants = tv({\r\n base: 'rounded px-0.5 py-px font-medium',\r\n variants: {\r\n variant: {\r\n default: 'bg-warning/25 text-warning-foreground',\r\n primary: 'bg-primary/15 text-primary',\r\n success: 'bg-success/15 text-success',\r\n warning: 'bg-warning/25 text-warning-foreground',\r\n danger: 'bg-danger/15 text-danger',\r\n },\r\n },\r\n defaultVariants: { variant: 'default' },\r\n});\r\n\r\nexport interface MarkProps\r\n extends React.HTMLAttributes<HTMLElement>,\r\n VariantProps<typeof markVariants> {\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Mark = React.forwardRef<HTMLElement, MarkProps>(\r\n ({ variant, className, children, ...props }, ref) => (\r\n <mark\r\n ref={ref as React.Ref<HTMLElement>}\r\n className={markVariants({ variant, className })}\r\n {...props}\r\n >\r\n {children}\r\n </mark>\r\n )\r\n);\r\nMark.displayName = 'Mark';\r\n\r\n// ─── Exports ──────────────────────────────────────────────────────────────────\r\n\r\nexport {\r\n Text,\r\n Heading,\r\n Paragraph,\r\n Lead,\r\n Blockquote,\r\n Code,\r\n Kbd,\r\n KbdKey,\r\n Link,\r\n Mark,\r\n textVariants,\r\n markVariants,\r\n};\r\n"
|
|
944
|
+
"content": "import * as React from 'react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { Copy, Check, ExternalLink } from 'lucide-react';\r\nimport { useCopy } from '@/hooks/useCopy';\r\n\r\n// ─── Shared text style variants ───────────────────────────────────────────────\r\n\r\nconst textVariants = tv({\r\n base: '',\r\n variants: {\r\n size: {\r\n xs: 'text-xs',\r\n sm: 'text-sm',\r\n md: 'text-base',\r\n lg: 'text-lg',\r\n xl: 'text-xl',\r\n '2xl': 'text-2xl',\r\n '3xl': 'text-3xl',\r\n },\r\n weight: {\r\n thin: 'font-thin',\r\n light: 'font-light',\r\n normal: 'font-normal',\r\n medium: 'font-medium',\r\n semibold: 'font-semibold',\r\n bold: 'font-bold',\r\n extrabold: 'font-extrabold',\r\n },\r\n color: {\r\n default: 'text-foreground',\r\n muted: 'text-muted-foreground',\r\n primary: 'text-primary',\r\n success: 'text-success',\r\n warning: 'text-warning',\r\n danger: 'text-danger',\r\n inherit: 'text-inherit',\r\n },\r\n align: {\r\n left: 'text-left',\r\n center: 'text-center',\r\n right: 'text-right',\r\n justify: 'text-justify',\r\n },\r\n leading: {\r\n none: 'leading-none',\r\n tight: 'leading-tight',\r\n normal: 'leading-normal',\r\n relaxed: 'leading-relaxed',\r\n loose: 'leading-loose',\r\n },\r\n tracking: {\r\n tighter: 'tracking-tighter',\r\n tight: 'tracking-tight',\r\n normal: 'tracking-normal',\r\n wide: 'tracking-wide',\r\n widest: 'tracking-widest',\r\n },\r\n },\r\n defaultVariants: {\r\n color: 'default',\r\n },\r\n});\r\n\r\n// ─── Text ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface TextProps\r\n extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\r\n VariantProps<typeof textVariants> {\r\n /** HTML tag to render — default `span` */\r\n as?: React.ElementType;\r\n /** Bold */\r\n strong?: boolean;\r\n /** Italic */\r\n italic?: boolean;\r\n /** Underline */\r\n underline?: boolean;\r\n /** Strikethrough */\r\n strikethrough?: boolean;\r\n /** Gradient text (primary → indigo) */\r\n gradient?: boolean;\r\n /** Highlighted mark background */\r\n mark?: boolean;\r\n /** Single-line truncate with ellipsis */\r\n truncate?: boolean;\r\n /** Multi-line clamp (number of lines) */\r\n lines?: 1 | 2 | 3 | 4 | 5;\r\n /** Tabular numbers — fixed-width digits */\r\n numeric?: boolean;\r\n /** Inline code styling */\r\n code?: boolean;\r\n /** Show copy icon on hover, copies text content on click */\r\n copyable?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst LINES_MAP: Record<number, string> = {\r\n 1: 'line-clamp-1',\r\n 2: 'line-clamp-2',\r\n 3: 'line-clamp-3',\r\n 4: 'line-clamp-4',\r\n 5: 'line-clamp-5',\r\n};\r\n\r\nconst Text = React.forwardRef<HTMLElement, TextProps>(\r\n (\r\n {\r\n as: Tag = 'span',\r\n size,\r\n weight,\r\n color,\r\n align,\r\n leading,\r\n tracking,\r\n strong,\r\n italic,\r\n underline,\r\n strikethrough,\r\n gradient,\r\n mark,\r\n truncate,\r\n lines,\r\n numeric,\r\n code,\r\n copyable,\r\n className,\r\n children,\r\n onClick,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const { copied, copy } = useCopy();\r\n const elRef = React.useRef<HTMLElement>(null);\r\n const mergedRef = (node: HTMLElement | null) => {\r\n (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\r\n };\r\n\r\n const handleClick = (e: React.MouseEvent<HTMLElement>) => {\r\n if (copyable && elRef.current) {\r\n copy(elRef.current.innerText);\r\n }\r\n onClick?.(e);\r\n };\r\n\r\n return (\r\n <Tag\r\n ref={mergedRef}\r\n className={cn(\r\n textVariants({ size, weight, color, align, leading, tracking }),\r\n strong && 'font-bold',\r\n italic && 'italic',\r\n underline && 'underline underline-offset-2',\r\n strikethrough && 'line-through',\r\n gradient && 'bg-gradient-to-r from-primary to-indigo-500 bg-clip-text text-transparent',\r\n mark && 'bg-warning/20 text-warning-foreground rounded px-0.5',\r\n truncate && 'block max-w-full truncate',\r\n lines && cn('block', LINES_MAP[lines]),\r\n numeric && 'tabular-nums',\r\n code && 'font-mono text-[0.9em] bg-muted rounded px-1 py-0.5 border border-border/50',\r\n copyable && 'cursor-pointer group/copy inline-flex items-center gap-1.5',\r\n className,\r\n )}\r\n onClick={handleClick}\r\n {...props}\r\n >\r\n {children}\r\n {copyable && (\r\n <span className=\"opacity-0 group-hover/copy:opacity-60 transition-opacity shrink-0\">\r\n {copied\r\n ? <Check className=\"w-3.5 h-3.5 text-success\" />\r\n : <Copy className=\"w-3.5 h-3.5\" />\r\n }\r\n </span>\r\n )}\r\n </Tag>\r\n );\r\n }\r\n);\r\nText.displayName = 'Text';\r\n\r\n// ─── Heading ──────────────────────────────────────────────────────────────────\r\n\r\nconst HEADING_SIZE: Record<1 | 2 | 3 | 4 | 5 | 6, string> = {\r\n 1: 'text-4xl font-extrabold tracking-tight',\r\n 2: 'text-3xl font-bold tracking-tight',\r\n 3: 'text-2xl font-semibold tracking-tight',\r\n 4: 'text-xl font-semibold',\r\n 5: 'text-lg font-medium',\r\n 6: 'text-base font-medium',\r\n};\r\n\r\nexport interface HeadingProps\r\n extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,\r\n VariantProps<typeof textVariants> {\r\n /** Heading level 1–6, also sets default size (default: 2) */\r\n level?: 1 | 2 | 3 | 4 | 5 | 6;\r\n /** Show copy icon on hover */\r\n copyable?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\r\n ({ level = 2, size, weight, color = 'default', align, className, copyable, children, ...props }, ref) => {\r\n const Tag = `h${level}` as React.ElementType;\r\n const { copied, copy } = useCopy();\r\n const elRef = React.useRef<HTMLHeadingElement>(null);\r\n const mergedRef = (node: HTMLHeadingElement | null) => {\r\n (elRef as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\r\n };\r\n\r\n return (\r\n <Tag\r\n ref={mergedRef}\r\n className={cn(\r\n HEADING_SIZE[level],\r\n textVariants({ size, weight, color, align }),\r\n copyable && 'cursor-pointer group/copy inline-flex items-center gap-2',\r\n className,\r\n )}\r\n onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\r\n {...props}\r\n >\r\n {children}\r\n {copyable && (\r\n <span className=\"opacity-0 group-hover/copy:opacity-50 transition-opacity shrink-0\">\r\n {copied\r\n ? <Check className=\"w-4 h-4 text-success\" />\r\n : <Copy className=\"w-4 h-4\" />\r\n }\r\n </span>\r\n )}\r\n </Tag>\r\n );\r\n }\r\n);\r\nHeading.displayName = 'Heading';\r\n\r\n// ─── Paragraph ────────────────────────────────────────────────────────────────\r\n\r\nexport interface ParagraphProps\r\n extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'color'>,\r\n VariantProps<typeof textVariants> {\r\n /** Larger intro-text styling */\r\n lead?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(\r\n ({ lead, size, weight, color = 'default', align, leading = 'relaxed', className, children, ...props }, ref) => (\r\n <p\r\n ref={ref}\r\n className={cn(\r\n textVariants({ size, weight, color, align, leading }),\r\n lead && 'text-xl text-muted-foreground',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n )\r\n);\r\nParagraph.displayName = 'Paragraph';\r\n\r\n// ─── Lead ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface LeadProps extends React.HTMLAttributes<HTMLParagraphElement> {\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Lead = React.forwardRef<HTMLParagraphElement, LeadProps>(\r\n ({ className, children, ...props }, ref) => (\r\n <p\r\n ref={ref}\r\n className={cn('text-xl text-muted-foreground leading-relaxed', className)}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n )\r\n);\r\nLead.displayName = 'Lead';\r\n\r\n// ─── Blockquote ───────────────────────────────────────────────────────────────\r\n\r\nexport interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {\r\n /** Citation source text shown below the quote */\r\n cite?: string;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Blockquote = React.forwardRef<HTMLQuoteElement, BlockquoteProps>(\r\n ({ cite, className, children, ...props }, ref) => (\r\n <figure className=\"my-1\">\r\n <blockquote\r\n ref={ref}\r\n className={cn(\r\n 'border-l-4 border-primary pl-4 py-1 italic text-muted-foreground leading-relaxed',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </blockquote>\r\n {cite && (\r\n <figcaption className=\"mt-2 pl-4 text-sm text-muted-foreground/70 not-italic\">\r\n — {cite}\r\n </figcaption>\r\n )}\r\n </figure>\r\n )\r\n);\r\nBlockquote.displayName = 'Blockquote';\r\n\r\n// ─── Code (inline) ────────────────────────────────────────────────────────────\r\n\r\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\r\n /** Copy content on click */\r\n copyable?: boolean;\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Code = React.forwardRef<HTMLElement, CodeProps>(\r\n ({ copyable, className, children, ...props }, ref) => {\r\n const { copied, copy } = useCopy();\r\n const elRef = React.useRef<HTMLElement>(null);\r\n const mergedRef = (node: HTMLElement | null) => {\r\n (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\r\n };\r\n\r\n return (\r\n <code\r\n ref={mergedRef}\r\n onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\r\n className={cn(\r\n 'font-mono text-[0.875em] bg-muted text-foreground rounded px-1.5 py-0.5 border border-border/50',\r\n copyable && 'cursor-pointer hover:bg-muted/70 transition-colors group/code inline-flex items-center gap-1',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {copyable && (\r\n <span className=\"opacity-0 group-hover/code:opacity-60 transition-opacity\">\r\n {copied\r\n ? <Check className=\"w-3 h-3 text-success inline\" />\r\n : <Copy className=\"w-3 h-3 inline\" />\r\n }\r\n </span>\r\n )}\r\n </code>\r\n );\r\n }\r\n);\r\nCode.displayName = 'Code';\r\n\r\n// ─── Kbd ──────────────────────────────────────────────────────────────────────\r\n\r\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\r\n /** Array of keys to display; joined with `+` separator */\r\n keys?: string[];\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst KbdKey = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { className?: string }>(\r\n ({ className, children, ...props }, ref) => (\r\n <kbd\r\n ref={ref as React.Ref<HTMLElement>}\r\n className={cn(\r\n 'inline-flex items-center justify-center h-6 min-w-[1.5rem] px-1.5',\r\n 'font-mono text-xs font-medium',\r\n 'bg-background border border-border rounded shadow-[0_2px_0_0_hsl(var(--border))]',\r\n 'text-muted-foreground',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </kbd>\r\n )\r\n);\r\nKbdKey.displayName = 'KbdKey';\r\n\r\nconst Kbd = React.forwardRef<HTMLSpanElement, KbdProps>(\r\n ({ keys, className, children, ...props }, ref) => {\r\n const items = keys ?? (children ? [children] : []);\r\n\r\n return (\r\n <span ref={ref} className={cn('inline-flex items-center gap-0.5', className)} {...props}>\r\n {items.map((key, i) => (\r\n <React.Fragment key={i}>\r\n {i > 0 && <span className=\"text-[10px] text-muted-foreground/60 px-0.5\">+</span>}\r\n <KbdKey>{key}</KbdKey>\r\n </React.Fragment>\r\n ))}\r\n </span>\r\n );\r\n }\r\n);\r\nKbd.displayName = 'Kbd';\r\n\r\n// ─── Link ─────────────────────────────────────────────────────────────────────\r\n\r\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n /** Open in new tab with rel=\"noopener noreferrer\" */\r\n external?: boolean;\r\n /** Underline behaviour — default `hover` */\r\n underline?: 'always' | 'hover' | 'none';\r\n /** Color variant */\r\n color?: 'primary' | 'muted' | 'danger' | 'foreground';\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\r\n ({ external, underline = 'hover', color = 'primary', className, children, ...props }, ref) => (\r\n <a\r\n ref={ref}\r\n target={external ? '_blank' : props.target}\r\n rel={external ? 'noopener noreferrer' : props.rel}\r\n className={cn(\r\n 'inline-flex items-center gap-0.5 transition-colors',\r\n color === 'primary' && 'text-primary',\r\n color === 'muted' && 'text-muted-foreground',\r\n color === 'danger' && 'text-danger',\r\n color === 'foreground' && 'text-foreground',\r\n underline === 'always' && 'underline underline-offset-2',\r\n underline === 'hover' && 'hover:underline underline-offset-2',\r\n underline === 'none' && 'no-underline',\r\n className,\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n {external && <ExternalLink className=\"w-3 h-3 shrink-0 opacity-70\" />}\r\n </a>\r\n )\r\n);\r\nLink.displayName = 'Link';\r\n\r\n// ─── Mark ─────────────────────────────────────────────────────────────────────\r\n\r\nconst markVariants = tv({\r\n base: 'rounded px-0.5 py-px font-medium',\r\n variants: {\r\n variant: {\r\n default: 'bg-warning/25 text-warning-foreground',\r\n primary: 'bg-primary/15 text-primary',\r\n success: 'bg-success/15 text-success',\r\n warning: 'bg-warning/25 text-warning-foreground',\r\n danger: 'bg-danger/15 text-danger',\r\n },\r\n },\r\n defaultVariants: { variant: 'default' },\r\n});\r\n\r\nexport interface MarkProps\r\n extends React.HTMLAttributes<HTMLElement>,\r\n VariantProps<typeof markVariants> {\r\n className?: string;\r\n children?: React.ReactNode;\r\n}\r\n\r\nconst Mark = React.forwardRef<HTMLElement, MarkProps>(\r\n ({ variant, className, children, ...props }, ref) => (\r\n <mark\r\n ref={ref as React.Ref<HTMLElement>}\r\n className={markVariants({ variant, className })}\r\n {...props}\r\n >\r\n {children}\r\n </mark>\r\n )\r\n);\r\nMark.displayName = 'Mark';\r\n\r\n// ─── Exports ──────────────────────────────────────────────────────────────────\r\n\r\nexport {\r\n Text,\r\n Heading,\r\n Paragraph,\r\n Lead,\r\n Blockquote,\r\n Code,\r\n Kbd,\r\n KbdKey,\r\n Link,\r\n Mark,\r\n textVariants,\r\n markVariants,\r\n};\r\n"
|
|
826
945
|
}
|
|
827
946
|
]
|
|
828
947
|
}
|