basuicn 0.2.0 → 0.2.4
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 +281 -29
- package/dist/ui-cli.js +124 -0
- package/package.json +1 -1
- package/registry.json +109 -21
- package/scripts/build-cli.mjs +12 -12
- package/scripts/build-registry.ts +1 -1
- package/scripts/generate-theme-css.ts +74 -74
- package/scripts/ui-cli.ts +334 -28
package/registry.json
CHANGED
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
"path": "src/styles/index.css",
|
|
21
|
-
"content": "@import \"tailwindcss\";\r\n@plugin \"tailwindcss-animate\";\r\n@custom-variant dark (&:where(.dark, .dark *));\r\n\r\n/*\r\n View Transitions API: Tắt animation mặc định (fade cross-dissolve).\r\n ThemeToggle sẽ tự định nghĩa clip-path ripple animation thay thế.\r\n*/\r\n::view-transition-old(root),\r\n::view-transition-new(root) {\r\n animation: none;\r\n mix-blend-mode: normal;\r\n}\r\n\r\n::view-transition-old(root) {\r\n z-index: 1;\r\n}\r\n\r\n::view-transition-new(root) {\r\n z-index: 9999;\r\n}\r\n\r\n\r\n@theme {\r\n --animate-ping: ping 1.5s linear infinite; /* Chỉnh cho nó chạy chậm lại */\r\n\r\n\r\n\r\n --color-background: var(--background);\r\n --color-foreground: var(--foreground);\r\n\r\n --color-primary: var(--primary);\r\n --color-primary-foreground: var(--primary-foreground);\r\n\r\n --color-secondary: var(--secondary);\r\n --color-secondary-foreground: var(--secondary-foreground);\r\n\r\n --color-muted: var(--muted);\r\n --color-muted-foreground: var(--muted-foreground);\r\n\r\n --color-accent: var(--accent);\r\n --color-accent-foreground: var(--accent-foreground);\r\n\r\n --color-switch-background: var(--switch-background);\r\n\r\n --color-border: var(--border);\r\n\r\n --color-success: var(--success);\r\n --color-success-foreground: var(--success-foreground);\r\n\r\n --color-warning: var(--warning);\r\n --color-warning-foreground: var(--warning-foreground);\r\n\r\n --color-destructive: var(--danger);\r\n --color-destructive-foreground: var(--danger-foreground);\r\n\r\n --color-danger: var(--danger);\r\n --color-danger-foreground: var(--danger-foreground);\r\n\r\n --color-ring: var(--ring);\r\n --color-input: var(--input);\r\n\r\n --color-chart-1: var(--chart-1);\r\n --color-chart-2: var(--chart-2);\r\n --color-chart-3: var(--chart-3);\r\n --color-chart-4: var(--chart-4);\r\n --color-chart-5: var(--chart-5);\r\n\r\n --color-popover: var(--popover);\r\n --color-popover-foreground: var(--popover-foreground);\r\n\r\n --color-sidebar: var(--sidebar);\r\n --color-sidebar-foreground: var(--sidebar-foreground);\r\n --color-sidebar-border: var(--sidebar-border);\r\n --color-sidebar-accent: var(--sidebar-accent);\r\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\r\n --color-sidebar-ring: var(--sidebar-ring);\r\n\r\n --radius-sm: 0.125rem;\r\n --radius-md: 0.375rem;\r\n --radius-lg: 0.5rem;\r\n --radius-xl: 1rem;\r\n\r\n /* Z-index scale */\r\n --z-dropdown: 50;\r\n --z-sticky: 100;\r\n --z-overlay: 200;\r\n --z-modal: 300;\r\n --z-popover: 400;\r\n --z-toast: 500;\r\n\r\n --animate-spin-slow: spin 3s linear infinite;\r\n --animate-progress-stripes: progress-stripes 1s linear infinite;\r\n\r\n @keyframes progress-stripes {\r\n from { background-position: 1rem 0; }\r\n to { background-position: 0 0; }\r\n }\r\n}\r\n\r\n@layer base {\r\n :root {\r\n /* GENERATED:theme-start */\r\n /* Auto-generated from themes.ts — run `npm run theme:sync` to update */\r\n --background: #ffffff;\r\n --foreground: #0f172a;\r\n --primary: #2f27ce;\r\n --primary-foreground: #ffffff;\r\n --secondary: #dedcff;\r\n --secondary-foreground: #2f27ce;\r\n --muted: #f8fafc;\r\n --muted-foreground: #64748b;\r\n --accent: #f1f5f9;\r\n --accent-foreground: #0f172a;\r\n --success: #10b981;\r\n --success-foreground: #ffffff;\r\n --warning: #f59e0b;\r\n --warning-foreground: #ffffff;\r\n --danger: #ef4444;\r\n --danger-foreground: #ffffff;\r\n --destructive: #ef4444;\r\n --destructive-foreground: #ffffff;\r\n --border: #e2e8f0;\r\n --input: #e2e8f0;\r\n --ring: #2f27ce;\r\n --popover: #ffffff;\r\n --popover-foreground: #0f172a;\r\n /* GENERATED:theme-end */\r\n\r\n /* Non-theme tokens (not managed by applyTheme) */\r\n --switch-background: #cbd5e1;\r\n\r\n --chart-1: #e11d48;\r\n --chart-2: #2f27ce;\r\n --chart-3: #10b981;\r\n --chart-4: #f59e0b;\r\n --chart-5: #8b5cf6;\r\n\r\n --sidebar: #f8fafc;\r\n --sidebar-foreground: #0f172a;\r\n --sidebar-border: #e2e8f0;\r\n --sidebar-accent: #f1f5f9;\r\n --sidebar-accent-foreground: #2f27ce;\r\n --sidebar-ring: #2f27ce;\r\n }\r\n\r\n .dark {\r\n /* Dark Theme - Deep Space Slate (Chuyên nghiệp & Hiện đại) */\r\n --background: #09090b; /* Very deep zinc/slate */\r\n --foreground: #f8fafc;\r\n \r\n --primary: #6366f1; /* Bright Indigo for pop */\r\n --primary-foreground: #ffffff;\r\n \r\n --secondary: #1e293b; /* Slate 800 */\r\n --secondary-foreground: #f8fafc;\r\n \r\n --muted: #0f172a; /* Slate 900 for subdued bg */\r\n --muted-foreground: #94a3b8; /* Slate 400 for text */\r\n \r\n --accent: #1e293b;\r\n --accent-foreground: #f8fafc;\r\n \r\n --switch-background: #334155;\r\n --border: #334155; /* Slate 700 */\r\n \r\n --success: #10b981;\r\n --success-foreground: #ffffff;\r\n \r\n --warning: #f59e0b;\r\n --warning-foreground: #ffffff;\r\n \r\n --danger: #ef4444;\r\n --danger-foreground: #ffffff;\r\n\r\n --ring: #6366f1;\r\n --input: #334155;\r\n\r\n --chart-1: #fb7185;\r\n --chart-2: #6366f1;\r\n --chart-3: #34d399;\r\n --chart-4: #fbbf24;\r\n --chart-5: #818cf8;\r\n\r\n --popover: #0f172a;\r\n --popover-foreground: #f8fafc;\r\n\r\n --sidebar: #0f172a;\r\n --sidebar-foreground: #f8fafc;\r\n --sidebar-border: #334155;\r\n --sidebar-accent: #1e293b;\r\n --sidebar-accent-foreground: #818cf8;\r\n --sidebar-ring: #6366f1;\r\n }\r\n}\r\n\r\n\r\n@layer base {\r\n * {\r\n border-color: var(--border);\r\n }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: var(--background);\r\n color: var(--foreground);\r\n font-family: 'Inter', system-ui, sans-serif;\r\n overflow: hidden; /* Khóa scroll tổng để dùng nội bộ */\r\n height: 100%;\r\n color-scheme: light;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n }\r\n\r\n html.dark {\r\n color-scheme: dark;\r\n }\r\n\r\n /* Fix dải trắng khi mở modal/dialog trong các thư viện (Base UI, Radix) */\r\n body[style*=\"overflow: hidden\"],\r\n body[data-scroll-locked] {\r\n padding-right: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n\r\n /* Đảm bảo Backdrop luôn phủ kín màn hình bất chấp các tính toán của thư viện */\r\n [data-base-ui-dialog-backdrop],\r\n .base-ui-backdrop,\r\n [role=\"presentation\"] > div[style*=\"fixed\"] {\r\n width: 100vw !important;\r\n height: 100vh !important;\r\n left: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n }\r\n\r\n /* Custom Scrollbar - Sleek & Modern */\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: transparent;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #cbd5e1; /* slate-300 */\r\n border-radius: 10px;\r\n border: 2px solid transparent;\r\n background-clip: content-box;\r\n }\r\n\r\n .dark ::-webkit-scrollbar-thumb {\r\n background: #334155; /* slate-700 */\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8; /* slate-400 */\r\n background-clip: content-box;\r\n }\r\n\r\n .dark ::-webkit-scrollbar-thumb:hover {\r\n background: #475569; /* slate-600 */\r\n }\r\n\r\n /* Firefox */\r\n * {\r\n scrollbar-width: thin;\r\n scrollbar-color: #cbd5e1 transparent;\r\n }\r\n\r\n .dark * {\r\n scrollbar-color: #334155 transparent;\r\n }\r\n}\r\n\r\n/* ─── Reduced Motion ─────────────────────────────────────────────────────────\r\n Respect prefers-reduced-motion for a11y.\r\n Disables all animations and transitions globally when the user's OS\r\n requests reduced motion. Individual components can opt-out via\r\n motion-reduce:* utilities if an animation is essential.\r\n*/\r\n@media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after {\r\n animation-duration: 0.01ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: 0.01ms !important;\r\n scroll-behavior: auto !important;\r\n }\r\n}\r\n\r\n/* Ensure data-state=\"checked\" always works for background */\r\n[data-state=\"checked\"] {\r\n &.bg-primary {\r\n background-color: var(--primary);\r\n }\r\n}\r\n\r\n[data-state=\"indeterminate\"] {\r\n &.bg-primary {\r\n background-color: var(--primary);\r\n }\r\n}"
|
|
21
|
+
"content": "@import \"tailwindcss\";\r\n@plugin \"tailwindcss-animate\";\r\n@custom-variant dark (&:where(.dark, .dark *));\r\n/* Thin scrollbar — auto-hide */\r\n* {\r\n scrollbar-width: thin;\r\n scrollbar-color: transparent transparent;\r\n}\r\n\r\n*:hover {\r\n scrollbar-color: var(--border) transparent;\r\n}\r\n\r\n*::-webkit-scrollbar {\r\n width: 4px;\r\n height: 4px;\r\n}\r\n\r\n*::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n*::-webkit-scrollbar-thumb {\r\n background: transparent;\r\n border-radius: 9999px;\r\n}\r\n\r\n*:hover::-webkit-scrollbar-thumb {\r\n background: var(--border);\r\n}\r\n\r\n*::-webkit-scrollbar-thumb:hover {\r\n background: var(--muted-foreground);\r\n}\r\n\r\n/*\r\n View Transitions API: Tắt animation mặc định (fade cross-dissolve).\r\n ThemeToggle sẽ tự định nghĩa clip-path ripple animation thay thế.\r\n*/\r\n::view-transition-old(root),\r\n::view-transition-new(root) {\r\n animation: none;\r\n mix-blend-mode: normal;\r\n}\r\n\r\n::view-transition-old(root) {\r\n z-index: 1;\r\n}\r\n\r\n::view-transition-new(root) {\r\n z-index: 9999;\r\n}\r\n\r\n\r\n@theme {\r\n --animate-ping: ping 1.5s linear infinite; /* Chỉnh cho nó chạy chậm lại */\r\n\r\n\r\n\r\n --color-background: var(--background);\r\n --color-foreground: var(--foreground);\r\n\r\n --color-primary: var(--primary);\r\n --color-primary-foreground: var(--primary-foreground);\r\n\r\n --color-secondary: var(--secondary);\r\n --color-secondary-foreground: var(--secondary-foreground);\r\n\r\n --color-muted: var(--muted);\r\n --color-muted-foreground: var(--muted-foreground);\r\n\r\n --color-accent: var(--accent);\r\n --color-accent-foreground: var(--accent-foreground);\r\n\r\n --color-switch-background: var(--switch-background);\r\n\r\n --color-border: var(--border);\r\n\r\n --color-success: var(--success);\r\n --color-success-foreground: var(--success-foreground);\r\n\r\n --color-warning: var(--warning);\r\n --color-warning-foreground: var(--warning-foreground);\r\n\r\n --color-destructive: var(--danger);\r\n --color-destructive-foreground: var(--danger-foreground);\r\n\r\n --color-danger: var(--danger);\r\n --color-danger-foreground: var(--danger-foreground);\r\n\r\n --color-ring: var(--ring);\r\n --color-input: var(--input);\r\n\r\n --color-chart-1: var(--chart-1);\r\n --color-chart-2: var(--chart-2);\r\n --color-chart-3: var(--chart-3);\r\n --color-chart-4: var(--chart-4);\r\n --color-chart-5: var(--chart-5);\r\n\r\n --color-popover: var(--popover);\r\n --color-popover-foreground: var(--popover-foreground);\r\n\r\n --color-sidebar: var(--sidebar);\r\n --color-sidebar-foreground: var(--sidebar-foreground);\r\n --color-sidebar-border: var(--sidebar-border);\r\n --color-sidebar-accent: var(--sidebar-accent);\r\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\r\n --color-sidebar-ring: var(--sidebar-ring);\r\n\r\n --radius-sm: 0.125rem;\r\n --radius-md: 0.375rem;\r\n --radius-lg: 0.5rem;\r\n --radius-xl: 1rem;\r\n\r\n /* Z-index scale */\r\n --z-dropdown: 50;\r\n --z-sticky: 100;\r\n --z-overlay: 200;\r\n --z-modal: 300;\r\n --z-popover: 400;\r\n --z-toast: 500;\r\n\r\n --animate-spin-slow: spin 3s linear infinite;\r\n --animate-progress-stripes: progress-stripes 1s linear infinite;\r\n\r\n @keyframes progress-stripes {\r\n from { background-position: 1rem 0; }\r\n to { background-position: 0 0; }\r\n }\r\n\r\n --animate-blink: blink 1s step-end infinite;\r\n @keyframes blink {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0; }\r\n }\r\n}\r\n\r\n@layer base {\r\n :root {\r\n /* GENERATED:theme-start */\r\n /* Auto-generated from themes.ts — run `npm run theme:sync` to update */\r\n --background: #ffffff;\r\n --foreground: #0f172a;\r\n --primary: #2f27ce;\r\n --primary-foreground: #ffffff;\r\n --secondary: #dedcff;\r\n --secondary-foreground: #2f27ce;\r\n --muted: #f8fafc;\r\n --muted-foreground: #64748b;\r\n --accent: #f1f5f9;\r\n --accent-foreground: #0f172a;\r\n --success: #10b981;\r\n --success-foreground: #ffffff;\r\n --warning: #f59e0b;\r\n --warning-foreground: #ffffff;\r\n --danger: #ef4444;\r\n --danger-foreground: #ffffff;\r\n --destructive: #ef4444;\r\n --destructive-foreground: #ffffff;\r\n --border: #e2e8f0;\r\n --input: #e2e8f0;\r\n --ring: #2f27ce;\r\n --popover: #ffffff;\r\n --popover-foreground: #0f172a;\r\n /* GENERATED:theme-end */\r\n\r\n /* Non-theme tokens (not managed by applyTheme) */\r\n --switch-background: #cbd5e1;\r\n\r\n --chart-1: #e11d48;\r\n --chart-2: #2f27ce;\r\n --chart-3: #10b981;\r\n --chart-4: #f59e0b;\r\n --chart-5: #8b5cf6;\r\n\r\n --sidebar: #f8fafc;\r\n --sidebar-foreground: #0f172a;\r\n --sidebar-border: #e2e8f0;\r\n --sidebar-accent: #f1f5f9;\r\n --sidebar-accent-foreground: #2f27ce;\r\n --sidebar-ring: #2f27ce;\r\n }\r\n\r\n .dark {\r\n /* Dark Theme - Deep Space Slate (Chuyên nghiệp & Hiện đại) */\r\n --background: #09090b; /* Very deep zinc/slate */\r\n --foreground: #f8fafc;\r\n \r\n --primary: #6366f1; /* Bright Indigo for pop */\r\n --primary-foreground: #ffffff;\r\n \r\n --secondary: #1e293b; /* Slate 800 */\r\n --secondary-foreground: #f8fafc;\r\n \r\n --muted: #0f172a; /* Slate 900 for subdued bg */\r\n --muted-foreground: #94a3b8; /* Slate 400 for text */\r\n \r\n --accent: #1e293b;\r\n --accent-foreground: #f8fafc;\r\n \r\n --switch-background: #334155;\r\n --border: #334155; /* Slate 700 */\r\n \r\n --success: #10b981;\r\n --success-foreground: #ffffff;\r\n \r\n --warning: #f59e0b;\r\n --warning-foreground: #ffffff;\r\n \r\n --danger: #ef4444;\r\n --danger-foreground: #ffffff;\r\n\r\n --ring: #6366f1;\r\n --input: #334155;\r\n\r\n --chart-1: #fb7185;\r\n --chart-2: #6366f1;\r\n --chart-3: #34d399;\r\n --chart-4: #fbbf24;\r\n --chart-5: #818cf8;\r\n\r\n --popover: #0f172a;\r\n --popover-foreground: #f8fafc;\r\n\r\n --sidebar: #0f172a;\r\n --sidebar-foreground: #f8fafc;\r\n --sidebar-border: #334155;\r\n --sidebar-accent: #1e293b;\r\n --sidebar-accent-foreground: #818cf8;\r\n --sidebar-ring: #6366f1;\r\n }\r\n}\r\n\r\n\r\n@layer base {\r\n * {\r\n border-color: var(--border);\r\n }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: var(--background);\r\n color: var(--foreground);\r\n font-family: 'Inter', system-ui, sans-serif;\r\n overflow: hidden; /* Khóa scroll tổng để dùng nội bộ */\r\n height: 100%;\r\n color-scheme: light;\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n }\r\n\r\n html.dark {\r\n color-scheme: dark;\r\n }\r\n\r\n /* Fix dải trắng khi mở modal/dialog trong các thư viện (Base UI, Radix) */\r\n body[style*=\"overflow: hidden\"],\r\n body[data-scroll-locked] {\r\n padding-right: 0 !important;\r\n margin-right: 0 !important;\r\n }\r\n\r\n /* Đảm bảo Backdrop luôn phủ kín màn hình bất chấp các tính toán của thư viện */\r\n [data-base-ui-dialog-backdrop],\r\n .base-ui-backdrop,\r\n [role=\"presentation\"] > div[style*=\"fixed\"] {\r\n width: 100vw !important;\r\n height: 100vh !important;\r\n left: 0 !important;\r\n top: 0 !important;\r\n right: 0 !important;\r\n bottom: 0 !important;\r\n }\r\n\r\n /* Custom Scrollbar - Sleek & Modern */\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: transparent;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #cbd5e1; /* slate-300 */\r\n border-radius: 10px;\r\n border: 2px solid transparent;\r\n background-clip: content-box;\r\n }\r\n\r\n .dark ::-webkit-scrollbar-thumb {\r\n background: #334155; /* slate-700 */\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #94a3b8; /* slate-400 */\r\n background-clip: content-box;\r\n }\r\n\r\n .dark ::-webkit-scrollbar-thumb:hover {\r\n background: #475569; /* slate-600 */\r\n }\r\n\r\n /* Firefox */\r\n * {\r\n scrollbar-width: thin;\r\n scrollbar-color: #cbd5e1 transparent;\r\n }\r\n\r\n .dark * {\r\n scrollbar-color: #334155 transparent;\r\n }\r\n}\r\n\r\n/* ─── Reduced Motion ─────────────────────────────────────────────────────────\r\n Respect prefers-reduced-motion for a11y.\r\n Disables all animations and transitions globally when the user's OS\r\n requests reduced motion. Individual components can opt-out via\r\n motion-reduce:* utilities if an animation is essential.\r\n*/\r\n@media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after {\r\n animation-duration: 0.01ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: 0.01ms !important;\r\n scroll-behavior: auto !important;\r\n }\r\n}\r\n\r\n/* Ensure data-state=\"checked\" always works for background */\r\n[data-state=\"checked\"] {\r\n &.bg-primary {\r\n background-color: var(--primary);\r\n }\r\n}\r\n\r\n[data-state=\"indeterminate\"] {\r\n &.bg-primary {\r\n background-color: var(--primary);\r\n }\r\n}"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"path": "src/lib/theme/themes.ts",
|
|
25
|
-
"content": "// ─── Token Interfaces ─────────────────────────────────────────────────────────\r\n\r\nexport interface ThemeColors {\r\n // Surface\r\n background: string;\r\n foreground: string;\r\n // Brand\r\n primary: string;\r\n primaryForeground: string;\r\n // Secondary surface\r\n secondary: string;\r\n secondaryForeground: string;\r\n // Muted surface\r\n muted: string;\r\n mutedForeground: string;\r\n // Accent / hover surface\r\n accent: string;\r\n accentForeground: string;\r\n // Semantic states\r\n success: string;\r\n successForeground: string;\r\n warning: string;\r\n warningForeground: string;\r\n danger: string;\r\n dangerForeground: string;\r\n // Form / input\r\n border: string;\r\n input: string;\r\n ring: string;\r\n // Popover / overlay\r\n popover: string;\r\n popoverForeground: string;\r\n}\r\n\r\nexport interface Theme {\r\n name: string;\r\n label: string;\r\n colors: ThemeColors;\r\n}\r\n\r\nexport type BuiltInThemeName = 'indigo' | 'blue' | 'violet' | 'rose' | 'emerald' | 'orange' | 'slate';\r\n\r\n// ─── Built-in Themes ──────────────────────────────────────────────────────────\r\n\r\nexport const themes: Theme[] = [\r\n {\r\n name: 'indigo',\r\n label: 'Indigo (Default)',\r\n colors: {\r\n background: '#ffffff',\r\n foreground: '#0f172a',\r\n primary: '#2f27ce',\r\n primaryForeground: '#ffffff',\r\n secondary: '#dedcff',\r\n secondaryForeground: '#2f27ce',\r\n muted: '#f8fafc',\r\n mutedForeground: '#64748b',\r\n accent: '#f1f5f9',\r\n accentForeground: '#0f172a',\r\n success: '#10b981',\r\n successForeground: '#ffffff',\r\n warning: '#f59e0b',\r\n warningForeground: '#ffffff',\r\n danger: '#ef4444',\r\n dangerForeground: '#ffffff',\r\n border: '#e2e8f0',\r\n input: '#e2e8f0',\r\n ring: '#2f27ce',\r\n popover: '#ffffff',\r\n popoverForeground: '#0f172a',\r\n },\r\n },\r\n {\r\n name: 'blue',\r\n label: 'Blue',\r\n colors: {\r\n background: '#ffffff',\r\n foreground: '#0f172a',\r\n primary: '#3b82f6',\r\n primaryForeground: '#ffffff',\r\n secondary: '#dbeafe',\r\n secondaryForeground: '#1d4ed8',\r\n muted: '#f8fafc',\r\n mutedForeground: '#64748b',\r\n accent: '#eff6ff',\r\n accentForeground: '#1e40af',\r\n success: '#10b981',\r\n successForeground: '#ffffff',\r\n warning: '#f59e0b',\r\n warningForeground: '#ffffff',\r\n danger: '#ef4444',\r\n dangerForeground: '#ffffff',\r\n border: '#e2e8f0',\r\n input: '#e2e8f0',\r\n ring: '#3b82f6',\r\n popover: '#ffffff',\r\n popoverForeground: '#0f172a',\r\n },\r\n },\r\n {\r\n name: 'violet',\r\n label: 'Violet',\r\n colors: {\r\n background: '#ffffff',\r\n foreground: '#1e1b4b',\r\n primary: '#7c3aed',\r\n primaryForeground: '#ffffff',\r\n secondary: '#ede9fe',\r\n secondaryForeground: '#5b21b6',\r\n muted: '#f5f3ff',\r\n mutedForeground: '#6d28d9',\r\n accent: '#f5f3ff',\r\n accentForeground: '#4c1d95',\r\n success: '#10b981',\r\n successForeground: '#ffffff',\r\n warning: '#f59e0b',\r\n warningForeground: '#ffffff',\r\n danger: '#ef4444',\r\n dangerForeground: '#ffffff',\r\n border: '#ddd6fe',\r\n input: '#ddd6fe',\r\n ring: '#7c3aed',\r\n popover: '#ffffff',\r\n popoverForeground: '#1e1b4b',\r\n },\r\n },\r\n {\r\n name: 'rose',\r\n label: 'Rose',\r\n colors: {\r\n background: '#ffffff',\r\n foreground: '#18181b',\r\n primary: '#e11d48',\r\n primaryForeground: '#ffffff',\r\n secondary: '#ffe4e6',\r\n secondaryForeground: '#9f1239',\r\n muted: '#fff1f2',\r\n mutedForeground: '#64748b',\r\n accent: '#fff1f2',\r\n accentForeground: '#881337',\r\n success: '#10b981',\r\n successForeground: '#ffffff',\r\n warning: '#f59e0b',\r\n warningForeground: '#ffffff',\r\n danger: '#ef4444',\r\n dangerForeground: '#ffffff',\r\n border: '#fecdd3',\r\n input: '#fecdd3',\r\n ring: '#e11d48',\r\n popover: '#ffffff',\r\n popoverForeground: '#18181b',\r\n },\r\n },\r\n {\r\n name: 'emerald',\r\n label: 'Emerald',\r\n colors: {\r\n background: '#ffffff',\r\n foreground: '#064e3b',\r\n primary: '#059669',\r\n primaryForeground: '#ffffff',\r\n secondary: '#d1fae5',\r\n secondaryForeground: '#065f46',\r\n muted: '#ecfdf5',\r\n mutedForeground: '#064748b',\r\n accent: '#ecfdf5',\r\n accentForeground: '#065f46',\r\n success: '#10b981',\r\n successForeground: '#ffffff',\r\n warning: '#f59e0b',\r\n warningForeground: '#ffffff',\r\n danger: '#ef4444',\r\n dangerForeground: '#ffffff',\r\n border: '#a7f3d0',\r\n input: '#a7f3d0',\r\n ring: '#059669',\r\n popover: '#ffffff',\r\n popoverForeground: '#064e3b',\r\n },\r\n },\r\n {\r\n name: 'orange',\r\n label: 'Orange',\r\n colors: {\r\n background: '#ffffff',\r\n foreground: '#1c1917',\r\n primary: '#ea580c',\r\n primaryForeground: '#ffffff',\r\n secondary: '#ffedd5',\r\n secondaryForeground: '#9a3412',\r\n muted: '#fff7ed',\r\n mutedForeground: '#64748b',\r\n accent: '#fff7ed',\r\n accentForeground: '#7c2d12',\r\n success: '#10b981',\r\n successForeground: '#ffffff',\r\n warning: '#f59e0b',\r\n warningForeground: '#ffffff',\r\n danger: '#ef4444',\r\n dangerForeground: '#ffffff',\r\n border: '#fed7aa',\r\n input: '#fed7aa',\r\n ring: '#ea580c',\r\n popover: '#ffffff',\r\n popoverForeground: '#1c1917',\r\n },\r\n },\r\n {\r\n name: 'slate',\r\n label: 'Slate',\r\n colors: {\r\n background: '#ffffff',\r\n foreground: '#0f172a',\r\n primary: '#475569',\r\n primaryForeground: '#ffffff',\r\n secondary: '#f1f5f9',\r\n secondaryForeground: '#0f172a',\r\n muted: '#f8fafc',\r\n mutedForeground: '#64748b',\r\n accent: '#f1f5f9',\r\n accentForeground: '#0f172a',\r\n success: '#10b981',\r\n successForeground: '#ffffff',\r\n warning: '#f59e0b',\r\n warningForeground: '#ffffff',\r\n danger: '#ef4444',\r\n dangerForeground: '#ffffff',\r\n border: '#e2e8f0',\r\n input: '#e2e8f0',\r\n ring: '#475569',\r\n popover: '#ffffff',\r\n popoverForeground: '#0f172a',\r\n },\r\n },\r\n];\r\n\r\n// ─── Apply Theme ──────────────────────────────────────────────────────────────\r\n\r\nconst THEME_STYLE_ID = 'basuicn-theme';\r\n\r\n/**\r\n * Applies a theme by injecting a <style> tag at the START of <head>.\r\n *\r\n * Why <style> tag instead of element.style.setProperty():\r\n * Inline styles have the highest CSS specificity and would override\r\n * .dark { } class rules, breaking dark mode. A <style> tag injected\r\n * before the app's CSS bundle has lower specificity than .dark { }\r\n * rules defined later in the bundle — so dark mode always wins.\r\n */\r\nexport function applyTheme(theme: Theme) {\r\n if (typeof window === 'undefined') return;\r\n if (!theme?.colors) return;\r\n const { colors: c } = theme;\r\n\r\n const css = `\r\n:root:not(.dark) {\r\n --background: ${c.background};\r\n --foreground: ${c.foreground};\r\n --primary: ${c.primary};\r\n --primary-foreground: ${c.primaryForeground};\r\n --secondary: ${c.secondary};\r\n --secondary-foreground: ${c.secondaryForeground};\r\n --muted: ${c.muted};\r\n --muted-foreground: ${c.mutedForeground};\r\n --accent: ${c.accent};\r\n --accent-foreground: ${c.accentForeground};\r\n --success: ${c.success};\r\n --success-foreground: ${c.successForeground};\r\n --warning: ${c.warning};\r\n --warning-foreground: ${c.warningForeground};\r\n --danger: ${c.danger};\r\n --danger-foreground: ${c.dangerForeground};\r\n --destructive: ${c.danger};\r\n --destructive-foreground: ${c.dangerForeground};\r\n --border: ${c.border};\r\n --input: ${c.input};\r\n --ring: ${c.ring};\r\n --popover: ${c.popover};\r\n --popover-foreground: ${c.popoverForeground};\r\n}`.trim();\r\n\r\n let styleEl = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null;\r\n if (!styleEl) {\r\n styleEl = document.createElement('style');\r\n styleEl.id = THEME_STYLE_ID;\r\n document.head.appendChild(styleEl);\r\n }\r\n styleEl.textContent = css;\r\n}\r\n\r\n// ─── CSS Variable Generator ───────────────────────────────────────────────────\r\n\r\n/**\r\n * Converts a Theme's colors into a CSS `:root { }` block string.\r\n * Used by scripts to generate or sync CSS.\r\n */\r\nexport function toCssVars(theme: Theme): string {\r\n const { colors: c } = theme;\r\n const vars: [string, string][] = [\r\n ['--background', c.background],\r\n ['--foreground', c.foreground],\r\n ['--primary', c.primary],\r\n ['--primary-foreground', c.primaryForeground],\r\n ['--secondary', c.secondary],\r\n ['--secondary-foreground', c.secondaryForeground],\r\n ['--muted', c.muted],\r\n ['--muted-foreground', c.mutedForeground],\r\n ['--accent', c.accent],\r\n ['--accent-foreground', c.accentForeground],\r\n ['--success', c.success],\r\n ['--success-foreground', c.successForeground],\r\n ['--warning', c.warning],\r\n ['--warning-foreground', c.warningForeground],\r\n ['--danger', c.danger],\r\n ['--danger-foreground', c.dangerForeground],\r\n ['--destructive', c.danger],\r\n ['--destructive-foreground', c.dangerForeground],\r\n ['--border', c.border],\r\n ['--input', c.input],\r\n ['--ring', c.ring],\r\n ['--popover', c.popover],\r\n ['--popover-foreground', c.popoverForeground],\r\n ];\r\n const body = vars.map(([k, v]) => ` ${k}: ${v};`).join('\\n');\r\n return `:root {\\n${body}\\n }`;\r\n}\r\n\r\n// ─── Custom Theme Factory ─────────────────────────────────────────────────────\r\n\r\n/**\r\n * Creates a custom theme by merging overrides with the default (indigo) theme.\r\n *\r\n * @example\r\n * const myTheme = createTheme('brand', 'My Brand', { primary: '#ff6b35' });\r\n */\r\nexport function createTheme(\r\n name: string,\r\n label: string,\r\n colors: Partial<ThemeColors>\r\n): Theme {\r\n const base = themes[0]; // indigo as default base\r\n return {\r\n name,\r\n label,\r\n colors: { ...base.colors, ...colors },\r\n };\r\n}\r\n"
|
|
25
|
+
"content": "// ─── Token Interfaces ─────────────────────────────────────────────────────────\n\nexport interface ThemeColors {\n // Surface\n background: string;\n foreground: string;\n // Brand\n primary: string;\n primaryForeground: string;\n // Secondary surface\n secondary: string;\n secondaryForeground: string;\n // Muted surface\n muted: string;\n mutedForeground: string;\n // Accent / hover surface\n accent: string;\n accentForeground: string;\n // Semantic states\n success: string;\n successForeground: string;\n warning: string;\n warningForeground: string;\n danger: string;\n dangerForeground: string;\n // Form / input\n border: string;\n input: string;\n ring: string;\n // Popover / overlay\n popover: string;\n popoverForeground: string;\n}\n\nexport interface Theme {\n name: string;\n label: string;\n colors: ThemeColors;\n}\n\nexport type BuiltInThemeName = 'indigo' | 'blue' | 'violet' | 'rose' | 'emerald' | 'orange' | 'slate';\n\n// ─── Built-in Themes ──────────────────────────────────────────────────────────\n\nexport const themes: Theme[] = [\n {\n name: 'indigo',\n label: 'Indigo (Default)',\n colors: {\n background: '#ffffff',\n foreground: '#0f172a',\n primary: '#2f27ce',\n primaryForeground: '#ffffff',\n secondary: '#dedcff',\n secondaryForeground: '#2f27ce',\n muted: '#f8fafc',\n mutedForeground: '#64748b',\n accent: '#f1f5f9',\n accentForeground: '#0f172a',\n success: '#10b981',\n successForeground: '#ffffff',\n warning: '#f59e0b',\n warningForeground: '#ffffff',\n danger: '#ef4444',\n dangerForeground: '#ffffff',\n border: '#e2e8f0',\n input: '#e2e8f0',\n ring: '#2f27ce',\n popover: '#ffffff',\n popoverForeground: '#0f172a',\n },\n },\n {\n name: 'blue',\n label: 'Blue',\n colors: {\n background: '#ffffff',\n foreground: '#0f172a',\n primary: '#3b82f6',\n primaryForeground: '#ffffff',\n secondary: '#dbeafe',\n secondaryForeground: '#1d4ed8',\n muted: '#f8fafc',\n mutedForeground: '#64748b',\n accent: '#eff6ff',\n accentForeground: '#1e40af',\n success: '#10b981',\n successForeground: '#ffffff',\n warning: '#f59e0b',\n warningForeground: '#ffffff',\n danger: '#ef4444',\n dangerForeground: '#ffffff',\n border: '#e2e8f0',\n input: '#e2e8f0',\n ring: '#3b82f6',\n popover: '#ffffff',\n popoverForeground: '#0f172a',\n },\n },\n {\n name: 'violet',\n label: 'Violet',\n colors: {\n background: '#ffffff',\n foreground: '#1e1b4b',\n primary: '#7c3aed',\n primaryForeground: '#ffffff',\n secondary: '#ede9fe',\n secondaryForeground: '#5b21b6',\n muted: '#f5f3ff',\n mutedForeground: '#6d28d9',\n accent: '#f5f3ff',\n accentForeground: '#4c1d95',\n success: '#10b981',\n successForeground: '#ffffff',\n warning: '#f59e0b',\n warningForeground: '#ffffff',\n danger: '#ef4444',\n dangerForeground: '#ffffff',\n border: '#ddd6fe',\n input: '#ddd6fe',\n ring: '#7c3aed',\n popover: '#ffffff',\n popoverForeground: '#1e1b4b',\n },\n },\n {\n name: 'rose',\n label: 'Rose',\n colors: {\n background: '#ffffff',\n foreground: '#18181b',\n primary: '#e11d48',\n primaryForeground: '#ffffff',\n secondary: '#ffe4e6',\n secondaryForeground: '#9f1239',\n muted: '#fff1f2',\n mutedForeground: '#64748b',\n accent: '#fff1f2',\n accentForeground: '#881337',\n success: '#10b981',\n successForeground: '#ffffff',\n warning: '#f59e0b',\n warningForeground: '#ffffff',\n danger: '#ef4444',\n dangerForeground: '#ffffff',\n border: '#fecdd3',\n input: '#fecdd3',\n ring: '#e11d48',\n popover: '#ffffff',\n popoverForeground: '#18181b',\n },\n },\n {\n name: 'emerald',\n label: 'Emerald',\n colors: {\n background: '#ffffff',\n foreground: '#064e3b',\n primary: '#059669',\n primaryForeground: '#ffffff',\n secondary: '#d1fae5',\n secondaryForeground: '#065f46',\n muted: '#ecfdf5',\n mutedForeground: '#064748b',\n accent: '#ecfdf5',\n accentForeground: '#065f46',\n success: '#10b981',\n successForeground: '#ffffff',\n warning: '#f59e0b',\n warningForeground: '#ffffff',\n danger: '#ef4444',\n dangerForeground: '#ffffff',\n border: '#a7f3d0',\n input: '#a7f3d0',\n ring: '#059669',\n popover: '#ffffff',\n popoverForeground: '#064e3b',\n },\n },\n {\n name: 'orange',\n label: 'Orange',\n colors: {\n background: '#ffffff',\n foreground: '#1c1917',\n primary: '#ea580c',\n primaryForeground: '#ffffff',\n secondary: '#ffedd5',\n secondaryForeground: '#9a3412',\n muted: '#fff7ed',\n mutedForeground: '#64748b',\n accent: '#fff7ed',\n accentForeground: '#7c2d12',\n success: '#10b981',\n successForeground: '#ffffff',\n warning: '#f59e0b',\n warningForeground: '#ffffff',\n danger: '#ef4444',\n dangerForeground: '#ffffff',\n border: '#fed7aa',\n input: '#fed7aa',\n ring: '#ea580c',\n popover: '#ffffff',\n popoverForeground: '#1c1917',\n },\n },\n {\n name: 'slate',\n label: 'Slate',\n colors: {\n background: '#ffffff',\n foreground: '#0f172a',\n primary: '#475569',\n primaryForeground: '#ffffff',\n secondary: '#f1f5f9',\n secondaryForeground: '#0f172a',\n muted: '#f8fafc',\n mutedForeground: '#64748b',\n accent: '#f1f5f9',\n accentForeground: '#0f172a',\n success: '#10b981',\n successForeground: '#ffffff',\n warning: '#f59e0b',\n warningForeground: '#ffffff',\n danger: '#ef4444',\n dangerForeground: '#ffffff',\n border: '#e2e8f0',\n input: '#e2e8f0',\n ring: '#475569',\n popover: '#ffffff',\n popoverForeground: '#0f172a',\n },\n },\n];\n\n// ─── Apply Theme ──────────────────────────────────────────────────────────────\n\nconst THEME_STYLE_ID = 'basuicn-theme';\n\n/**\n * Applies a theme by injecting a <style> tag at the START of <head>.\n *\n * Why <style> tag instead of element.style.setProperty():\n * Inline styles have the highest CSS specificity and would override\n * .dark { } class rules, breaking dark mode. A <style> tag injected\n * before the app's CSS bundle has lower specificity than .dark { }\n * rules defined later in the bundle — so dark mode always wins.\n */\nexport function applyTheme(theme: Theme) {\n if (typeof window === 'undefined') return;\n if (!theme?.colors) return;\n const { colors: c } = theme;\n\n const css = `\n:root:not(.dark) {\n --background: ${c.background};\n --foreground: ${c.foreground};\n --primary: ${c.primary};\n --primary-foreground: ${c.primaryForeground};\n --secondary: ${c.secondary};\n --secondary-foreground: ${c.secondaryForeground};\n --muted: ${c.muted};\n --muted-foreground: ${c.mutedForeground};\n --accent: ${c.accent};\n --accent-foreground: ${c.accentForeground};\n --success: ${c.success};\n --success-foreground: ${c.successForeground};\n --warning: ${c.warning};\n --warning-foreground: ${c.warningForeground};\n --danger: ${c.danger};\n --danger-foreground: ${c.dangerForeground};\n --destructive: ${c.danger};\n --destructive-foreground: ${c.dangerForeground};\n --border: ${c.border};\n --input: ${c.input};\n --ring: ${c.ring};\n --popover: ${c.popover};\n --popover-foreground: ${c.popoverForeground};\n}`.trim();\n\n let styleEl = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = document.createElement('style');\n styleEl.id = THEME_STYLE_ID;\n document.head.appendChild(styleEl);\n }\n styleEl.textContent = css;\n}\n\n// ─── CSS Variable Generator ───────────────────────────────────────────────────\n\n/**\n * Converts a Theme's colors into a CSS `:root { }` block string.\n * Used by scripts to generate or sync CSS.\n */\nexport function toCssVars(theme: Theme): string {\n const { colors: c } = theme;\n const vars: [string, string][] = [\n ['--background', c.background],\n ['--foreground', c.foreground],\n ['--primary', c.primary],\n ['--primary-foreground', c.primaryForeground],\n ['--secondary', c.secondary],\n ['--secondary-foreground', c.secondaryForeground],\n ['--muted', c.muted],\n ['--muted-foreground', c.mutedForeground],\n ['--accent', c.accent],\n ['--accent-foreground', c.accentForeground],\n ['--success', c.success],\n ['--success-foreground', c.successForeground],\n ['--warning', c.warning],\n ['--warning-foreground', c.warningForeground],\n ['--danger', c.danger],\n ['--danger-foreground', c.dangerForeground],\n ['--destructive', c.danger],\n ['--destructive-foreground', c.dangerForeground],\n ['--border', c.border],\n ['--input', c.input],\n ['--ring', c.ring],\n ['--popover', c.popover],\n ['--popover-foreground', c.popoverForeground],\n ];\n const body = vars.map(([k, v]) => ` ${k}: ${v};`).join('\\n');\n return `:root {\\n${body}\\n }`;\n}\n\n// ─── Custom Theme Factory ─────────────────────────────────────────────────────\n\n/**\n * Creates a custom theme by merging overrides with the default (indigo) theme.\n *\n * @example\n * const myTheme = createTheme('brand', 'My Brand', { primary: '#ff6b35' });\n */\nexport function createTheme(\n name: string,\n label: string,\n colors: Partial<ThemeColors>\n): Theme {\n const base = themes[0]; // indigo as default base\n return {\n name,\n label,\n colors: { ...base.colors, ...colors },\n };\n}\n"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
"path": "src/lib/theme/ThemeProvider.tsx",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"files": [
|
|
98
98
|
{
|
|
99
99
|
"path": "src/components/ui/autocomplete/Autocomplete.tsx",
|
|
100
|
-
"content": "
|
|
100
|
+
"content": "\"use client\"\r\nimport * as React from 'react';\r\nimport { Combobox as BaseCombobox } from '@base-ui/react';\r\nimport { Check, X, Loader2 } from 'lucide-react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\n\r\nconst autocompleteVariants = tv({\r\n slots: {\r\n root: 'flex flex-col gap-1.5 w-full',\r\n inputContainer: 'flex items-center min-h-10 w-full rounded-md 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 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-md border border-border bg-background text-popover-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-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 },\r\n});\r\n\r\nexport interface AutocompleteOption {\r\n label: string;\r\n value: string;\r\n description?: string;\r\n}\r\n\r\nexport interface AutocompleteProps {\r\n options: AutocompleteOption[];\r\n label?: string;\r\n placeholder?: string;\r\n value?: string;\r\n defaultValue?: string;\r\n onValueChange?: (value: string) => void;\r\n isLoading?: boolean;\r\n className?: string;\r\n emptyText?: string;\r\n leftIcon?: React.ReactNode;\r\n clearOnSelect?: boolean;\r\n}\r\n\r\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\r\n ({\r\n options,\r\n label,\r\n placeholder,\r\n value,\r\n defaultValue,\r\n onValueChange,\r\n isLoading,\r\n className,\r\n emptyText = 'No results found.',\r\n leftIcon,\r\n clearOnSelect = false,\r\n }, ref) => {\r\n const [inputValue, setInputValue] = React.useState('');\r\n const [open, setOpen] = React.useState(false);\r\n const [internalValue, setInternalValue] = React.useState<string | null>(defaultValue ?? null);\r\n const inputGroupRef = React.useRef<HTMLDivElement>(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 | null) => {\r\n isSelectingRef.current = true;\r\n if (value === undefined) setInternalValue(clearOnSelect ? null : newVal);\r\n if (newVal !== null) onValueChange?.(newVal);\r\n };\r\n\r\n const handleInputValueChange = (val: string) => {\r\n if (isSelectingRef.current) {\r\n isSelectingRef.current = false;\r\n // clearOnSelect: xóa input ngay sau khi chọn, không để label xuất hiện\r\n if (clearOnSelect) {\r\n setInputValue('');\r\n setOpen(false);\r\n }\r\n return;\r\n }\r\n setInputValue(val);\r\n setOpen(val.length > 0);\r\n };\r\n\r\n const handleOpenChange = (newOpen: boolean) => {\r\n if (!newOpen) setOpen(false);\r\n };\r\n\r\n const handleClear = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n handleValueChange(null);\r\n setInputValue('');\r\n setOpen(false);\r\n };\r\n\r\n // Đóng popup trước khi browser paint nếu input rỗng — loại bỏ hoàn toàn nháy 1 frame\r\n React.useLayoutEffect(() => {\r\n if (!inputValue && open) setOpen(false);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [inputValue]);\r\n\r\n const filteredOptions = React.useMemo(() => {\r\n if (!inputValue) return [];\r\n return options.filter(o =>\r\n o.label.toLowerCase().includes(inputValue.toLowerCase())\r\n );\r\n }, [options, inputValue]);\r\n\r\n const { root, inputContainer, input, popup, item, indicator } = autocompleteVariants();\r\n\r\n return (\r\n <BaseCombobox.Root\r\n value={activeValue}\r\n onValueChange={handleValueChange}\r\n onInputValueChange={handleInputValueChange}\r\n open={open}\r\n onOpenChange={handleOpenChange}\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\r\n {isLoading ? (\r\n <Loader2 className=\"absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground\" />\r\n ) : activeValue && !clearOnSelect && (\r\n <button\r\n type=\"button\"\r\n aria-label=\"Clear selection\"\r\n onClick={handleClear}\r\n className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-muted rounded-full text-muted-foreground transition-colors\"\r\n >\r\n <X className=\"h-3.5 w-3.5\" />\r\n </button>\r\n )}\r\n\r\n <BaseCombobox.Input\r\n ref={ref}\r\n placeholder={placeholder}\r\n className={cn(input(), (isLoading || (activeValue && !clearOnSelect)) && 'pr-8')}\r\n />\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 <BaseCombobox.List className=\"p-1 max-h-[300px] overflow-auto\">\r\n {filteredOptions.length === 0 ? (\r\n inputValue ? (\r\n <div className=\"py-2 px-8 text-sm text-muted-foreground italic\">{emptyText}</div>\r\n ) : null\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.description ? (\r\n <div className=\"flex flex-col\">\r\n <span>{option.label}</span>\r\n <span className=\"text-xs text-muted-foreground\">{option.description}</span>\r\n </div>\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\nAutocomplete.displayName = 'Autocomplete';\r\n\r\nexport { Autocomplete };\r\n"
|
|
101
101
|
}
|
|
102
102
|
]
|
|
103
103
|
},
|
|
@@ -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-md 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 solid: 'bg-primary text-primary-foreground hover:bg-primary/70 shadow-sm',\r\n outline: 'border border-border bg-transparent hover:bg-secondary/90 hover:text-foreground',\r\n ghost: 'hover:bg-secondary/90 hover:text-foreground',\r\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/70 shadow-sm',\r\n danger: 'bg-danger text-danger-foreground hover:bg-danger/70 shadow-sm',\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-
|
|
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-md 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 solid: 'bg-primary text-primary-foreground hover:bg-primary/70 shadow-sm',\r\n outline: 'border border-border bg-transparent hover:bg-secondary/90 hover:text-foreground',\r\n ghost: 'hover:bg-secondary/90 hover:text-foreground',\r\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/70 shadow-sm',\r\n danger: 'bg-danger text-danger-foreground hover:bg-danger/70 shadow-sm',\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-foreground 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, buttonVariants };\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
|
},
|
|
@@ -214,6 +214,33 @@
|
|
|
214
214
|
}
|
|
215
215
|
]
|
|
216
216
|
},
|
|
217
|
+
"code-sandbox": {
|
|
218
|
+
"name": "code-sandbox",
|
|
219
|
+
"dependencies": [
|
|
220
|
+
"@codesandbox/sandpack-react",
|
|
221
|
+
"lucide-react",
|
|
222
|
+
"react-resizable-panels"
|
|
223
|
+
],
|
|
224
|
+
"internalDependencies": [],
|
|
225
|
+
"files": [
|
|
226
|
+
{
|
|
227
|
+
"path": "src/components/ui/code-sandbox/CodeSandbox.tsx",
|
|
228
|
+
"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"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"path": "src/components/ui/code-sandbox/FileTree.tsx",
|
|
232
|
+
"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"
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"path": "src/components/ui/code-sandbox/SandboxLayout.tsx",
|
|
236
|
+
"content": "import React, { useState, useMemo } from 'react';\r\nimport {\r\n SandpackCodeEditor,\r\n SandpackPreview,\r\n SandpackConsole,\r\n useSandpack,\r\n} from '@codesandbox/sandpack-react';\r\nimport { Group, Panel, Separator } from 'react-resizable-panels';\r\nimport {\r\n Files,\r\n Search,\r\n Package,\r\n Settings,\r\n ChevronDown,\r\n Plus,\r\n X,\r\n} from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { FileTree } from './FileTree';\r\nimport { SANDBOX_TEMPLATES } from './templates';\r\n\r\n// ─── Types ───────────────────────────────────────────────────\r\n\r\ntype SidebarTab = 'explorer' | 'search' | 'dependencies';\r\ntype TerminalTab = 'console' | 'problems';\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\n// ─── Search Panel ────────────────────────────────────────────\r\n\r\nfunction 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\r\n// ─── Dependency Panel ────────────────────────────────────────\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\nfunction 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 {/* Add input */}\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 {/* Quick add */}\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 {/* Installed list */}\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\r\n// ─── Activity Bar ────────────────────────────────────────────\r\n\r\nfunction ActivityBar({\r\n activeTab,\r\n onTabChange,\r\n}: {\r\n activeTab: SidebarTab | null;\r\n onTabChange: (tab: SidebarTab | null) => void;\r\n}) {\r\n const tabs: { id: SidebarTab; icon: React.ReactNode; label: string }[] = [\r\n {\r\n id: 'explorer',\r\n icon: <Files className=\"w-[18px] h-[18px]\" />,\r\n label: 'Explorer',\r\n },\r\n {\r\n id: 'search',\r\n icon: <Search className=\"w-[18px] h-[18px]\" />,\r\n label: 'Search',\r\n },\r\n {\r\n id: 'dependencies',\r\n icon: <Package className=\"w-[18px] h-[18px]\" />,\r\n label: 'Dependencies',\r\n },\r\n ];\r\n\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={() =>\r\n onTabChange(activeTab === tab.id ? null : tab.id)\r\n }\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\r\n// ─── Terminal Pane ───────────────────────────────────────────\r\n\r\nfunction 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 {/* Tab bar */}\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 {/* Content */}\r\n <div className=\"flex-1 overflow-auto min-h-0\">\r\n {tab === 'console' && (\r\n <SandpackConsole\r\n standalone\r\n style={{ height: '100%' }}\r\n />\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\r\n// ─── Status Bar ──────────────────────────────────────────────\r\n\r\nfunction StatusBar() {\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 {/* Status */}\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\r\n// ─── Toolbar ─────────────────────────────────────────────────\r\n\r\nfunction Toolbar({\r\n templateId,\r\n onTemplateChange,\r\n}: {\r\n templateId: string;\r\n onTemplateChange: (id: string) => void;\r\n}) {\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 {/* Template picker */}\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\">\r\n {current?.label}\r\n </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\r\n className=\"fixed inset-0 z-40\"\r\n onClick={() => setOpen(false)}\r\n />\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\">\r\n {t.label}\r\n </div>\r\n <div className=\"text-xs text-muted-foreground\">\r\n {t.description}\r\n </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 {/* Project badge */}\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\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 function SandboxLayout({\r\n templateId,\r\n onTemplateChange,\r\n className,\r\n}: SandboxLayoutProps) {\r\n const [sidebarTab, setSidebarTab] = useState<SidebarTab | null>(\r\n 'explorer',\r\n );\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 <Toolbar\r\n templateId={templateId}\r\n onTemplateChange={onTemplateChange}\r\n />\r\n\r\n <div className=\"flex flex-1 min-h-0\">\r\n {/* Activity bar */}\r\n <ActivityBar activeTab={sidebarTab} onTabChange={setSidebarTab} />\r\n\r\n {/* Sidebar panel (fixed width, toggleable) */}\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 {/* Resizable main area: Editor + Preview */}\r\n <Group orientation=\"horizontal\" className=\"h-full flex-1 min-w-0\">\r\n {/* Editor + Terminal column */}\r\n <Panel defaultSize={55} minSize={25}>\r\n <Group orientation=\"vertical\">\r\n {/* Code editor */}\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\r\n <ResizeHandle horizontal />\r\n\r\n {/* Terminal */}\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 {/* Preview */}\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 <StatusBar />\r\n </div>\r\n );\r\n}\r\n"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"path": "src/components/ui/code-sandbox/templates.ts",
|
|
240
|
+
"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"
|
|
241
|
+
}
|
|
242
|
+
]
|
|
243
|
+
},
|
|
217
244
|
"collapsible": {
|
|
218
245
|
"name": "collapsible",
|
|
219
246
|
"dependencies": [
|
|
@@ -254,7 +281,7 @@
|
|
|
254
281
|
"files": [
|
|
255
282
|
{
|
|
256
283
|
"path": "src/components/ui/context-menu/ContextMenu.tsx",
|
|
257
|
-
"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"
|
|
284
|
+
"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"
|
|
258
285
|
}
|
|
259
286
|
]
|
|
260
287
|
},
|
|
@@ -322,6 +349,19 @@
|
|
|
322
349
|
}
|
|
323
350
|
]
|
|
324
351
|
},
|
|
352
|
+
"empty": {
|
|
353
|
+
"name": "empty",
|
|
354
|
+
"dependencies": [
|
|
355
|
+
"lucide-react"
|
|
356
|
+
],
|
|
357
|
+
"internalDependencies": [],
|
|
358
|
+
"files": [
|
|
359
|
+
{
|
|
360
|
+
"path": "src/components/ui/empty/Empty.tsx",
|
|
361
|
+
"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"
|
|
362
|
+
}
|
|
363
|
+
]
|
|
364
|
+
},
|
|
325
365
|
"form": {
|
|
326
366
|
"name": "form",
|
|
327
367
|
"dependencies": [
|
|
@@ -351,6 +391,19 @@
|
|
|
351
391
|
}
|
|
352
392
|
]
|
|
353
393
|
},
|
|
394
|
+
"input-otp": {
|
|
395
|
+
"name": "input-otp",
|
|
396
|
+
"dependencies": [
|
|
397
|
+
"tailwind-variants"
|
|
398
|
+
],
|
|
399
|
+
"internalDependencies": [],
|
|
400
|
+
"files": [
|
|
401
|
+
{
|
|
402
|
+
"path": "src/components/ui/input-otp/InputOtp.tsx",
|
|
403
|
+
"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 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 /** Total number of OTP slots */\r\n length?: number;\r\n /** Current value (controlled) */\r\n value?: string;\r\n /** Default value (uncontrolled) */\r\n defaultValue?: string;\r\n /** Fired on every value change */\r\n onChange?: (value: string) => void;\r\n /** Fired when all slots are filled */\r\n onComplete?: (value: string) => void;\r\n /** What characters are allowed */\r\n inputMode?: InputMode;\r\n /** Custom regex pattern when inputMode='custom' */\r\n pattern?: RegExp;\r\n /** Mask character for entered values (e.g. '*' for password-style) */\r\n mask?: string | boolean;\r\n /** Disable the entire input */\r\n disabled?: boolean;\r\n /** Show error state */\r\n error?: boolean;\r\n /** Error message */\r\n errorMessage?: string;\r\n /** Label */\r\n label?: string;\r\n /** Description */\r\n description?: string;\r\n /** Auto focus on mount */\r\n autoFocus?: boolean;\r\n /** Separator config: insert separator after these indices, or every N slots */\r\n separatorAfter?: number[] | number;\r\n /** Separator visual */\r\n separator?: SeparatorType;\r\n /** Auto-submit on complete */\r\n autoSubmit?: boolean;\r\n /** Slot className override */\r\n slotClassName?: string;\r\n /** Render filled slots with success style */\r\n successOnComplete?: boolean;\r\n /** Placeholder per slot */\r\n placeholder?: string;\r\n}\r\n\r\n// ─── Helpers ─────────────────────────────────────────────────────────────────\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\nfunction 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 // every N slots\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\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 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 const rootId = React.useId();\r\n\r\n const pat = getPattern(inputMode, customPattern);\r\n const separatorPositions = getSeparatorPositions(separatorAfter, length);\r\n const slots = inputOTPVariants({ variant, size, shape });\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 // ─── Value helpers ─────────────────────────────────────────────────\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 // ─── Handlers ──────────────────────────────────────────────────────\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\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\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 // ─── Render separator ──────────────────────────────────────────────\r\n\r\n const renderSeparator = () => {\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 // ─── Render display char ───────────────────────────────────────────\r\n\r\n const getDisplayChar = (char: string, index: number) => {\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 // ─── Render ────────────────────────────────────────────────────────\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 {/* Display */}\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)}\r\n </div>\r\n {/* Caret */}\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 {/* Separator */}\r\n {separatorPositions.has(i) && (\r\n <div className={slots.separator()} aria-hidden=\"true\">\r\n {renderSeparator()}\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"
|
|
404
|
+
}
|
|
405
|
+
]
|
|
406
|
+
},
|
|
354
407
|
"menu-bar": {
|
|
355
408
|
"name": "menu-bar",
|
|
356
409
|
"dependencies": [
|
|
@@ -363,7 +416,7 @@
|
|
|
363
416
|
"files": [
|
|
364
417
|
{
|
|
365
418
|
"path": "src/components/ui/menu-bar/MenuBar.tsx",
|
|
366
|
-
"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"
|
|
419
|
+
"content": "\"use client\"\r\nimport * 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"
|
|
367
420
|
}
|
|
368
421
|
]
|
|
369
422
|
},
|
|
@@ -391,7 +444,24 @@
|
|
|
391
444
|
"files": [
|
|
392
445
|
{
|
|
393
446
|
"path": "src/components/ui/popover/Popover.tsx",
|
|
394
|
-
"content": "'use client';\
|
|
447
|
+
"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, ...props }, ref) => (\n <BasePopover.Trigger\n ref={ref}\n render={render ?? (React.isValidElement(children) ? children : undefined)}\n {...props}\n >\n {React.isValidElement(children) ? undefined : children}\n </BasePopover.Trigger>\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, popoverVariants };\n"
|
|
448
|
+
}
|
|
449
|
+
]
|
|
450
|
+
},
|
|
451
|
+
"pretty-code": {
|
|
452
|
+
"name": "pretty-code",
|
|
453
|
+
"dependencies": [
|
|
454
|
+
"shiki",
|
|
455
|
+
"unified",
|
|
456
|
+
"rehype-parse",
|
|
457
|
+
"rehype-react",
|
|
458
|
+
"lucide-react"
|
|
459
|
+
],
|
|
460
|
+
"internalDependencies": [],
|
|
461
|
+
"files": [
|
|
462
|
+
{
|
|
463
|
+
"path": "src/components/ui/pretty-code/PrettyCode.tsx",
|
|
464
|
+
"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"
|
|
395
465
|
}
|
|
396
466
|
]
|
|
397
467
|
},
|
|
@@ -435,7 +505,7 @@
|
|
|
435
505
|
"files": [
|
|
436
506
|
{
|
|
437
507
|
"path": "src/components/ui/radio/Radio.tsx",
|
|
438
|
-
"content": "import * as React from 'react';\r\nimport { Radio as BaseRadio } from '@base-ui/react';\r\nimport { tv, type VariantProps } from 'tailwind-variants';\r\n\r\nconst radioVariants = tv({\r\n slots: {\r\n root: 'group flex
|
|
508
|
+
"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"
|
|
439
509
|
}
|
|
440
510
|
]
|
|
441
511
|
},
|
|
@@ -463,7 +533,21 @@
|
|
|
463
533
|
"files": [
|
|
464
534
|
{
|
|
465
535
|
"path": "src/components/ui/rate/Rate.tsx",
|
|
466
|
-
"content": "'use client';\
|
|
536
|
+
"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"
|
|
537
|
+
}
|
|
538
|
+
]
|
|
539
|
+
},
|
|
540
|
+
"resizable": {
|
|
541
|
+
"name": "resizable",
|
|
542
|
+
"dependencies": [
|
|
543
|
+
"react-resizable-panels",
|
|
544
|
+
"tailwind-variants"
|
|
545
|
+
],
|
|
546
|
+
"internalDependencies": [],
|
|
547
|
+
"files": [
|
|
548
|
+
{
|
|
549
|
+
"path": "src/components/ui/resizable/Resizable.tsx",
|
|
550
|
+
"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"
|
|
467
551
|
}
|
|
468
552
|
]
|
|
469
553
|
},
|
|
@@ -476,7 +560,7 @@
|
|
|
476
560
|
"files": [
|
|
477
561
|
{
|
|
478
562
|
"path": "src/components/ui/scroll-area/ScrollArea.tsx",
|
|
479
|
-
"content": "'use client';\
|
|
563
|
+
"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"
|
|
480
564
|
}
|
|
481
565
|
]
|
|
482
566
|
},
|
|
@@ -489,9 +573,13 @@
|
|
|
489
573
|
],
|
|
490
574
|
"internalDependencies": [],
|
|
491
575
|
"files": [
|
|
576
|
+
{
|
|
577
|
+
"path": "src/components/ui/select/MultiSelect.tsx",
|
|
578
|
+
"content": "\"use client\"\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react';\nimport { tv } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\nimport { ChevronDown, Check, X } from 'lucide-react';\n\nconst multiSelectVariants = tv({\n slots: {\n trigger: 'flex min-h-10 w-full items-start justify-between rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-shadow group cursor-pointer gap-2',\n content: 'relative z-50 max-h-[300px] min-w-[var(--anchor-width)] overflow-hidden rounded-md border border-border bg-background text-foreground shadow-md 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',\n viewport: 'p-1',\n item: 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-muted focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-muted data-highlighted:text-foreground',\n icon: 'h-4 w-4 opacity-50 transition-transform duration-200 group-data-open:rotate-180',\n }\n});\n\nconst { trigger, content, viewport, item, icon } = multiSelectVariants();\n\n/** Props for the MultiSelect component */\nexport interface MultiSelectProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Root>, 'value' | 'defaultValue'> {\n /** Label text displayed above the select trigger */\n label?: string;\n /** Helper text displayed below the select (hidden when error is present) */\n description?: string;\n /** Error message displayed below the select; also applies danger styling */\n error?: string;\n /** Placeholder shown when no option is selected */\n placeholder?: string;\n /** Array of selectable options */\n options: { label: string; value: string }[];\n id?: string;\n className?: string;\n /** Controlled selected values */\n value?: string[];\n /** Initial selected values for uncontrolled usage */\n defaultValue?: string[];\n /** Whether a clear button is shown when value is selected */\n clearable?: boolean;\n /** Callback fired when the selected values change */\n onChange?: (values: string[]) => void;\n /** Text shown when the options array is empty */\n emptyText?: string;\n /** Accessible label for the clear button */\n clearLabel?: string;\n /** Max tags displayed before showing \"+N more\" */\n maxTags?: number;\n}\n\nconst MultiSelect = React.forwardRef<React.ElementRef<typeof BaseSelect.Trigger>, MultiSelectProps>(\n ({ label, description, error, placeholder = 'Select...', options, id, className, clearable = true, onChange, value, defaultValue, emptyText = 'No results found.', clearLabel = 'Clear selection', maxTags = 2, ...props }, ref) => {\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n\n const [selectedValues, setSelectedValues] = React.useState<string[]>(value ?? defaultValue ?? []);\n\n React.useEffect(() => {\n if (value !== undefined) setSelectedValues(value);\n }, [value]);\n\n const handleValueChange = (val: string) => {\n const newValues = selectedValues.includes(val)\n ? selectedValues.filter((v) => v !== val)\n : [...selectedValues, val];\n setSelectedValues(newValues);\n onChange?.(newValues);\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setSelectedValues([]);\n onChange?.([]);\n };\n\n const selectedLabels = selectedValues\n .map((v) => options.find((o) => o.value === v)?.label)\n .filter(Boolean) as string[];\n\n const displayLabels = selectedLabels.slice(0, maxTags);\n const moreCount = selectedLabels.length - maxTags;\n\n return (\n <div className=\"flex flex-col gap-1.5 w-full\">\n {label && (\n <label className=\"text-sm font-medium text-foreground leading-none\">\n {label}\n </label>\n )}\n\n <div className=\"relative w-full\">\n <BaseSelect.Root\n value={undefined}\n onValueChange={handleValueChange as (value: unknown) => void}\n {...props}\n >\n <BaseSelect.Trigger\n ref={(node) => {\n triggerRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.RefObject <HTMLButtonElement | null>).current = node;\n }}\n className={trigger({ className: cn(className, error ? 'border-danger focus:border-danger' : '') })}\n id={id}\n >\n <div className=\"flex flex-wrap gap-1.5 items-center\">\n {selectedLabels.length === 0 ? (\n <span className=\"text-muted-foreground\">{placeholder}</span>\n ) : (\n <>\n {displayLabels.map((label) => (\n <span\n key={label}\n className=\"inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground\"\n >\n {label}\n </span>\n ))}\n {moreCount > 0 && (\n <span className=\"text-xs text-muted-foreground\">\n +{moreCount} more\n </span>\n )}\n </>\n )}\n </div>\n <BaseSelect.Icon>\n { selectedValues.length <= 0 &&<ChevronDown className={icon()} />}\n </BaseSelect.Icon>\n </BaseSelect.Trigger>\n <BaseSelect.Portal>\n <BaseSelect.Positioner anchor={triggerRef} className=\"z-50\" sideOffset={4}>\n <BaseSelect.Popup className={content()}>\n <div className={viewport()}>\n {options.length === 0 ? (\n <div className=\"py-2 px-8 text-sm text-muted-foreground italic text-center\">\n {emptyText}\n </div>\n ) : (\n options.map((option) => (\n <button\n key={option.value}\n type=\"button\"\n onClick={(e) => {\n e.preventDefault();\n handleValueChange(option.value);\n }}\n className={cn(\n item(),\n 'text-left',\n selectedValues.includes(option.value) && 'bg-muted text-foreground'\n )}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n {selectedValues.includes(option.value) && <Check className=\"h-4 w-4\" />}\n </span>\n <span>{option.label}</span>\n </button>\n ))\n )}\n </div>\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n\n {clearable && selectedValues.length > 0 && (\n <button\n type=\"button\"\n aria-label={clearLabel}\n onMouseDown={handleClear}\n className=\"cursor-pointer absolute right-1 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground hover:bg-red-50 hover:text-red-500 transition-colors z-10\"\n >\n <X className=\"h-3 w-3\" />\n </button>\n )}\n </div>\n\n {description && !error && (\n <p className=\"text-[0.8rem] text-muted-foreground\">{description}</p>\n )}\n {error && (\n <p className=\"text-[0.8rem] font-medium text-danger\">{error}</p>\n )}\n </div>\n );\n }\n);\n\nMultiSelect.displayName = 'MultiSelect';\n\nexport { MultiSelect };\n"
|
|
579
|
+
},
|
|
492
580
|
{
|
|
493
581
|
"path": "src/components/ui/select/Select.tsx",
|
|
494
|
-
"content": "import * as React from 'react';\r\nimport { Select as BaseSelect } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { ChevronDown, Check, X } from 'lucide-react';\r\n\r\nconst selectVariants = tv({\r\n slots: {\r\n trigger: 'flex h-10 w-full items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-shadow group cursor-pointer',\r\n content: 'relative z-50 max-h-[300px] min-w-[var(--anchor-width)] overflow-hidden rounded-md border border-border bg-background text-foreground shadow-md 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 viewport: 'p-1',\r\n item: 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-muted focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-muted data-highlighted:text-foreground',\r\n icon: 'h-4 w-4 opacity-50 transition-transform duration-200 group-data-open:rotate-180',\r\n }\r\n});\r\n\r\nconst { trigger, content, viewport, item, icon } = selectVariants();\r\n\r\n/** Props for the Select component */\r\nexport interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Root>, 'value' | 'defaultValue'> {\r\n /** Label text displayed above the select trigger */\r\n label?: string;\r\n /** Helper text displayed below the select (hidden when error is present) */\r\n description?: string;\r\n /** Error message displayed below the select; also applies danger styling */\r\n error?: string;\r\n /** Placeholder shown when no option is selected */\r\n placeholder?: string;\r\n /** Array of selectable options */\r\n options: { label: string; value: string }[];\r\n id?: string;\r\n className?: string;\r\n /** Controlled selected value */\r\n value?: string;\r\n /** Initial selected value for uncontrolled usage */\r\n defaultValue?: string;\r\n /** Whether a clear button is shown when a value is selected */\r\n clearable?: boolean;\r\n /** Callback fired when the selected value changes */\r\n onChange?: (value: string) => void;\r\n /** Text shown when the options array is empty */\r\n emptyText?: string;\r\n /** Accessible label for the clear button */\r\n clearLabel?: string;\r\n}\r\n\r\nconst Select = React.forwardRef<React.ElementRef<typeof BaseSelect.Trigger>, SelectProps>(\r\n ({ label, description, error, placeholder = 'Select...', options, id, className, clearable = true, onChange, value, defaultValue, emptyText = 'No results found.', clearLabel = 'Clear selection', ...props }, ref) => {\r\n const triggerRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n const [selectedValue, setSelectedValue] = React.useState<string>(value ?? defaultValue ?? '');\r\n\r\n React.useEffect(() => {\r\n if (value !== undefined) setSelectedValue(value);\r\n }, [value]);\r\n\r\n const handleValueChange = (val: string) => {\r\n setSelectedValue(val);\r\n onChange?.(val);\r\n };\r\n\r\n const handleClear = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setSelectedValue('');\r\n onChange?.('');\r\n };\r\n\r\n const selectedLabel = options.find((o) => o.value === selectedValue)?.label;\r\n\r\n return (\r\n <div className=\"flex flex-col gap-1.5 w-full\">\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 {/*\r\n * Wrapper relative: nút X nằm NGOÀI BaseSelect.Trigger (absolute)\r\n * → click X không bao giờ bubble lên Trigger → popup không mở\r\n */}\r\n <div className=\"relative w-full\">\r\n <BaseSelect.Root\r\n value={value}\r\n defaultValue={defaultValue}\r\n onValueChange={handleValueChange as (value: unknown) => void}\r\n {...props}\r\n >\r\n <BaseSelect.Trigger\r\n ref={(node) => {\r\n triggerRef.current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\r\n }}\r\n className={trigger({ className: cn(className, error ? 'border-danger focus:border-danger' : '') })}\r\n id={id}\r\n >\r\n <span className={selectedLabel ? 'text-foreground' : 'text-muted-foreground'}>\r\n {selectedLabel ?? placeholder}\r\n </span>\r\n <BaseSelect.Icon>\r\n
|
|
582
|
+
"content": "import * as React from 'react';\r\nimport { Select as BaseSelect } from '@base-ui/react';\r\nimport { tv } from 'tailwind-variants';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { ChevronDown, Check, X } from 'lucide-react';\r\n\r\nconst selectVariants = tv({\r\n slots: {\r\n trigger: 'flex h-10 w-full items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background focus:border-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-shadow group cursor-pointer',\r\n content: 'relative z-50 max-h-[300px] min-w-[var(--anchor-width)] overflow-hidden rounded-md border border-border bg-background text-foreground shadow-md 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 viewport: 'p-1',\r\n item: 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-muted focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-muted data-highlighted:text-foreground',\r\n icon: 'h-4 w-4 opacity-50 transition-transform duration-200 group-data-open:rotate-180',\r\n }\r\n});\r\n\r\nconst { trigger, content, viewport, item, icon } = selectVariants();\r\n\r\n/** Props for the Select component */\r\nexport interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Root>, 'value' | 'defaultValue'> {\r\n /** Label text displayed above the select trigger */\r\n label?: string;\r\n /** Helper text displayed below the select (hidden when error is present) */\r\n description?: string;\r\n /** Error message displayed below the select; also applies danger styling */\r\n error?: string;\r\n /** Placeholder shown when no option is selected */\r\n placeholder?: string;\r\n /** Array of selectable options */\r\n options: { label: string; value: string }[];\r\n id?: string;\r\n className?: string;\r\n /** Controlled selected value */\r\n value?: string;\r\n /** Initial selected value for uncontrolled usage */\r\n defaultValue?: string;\r\n /** Whether a clear button is shown when a value is selected */\r\n clearable?: boolean;\r\n /** Callback fired when the selected value changes */\r\n onChange?: (value: string) => void;\r\n /** Text shown when the options array is empty */\r\n emptyText?: string;\r\n /** Accessible label for the clear button */\r\n clearLabel?: string;\r\n}\r\n\r\nconst Select = React.forwardRef<React.ElementRef<typeof BaseSelect.Trigger>, SelectProps>(\r\n ({ label, description, error, placeholder = 'Select...', options, id, className, clearable = true, onChange, value, defaultValue, emptyText = 'No results found.', clearLabel = 'Clear selection', ...props }, ref) => {\r\n const triggerRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n const [selectedValue, setSelectedValue] = React.useState<string>(value ?? defaultValue ?? '');\r\n\r\n React.useEffect(() => {\r\n if (value !== undefined) setSelectedValue(value);\r\n }, [value]);\r\n\r\n const handleValueChange = (val: string) => {\r\n setSelectedValue(val);\r\n onChange?.(val);\r\n };\r\n\r\n const handleClear = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setSelectedValue('');\r\n onChange?.('');\r\n };\r\n\r\n const selectedLabel = options.find((o) => o.value === selectedValue)?.label;\r\n\r\n return (\r\n <div className=\"flex flex-col gap-1.5 w-full\">\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 {/*\r\n * Wrapper relative: nút X nằm NGOÀI BaseSelect.Trigger (absolute)\r\n * → click X không bao giờ bubble lên Trigger → popup không mở\r\n */}\r\n <div className=\"relative w-full\">\r\n <BaseSelect.Root\r\n value={value}\r\n defaultValue={defaultValue}\r\n onValueChange={handleValueChange as (value: unknown) => void}\r\n {...props}\r\n >\r\n <BaseSelect.Trigger\r\n ref={(node) => {\r\n triggerRef.current = node;\r\n if (typeof ref === 'function') ref(node);\r\n else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\r\n }}\r\n className={trigger({ className: cn(className, error ? 'border-danger focus:border-danger' : '') })}\r\n id={id}\r\n >\r\n <span className={selectedLabel ? 'text-foreground' : 'text-muted-foreground'}>\r\n {selectedLabel ?? placeholder}\r\n </span>\r\n <BaseSelect.Icon>\r\n {!selectedValue && <ChevronDown className={icon()} />}\r\n </BaseSelect.Icon>\r\n </BaseSelect.Trigger>\r\n <BaseSelect.Portal>\r\n <BaseSelect.Positioner anchor={triggerRef} className=\"z-50\" sideOffset={4}>\r\n <BaseSelect.Popup className={content()}>\r\n <div className={viewport()}>\r\n {options.length === 0 ? (\r\n <div className=\"py-2 px-8 text-sm text-muted-foreground italic text-center\">\r\n {emptyText}\r\n </div>\r\n ) : (\r\n options.map((option) => (\r\n <BaseSelect.Item key={option.value} value={option.value} className={item()}>\r\n <BaseSelect.ItemIndicator className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n {option.value === selectedValue && <Check className=\"h-4 w-4\" />}\r\n </BaseSelect.ItemIndicator>\r\n <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>\r\n </BaseSelect.Item>\r\n ))\r\n )}\r\n </div>\r\n </BaseSelect.Popup>\r\n </BaseSelect.Positioner>\r\n </BaseSelect.Portal>\r\n </BaseSelect.Root>\r\n\r\n {/* Nút X đặt NGOÀI Trigger, absolute position — click không bubble lên Trigger */}\r\n {clearable && selectedValue && (\r\n <button\r\n type=\"button\"\r\n aria-label={clearLabel}\r\n onMouseDown={handleClear}\r\n className=\"cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground hover:bg-red-50 hover:text-red-500 transition-colors z-10\"\r\n >\r\n <X className=\"h-3 w-3\" />\r\n </button>\r\n )}\r\n </div>\r\n\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\n\r\nSelect.displayName = 'Select';\r\n\r\nexport { Select };\r\n"
|
|
495
583
|
}
|
|
496
584
|
]
|
|
497
585
|
},
|
|
@@ -535,23 +623,23 @@
|
|
|
535
623
|
"files": [
|
|
536
624
|
{
|
|
537
625
|
"path": "src/components/ui/sidebar/Sidebar.tsx",
|
|
538
|
-
"content": "// Sidebar — barrel re-export\
|
|
626
|
+
"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"
|
|
539
627
|
},
|
|
540
628
|
{
|
|
541
629
|
"path": "src/components/ui/sidebar/SidebarContext.tsx",
|
|
542
|
-
"content": "import * as React from 'react';\
|
|
630
|
+
"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"
|
|
543
631
|
},
|
|
544
632
|
{
|
|
545
633
|
"path": "src/components/ui/sidebar/SidebarLayout.tsx",
|
|
546
|
-
"content": "import * as React from 'react';\r\nimport { PanelLeft } from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { useSidebar, SIDEBAR_WIDTH_DEFAULT
|
|
634
|
+
"content": "import * as React from 'react';\r\nimport { PanelLeft } from 'lucide-react';\r\nimport { cn } from '@/lib/utils/cn';\r\nimport { useSidebar, SIDEBAR_WIDTH_DEFAULT } from './SidebarContext';\r\n\r\n// ─── SidebarTrigger ───────────────────────────────────────────────────────────\r\n\r\nexport const SidebarTrigger = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ButtonHTMLAttributes<HTMLButtonElement>\r\n>(({ className, onClick, ...props }, ref) => {\r\n const { toggleSidebar } = useSidebar();\r\n return (\r\n <button\r\n ref={ref}\r\n type=\"button\"\r\n data-sidebar=\"trigger\"\r\n onClick={(e) => {\r\n toggleSidebar();\r\n onClick?.(e);\r\n }}\r\n className={cn('inline-flex items-center justify-center h-8 w-8 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary', className)}\r\n title=\"Toggle Sidebar (⌘B)\"\r\n {...props}\r\n >\r\n <PanelLeft className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">Toggle Sidebar</span>\r\n </button>\r\n );\r\n});\r\nSidebarTrigger.displayName = 'SidebarTrigger';\r\n\r\n// ─── Sidebar ──────────────────────────────────────────────────────────────────\r\n\r\n/** Props for the Sidebar panel */\r\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\r\n /** Which side of the viewport the sidebar attaches to */\r\n side?: 'left' | 'right';\r\n /** Visual variant: default border, floating card, or inset with background */\r\n variant?: 'sidebar' | 'floating' | 'inset';\r\n /** Collapse behavior: slide offcanvas, shrink to icons, or non-collapsible */\r\n collapsible?: 'offcanvas' | 'icon' | 'none';\r\n}\r\n\r\nexport const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(\r\n ({ side = 'left', variant = 'sidebar', collapsible = 'icon', className, children, ...props }, ref) => {\r\n const { state, isMobile, openMobile, setOpenMobile, sidebarWidth } = useSidebar();\r\n\r\n if (collapsible === 'none') {\r\n return (\r\n <aside\r\n ref={ref}\r\n className={cn('flex h-screen flex-col bg-sidebar border-r border-sidebar-border', className)}\r\n style={{ width: SIDEBAR_WIDTH_DEFAULT }}\r\n {...props}\r\n >\r\n {children}\r\n </aside>\r\n );\r\n }\r\n\r\n if (isMobile) {\r\n return (\r\n <>\r\n {openMobile && (\r\n <div\r\n className=\"fixed inset-0 z-40 bg-black/50 backdrop-blur-sm motion-safe:transition-opacity\"\r\n onClick={() => setOpenMobile(false)}\r\n />\r\n )}\r\n <aside\r\n ref={ref}\r\n className={cn(\r\n 'fixed inset-y-0 z-50 flex flex-col bg-sidebar border-r border-sidebar-border shadow-xl',\r\n 'motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-in-out',\r\n side === 'left' ? 'left-0' : 'right-0',\r\n openMobile\r\n ? 'translate-x-0'\r\n : side === 'left'\r\n ? '-translate-x-full'\r\n : 'translate-x-full',\r\n className\r\n )}\r\n style={{ width: sidebarWidth }}\r\n {...props}\r\n >\r\n {children}\r\n </aside>\r\n </>\r\n );\r\n }\r\n\r\n return (\r\n <aside\r\n ref={ref}\r\n data-state={state}\r\n data-collapsible={state === 'collapsed' ? collapsible : ''}\r\n data-variant={variant}\r\n data-side={side}\r\n className={cn(\r\n 'group relative flex h-full w-full flex-col bg-sidebar text-sidebar-foreground',\r\n 'overflow-hidden shrink-0',\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </aside>\r\n );\r\n }\r\n);\r\nSidebar.displayName = 'Sidebar';\r\n\r\n// ─── SidebarRail — kept for API compatibility, resize is handled by ResizableHandle ──\r\n\r\nexport const SidebarRail = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n (_props, _ref) => null,\r\n);\r\nSidebarRail.displayName = 'SidebarRail';\r\n\r\n// ─── SidebarInset ─────────────────────────────────────────────────────────────\r\n\r\nexport const SidebarInset = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn('relative flex flex-1 flex-col overflow-hidden min-w-0 bg-background', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarInset.displayName = 'SidebarInset';\r\n\r\n// ─── Layout: Header / Content / Footer ───────────────────────────────────────\r\n\r\nexport const SidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"header\"\r\n className={cn('flex flex-col gap-2 p-2 shrink-0', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarHeader.displayName = 'SidebarHeader';\r\n\r\nexport const SidebarFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => {\r\n const { isMobile } = useSidebar();\r\n if (isMobile) {\r\n return null;\r\n }\r\n return (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"footer\"\r\n className={cn('flex flex-col gap-2 p-2 mt-auto shrink-0', className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n);\r\nSidebarFooter.displayName = 'SidebarFooter';\r\n\r\nexport const SidebarContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"content\"\r\n className={cn('flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden py-2', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarContent.displayName = 'SidebarContent';\r\n\r\nexport const SidebarSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n ({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n data-sidebar=\"separator\"\r\n className={cn('mx-2 h-px border-t border-sidebar-border', className)}\r\n {...props}\r\n />\r\n )\r\n);\r\nSidebarSeparator.displayName = 'SidebarSeparator';\r\n"
|
|
547
635
|
},
|
|
548
636
|
{
|
|
549
637
|
"path": "src/components/ui/sidebar/SidebarMenu.tsx",
|
|
550
|
-
"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"
|
|
638
|
+
"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"
|
|
551
639
|
},
|
|
552
640
|
{
|
|
553
641
|
"path": "src/components/ui/sidebar/SidebarUserMenu.tsx",
|
|
554
|
-
"content": "import * as React from 'react';\
|
|
642
|
+
"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"
|
|
555
643
|
}
|
|
556
644
|
]
|
|
557
645
|
},
|
|
@@ -578,7 +666,7 @@
|
|
|
578
666
|
"files": [
|
|
579
667
|
{
|
|
580
668
|
"path": "src/components/ui/slider/Slider.tsx",
|
|
581
|
-
"content": "import * as React from 'react';\
|
|
669
|
+
"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"
|
|
582
670
|
}
|
|
583
671
|
]
|
|
584
672
|
},
|
|
@@ -692,7 +780,7 @@
|
|
|
692
780
|
"files": [
|
|
693
781
|
{
|
|
694
782
|
"path": "src/components/ui/tooltip/Tooltip.tsx",
|
|
695
|
-
"content": "'use client';\
|
|
783
|
+
"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"
|
|
696
784
|
}
|
|
697
785
|
]
|
|
698
786
|
},
|
|
@@ -706,7 +794,7 @@
|
|
|
706
794
|
"files": [
|
|
707
795
|
{
|
|
708
796
|
"path": "src/components/ui/typography/Typography.tsx",
|
|
709
|
-
"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"
|
|
797
|
+
"content": "import * as React from 'react';\nimport { tv, type VariantProps } from 'tailwind-variants';\nimport { cn } from '@/lib/utils/cn';\nimport { Copy, Check, ExternalLink } from 'lucide-react';\n\n// ─── Shared text style variants ───────────────────────────────────────────────\n\nconst textVariants = tv({\n base: '',\n variants: {\n size: {\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n },\n weight: {\n thin: 'font-thin',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n },\n color: {\n default: 'text-foreground',\n muted: 'text-muted-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n danger: 'text-danger',\n inherit: 'text-inherit',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n justify: 'text-justify',\n },\n leading: {\n none: 'leading-none',\n tight: 'leading-tight',\n normal: 'leading-normal',\n relaxed: 'leading-relaxed',\n loose: 'leading-loose',\n },\n tracking: {\n tighter: 'tracking-tighter',\n tight: 'tracking-tight',\n normal: 'tracking-normal',\n wide: 'tracking-wide',\n widest: 'tracking-widest',\n },\n },\n defaultVariants: {\n color: 'default',\n },\n});\n\n// ─── useCopy hook ─────────────────────────────────────────────────────────────\n\nfunction useCopy() {\n const [copied, setCopied] = React.useState(false);\n const copy = React.useCallback(async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n } catch { /* noop */ }\n }, []);\n return { copied, copy };\n}\n\n// ─── Text ─────────────────────────────────────────────────────────────────────\n\nexport interface TextProps\n extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n VariantProps<typeof textVariants> {\n /** HTML tag to render — default `span` */\n as?: React.ElementType;\n /** Bold */\n strong?: boolean;\n /** Italic */\n italic?: boolean;\n /** Underline */\n underline?: boolean;\n /** Strikethrough */\n strikethrough?: boolean;\n /** Gradient text (primary → indigo) */\n gradient?: boolean;\n /** Highlighted mark background */\n mark?: boolean;\n /** Single-line truncate with ellipsis */\n truncate?: boolean;\n /** Multi-line clamp (number of lines) */\n lines?: 1 | 2 | 3 | 4 | 5;\n /** Tabular numbers — fixed-width digits */\n numeric?: boolean;\n /** Inline code styling */\n code?: boolean;\n /** Show copy icon on hover, copies text content on click */\n copyable?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nconst LINES_MAP: Record<number, string> = {\n 1: 'line-clamp-1',\n 2: 'line-clamp-2',\n 3: 'line-clamp-3',\n 4: 'line-clamp-4',\n 5: 'line-clamp-5',\n};\n\nconst Text = React.forwardRef<HTMLElement, TextProps>(\n (\n {\n as: Tag = 'span',\n size,\n weight,\n color,\n align,\n leading,\n tracking,\n strong,\n italic,\n underline,\n strikethrough,\n gradient,\n mark,\n truncate,\n lines,\n numeric,\n code,\n copyable,\n className,\n children,\n onClick,\n ...props\n },\n ref\n ) => {\n const { copied, copy } = useCopy();\n const elRef = React.useRef<HTMLElement>(null);\n const mergedRef = (node: HTMLElement | null) => {\n (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n };\n\n const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n if (copyable && elRef.current) {\n copy(elRef.current.innerText);\n }\n onClick?.(e);\n };\n\n return (\n <Tag\n ref={mergedRef}\n className={cn(\n textVariants({ size, weight, color, align, leading, tracking }),\n strong && 'font-bold',\n italic && 'italic',\n underline && 'underline underline-offset-2',\n strikethrough && 'line-through',\n gradient && 'bg-gradient-to-r from-primary to-indigo-500 bg-clip-text text-transparent',\n mark && 'bg-warning/20 text-warning-foreground rounded px-0.5',\n truncate && 'block max-w-full truncate',\n lines && cn('block', LINES_MAP[lines]),\n numeric && 'tabular-nums',\n code && 'font-mono text-[0.9em] bg-muted rounded px-1 py-0.5 border border-border/50',\n copyable && 'cursor-pointer group/copy inline-flex items-center gap-1.5',\n className,\n )}\n onClick={handleClick}\n {...props}\n >\n {children}\n {copyable && (\n <span className=\"opacity-0 group-hover/copy:opacity-60 transition-opacity shrink-0\">\n {copied\n ? <Check className=\"w-3.5 h-3.5 text-success\" />\n : <Copy className=\"w-3.5 h-3.5\" />\n }\n </span>\n )}\n </Tag>\n );\n }\n);\nText.displayName = 'Text';\n\n// ─── Heading ──────────────────────────────────────────────────────────────────\n\nconst HEADING_SIZE: Record<1 | 2 | 3 | 4 | 5 | 6, string> = {\n 1: 'text-4xl font-extrabold tracking-tight',\n 2: 'text-3xl font-bold tracking-tight',\n 3: 'text-2xl font-semibold tracking-tight',\n 4: 'text-xl font-semibold',\n 5: 'text-lg font-medium',\n 6: 'text-base font-medium',\n};\n\nexport interface HeadingProps\n extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,\n VariantProps<typeof textVariants> {\n /** Heading level 1–6, also sets default size (default: 2) */\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n /** Show copy icon on hover */\n copyable?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n ({ level = 2, size, weight, color = 'default', align, className, copyable, children, ...props }, ref) => {\n const Tag = `h${level}` as React.ElementType;\n const { copied, copy } = useCopy();\n const elRef = React.useRef<HTMLHeadingElement>(null);\n const mergedRef = (node: HTMLHeadingElement | null) => {\n (elRef as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLHeadingElement | null>).current = node;\n };\n\n return (\n <Tag\n ref={mergedRef}\n className={cn(\n HEADING_SIZE[level],\n textVariants({ size, weight, color, align }),\n copyable && 'cursor-pointer group/copy inline-flex items-center gap-2',\n className,\n )}\n onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\n {...props}\n >\n {children}\n {copyable && (\n <span className=\"opacity-0 group-hover/copy:opacity-50 transition-opacity shrink-0\">\n {copied\n ? <Check className=\"w-4 h-4 text-success\" />\n : <Copy className=\"w-4 h-4\" />\n }\n </span>\n )}\n </Tag>\n );\n }\n);\nHeading.displayName = 'Heading';\n\n// ─── Paragraph ────────────────────────────────────────────────────────────────\n\nexport interface ParagraphProps\n extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'color'>,\n VariantProps<typeof textVariants> {\n /** Larger intro-text styling */\n lead?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nconst Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(\n ({ lead, size, weight, color = 'default', align, leading = 'relaxed', className, children, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\n textVariants({ size, weight, color, align, leading }),\n lead && 'text-xl text-muted-foreground',\n className,\n )}\n {...props}\n >\n {children}\n </p>\n )\n);\nParagraph.displayName = 'Paragraph';\n\n// ─── Lead ────────────────────────────────────────────────────────────────────\n\nexport interface LeadProps extends React.HTMLAttributes<HTMLParagraphElement> {\n className?: string;\n children?: React.ReactNode;\n}\n\nconst Lead = React.forwardRef<HTMLParagraphElement, LeadProps>(\n ({ className, children, ...props }, ref) => (\n <p\n ref={ref}\n className={cn('text-xl text-muted-foreground leading-relaxed', className)}\n {...props}\n >\n {children}\n </p>\n )\n);\nLead.displayName = 'Lead';\n\n// ─── Blockquote ───────────────────────────────────────────────────────────────\n\nexport interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElement> {\n /** Citation source text shown below the quote */\n cite?: string;\n className?: string;\n children?: React.ReactNode;\n}\n\nconst Blockquote = React.forwardRef<HTMLQuoteElement, BlockquoteProps>(\n ({ cite, className, children, ...props }, ref) => (\n <figure className=\"my-1\">\n <blockquote\n ref={ref}\n className={cn(\n 'border-l-4 border-primary pl-4 py-1 italic text-muted-foreground leading-relaxed',\n className,\n )}\n {...props}\n >\n {children}\n </blockquote>\n {cite && (\n <figcaption className=\"mt-2 pl-4 text-sm text-muted-foreground/70 not-italic\">\n — {cite}\n </figcaption>\n )}\n </figure>\n )\n);\nBlockquote.displayName = 'Blockquote';\n\n// ─── Code (inline) ────────────────────────────────────────────────────────────\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n /** Copy content on click */\n copyable?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nconst Code = React.forwardRef<HTMLElement, CodeProps>(\n ({ copyable, className, children, ...props }, ref) => {\n const { copied, copy } = useCopy();\n const elRef = React.useRef<HTMLElement>(null);\n const mergedRef = (node: HTMLElement | null) => {\n (elRef as React.MutableRefObject<HTMLElement | null>).current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n };\n\n return (\n <code\n ref={mergedRef}\n onClick={copyable ? () => elRef.current && copy(elRef.current.innerText) : undefined}\n className={cn(\n 'font-mono text-[0.875em] bg-muted text-foreground rounded px-1.5 py-0.5 border border-border/50',\n copyable && 'cursor-pointer hover:bg-muted/70 transition-colors group/code inline-flex items-center gap-1',\n className,\n )}\n {...props}\n >\n {children}\n {copyable && (\n <span className=\"opacity-0 group-hover/code:opacity-60 transition-opacity\">\n {copied\n ? <Check className=\"w-3 h-3 text-success inline\" />\n : <Copy className=\"w-3 h-3 inline\" />\n }\n </span>\n )}\n </code>\n );\n }\n);\nCode.displayName = 'Code';\n\n// ─── Kbd ──────────────────────────────────────────────────────────────────────\n\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\n /** Array of keys to display; joined with `+` separator */\n keys?: string[];\n className?: string;\n children?: React.ReactNode;\n}\n\nconst KbdKey = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { className?: string }>(\n ({ className, children, ...props }, ref) => (\n <kbd\n ref={ref as React.Ref<HTMLElement>}\n className={cn(\n 'inline-flex items-center justify-center h-6 min-w-[1.5rem] px-1.5',\n 'font-mono text-xs font-medium',\n 'bg-background border border-border rounded shadow-[0_2px_0_0_hsl(var(--border))]',\n 'text-muted-foreground',\n className,\n )}\n {...props}\n >\n {children}\n </kbd>\n )\n);\nKbdKey.displayName = 'KbdKey';\n\nconst Kbd = React.forwardRef<HTMLSpanElement, KbdProps>(\n ({ keys, className, children, ...props }, ref) => {\n const items = keys ?? (children ? [children] : []);\n\n return (\n <span ref={ref} className={cn('inline-flex items-center gap-0.5', className)} {...props}>\n {items.map((key, i) => (\n <React.Fragment key={i}>\n {i > 0 && <span className=\"text-[10px] text-muted-foreground/60 px-0.5\">+</span>}\n <KbdKey>{key}</KbdKey>\n </React.Fragment>\n ))}\n </span>\n );\n }\n);\nKbd.displayName = 'Kbd';\n\n// ─── Link ─────────────────────────────────────────────────────────────────────\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Open in new tab with rel=\"noopener noreferrer\" */\n external?: boolean;\n /** Underline behaviour — default `hover` */\n underline?: 'always' | 'hover' | 'none';\n /** Color variant */\n color?: 'primary' | 'muted' | 'danger' | 'foreground';\n className?: string;\n children?: React.ReactNode;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n ({ external, underline = 'hover', color = 'primary', className, children, ...props }, ref) => (\n <a\n ref={ref}\n target={external ? '_blank' : props.target}\n rel={external ? 'noopener noreferrer' : props.rel}\n className={cn(\n 'inline-flex items-center gap-0.5 transition-colors',\n color === 'primary' && 'text-primary',\n color === 'muted' && 'text-muted-foreground',\n color === 'danger' && 'text-danger',\n color === 'foreground' && 'text-foreground',\n underline === 'always' && 'underline underline-offset-2',\n underline === 'hover' && 'hover:underline underline-offset-2',\n underline === 'none' && 'no-underline',\n className,\n )}\n {...props}\n >\n {children}\n {external && <ExternalLink className=\"w-3 h-3 shrink-0 opacity-70\" />}\n </a>\n )\n);\nLink.displayName = 'Link';\n\n// ─── Mark ─────────────────────────────────────────────────────────────────────\n\nconst markVariants = tv({\n base: 'rounded px-0.5 py-px font-medium',\n variants: {\n variant: {\n default: 'bg-warning/25 text-warning-foreground',\n primary: 'bg-primary/15 text-primary',\n success: 'bg-success/15 text-success',\n warning: 'bg-warning/25 text-warning-foreground',\n danger: 'bg-danger/15 text-danger',\n },\n },\n defaultVariants: { variant: 'default' },\n});\n\nexport interface MarkProps\n extends React.HTMLAttributes<HTMLElement>,\n VariantProps<typeof markVariants> {\n className?: string;\n children?: React.ReactNode;\n}\n\nconst Mark = React.forwardRef<HTMLElement, MarkProps>(\n ({ variant, className, children, ...props }, ref) => (\n <mark\n ref={ref as React.Ref<HTMLElement>}\n className={markVariants({ variant, className })}\n {...props}\n >\n {children}\n </mark>\n )\n);\nMark.displayName = 'Mark';\n\n// ─── Exports ──────────────────────────────────────────────────────────────────\n\nexport {\n Text,\n Heading,\n Paragraph,\n Lead,\n Blockquote,\n Code,\n Kbd,\n KbdKey,\n Link,\n Mark,\n textVariants,\n markVariants,\n};\n"
|
|
710
798
|
}
|
|
711
799
|
]
|
|
712
800
|
}
|