@karakuri-ui/react 0.2.2 → 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 +9 -0
- package/dist/components/ui/accordion.d.mts +49 -0
- package/dist/components/ui/accordion.d.ts +49 -0
- package/dist/components/ui/accordion.js +220 -0
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/accordion.mjs +181 -0
- package/dist/components/ui/accordion.mjs.map +1 -0
- package/dist/components/ui/alert.d.mts +47 -0
- package/dist/components/ui/alert.d.ts +47 -0
- package/dist/components/ui/alert.js +223 -0
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/components/ui/alert.mjs +185 -0
- package/dist/components/ui/alert.mjs.map +1 -0
- package/dist/components/ui/avatar.d.mts +232 -0
- package/dist/components/ui/avatar.d.ts +232 -0
- package/dist/components/ui/avatar.js +250 -0
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/avatar.mjs +209 -0
- package/dist/components/ui/avatar.mjs.map +1 -0
- package/dist/components/ui/badge.d.mts +31 -0
- package/dist/components/ui/badge.d.ts +31 -0
- package/dist/components/ui/badge.js +205 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/badge.mjs +170 -0
- package/dist/components/ui/badge.mjs.map +1 -0
- package/dist/components/ui/breadcrumb.d.mts +57 -0
- package/dist/components/ui/breadcrumb.d.ts +57 -0
- package/dist/components/ui/breadcrumb.js +209 -0
- package/dist/components/ui/breadcrumb.js.map +1 -0
- package/dist/components/ui/breadcrumb.mjs +168 -0
- package/dist/components/ui/breadcrumb.mjs.map +1 -0
- package/dist/components/ui/button-group.d.mts +22 -0
- package/dist/components/ui/button-group.d.ts +22 -0
- package/dist/components/ui/button-group.js +107 -0
- package/dist/components/ui/button-group.js.map +1 -0
- package/dist/components/ui/button-group.mjs +72 -0
- package/dist/components/ui/button-group.mjs.map +1 -0
- package/dist/components/ui/button.d.mts +31 -0
- package/dist/components/ui/button.d.ts +31 -0
- package/dist/components/ui/button.js +176 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/button.mjs +141 -0
- package/dist/components/ui/button.mjs.map +1 -0
- package/dist/components/ui/card.d.mts +77 -0
- package/dist/components/ui/card.d.ts +77 -0
- package/dist/components/ui/card.js +370 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/card.mjs +328 -0
- package/dist/components/ui/card.mjs.map +1 -0
- package/dist/{chart.js → components/ui/chart.js} +29 -39
- package/dist/components/ui/chart.js.map +1 -0
- package/dist/{chart.mjs → components/ui/chart.mjs} +21 -31
- package/dist/components/ui/chart.mjs.map +1 -0
- package/dist/components/ui/checkbox.d.mts +24 -0
- package/dist/components/ui/checkbox.d.ts +24 -0
- package/dist/components/ui/checkbox.js +173 -0
- package/dist/components/ui/checkbox.js.map +1 -0
- package/dist/components/ui/checkbox.mjs +138 -0
- package/dist/components/ui/checkbox.mjs.map +1 -0
- package/dist/components/ui/divider.d.mts +27 -0
- package/dist/components/ui/divider.d.ts +27 -0
- package/dist/components/ui/divider.js +147 -0
- package/dist/components/ui/divider.js.map +1 -0
- package/dist/components/ui/divider.mjs +112 -0
- package/dist/components/ui/divider.mjs.map +1 -0
- package/dist/components/ui/drawer.d.mts +51 -0
- package/dist/components/ui/drawer.d.ts +51 -0
- package/dist/components/ui/drawer.js +225 -0
- package/dist/components/ui/drawer.js.map +1 -0
- package/dist/components/ui/drawer.mjs +178 -0
- package/dist/components/ui/drawer.mjs.map +1 -0
- package/dist/components/ui/dropdown.d.mts +59 -0
- package/dist/components/ui/dropdown.d.ts +59 -0
- package/dist/components/ui/dropdown.js +310 -0
- package/dist/components/ui/dropdown.js.map +1 -0
- package/dist/components/ui/dropdown.mjs +263 -0
- package/dist/components/ui/dropdown.mjs.map +1 -0
- package/dist/components/ui/field.d.mts +33 -0
- package/dist/components/ui/field.d.ts +33 -0
- package/dist/components/ui/field.js +146 -0
- package/dist/components/ui/field.js.map +1 -0
- package/dist/components/ui/field.mjs +108 -0
- package/dist/components/ui/field.mjs.map +1 -0
- package/dist/components/ui/icon-button.d.mts +20 -0
- package/dist/components/ui/icon-button.d.ts +20 -0
- package/dist/components/ui/icon-button.js +147 -0
- package/dist/components/ui/icon-button.js.map +1 -0
- package/dist/components/ui/icon-button.mjs +112 -0
- package/dist/components/ui/icon-button.mjs.map +1 -0
- package/dist/components/ui/index.d.mts +55 -0
- package/dist/components/ui/index.d.ts +55 -0
- package/dist/components/ui/index.js +476 -0
- package/dist/components/ui/index.js.map +1 -0
- package/dist/components/ui/index.mjs +246 -0
- package/dist/components/ui/index.mjs.map +1 -0
- package/dist/components/ui/input.d.mts +20 -0
- package/dist/components/ui/input.d.ts +20 -0
- package/dist/components/ui/input.js +250 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/input.mjs +215 -0
- package/dist/components/ui/input.mjs.map +1 -0
- package/dist/components/ui/metric-card.d.mts +53 -0
- package/dist/components/ui/metric-card.d.ts +53 -0
- package/dist/components/ui/metric-card.js +258 -0
- package/dist/components/ui/metric-card.js.map +1 -0
- package/dist/components/ui/metric-card.mjs +217 -0
- package/dist/components/ui/metric-card.mjs.map +1 -0
- package/dist/components/ui/modal.d.mts +77 -0
- package/dist/components/ui/modal.d.ts +77 -0
- package/dist/components/ui/modal.js +396 -0
- package/dist/components/ui/modal.js.map +1 -0
- package/dist/components/ui/modal.mjs +338 -0
- package/dist/components/ui/modal.mjs.map +1 -0
- package/dist/components/ui/navigation-menu.d.mts +139 -0
- package/dist/components/ui/navigation-menu.d.ts +139 -0
- package/dist/components/ui/navigation-menu.js +531 -0
- package/dist/components/ui/navigation-menu.js.map +1 -0
- package/dist/components/ui/navigation-menu.mjs +488 -0
- package/dist/components/ui/navigation-menu.mjs.map +1 -0
- package/dist/components/ui/pagination.d.mts +130 -0
- package/dist/components/ui/pagination.d.ts +130 -0
- package/dist/components/ui/pagination.js +495 -0
- package/dist/components/ui/pagination.js.map +1 -0
- package/dist/components/ui/pagination.mjs +449 -0
- package/dist/components/ui/pagination.mjs.map +1 -0
- package/dist/components/ui/popover.d.mts +41 -0
- package/dist/components/ui/popover.d.ts +41 -0
- package/dist/components/ui/popover.js +175 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/popover.mjs +133 -0
- package/dist/components/ui/popover.mjs.map +1 -0
- package/dist/components/ui/progress.d.mts +35 -0
- package/dist/components/ui/progress.d.ts +35 -0
- package/dist/components/ui/progress.js +194 -0
- package/dist/components/ui/progress.js.map +1 -0
- package/dist/components/ui/progress.mjs +159 -0
- package/dist/components/ui/progress.mjs.map +1 -0
- package/dist/components/ui/radio-group.d.mts +40 -0
- package/dist/components/ui/radio-group.d.ts +40 -0
- package/dist/components/ui/radio-group.js +177 -0
- package/dist/components/ui/radio-group.js.map +1 -0
- package/dist/components/ui/radio-group.mjs +140 -0
- package/dist/components/ui/radio-group.mjs.map +1 -0
- package/dist/components/ui/segmented.d.mts +30 -0
- package/dist/components/ui/segmented.d.ts +30 -0
- package/dist/components/ui/segmented.js +241 -0
- package/dist/components/ui/segmented.js.map +1 -0
- package/dist/components/ui/segmented.mjs +204 -0
- package/dist/components/ui/segmented.mjs.map +1 -0
- package/dist/components/ui/select.d.mts +31 -0
- package/dist/components/ui/select.d.ts +31 -0
- package/dist/components/ui/select.js +317 -0
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/select.mjs +276 -0
- package/dist/components/ui/select.mjs.map +1 -0
- package/dist/components/ui/skeleton.d.mts +26 -0
- package/dist/components/ui/skeleton.d.ts +26 -0
- package/dist/components/ui/skeleton.js +144 -0
- package/dist/components/ui/skeleton.js.map +1 -0
- package/dist/components/ui/skeleton.mjs +109 -0
- package/dist/components/ui/skeleton.mjs.map +1 -0
- package/dist/components/ui/slider.d.mts +38 -0
- package/dist/components/ui/slider.d.ts +38 -0
- package/dist/components/ui/slider.js +180 -0
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/slider.mjs +145 -0
- package/dist/components/ui/slider.mjs.map +1 -0
- package/dist/components/ui/spinner.d.mts +23 -0
- package/dist/components/ui/spinner.d.ts +23 -0
- package/dist/components/ui/spinner.js +471 -0
- package/dist/components/ui/spinner.js.map +1 -0
- package/dist/components/ui/spinner.mjs +436 -0
- package/dist/components/ui/spinner.mjs.map +1 -0
- package/dist/components/ui/switch.d.mts +22 -0
- package/dist/components/ui/switch.d.ts +22 -0
- package/dist/components/ui/switch.js +173 -0
- package/dist/components/ui/switch.js.map +1 -0
- package/dist/components/ui/switch.mjs +138 -0
- package/dist/components/ui/switch.mjs.map +1 -0
- package/dist/components/ui/table.d.mts +74 -0
- package/dist/components/ui/table.d.ts +74 -0
- package/dist/components/ui/table.js +240 -0
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/table.mjs +199 -0
- package/dist/components/ui/table.mjs.map +1 -0
- package/dist/components/ui/tabs.d.mts +40 -0
- package/dist/components/ui/tabs.d.ts +40 -0
- package/dist/components/ui/tabs.js +238 -0
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/components/ui/tabs.mjs +199 -0
- package/dist/components/ui/tabs.mjs.map +1 -0
- package/dist/components/ui/textarea.d.mts +19 -0
- package/dist/components/ui/textarea.d.ts +19 -0
- package/dist/components/ui/textarea.js +181 -0
- package/dist/components/ui/textarea.js.map +1 -0
- package/dist/components/ui/textarea.mjs +146 -0
- package/dist/components/ui/textarea.mjs.map +1 -0
- package/dist/components/ui/toast.d.mts +93 -0
- package/dist/components/ui/toast.d.ts +93 -0
- package/dist/components/ui/toast.js +429 -0
- package/dist/components/ui/toast.js.map +1 -0
- package/dist/components/ui/toast.mjs +393 -0
- package/dist/components/ui/toast.mjs.map +1 -0
- package/dist/components/ui/toggle-group.d.mts +47 -0
- package/dist/components/ui/toggle-group.d.ts +47 -0
- package/dist/components/ui/toggle-group.js +186 -0
- package/dist/components/ui/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle-group.mjs +149 -0
- package/dist/components/ui/toggle-group.mjs.map +1 -0
- package/dist/components/ui/toggle.d.mts +19 -0
- package/dist/components/ui/toggle.d.ts +19 -0
- package/dist/components/ui/toggle.js +194 -0
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/toggle.mjs +159 -0
- package/dist/components/ui/toggle.mjs.map +1 -0
- package/dist/components/ui/tooltip.d.mts +37 -0
- package/dist/components/ui/tooltip.d.ts +37 -0
- package/dist/components/ui/tooltip.js +137 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/components/ui/tooltip.mjs +96 -0
- package/dist/components/ui/tooltip.mjs.map +1 -0
- package/dist/lib/utils.d.mts +10 -0
- package/dist/lib/utils.d.ts +10 -0
- package/dist/lib/utils.js +33 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/lib/utils.mjs +9 -0
- package/dist/lib/utils.mjs.map +1 -0
- package/package.json +11 -11
- package/dist/chart.js.map +0 -1
- package/dist/chart.mjs.map +0 -1
- package/dist/index.d.mts +0 -1636
- package/dist/index.d.ts +0 -1636
- package/dist/index.js +0 -7291
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -7048
- package/dist/index.mjs.map +0 -1
- /package/dist/{chart.d.mts → components/ui/chart.d.mts} +0 -0
- /package/dist/{chart.d.ts → components/ui/chart.d.ts} +0 -0
|
@@ -0,0 +1,436 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "../../lib/utils";
|
|
5
|
+
const RING_SIZES = {
|
|
6
|
+
sm: 16,
|
|
7
|
+
default: 24,
|
|
8
|
+
lg: 32
|
|
9
|
+
};
|
|
10
|
+
const RING_STROKE = {
|
|
11
|
+
sm: 2,
|
|
12
|
+
default: 2.5,
|
|
13
|
+
lg: 3
|
|
14
|
+
};
|
|
15
|
+
const DOT_SIZES = {
|
|
16
|
+
sm: 4,
|
|
17
|
+
default: 6,
|
|
18
|
+
lg: 8
|
|
19
|
+
};
|
|
20
|
+
const DOT_GAP = {
|
|
21
|
+
sm: 3,
|
|
22
|
+
default: 4,
|
|
23
|
+
lg: 5
|
|
24
|
+
};
|
|
25
|
+
const BAR_WIDTHS = {
|
|
26
|
+
sm: 2,
|
|
27
|
+
default: 3,
|
|
28
|
+
lg: 4
|
|
29
|
+
};
|
|
30
|
+
const BAR_HEIGHTS = {
|
|
31
|
+
sm: 12,
|
|
32
|
+
default: 16,
|
|
33
|
+
lg: 24
|
|
34
|
+
};
|
|
35
|
+
const BAR_GAP = {
|
|
36
|
+
sm: 2,
|
|
37
|
+
default: 3,
|
|
38
|
+
lg: 4
|
|
39
|
+
};
|
|
40
|
+
const ORBIT_SIZES = {
|
|
41
|
+
sm: 22,
|
|
42
|
+
default: 32,
|
|
43
|
+
lg: 44
|
|
44
|
+
};
|
|
45
|
+
const ORBIT_STROKE = {
|
|
46
|
+
sm: 2.5,
|
|
47
|
+
default: 3,
|
|
48
|
+
lg: 3.5
|
|
49
|
+
};
|
|
50
|
+
const DOT_COUNT = 3;
|
|
51
|
+
const BAR_COUNT = 4;
|
|
52
|
+
const RING_VIEWBOX = 24;
|
|
53
|
+
const RING_CENTER = 12;
|
|
54
|
+
const strokeColorMap = {
|
|
55
|
+
default: "stroke-foreground",
|
|
56
|
+
primary: "stroke-primary",
|
|
57
|
+
current: "stroke-current"
|
|
58
|
+
};
|
|
59
|
+
const bgColorMap = {
|
|
60
|
+
default: "bg-foreground",
|
|
61
|
+
primary: "bg-primary",
|
|
62
|
+
current: "bg-current"
|
|
63
|
+
};
|
|
64
|
+
const SPEED_MS = { slow: 1500, default: 1e3, fast: 750 };
|
|
65
|
+
const ORBIT_SPEED_MS = { slow: 2e3, default: 1500, fast: 1e3 };
|
|
66
|
+
const spinnerVariants = cva(
|
|
67
|
+
"inline-flex items-center justify-center shrink-0",
|
|
68
|
+
{
|
|
69
|
+
variants: {
|
|
70
|
+
size: {
|
|
71
|
+
sm: "",
|
|
72
|
+
default: "",
|
|
73
|
+
lg: ""
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
defaultVariants: {
|
|
77
|
+
size: "default"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
const Spinner = React.forwardRef(
|
|
82
|
+
({
|
|
83
|
+
className,
|
|
84
|
+
variant = "ring",
|
|
85
|
+
orbitStyle = "ring",
|
|
86
|
+
size,
|
|
87
|
+
color = "default",
|
|
88
|
+
speed = "default",
|
|
89
|
+
label,
|
|
90
|
+
...props
|
|
91
|
+
}, ref) => {
|
|
92
|
+
const resolvedSize = size || "default";
|
|
93
|
+
const orbitMap = {
|
|
94
|
+
ring: OrbitSpinner,
|
|
95
|
+
dots: OrbitDotsSpinner,
|
|
96
|
+
cube: OrbitCubeSpinner,
|
|
97
|
+
flip: OrbitFlipSpinner,
|
|
98
|
+
morph: OrbitMorphSpinner
|
|
99
|
+
};
|
|
100
|
+
return /* @__PURE__ */ React.createElement(
|
|
101
|
+
"div",
|
|
102
|
+
{
|
|
103
|
+
ref,
|
|
104
|
+
role: "status",
|
|
105
|
+
"aria-label": label || "Loading",
|
|
106
|
+
className: cn(spinnerVariants({ size }), className),
|
|
107
|
+
...props
|
|
108
|
+
},
|
|
109
|
+
variant === "ring" && /* @__PURE__ */ React.createElement(RingSpinner, { size: resolvedSize, color, speed }),
|
|
110
|
+
variant === "dots" && /* @__PURE__ */ React.createElement(DotsSpinner, { size: resolvedSize, color, speed }),
|
|
111
|
+
variant === "bars" && /* @__PURE__ */ React.createElement(BarsSpinner, { size: resolvedSize, color, speed }),
|
|
112
|
+
variant === "orbit" && (() => {
|
|
113
|
+
const OrbitComponent = orbitMap[orbitStyle];
|
|
114
|
+
return /* @__PURE__ */ React.createElement(OrbitComponent, { size: resolvedSize, color, speed });
|
|
115
|
+
})()
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
);
|
|
119
|
+
Spinner.displayName = "Spinner";
|
|
120
|
+
function RingSpinner({ size, color, speed }) {
|
|
121
|
+
const diameter = RING_SIZES[size];
|
|
122
|
+
const stroke = RING_STROKE[size];
|
|
123
|
+
const r = (RING_VIEWBOX - stroke) / 2;
|
|
124
|
+
const circumference = 2 * Math.PI * r;
|
|
125
|
+
return /* @__PURE__ */ React.createElement(
|
|
126
|
+
"svg",
|
|
127
|
+
{
|
|
128
|
+
viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
|
|
129
|
+
width: diameter,
|
|
130
|
+
height: diameter,
|
|
131
|
+
fill: "none",
|
|
132
|
+
className: "animate-spin",
|
|
133
|
+
style: { animationDuration: `${SPEED_MS[speed]}ms` }
|
|
134
|
+
},
|
|
135
|
+
/* @__PURE__ */ React.createElement(
|
|
136
|
+
"circle",
|
|
137
|
+
{
|
|
138
|
+
cx: RING_CENTER,
|
|
139
|
+
cy: RING_CENTER,
|
|
140
|
+
r,
|
|
141
|
+
className: "stroke-border",
|
|
142
|
+
strokeWidth: stroke
|
|
143
|
+
}
|
|
144
|
+
),
|
|
145
|
+
/* @__PURE__ */ React.createElement(
|
|
146
|
+
"circle",
|
|
147
|
+
{
|
|
148
|
+
cx: RING_CENTER,
|
|
149
|
+
cy: RING_CENTER,
|
|
150
|
+
r,
|
|
151
|
+
className: strokeColorMap[color],
|
|
152
|
+
strokeWidth: stroke,
|
|
153
|
+
strokeDasharray: circumference,
|
|
154
|
+
strokeDashoffset: circumference * 0.75,
|
|
155
|
+
strokeLinecap: "round"
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
function DotsSpinner({ size, color, speed }) {
|
|
161
|
+
const dotSize = DOT_SIZES[size];
|
|
162
|
+
const gap = DOT_GAP[size];
|
|
163
|
+
return /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center", style: { gap } }, Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ React.createElement(
|
|
164
|
+
"div",
|
|
165
|
+
{
|
|
166
|
+
key: i,
|
|
167
|
+
className: cn(
|
|
168
|
+
"rounded-full animate-spinner-dot",
|
|
169
|
+
bgColorMap[color]
|
|
170
|
+
),
|
|
171
|
+
style: {
|
|
172
|
+
width: dotSize,
|
|
173
|
+
height: dotSize,
|
|
174
|
+
animationDuration: `${SPEED_MS[speed]}ms`,
|
|
175
|
+
animationDelay: `${i * (SPEED_MS[speed] / DOT_COUNT / 1.5)}ms`
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
)));
|
|
179
|
+
}
|
|
180
|
+
function BarsSpinner({ size, color, speed }) {
|
|
181
|
+
const barWidth = BAR_WIDTHS[size];
|
|
182
|
+
const barHeight = BAR_HEIGHTS[size];
|
|
183
|
+
const gap = BAR_GAP[size];
|
|
184
|
+
return /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center", style: { gap, height: barHeight } }, Array.from({ length: BAR_COUNT }, (_, i) => /* @__PURE__ */ React.createElement(
|
|
185
|
+
"div",
|
|
186
|
+
{
|
|
187
|
+
key: i,
|
|
188
|
+
className: cn(
|
|
189
|
+
"rounded-full animate-spinner-bar origin-center",
|
|
190
|
+
bgColorMap[color]
|
|
191
|
+
),
|
|
192
|
+
style: {
|
|
193
|
+
width: barWidth,
|
|
194
|
+
height: barHeight,
|
|
195
|
+
animationDuration: `${SPEED_MS[speed]}ms`,
|
|
196
|
+
animationDelay: `${i * (SPEED_MS[speed] / BAR_COUNT / 1.5)}ms`
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
)));
|
|
200
|
+
}
|
|
201
|
+
const orbitTextColorMap = {
|
|
202
|
+
default: "text-foreground",
|
|
203
|
+
primary: "text-primary",
|
|
204
|
+
current: ""
|
|
205
|
+
};
|
|
206
|
+
function OrbitSpinner({ size, color, speed }) {
|
|
207
|
+
const diameter = ORBIT_SIZES[size];
|
|
208
|
+
const stroke = ORBIT_STROKE[size];
|
|
209
|
+
const r = (RING_VIEWBOX - stroke * 2) / 2;
|
|
210
|
+
const circumference = 2 * Math.PI * r;
|
|
211
|
+
return /* @__PURE__ */ React.createElement(
|
|
212
|
+
"div",
|
|
213
|
+
{
|
|
214
|
+
className: cn(orbitTextColorMap[color]),
|
|
215
|
+
style: {
|
|
216
|
+
width: diameter,
|
|
217
|
+
height: diameter,
|
|
218
|
+
perspective: diameter * 3,
|
|
219
|
+
position: "relative"
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
/* @__PURE__ */ React.createElement(
|
|
223
|
+
"svg",
|
|
224
|
+
{
|
|
225
|
+
viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
|
|
226
|
+
width: diameter,
|
|
227
|
+
height: diameter,
|
|
228
|
+
fill: "none",
|
|
229
|
+
className: "absolute inset-0 animate-spinner-orbit",
|
|
230
|
+
style: { animationDuration: `${ORBIT_SPEED_MS[speed]}ms` }
|
|
231
|
+
},
|
|
232
|
+
/* @__PURE__ */ React.createElement(
|
|
233
|
+
"circle",
|
|
234
|
+
{
|
|
235
|
+
cx: RING_CENTER,
|
|
236
|
+
cy: RING_CENTER,
|
|
237
|
+
r,
|
|
238
|
+
stroke: "currentColor",
|
|
239
|
+
strokeWidth: stroke
|
|
240
|
+
}
|
|
241
|
+
)
|
|
242
|
+
),
|
|
243
|
+
/* @__PURE__ */ React.createElement(
|
|
244
|
+
"svg",
|
|
245
|
+
{
|
|
246
|
+
viewBox: `0 0 ${RING_VIEWBOX} ${RING_VIEWBOX}`,
|
|
247
|
+
width: diameter,
|
|
248
|
+
height: diameter,
|
|
249
|
+
fill: "none",
|
|
250
|
+
className: "absolute inset-0 animate-spinner-orbit",
|
|
251
|
+
style: {
|
|
252
|
+
animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
|
|
253
|
+
transform: "rotateZ(90deg)",
|
|
254
|
+
animationDirection: "reverse",
|
|
255
|
+
animationDelay: "-0.4s",
|
|
256
|
+
opacity: 0.35
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
/* @__PURE__ */ React.createElement(
|
|
260
|
+
"circle",
|
|
261
|
+
{
|
|
262
|
+
cx: RING_CENTER,
|
|
263
|
+
cy: RING_CENTER,
|
|
264
|
+
r,
|
|
265
|
+
stroke: "currentColor",
|
|
266
|
+
strokeWidth: stroke
|
|
267
|
+
}
|
|
268
|
+
)
|
|
269
|
+
)
|
|
270
|
+
);
|
|
271
|
+
}
|
|
272
|
+
const ORBIT_DOT_SIZE = { sm: 3, default: 4, lg: 6 };
|
|
273
|
+
function OrbitDotsSpinner({ size, color, speed }) {
|
|
274
|
+
const diameter = ORBIT_SIZES[size];
|
|
275
|
+
const dotSize = ORBIT_DOT_SIZE[size];
|
|
276
|
+
const orbitRadius = (diameter - dotSize) / 2;
|
|
277
|
+
return /* @__PURE__ */ React.createElement(
|
|
278
|
+
"div",
|
|
279
|
+
{
|
|
280
|
+
className: cn(orbitTextColorMap[color]),
|
|
281
|
+
style: {
|
|
282
|
+
width: diameter,
|
|
283
|
+
height: diameter,
|
|
284
|
+
perspective: diameter * 3,
|
|
285
|
+
position: "relative"
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
/* @__PURE__ */ React.createElement(
|
|
289
|
+
"div",
|
|
290
|
+
{
|
|
291
|
+
className: "animate-spinner-orbit",
|
|
292
|
+
style: {
|
|
293
|
+
animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
|
|
294
|
+
width: "100%",
|
|
295
|
+
height: "100%",
|
|
296
|
+
position: "relative",
|
|
297
|
+
transformStyle: "preserve-3d"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
[0, 120, 240].map((angle) => /* @__PURE__ */ React.createElement(
|
|
301
|
+
"div",
|
|
302
|
+
{
|
|
303
|
+
key: angle,
|
|
304
|
+
className: "absolute rounded-full",
|
|
305
|
+
style: {
|
|
306
|
+
width: dotSize,
|
|
307
|
+
height: dotSize,
|
|
308
|
+
backgroundColor: "currentColor",
|
|
309
|
+
left: "50%",
|
|
310
|
+
top: "50%",
|
|
311
|
+
transform: `translate(-50%, -50%) rotate(${angle}deg) translateX(${orbitRadius}px)`
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
))
|
|
315
|
+
)
|
|
316
|
+
);
|
|
317
|
+
}
|
|
318
|
+
const CUBE_SIZES = { sm: 12, default: 18, lg: 26 };
|
|
319
|
+
function OrbitCubeSpinner({ size, color, speed }) {
|
|
320
|
+
const cubeSize = CUBE_SIZES[size];
|
|
321
|
+
const half = cubeSize / 2;
|
|
322
|
+
const radius = Math.round(cubeSize * 0.15);
|
|
323
|
+
const overlap = 1;
|
|
324
|
+
const faceBase = {
|
|
325
|
+
position: "absolute",
|
|
326
|
+
width: cubeSize + overlap * 2,
|
|
327
|
+
height: cubeSize + overlap * 2,
|
|
328
|
+
backgroundColor: "currentColor",
|
|
329
|
+
borderRadius: radius,
|
|
330
|
+
top: -overlap,
|
|
331
|
+
left: -overlap
|
|
332
|
+
};
|
|
333
|
+
return /* @__PURE__ */ React.createElement(
|
|
334
|
+
"div",
|
|
335
|
+
{
|
|
336
|
+
className: cn(orbitTextColorMap[color]),
|
|
337
|
+
style: {
|
|
338
|
+
width: cubeSize,
|
|
339
|
+
height: cubeSize,
|
|
340
|
+
perspective: cubeSize * 6
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
/* @__PURE__ */ React.createElement(
|
|
344
|
+
"div",
|
|
345
|
+
{
|
|
346
|
+
style: {
|
|
347
|
+
width: cubeSize,
|
|
348
|
+
height: cubeSize,
|
|
349
|
+
transform: "rotateX(-25deg) rotateZ(15deg)",
|
|
350
|
+
transformStyle: "preserve-3d"
|
|
351
|
+
}
|
|
352
|
+
},
|
|
353
|
+
/* @__PURE__ */ React.createElement(
|
|
354
|
+
"div",
|
|
355
|
+
{
|
|
356
|
+
className: "animate-spinner-orbit",
|
|
357
|
+
style: {
|
|
358
|
+
animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
|
|
359
|
+
width: cubeSize,
|
|
360
|
+
height: cubeSize,
|
|
361
|
+
position: "relative",
|
|
362
|
+
transformStyle: "preserve-3d"
|
|
363
|
+
}
|
|
364
|
+
},
|
|
365
|
+
/* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `translateZ(${half}px)`, opacity: 0.25 } }),
|
|
366
|
+
/* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `translateZ(${-half}px)`, opacity: 0.1 } }),
|
|
367
|
+
/* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateY(-90deg) translateZ(${half}px)`, opacity: 0.2 } }),
|
|
368
|
+
/* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateY(90deg) translateZ(${half}px)`, opacity: 0.2 } }),
|
|
369
|
+
/* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateX(90deg) translateZ(${half}px)`, opacity: 0.15 } }),
|
|
370
|
+
/* @__PURE__ */ React.createElement("div", { style: { ...faceBase, transform: `rotateX(-90deg) translateZ(${half}px)`, opacity: 0.08 } })
|
|
371
|
+
)
|
|
372
|
+
)
|
|
373
|
+
);
|
|
374
|
+
}
|
|
375
|
+
const FLIP_SIZES = { sm: 14, default: 20, lg: 28 };
|
|
376
|
+
function OrbitFlipSpinner({ size, color, speed }) {
|
|
377
|
+
const sqSize = FLIP_SIZES[size];
|
|
378
|
+
return /* @__PURE__ */ React.createElement(
|
|
379
|
+
"div",
|
|
380
|
+
{
|
|
381
|
+
className: cn(orbitTextColorMap[color]),
|
|
382
|
+
style: {
|
|
383
|
+
width: sqSize,
|
|
384
|
+
height: sqSize,
|
|
385
|
+
perspective: sqSize * 4
|
|
386
|
+
}
|
|
387
|
+
},
|
|
388
|
+
/* @__PURE__ */ React.createElement("div", { style: { transform: "rotateX(25deg)", transformStyle: "preserve-3d", width: "100%", height: "100%" } }, /* @__PURE__ */ React.createElement(
|
|
389
|
+
"div",
|
|
390
|
+
{
|
|
391
|
+
className: "animate-spinner-orbit",
|
|
392
|
+
style: {
|
|
393
|
+
animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
|
|
394
|
+
width: "100%",
|
|
395
|
+
height: "100%",
|
|
396
|
+
borderRadius: "25%",
|
|
397
|
+
backgroundColor: "currentColor",
|
|
398
|
+
opacity: 0.85
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
))
|
|
402
|
+
);
|
|
403
|
+
}
|
|
404
|
+
const MORPH_SIZES = { sm: 16, default: 24, lg: 34 };
|
|
405
|
+
function OrbitMorphSpinner({ size, color, speed }) {
|
|
406
|
+
const morphSize = MORPH_SIZES[size];
|
|
407
|
+
return /* @__PURE__ */ React.createElement(
|
|
408
|
+
"div",
|
|
409
|
+
{
|
|
410
|
+
className: cn(orbitTextColorMap[color]),
|
|
411
|
+
style: {
|
|
412
|
+
width: morphSize,
|
|
413
|
+
height: morphSize,
|
|
414
|
+
perspective: morphSize * 3
|
|
415
|
+
}
|
|
416
|
+
},
|
|
417
|
+
/* @__PURE__ */ React.createElement(
|
|
418
|
+
"div",
|
|
419
|
+
{
|
|
420
|
+
className: "animate-spinner-morph",
|
|
421
|
+
style: {
|
|
422
|
+
animationDuration: `${ORBIT_SPEED_MS[speed]}ms`,
|
|
423
|
+
width: "100%",
|
|
424
|
+
height: "100%",
|
|
425
|
+
backgroundColor: "currentColor",
|
|
426
|
+
opacity: 0.85
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
)
|
|
430
|
+
);
|
|
431
|
+
}
|
|
432
|
+
export {
|
|
433
|
+
Spinner,
|
|
434
|
+
spinnerVariants
|
|
435
|
+
};
|
|
436
|
+
//# sourceMappingURL=spinner.mjs.map
|
|
@@ -0,0 +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":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
|
|
6
|
+
declare const switchVariants: (props?: ({
|
|
7
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
8
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
+
type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom';
|
|
10
|
+
type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
|
|
11
|
+
interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchVariants> {
|
|
12
|
+
label?: string;
|
|
13
|
+
labelPosition?: SwitchLabelPosition;
|
|
14
|
+
startLabel?: string;
|
|
15
|
+
endLabel?: string;
|
|
16
|
+
checkedIcon?: React.ReactNode;
|
|
17
|
+
uncheckedIcon?: React.ReactNode;
|
|
18
|
+
color?: SwitchColor;
|
|
19
|
+
}
|
|
20
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
|
|
22
|
+
export { Switch, type SwitchColor, type SwitchLabelPosition, type SwitchProps, switchVariants };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
|
|
6
|
+
declare const switchVariants: (props?: ({
|
|
7
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
8
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
+
type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom';
|
|
10
|
+
type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
|
|
11
|
+
interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchVariants> {
|
|
12
|
+
label?: string;
|
|
13
|
+
labelPosition?: SwitchLabelPosition;
|
|
14
|
+
startLabel?: string;
|
|
15
|
+
endLabel?: string;
|
|
16
|
+
checkedIcon?: React.ReactNode;
|
|
17
|
+
uncheckedIcon?: React.ReactNode;
|
|
18
|
+
color?: SwitchColor;
|
|
19
|
+
}
|
|
20
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
|
|
22
|
+
export { Switch, type SwitchColor, type SwitchLabelPosition, type SwitchProps, switchVariants };
|