@karakuri-ui/react 0.3.3 → 0.3.5
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 +27 -4
- package/dist/components/ui/accordion.js +27 -24
- package/dist/components/ui/accordion.js.map +1 -1
- package/dist/components/ui/accordion.mjs +28 -25
- package/dist/components/ui/accordion.mjs.map +1 -1
- package/dist/components/ui/alert.js +45 -27
- package/dist/components/ui/alert.js.map +1 -1
- package/dist/components/ui/alert.mjs +46 -28
- package/dist/components/ui/alert.mjs.map +1 -1
- package/dist/components/ui/avatar.js +41 -32
- package/dist/components/ui/avatar.js.map +1 -1
- package/dist/components/ui/avatar.mjs +42 -33
- package/dist/components/ui/avatar.mjs.map +1 -1
- package/dist/components/ui/badge.js +46 -43
- package/dist/components/ui/badge.js.map +1 -1
- package/dist/components/ui/badge.mjs +47 -44
- package/dist/components/ui/badge.mjs.map +1 -1
- package/dist/components/ui/breadcrumb.js +30 -25
- package/dist/components/ui/breadcrumb.js.map +1 -1
- package/dist/components/ui/breadcrumb.mjs +31 -26
- package/dist/components/ui/breadcrumb.mjs.map +1 -1
- package/dist/components/ui/button-group.js +6 -5
- package/dist/components/ui/button-group.js.map +1 -1
- package/dist/components/ui/button-group.mjs +7 -6
- package/dist/components/ui/button-group.mjs.map +1 -1
- package/dist/components/ui/button.js +24 -14
- package/dist/components/ui/button.js.map +1 -1
- package/dist/components/ui/button.mjs +26 -16
- package/dist/components/ui/button.mjs.map +1 -1
- package/dist/components/ui/card.js +53 -39
- package/dist/components/ui/card.js.map +1 -1
- package/dist/components/ui/card.mjs +54 -40
- package/dist/components/ui/card.mjs.map +1 -1
- package/dist/components/ui/chart.d.mts +1 -1
- package/dist/components/ui/chart.d.ts +1 -1
- package/dist/components/ui/chart.js +154 -130
- package/dist/components/ui/chart.js.map +1 -1
- package/dist/components/ui/chart.mjs +155 -131
- package/dist/components/ui/chart.mjs.map +1 -1
- package/dist/components/ui/checkbox.js +47 -40
- package/dist/components/ui/checkbox.js.map +1 -1
- package/dist/components/ui/checkbox.mjs +49 -42
- package/dist/components/ui/checkbox.mjs.map +1 -1
- package/dist/components/ui/divider.js +16 -13
- package/dist/components/ui/divider.js.map +1 -1
- package/dist/components/ui/divider.mjs +17 -14
- package/dist/components/ui/divider.mjs.map +1 -1
- package/dist/components/ui/drawer.js +44 -35
- package/dist/components/ui/drawer.js.map +1 -1
- package/dist/components/ui/drawer.mjs +45 -36
- package/dist/components/ui/drawer.mjs.map +1 -1
- package/dist/components/ui/dropdown.js +31 -24
- package/dist/components/ui/dropdown.js.map +1 -1
- package/dist/components/ui/dropdown.mjs +32 -25
- package/dist/components/ui/dropdown.mjs.map +1 -1
- package/dist/components/ui/field.js +18 -15
- package/dist/components/ui/field.js.map +1 -1
- package/dist/components/ui/field.mjs +19 -16
- package/dist/components/ui/field.mjs.map +1 -1
- package/dist/components/ui/icon-button.js +17 -14
- package/dist/components/ui/icon-button.js.map +1 -1
- package/dist/components/ui/icon-button.mjs +19 -16
- package/dist/components/ui/icon-button.mjs.map +1 -1
- package/dist/components/ui/index.mjs +35 -35
- package/dist/components/ui/input.js +34 -29
- package/dist/components/ui/input.js.map +1 -1
- package/dist/components/ui/input.mjs +36 -31
- package/dist/components/ui/input.mjs.map +1 -1
- package/dist/components/ui/metric-card.js +24 -21
- package/dist/components/ui/metric-card.js.map +1 -1
- package/dist/components/ui/metric-card.mjs +25 -22
- package/dist/components/ui/metric-card.mjs.map +1 -1
- package/dist/components/ui/modal.js +91 -74
- package/dist/components/ui/modal.js.map +1 -1
- package/dist/components/ui/modal.mjs +92 -75
- package/dist/components/ui/modal.mjs.map +1 -1
- package/dist/components/ui/navigation-menu.js +114 -93
- package/dist/components/ui/navigation-menu.js.map +1 -1
- package/dist/components/ui/navigation-menu.mjs +115 -94
- package/dist/components/ui/navigation-menu.mjs.map +1 -1
- package/dist/components/ui/pagination.js +66 -55
- package/dist/components/ui/pagination.js.map +1 -1
- package/dist/components/ui/pagination.mjs +67 -56
- package/dist/components/ui/pagination.mjs.map +1 -1
- package/dist/components/ui/popover.js +39 -36
- package/dist/components/ui/popover.js.map +1 -1
- package/dist/components/ui/popover.mjs +40 -37
- package/dist/components/ui/popover.mjs.map +1 -1
- package/dist/components/ui/progress.js +73 -64
- package/dist/components/ui/progress.js.map +1 -1
- package/dist/components/ui/progress.mjs +74 -65
- package/dist/components/ui/progress.mjs.map +1 -1
- package/dist/components/ui/radio-group.js +23 -19
- package/dist/components/ui/radio-group.js.map +1 -1
- package/dist/components/ui/radio-group.mjs +25 -21
- package/dist/components/ui/radio-group.mjs.map +1 -1
- package/dist/components/ui/segmented.js +7 -6
- package/dist/components/ui/segmented.js.map +1 -1
- package/dist/components/ui/segmented.mjs +8 -7
- package/dist/components/ui/segmented.mjs.map +1 -1
- package/dist/components/ui/select.js +55 -48
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +56 -49
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/skeleton.js +20 -19
- package/dist/components/ui/skeleton.js.map +1 -1
- package/dist/components/ui/skeleton.mjs +21 -20
- package/dist/components/ui/skeleton.mjs.map +1 -1
- package/dist/components/ui/slider.js +68 -58
- package/dist/components/ui/slider.js.map +1 -1
- package/dist/components/ui/slider.mjs +69 -59
- package/dist/components/ui/slider.mjs.map +1 -1
- package/dist/components/ui/spinner.js +185 -176
- package/dist/components/ui/spinner.js.map +1 -1
- package/dist/components/ui/spinner.mjs +186 -177
- package/dist/components/ui/spinner.mjs.map +1 -1
- package/dist/components/ui/switch.js +39 -28
- package/dist/components/ui/switch.js.map +1 -1
- package/dist/components/ui/switch.mjs +41 -30
- package/dist/components/ui/switch.mjs.map +1 -1
- package/dist/components/ui/table.js +26 -23
- package/dist/components/ui/table.js.map +1 -1
- package/dist/components/ui/table.mjs +27 -24
- package/dist/components/ui/table.mjs.map +1 -1
- package/dist/components/ui/tabs.js +25 -9
- package/dist/components/ui/tabs.js.map +1 -1
- package/dist/components/ui/tabs.mjs +26 -10
- package/dist/components/ui/tabs.mjs.map +1 -1
- package/dist/components/ui/textarea.js +2 -1
- package/dist/components/ui/textarea.js.map +1 -1
- package/dist/components/ui/textarea.mjs +4 -3
- package/dist/components/ui/textarea.mjs.map +1 -1
- package/dist/components/ui/toast.js +104 -80
- package/dist/components/ui/toast.js.map +1 -1
- package/dist/components/ui/toast.mjs +105 -81
- package/dist/components/ui/toast.mjs.map +1 -1
- package/dist/components/ui/toggle-group.js +9 -8
- package/dist/components/ui/toggle-group.js.map +1 -1
- package/dist/components/ui/toggle-group.mjs +10 -9
- package/dist/components/ui/toggle-group.mjs.map +1 -1
- package/dist/components/ui/toggle.js +3 -2
- package/dist/components/ui/toggle.js.map +1 -1
- package/dist/components/ui/toggle.mjs +4 -3
- package/dist/components/ui/toggle.mjs.map +1 -1
- package/dist/components/ui/tooltip.js +18 -15
- package/dist/components/ui/tooltip.js.map +1 -1
- package/dist/components/ui/tooltip.mjs +19 -16
- package/dist/components/ui/tooltip.mjs.map +1 -1
- package/package.json +27 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/spinner.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Ring SVG sizes per size variant (diameter in px) */\nconst RING_SIZES = {\n sm: 16,\n default: 24,\n lg: 32,\n} as const\n\n/** Ring stroke widths per size */\nconst RING_STROKE = {\n sm: 2,\n default: 2.5,\n lg: 3,\n} as const\n\n/** Dot sizes (diameter in px) */\nconst DOT_SIZES = {\n sm: 4,\n default: 6,\n lg: 8,\n} as const\n\n/** Dot container gap per size */\nconst DOT_GAP = {\n sm: 3,\n default: 4,\n lg: 5,\n} as const\n\n/** Bar widths per size */\nconst BAR_WIDTHS = {\n sm: 2,\n default: 3,\n lg: 4,\n} as const\n\n/** Bar heights per size */\nconst BAR_HEIGHTS = {\n sm: 12,\n default: 16,\n lg: 24,\n} as const\n\n/** Bar gap per size */\nconst BAR_GAP = {\n sm: 2,\n default: 3,\n lg: 4,\n} as const\n\n/** Orbit sizes (diameter in px) */\nconst ORBIT_SIZES = {\n sm: 22,\n default: 32,\n lg: 44,\n} as const\n\n/** Orbit ring stroke widths per size */\nconst ORBIT_STROKE = {\n sm: 2.5,\n default: 3,\n lg: 3.5,\n} as const\n\n\n/** Number of dots in dots variant */\nconst DOT_COUNT = 3\n\n/** Number of bars in bars variant */\nconst BAR_COUNT = 4\n\n/** SVG viewBox for ring spinner */\nconst RING_VIEWBOX = 24\n\n/** SVG center for ring spinner */\nconst RING_CENTER = 12\n\n// ============================================================================\n// Color mapping\n// ============================================================================\n\nconst strokeColorMap = {\n default: 'stroke-foreground',\n primary: 'stroke-primary',\n current: 'stroke-current',\n} as const\n\nconst bgColorMap = {\n default: 'bg-foreground',\n primary: 'bg-primary',\n current: 'bg-current',\n} as const\n\n// ============================================================================\n// Speed mapping\n// ============================================================================\n\n/** Speed durations in ms for ring/dots/bars */\nconst SPEED_MS = { slow: 1500, default: 1000, fast: 750 } as const\n/** Speed durations in ms for orbit (slower) */\nconst ORBIT_SPEED_MS = { slow: 2000, default: 1500, fast: 1000 } as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst spinnerVariants = cva(\n 'inline-flex items-center justify-center shrink-0',\n {\n variants: {\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type OrbitStyle = 'ring' | 'dots' | 'cube' | 'flip' | 'morph'\n\nexport interface SpinnerProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof spinnerVariants> {\n /** Visual variant */\n variant?: 'ring' | 'dots' | 'bars' | 'orbit'\n /** Orbit sub-style (only when variant=\"orbit\") */\n orbitStyle?: OrbitStyle\n /** Spinner color */\n color?: 'default' | 'primary' | 'current'\n /** Animation speed */\n speed?: 'slow' | 'default' | 'fast'\n /** Accessibility label */\n label?: string\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n ({\n className,\n variant = 'ring',\n orbitStyle = 'ring',\n size,\n color = 'default',\n speed = 'default',\n label,\n ...props\n }, ref) => {\n const resolvedSize = size || 'default'\n\n const orbitMap = {\n ring: OrbitSpinner,\n dots: OrbitDotsSpinner,\n cube: OrbitCubeSpinner,\n flip: OrbitFlipSpinner,\n morph: OrbitMorphSpinner,\n } as const\n\n return (\n <div\n ref={ref}\n role=\"status\"\n aria-label={label || 'Loading'}\n className={cn(spinnerVariants({ size }), className)}\n {...props}\n >\n {variant === 'ring' && (\n <RingSpinner size={resolvedSize} color={color} speed={speed} />\n )}\n {variant === 'dots' && (\n <DotsSpinner size={resolvedSize} color={color} speed={speed} />\n )}\n {variant === 'bars' && (\n <BarsSpinner size={resolvedSize} color={color} speed={speed} />\n )}\n {variant === 'orbit' && (() => {\n const OrbitComponent = orbitMap[orbitStyle]\n return <OrbitComponent size={resolvedSize} color={color} speed={speed} />\n })()}\n </div>\n )\n }\n)\nSpinner.displayName = 'Spinner'\n\n// ============================================================================\n// Ring Spinner (SVG circle with animate-spin)\n// ============================================================================\n\nfunction RingSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const diameter = RING_SIZES[size]\n const stroke = RING_STROKE[size]\n const r = (RING_VIEWBOX - stroke) / 2\n const circumference = 2 * Math.PI * r\n\n return (\n <svg\n viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n width={diameter}\n height={diameter}\n fill=\"none\"\n className=\"animate-spin\"\n style={{ animationDuration: `${SPEED_MS[speed]}ms` }}\n >\n {/* Track */}\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n className=\"stroke-border\"\n strokeWidth={stroke}\n />\n {/* Indicator */}\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n className={strokeColorMap[color]}\n strokeWidth={stroke}\n strokeDasharray={circumference}\n strokeDashoffset={circumference * 0.75}\n strokeLinecap=\"round\"\n />\n </svg>\n )\n}\n\n// ============================================================================\n// Dots Spinner (3 pulsing dots)\n// ============================================================================\n\nfunction DotsSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const dotSize = DOT_SIZES[size]\n const gap = DOT_GAP[size]\n\n return (\n <div className=\"inline-flex items-center\" style={{ gap }}>\n {Array.from({ length: DOT_COUNT }, (_, i) => (\n <div\n key={i}\n className={cn(\n 'rounded-full animate-spinner-dot',\n bgColorMap[color],\n )}\n style={{\n width: dotSize,\n height: dotSize,\n animationDuration: `${SPEED_MS[speed]}ms`,\n animationDelay: `${i * (SPEED_MS[speed] / DOT_COUNT / 1.5)}ms`,\n }}\n />\n ))}\n </div>\n )\n}\n\n// ============================================================================\n// Bars Spinner (4 pulsing bars)\n// ============================================================================\n\nfunction BarsSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const barWidth = BAR_WIDTHS[size]\n const barHeight = BAR_HEIGHTS[size]\n const gap = BAR_GAP[size]\n\n return (\n <div className=\"inline-flex items-center\" style={{ gap, height: barHeight }}>\n {Array.from({ length: BAR_COUNT }, (_, i) => (\n <div\n key={i}\n className={cn(\n 'rounded-full animate-spinner-bar origin-center',\n bgColorMap[color],\n )}\n style={{\n width: barWidth,\n height: barHeight,\n animationDuration: `${SPEED_MS[speed]}ms`,\n animationDelay: `${i * (SPEED_MS[speed] / BAR_COUNT / 1.5)}ms`,\n }}\n />\n ))}\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Spinner (3D rotating ring)\n// ============================================================================\n\nconst orbitTextColorMap = {\n default: 'text-foreground',\n primary: 'text-primary',\n current: '',\n} as const\n\nfunction OrbitSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const diameter = ORBIT_SIZES[size]\n const stroke = ORBIT_STROKE[size]\n const r = (RING_VIEWBOX - stroke * 2) / 2\n const circumference = 2 * Math.PI * r\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: diameter,\n height: diameter,\n perspective: diameter * 3,\n position: 'relative',\n }}\n >\n {/* Ring 1 — solid, Y-axis rotation */}\n <svg\n viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n width={diameter}\n height={diameter}\n fill=\"none\"\n className=\"absolute inset-0 animate-spinner-orbit\"\n style={{ animationDuration: `${ORBIT_SPEED_MS[speed]}ms` }}\n >\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n stroke=\"currentColor\"\n strokeWidth={stroke}\n />\n </svg>\n {/* Ring 2 — solid, perpendicular, reverse direction */}\n <svg\n viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n width={diameter}\n height={diameter}\n fill=\"none\"\n className=\"absolute inset-0 animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n transform: 'rotateZ(90deg)',\n animationDirection: 'reverse',\n animationDelay: '-0.4s',\n opacity: 0.35,\n }}\n >\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n stroke=\"currentColor\"\n strokeWidth={stroke}\n />\n </svg>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Dots — 3 dots orbiting in 3D path\n// ============================================================================\n\n/** Orbit dot size per spinner size */\nconst ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 } as const\n\nfunction OrbitDotsSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const diameter = ORBIT_SIZES[size]\n const dotSize = ORBIT_DOT_SIZE[size]\n const orbitRadius = (diameter - dotSize) / 2\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: diameter,\n height: diameter,\n perspective: diameter * 3,\n position: 'relative',\n }}\n >\n <div\n className=\"animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: '100%',\n height: '100%',\n position: 'relative',\n transformStyle: 'preserve-3d',\n }}\n >\n {[0, 120, 240].map((angle) => (\n <div\n key={angle}\n className=\"absolute rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n backgroundColor: 'currentColor',\n left: '50%',\n top: '50%',\n transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${orbitRadius}px)`,\n }}\n />\n ))}\n </div>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Cube — wireframe cube rotating in 3D\n// ============================================================================\n\n/** Cube face sizes per spinner size */\nconst CUBE_SIZES = { sm: 12, default: 18, lg: 26 } as const\n\nfunction OrbitCubeSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const cubeSize = CUBE_SIZES[size]\n const half = cubeSize / 2\n const radius = Math.round(cubeSize * 0.15)\n\n const overlap = 1\n const faceBase: React.CSSProperties = {\n position: 'absolute',\n width: cubeSize + overlap * 2,\n height: cubeSize + overlap * 2,\n backgroundColor: 'currentColor',\n borderRadius: radius,\n top: -overlap,\n left: -overlap,\n }\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: cubeSize,\n height: cubeSize,\n perspective: cubeSize * 6,\n }}\n >\n {/* Diagonal tilt — shows top + corner for depth */}\n <div\n style={{\n width: cubeSize,\n height: cubeSize,\n transform: 'rotateX(-25deg) rotateZ(15deg)',\n transformStyle: 'preserve-3d',\n }}\n >\n {/* Y-axis rotation */}\n <div\n className=\"animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: cubeSize,\n height: cubeSize,\n position: 'relative',\n transformStyle: 'preserve-3d',\n }}\n >\n <div style={{ ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 }} />\n <div style={{ ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 }} />\n <div style={{ ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n <div style={{ ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n <div style={{ ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 }} />\n <div style={{ ...faceBase, transform: `rotateX(-90deg) translateZ(${half}px)`, opacity: 0.08 }} />\n </div>\n </div>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Flip — rounded square tumbling in 3D\n// ============================================================================\n\n/** Flip square sizes per spinner size */\nconst FLIP_SIZES = { sm: 14, default: 20, lg: 28 } as const\n\nfunction OrbitFlipSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const sqSize = FLIP_SIZES[size]\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: sqSize,\n height: sqSize,\n perspective: sqSize * 4,\n }}\n >\n <div style={{ transform: 'rotateX(25deg)', transformStyle: 'preserve-3d', width: '100%', height: '100%' }}>\n <div\n className=\"animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: '100%',\n height: '100%',\n borderRadius: '25%',\n backgroundColor: 'currentColor',\n opacity: 0.85,\n }}\n />\n </div>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Morph — organic shape morphing + 3D rotation\n// ============================================================================\n\n/** Morph sizes per spinner size */\nconst MORPH_SIZES = { sm: 16, default: 24, lg: 34 } as const\n\nfunction OrbitMorphSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const morphSize = MORPH_SIZES[size]\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: morphSize,\n height: morphSize,\n perspective: morphSize * 3,\n }}\n >\n <div\n className=\"animate-spinner-morph\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: '100%',\n height: '100%',\n backgroundColor: 'currentColor',\n opacity: 0.85,\n }}\n />\n </div>\n )\n}\n\nexport { Spinner, spinnerVariants }\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/spinner.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Ring SVG sizes per size variant (diameter in px) */\nconst RING_SIZES = {\n sm: 16,\n default: 24,\n lg: 32,\n} as const\n\n/** Ring stroke widths per size */\nconst RING_STROKE = {\n sm: 2,\n default: 2.5,\n lg: 3,\n} as const\n\n/** Dot sizes (diameter in px) */\nconst DOT_SIZES = {\n sm: 4,\n default: 6,\n lg: 8,\n} as const\n\n/** Dot container gap per size */\nconst DOT_GAP = {\n sm: 3,\n default: 4,\n lg: 5,\n} as const\n\n/** Bar widths per size */\nconst BAR_WIDTHS = {\n sm: 2,\n default: 3,\n lg: 4,\n} as const\n\n/** Bar heights per size */\nconst BAR_HEIGHTS = {\n sm: 12,\n default: 16,\n lg: 24,\n} as const\n\n/** Bar gap per size */\nconst BAR_GAP = {\n sm: 2,\n default: 3,\n lg: 4,\n} as const\n\n/** Orbit sizes (diameter in px) */\nconst ORBIT_SIZES = {\n sm: 22,\n default: 32,\n lg: 44,\n} as const\n\n/** Orbit ring stroke widths per size */\nconst ORBIT_STROKE = {\n sm: 2.5,\n default: 3,\n lg: 3.5,\n} as const\n\n\n/** Number of dots in dots variant */\nconst DOT_COUNT = 3\n\n/** Number of bars in bars variant */\nconst BAR_COUNT = 4\n\n/** SVG viewBox for ring spinner */\nconst RING_VIEWBOX = 24\n\n/** SVG center for ring spinner */\nconst RING_CENTER = 12\n\n// ============================================================================\n// Color mapping\n// ============================================================================\n\nconst strokeColorMap = {\n default: 'stroke-foreground',\n primary: 'stroke-primary',\n current: 'stroke-current',\n} as const\n\nconst bgColorMap = {\n default: 'bg-foreground',\n primary: 'bg-primary',\n current: 'bg-current',\n} as const\n\n// ============================================================================\n// Speed mapping\n// ============================================================================\n\n/** Speed durations in ms for ring/dots/bars */\nconst SPEED_MS = { slow: 1500, default: 1000, fast: 750 } as const\n/** Speed durations in ms for orbit (slower) */\nconst ORBIT_SPEED_MS = { slow: 2000, default: 1500, fast: 1000 } as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst spinnerVariants = cva(\n 'inline-flex items-center justify-center shrink-0',\n {\n variants: {\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type OrbitStyle = 'ring' | 'dots' | 'cube' | 'flip' | 'morph'\n\nexport interface SpinnerProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof spinnerVariants> {\n /** Visual variant */\n variant?: 'ring' | 'dots' | 'bars' | 'orbit'\n /** Orbit sub-style (only when variant=\"orbit\") */\n orbitStyle?: OrbitStyle\n /** Spinner color */\n color?: 'default' | 'primary' | 'current'\n /** Animation speed */\n speed?: 'slow' | 'default' | 'fast'\n /** Accessibility label */\n label?: string\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n ({\n className,\n variant = 'ring',\n orbitStyle = 'ring',\n size,\n color = 'default',\n speed = 'default',\n label,\n ...props\n }, ref) => {\n const resolvedSize = size || 'default'\n\n const orbitMap = {\n ring: OrbitSpinner,\n dots: OrbitDotsSpinner,\n cube: OrbitCubeSpinner,\n flip: OrbitFlipSpinner,\n morph: OrbitMorphSpinner,\n } as const\n\n return (\n <div\n ref={ref}\n role=\"status\"\n aria-label={label || 'Loading'}\n className={cn(spinnerVariants({ size }), className)}\n {...props}\n >\n {variant === 'ring' && (\n <RingSpinner size={resolvedSize} color={color} speed={speed} />\n )}\n {variant === 'dots' && (\n <DotsSpinner size={resolvedSize} color={color} speed={speed} />\n )}\n {variant === 'bars' && (\n <BarsSpinner size={resolvedSize} color={color} speed={speed} />\n )}\n {variant === 'orbit' && (() => {\n const OrbitComponent = orbitMap[orbitStyle]\n return <OrbitComponent size={resolvedSize} color={color} speed={speed} />\n })()}\n </div>\n )\n }\n)\nSpinner.displayName = 'Spinner'\n\n// ============================================================================\n// Ring Spinner (SVG circle with animate-spin)\n// ============================================================================\n\nfunction RingSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const diameter = RING_SIZES[size]\n const stroke = RING_STROKE[size]\n const r = (RING_VIEWBOX - stroke) / 2\n const circumference = 2 * Math.PI * r\n\n return (\n <svg\n viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n width={diameter}\n height={diameter}\n fill=\"none\"\n className=\"animate-spin\"\n style={{ animationDuration: `${SPEED_MS[speed]}ms` }}\n >\n {/* Track */}\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n className=\"stroke-border\"\n strokeWidth={stroke}\n />\n {/* Indicator */}\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n className={strokeColorMap[color]}\n strokeWidth={stroke}\n strokeDasharray={circumference}\n strokeDashoffset={circumference * 0.75}\n strokeLinecap=\"round\"\n />\n </svg>\n )\n}\n\n// ============================================================================\n// Dots Spinner (3 pulsing dots)\n// ============================================================================\n\nfunction DotsSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const dotSize = DOT_SIZES[size]\n const gap = DOT_GAP[size]\n\n return (\n <div className=\"inline-flex items-center\" style={{ gap }}>\n {Array.from({ length: DOT_COUNT }, (_, i) => (\n <div\n key={i}\n className={cn(\n 'rounded-full animate-spinner-dot',\n bgColorMap[color],\n )}\n style={{\n width: dotSize,\n height: dotSize,\n animationDuration: `${SPEED_MS[speed]}ms`,\n animationDelay: `${i * (SPEED_MS[speed] / DOT_COUNT / 1.5)}ms`,\n }}\n />\n ))}\n </div>\n )\n}\n\n// ============================================================================\n// Bars Spinner (4 pulsing bars)\n// ============================================================================\n\nfunction BarsSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const barWidth = BAR_WIDTHS[size]\n const barHeight = BAR_HEIGHTS[size]\n const gap = BAR_GAP[size]\n\n return (\n <div className=\"inline-flex items-center\" style={{ gap, height: barHeight }}>\n {Array.from({ length: BAR_COUNT }, (_, i) => (\n <div\n key={i}\n className={cn(\n 'rounded-full animate-spinner-bar origin-center',\n bgColorMap[color],\n )}\n style={{\n width: barWidth,\n height: barHeight,\n animationDuration: `${SPEED_MS[speed]}ms`,\n animationDelay: `${i * (SPEED_MS[speed] / BAR_COUNT / 1.5)}ms`,\n }}\n />\n ))}\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Spinner (3D rotating ring)\n// ============================================================================\n\nconst orbitTextColorMap = {\n default: 'text-foreground',\n primary: 'text-primary',\n current: '',\n} as const\n\nfunction OrbitSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const diameter = ORBIT_SIZES[size]\n const stroke = ORBIT_STROKE[size]\n const r = (RING_VIEWBOX - stroke * 2) / 2\n const circumference = 2 * Math.PI * r\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: diameter,\n height: diameter,\n perspective: diameter * 3,\n position: 'relative',\n }}\n >\n {/* Ring 1 — solid, Y-axis rotation */}\n <svg\n viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n width={diameter}\n height={diameter}\n fill=\"none\"\n className=\"absolute inset-0 animate-spinner-orbit\"\n style={{ animationDuration: `${ORBIT_SPEED_MS[speed]}ms` }}\n >\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n stroke=\"currentColor\"\n strokeWidth={stroke}\n />\n </svg>\n {/* Ring 2 — solid, perpendicular, reverse direction */}\n <svg\n viewBox={`0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`}\n width={diameter}\n height={diameter}\n fill=\"none\"\n className=\"absolute inset-0 animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n transform: 'rotateZ(90deg)',\n animationDirection: 'reverse',\n animationDelay: '-0.4s',\n opacity: 0.35,\n }}\n >\n <circle\n cx={RING_CENTER}\n cy={RING_CENTER}\n r={r}\n stroke=\"currentColor\"\n strokeWidth={stroke}\n />\n </svg>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Dots — 3 dots orbiting in 3D path\n// ============================================================================\n\n/** Orbit dot size per spinner size */\nconst ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 } as const\n\nfunction OrbitDotsSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const diameter = ORBIT_SIZES[size]\n const dotSize = ORBIT_DOT_SIZE[size]\n const orbitRadius = (diameter - dotSize) / 2\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: diameter,\n height: diameter,\n perspective: diameter * 3,\n position: 'relative',\n }}\n >\n <div\n className=\"animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: '100%',\n height: '100%',\n position: 'relative',\n transformStyle: 'preserve-3d',\n }}\n >\n {[0, 120, 240].map((angle) => (\n <div\n key={angle}\n className=\"absolute rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n backgroundColor: 'currentColor',\n left: '50%',\n top: '50%',\n transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${orbitRadius}px)`,\n }}\n />\n ))}\n </div>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Cube — wireframe cube rotating in 3D\n// ============================================================================\n\n/** Cube face sizes per spinner size */\nconst CUBE_SIZES = { sm: 12, default: 18, lg: 26 } as const\n\nfunction OrbitCubeSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const cubeSize = CUBE_SIZES[size]\n const half = cubeSize / 2\n const radius = Math.round(cubeSize * 0.15)\n\n const overlap = 1\n const faceBase: React.CSSProperties = {\n position: 'absolute',\n width: cubeSize + overlap * 2,\n height: cubeSize + overlap * 2,\n backgroundColor: 'currentColor',\n borderRadius: radius,\n top: -overlap,\n left: -overlap,\n }\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: cubeSize,\n height: cubeSize,\n perspective: cubeSize * 6,\n }}\n >\n {/* Diagonal tilt — shows top + corner for depth */}\n <div\n style={{\n width: cubeSize,\n height: cubeSize,\n transform: 'rotateX(-25deg) rotateZ(15deg)',\n transformStyle: 'preserve-3d',\n }}\n >\n {/* Y-axis rotation */}\n <div\n className=\"animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: cubeSize,\n height: cubeSize,\n position: 'relative',\n transformStyle: 'preserve-3d',\n }}\n >\n <div style={{ ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 }} />\n <div style={{ ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 }} />\n <div style={{ ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n <div style={{ ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 }} />\n <div style={{ ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 }} />\n <div style={{ ...faceBase, transform: `rotateX(-90deg) translateZ(${half}px)`, opacity: 0.08 }} />\n </div>\n </div>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Flip — rounded square tumbling in 3D\n// ============================================================================\n\n/** Flip square sizes per spinner size */\nconst FLIP_SIZES = { sm: 14, default: 20, lg: 28 } as const\n\nfunction OrbitFlipSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const sqSize = FLIP_SIZES[size]\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: sqSize,\n height: sqSize,\n perspective: sqSize * 4,\n }}\n >\n <div style={{ transform: 'rotateX(25deg)', transformStyle: 'preserve-3d', width: '100%', height: '100%' }}>\n <div\n className=\"animate-spinner-orbit\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: '100%',\n height: '100%',\n borderRadius: '25%',\n backgroundColor: 'currentColor',\n opacity: 0.85,\n }}\n />\n </div>\n </div>\n )\n}\n\n// ============================================================================\n// Orbit Morph — organic shape morphing + 3D rotation\n// ============================================================================\n\n/** Morph sizes per spinner size */\nconst MORPH_SIZES = { sm: 16, default: 24, lg: 34 } as const\n\nfunction OrbitMorphSpinner({ size, color, speed }: {\n size: 'sm' | 'default' | 'lg'\n color: 'default' | 'primary' | 'current'\n speed: 'slow' | 'default' | 'fast'\n}) {\n const morphSize = MORPH_SIZES[size]\n\n return (\n <div\n className={cn(orbitTextColorMap[color])}\n style={{\n width: morphSize,\n height: morphSize,\n perspective: morphSize * 3,\n }}\n >\n <div\n className=\"animate-spinner-morph\"\n style={{\n animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,\n width: '100%',\n height: '100%',\n backgroundColor: 'currentColor',\n opacity: 0.85,\n }}\n />\n </div>\n )\n}\n\nexport { Spinner, spinnerVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -33,6 +33,7 @@ __export(switch_exports, {
|
|
|
33
33
|
switchVariants: () => switchVariants
|
|
34
34
|
});
|
|
35
35
|
module.exports = __toCommonJS(switch_exports);
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
37
|
var React = __toESM(require("react"));
|
|
37
38
|
var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
|
|
38
39
|
var import_class_variance_authority = require("class-variance-authority");
|
|
@@ -113,37 +114,40 @@ const Switch = React.forwardRef(({ className, size, label, labelPosition = "end"
|
|
|
113
114
|
const resolvedDisabled = disabled ?? fieldContext?.disabled;
|
|
114
115
|
const generatedId = React.useId();
|
|
115
116
|
const switchId = id ?? fieldContext?.id ?? generatedId;
|
|
116
|
-
const switchEl = /* @__PURE__ */
|
|
117
|
+
const switchEl = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
118
|
SwitchPrimitive.Root,
|
|
118
119
|
{
|
|
119
120
|
ref,
|
|
120
121
|
id: switchId,
|
|
121
122
|
disabled: resolvedDisabled,
|
|
122
123
|
className: (0, import_utils.cn)(switchVariants({ size }), checkedTrackColors[color], className),
|
|
123
|
-
...props
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
124
|
+
...props,
|
|
125
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
|
+
SwitchPrimitive.Thumb,
|
|
127
|
+
{
|
|
128
|
+
className: (0, import_utils.cn)(
|
|
129
|
+
"group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0",
|
|
130
|
+
color === "default" ? "bg-background" : "bg-primary-foreground",
|
|
131
|
+
"transition-transform duration-normal ease-out",
|
|
132
|
+
"data-[state=unchecked]:translate-x-0",
|
|
133
|
+
thumbSizes[resolvedSize],
|
|
134
|
+
thumbTranslate[resolvedSize]
|
|
135
|
+
),
|
|
136
|
+
children: (checkedIcon || uncheckedIcon) && resolvedSize !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
137
|
+
checkedIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(
|
|
138
|
+
iconSizes[resolvedSize],
|
|
139
|
+
checkedIconColors[color],
|
|
140
|
+
"hidden group-data-[state=checked]/thumb:block"
|
|
141
|
+
), children: checkedIcon }),
|
|
142
|
+
uncheckedIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(
|
|
143
|
+
iconSizes[resolvedSize],
|
|
144
|
+
"text-text-muted",
|
|
145
|
+
"hidden group-data-[state=unchecked]/thumb:block"
|
|
146
|
+
), children: uncheckedIcon })
|
|
147
|
+
] })
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
}
|
|
147
151
|
);
|
|
148
152
|
const labelClassName = (0, import_utils.cn)(
|
|
149
153
|
labelSizes[resolvedSize],
|
|
@@ -152,17 +156,24 @@ const Switch = React.forwardRef(({ className, size, label, labelPosition = "end"
|
|
|
152
156
|
resolvedDisabled && "opacity-50 cursor-not-allowed"
|
|
153
157
|
);
|
|
154
158
|
if (startLabel || endLabel) {
|
|
155
|
-
return /* @__PURE__ */
|
|
159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("group/switch flex items-center", gapSizes[resolvedSize]), children: [
|
|
160
|
+
startLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: switchId, className: labelClassName, children: startLabel }),
|
|
161
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: switchEl }),
|
|
162
|
+
endLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: switchId, className: labelClassName, children: endLabel })
|
|
163
|
+
] });
|
|
156
164
|
}
|
|
157
165
|
if (!label) return switchEl;
|
|
158
166
|
const isVertical = labelPosition === "top" || labelPosition === "bottom";
|
|
159
167
|
const isReversed = labelPosition === "start" || labelPosition === "top";
|
|
160
|
-
return /* @__PURE__ */
|
|
168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)(
|
|
161
169
|
"group/switch flex",
|
|
162
170
|
isVertical ? "flex-col items-start gap-1.5" : "items-center",
|
|
163
171
|
isReversed && (isVertical ? "flex-col-reverse" : "flex-row-reverse"),
|
|
164
172
|
!isVertical && gapSizes[resolvedSize]
|
|
165
|
-
)
|
|
173
|
+
), children: [
|
|
174
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center", children: switchEl }),
|
|
175
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: switchId, className: labelClassName, children: label })
|
|
176
|
+
] });
|
|
166
177
|
});
|
|
167
178
|
Switch.displayName = "Switch";
|
|
168
179
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n const switchId = id ?? fieldContext?.id ?? generatedId\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n const switchId = id ?? fieldContext?.id ?? generatedId\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
4
5
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
import { useFieldContext } from "./field";
|
|
6
|
+
import { cn } from "../../lib/utils.mjs";
|
|
7
|
+
import { useFieldContext } from "./field.mjs";
|
|
7
8
|
const switchVariants = cva(
|
|
8
9
|
[
|
|
9
10
|
"group peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
|
|
@@ -79,37 +80,40 @@ const Switch = React.forwardRef(({ className, size, label, labelPosition = "end"
|
|
|
79
80
|
const resolvedDisabled = disabled ?? fieldContext?.disabled;
|
|
80
81
|
const generatedId = React.useId();
|
|
81
82
|
const switchId = id ?? fieldContext?.id ?? generatedId;
|
|
82
|
-
const switchEl = /* @__PURE__ */
|
|
83
|
+
const switchEl = /* @__PURE__ */ jsx(
|
|
83
84
|
SwitchPrimitive.Root,
|
|
84
85
|
{
|
|
85
86
|
ref,
|
|
86
87
|
id: switchId,
|
|
87
88
|
disabled: resolvedDisabled,
|
|
88
89
|
className: cn(switchVariants({ size }), checkedTrackColors[color], className),
|
|
89
|
-
...props
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
90
|
+
...props,
|
|
91
|
+
children: /* @__PURE__ */ jsx(
|
|
92
|
+
SwitchPrimitive.Thumb,
|
|
93
|
+
{
|
|
94
|
+
className: cn(
|
|
95
|
+
"group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0",
|
|
96
|
+
color === "default" ? "bg-background" : "bg-primary-foreground",
|
|
97
|
+
"transition-transform duration-normal ease-out",
|
|
98
|
+
"data-[state=unchecked]:translate-x-0",
|
|
99
|
+
thumbSizes[resolvedSize],
|
|
100
|
+
thumbTranslate[resolvedSize]
|
|
101
|
+
),
|
|
102
|
+
children: (checkedIcon || uncheckedIcon) && resolvedSize !== "sm" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
103
|
+
checkedIcon && /* @__PURE__ */ jsx("span", { className: cn(
|
|
104
|
+
iconSizes[resolvedSize],
|
|
105
|
+
checkedIconColors[color],
|
|
106
|
+
"hidden group-data-[state=checked]/thumb:block"
|
|
107
|
+
), children: checkedIcon }),
|
|
108
|
+
uncheckedIcon && /* @__PURE__ */ jsx("span", { className: cn(
|
|
109
|
+
iconSizes[resolvedSize],
|
|
110
|
+
"text-text-muted",
|
|
111
|
+
"hidden group-data-[state=unchecked]/thumb:block"
|
|
112
|
+
), children: uncheckedIcon })
|
|
113
|
+
] })
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
}
|
|
113
117
|
);
|
|
114
118
|
const labelClassName = cn(
|
|
115
119
|
labelSizes[resolvedSize],
|
|
@@ -118,17 +122,24 @@ const Switch = React.forwardRef(({ className, size, label, labelPosition = "end"
|
|
|
118
122
|
resolvedDisabled && "opacity-50 cursor-not-allowed"
|
|
119
123
|
);
|
|
120
124
|
if (startLabel || endLabel) {
|
|
121
|
-
return /* @__PURE__ */
|
|
125
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("group/switch flex items-center", gapSizes[resolvedSize]), children: [
|
|
126
|
+
startLabel && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: labelClassName, children: startLabel }),
|
|
127
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center", children: switchEl }),
|
|
128
|
+
endLabel && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: labelClassName, children: endLabel })
|
|
129
|
+
] });
|
|
122
130
|
}
|
|
123
131
|
if (!label) return switchEl;
|
|
124
132
|
const isVertical = labelPosition === "top" || labelPosition === "bottom";
|
|
125
133
|
const isReversed = labelPosition === "start" || labelPosition === "top";
|
|
126
|
-
return /* @__PURE__ */
|
|
134
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(
|
|
127
135
|
"group/switch flex",
|
|
128
136
|
isVertical ? "flex-col items-start gap-1.5" : "items-center",
|
|
129
137
|
isReversed && (isVertical ? "flex-col-reverse" : "flex-row-reverse"),
|
|
130
138
|
!isVertical && gapSizes[resolvedSize]
|
|
131
|
-
)
|
|
139
|
+
), children: [
|
|
140
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center", children: switchEl }),
|
|
141
|
+
/* @__PURE__ */ jsx("label", { htmlFor: switchId, className: labelClassName, children: label })
|
|
142
|
+
] });
|
|
132
143
|
});
|
|
133
144
|
Switch.displayName = "Switch";
|
|
134
145
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n const switchId = id ?? fieldContext?.id ?? generatedId\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n const switchId = id ?? fieldContext?.id ?? generatedId\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -39,6 +39,7 @@ __export(table_exports, {
|
|
|
39
39
|
TableRow: () => TableRow
|
|
40
40
|
});
|
|
41
41
|
module.exports = __toCommonJS(table_exports);
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
43
|
var React = __toESM(require("react"));
|
|
43
44
|
var import_class_variance_authority = require("class-variance-authority");
|
|
44
45
|
var import_utils = require("../../lib/utils");
|
|
@@ -74,19 +75,19 @@ const tableVariants = (0, import_class_variance_authority.cva)(
|
|
|
74
75
|
}
|
|
75
76
|
);
|
|
76
77
|
const Table = React.forwardRef(
|
|
77
|
-
({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */
|
|
78
|
+
({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableContext.Provider, { value: { size, variant, stickyHeader }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
78
79
|
"table",
|
|
79
80
|
{
|
|
80
81
|
ref,
|
|
81
82
|
className: (0, import_utils.cn)(tableVariants({ variant }), className),
|
|
82
83
|
...props
|
|
83
84
|
}
|
|
84
|
-
)))
|
|
85
|
+
) }) })
|
|
85
86
|
);
|
|
86
87
|
Table.displayName = "Table";
|
|
87
88
|
const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
|
|
88
89
|
const { stickyHeader } = React.useContext(TableContext);
|
|
89
|
-
return /* @__PURE__ */
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
91
|
"thead",
|
|
91
92
|
{
|
|
92
93
|
ref,
|
|
@@ -102,7 +103,7 @@ const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
|
|
|
102
103
|
TableHeader.displayName = "TableHeader";
|
|
103
104
|
const TableBody = React.forwardRef(({ className, ...props }, ref) => {
|
|
104
105
|
const { variant } = React.useContext(TableContext);
|
|
105
|
-
return /* @__PURE__ */
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
107
|
"tbody",
|
|
107
108
|
{
|
|
108
109
|
ref,
|
|
@@ -116,7 +117,7 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => {
|
|
|
116
117
|
);
|
|
117
118
|
});
|
|
118
119
|
TableBody.displayName = "TableBody";
|
|
119
|
-
const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
120
|
+
const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
120
121
|
"tfoot",
|
|
121
122
|
{
|
|
122
123
|
ref,
|
|
@@ -129,7 +130,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
129
130
|
));
|
|
130
131
|
TableFooter.displayName = "TableFooter";
|
|
131
132
|
const TableRow = React.forwardRef(
|
|
132
|
-
({ className, interactive = false, selected = false, ...props }, ref) => /* @__PURE__ */
|
|
133
|
+
({ className, interactive = false, selected = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
134
|
"tr",
|
|
134
135
|
{
|
|
135
136
|
ref,
|
|
@@ -145,28 +146,30 @@ const TableRow = React.forwardRef(
|
|
|
145
146
|
);
|
|
146
147
|
TableRow.displayName = "TableRow";
|
|
147
148
|
const defaultSortIcons = {
|
|
148
|
-
asc: /* @__PURE__ */
|
|
149
|
-
desc: /* @__PURE__ */
|
|
150
|
-
default: /* @__PURE__ */
|
|
149
|
+
asc: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) }),
|
|
150
|
+
desc: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }),
|
|
151
|
+
default: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) })
|
|
151
152
|
};
|
|
152
153
|
const TableHead = React.forwardRef(
|
|
153
154
|
({ className, align = "left", sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {
|
|
154
155
|
const { size } = React.useContext(TableContext);
|
|
155
156
|
const icons = { ...defaultSortIcons, ...sortIcon };
|
|
156
|
-
const content = sortable ? /* @__PURE__ */
|
|
157
|
+
const content = sortable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
157
158
|
"button",
|
|
158
159
|
{
|
|
159
160
|
type: "button",
|
|
160
161
|
className: "inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group",
|
|
161
|
-
onClick: onSort
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
162
|
+
onClick: onSort,
|
|
163
|
+
children: [
|
|
164
|
+
children,
|
|
165
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(
|
|
166
|
+
"shrink-0 transition-colors duration-fast",
|
|
167
|
+
sortDirection ? "text-foreground" : "text-text-muted"
|
|
168
|
+
), children: sortDirection === "asc" ? icons.asc : sortDirection === "desc" ? icons.desc : icons.default })
|
|
169
|
+
]
|
|
170
|
+
}
|
|
168
171
|
) : children;
|
|
169
|
-
return /* @__PURE__ */
|
|
172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
170
173
|
"th",
|
|
171
174
|
{
|
|
172
175
|
ref,
|
|
@@ -180,9 +183,9 @@ const TableHead = React.forwardRef(
|
|
|
180
183
|
className
|
|
181
184
|
),
|
|
182
185
|
"aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : void 0,
|
|
183
|
-
...props
|
|
184
|
-
|
|
185
|
-
|
|
186
|
+
...props,
|
|
187
|
+
children: content
|
|
188
|
+
}
|
|
186
189
|
);
|
|
187
190
|
}
|
|
188
191
|
);
|
|
@@ -190,7 +193,7 @@ TableHead.displayName = "TableHead";
|
|
|
190
193
|
const TableCell = React.forwardRef(
|
|
191
194
|
({ className, align = "left", ...props }, ref) => {
|
|
192
195
|
const { size } = React.useContext(TableContext);
|
|
193
|
-
return /* @__PURE__ */
|
|
196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
194
197
|
"td",
|
|
195
198
|
{
|
|
196
199
|
ref,
|
|
@@ -208,7 +211,7 @@ const TableCell = React.forwardRef(
|
|
|
208
211
|
}
|
|
209
212
|
);
|
|
210
213
|
TableCell.displayName = "TableCell";
|
|
211
|
-
const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
214
|
+
const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
212
215
|
"caption",
|
|
213
216
|
{
|
|
214
217
|
ref,
|