@zentauri-ui/zentauri-components 1.4.61 → 1.4.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-UXGHUBNJ.mjs → chunk-2PJF7DLJ.mjs} +3 -3
- package/dist/{chunk-UXGHUBNJ.mjs.map → chunk-2PJF7DLJ.mjs.map} +1 -1
- package/dist/{chunk-WDCIZHXY.mjs → chunk-45FCOQ63.mjs} +5 -3
- package/dist/chunk-45FCOQ63.mjs.map +1 -0
- package/dist/{chunk-RDSPHBHK.mjs → chunk-4ANBTJ5G.mjs} +49 -6
- package/dist/chunk-4ANBTJ5G.mjs.map +1 -0
- package/dist/chunk-4E66ICIR.mjs +158 -0
- package/dist/chunk-4E66ICIR.mjs.map +1 -0
- package/dist/{chunk-XLAFQ24R.js → chunk-4U6FOCFK.js} +22 -14
- package/dist/chunk-4U6FOCFK.js.map +1 -0
- package/dist/{chunk-XWM2S6VV.mjs → chunk-EQSSYK27.mjs} +12 -10
- package/dist/chunk-EQSSYK27.mjs.map +1 -0
- package/dist/{chunk-5QB2KNZQ.js → chunk-FGGYDAX3.js} +5 -3
- package/dist/chunk-FGGYDAX3.js.map +1 -0
- package/dist/{chunk-7HL3A4YF.mjs → chunk-IK75NHRX.mjs} +63 -14
- package/dist/chunk-IK75NHRX.mjs.map +1 -0
- package/dist/{chunk-BORK3BJO.mjs → chunk-J56L4ZQ3.mjs} +10 -10
- package/dist/{chunk-BORK3BJO.mjs.map → chunk-J56L4ZQ3.mjs.map} +1 -1
- package/dist/{chunk-PGH27VTL.mjs → chunk-JF3FKUUP.mjs} +21 -13
- package/dist/chunk-JF3FKUUP.mjs.map +1 -0
- package/dist/{chunk-WZKGRU3U.js → chunk-MQZB5EPD.js} +92 -27
- package/dist/chunk-MQZB5EPD.js.map +1 -0
- package/dist/{chunk-N4NO3SYL.js → chunk-NX3IHMT7.js} +22 -14
- package/dist/chunk-NX3IHMT7.js.map +1 -0
- package/dist/{chunk-BVXTOEBI.mjs → chunk-OG2WM5YK.mjs} +45 -17
- package/dist/chunk-OG2WM5YK.mjs.map +1 -0
- package/dist/{chunk-IXDJ3IPG.mjs → chunk-OXS6UJUG.mjs} +21 -13
- package/dist/chunk-OXS6UJUG.mjs.map +1 -0
- package/dist/{chunk-PCK6LX3K.js → chunk-PFOV3U7W.js} +3 -3
- package/dist/{chunk-PCK6LX3K.js.map → chunk-PFOV3U7W.js.map} +1 -1
- package/dist/{chunk-2PQEXQVR.js → chunk-THCNTPPL.js} +62 -13
- package/dist/chunk-THCNTPPL.js.map +1 -0
- package/dist/chunk-UP6S75V5.js +160 -0
- package/dist/chunk-UP6S75V5.js.map +1 -0
- package/dist/{chunk-P5HUBXUX.js → chunk-V2IWLR4O.js} +48 -5
- package/dist/chunk-V2IWLR4O.js.map +1 -0
- package/dist/{chunk-3OR47XMY.js → chunk-VSKL5LOB.js} +45 -17
- package/dist/chunk-VSKL5LOB.js.map +1 -0
- package/dist/{chunk-E3DZNJAD.js → chunk-Y4EDWZKH.js} +12 -10
- package/dist/chunk-Y4EDWZKH.js.map +1 -0
- package/dist/{chunk-YNCD6TKE.mjs → chunk-Y4IFVO46.mjs} +93 -28
- package/dist/chunk-Y4IFVO46.mjs.map +1 -0
- package/dist/{chunk-BITDSQMR.js → chunk-ZNDHS5OK.js} +10 -10
- package/dist/{chunk-BITDSQMR.js.map → chunk-ZNDHS5OK.js.map} +1 -1
- package/dist/hooks/useFocusManagement/useFocusManagement.d.ts +5 -14
- package/dist/hooks/useFocusManagement/useFocusManagement.d.ts.map +1 -1
- package/dist/hooks/useFocusManagement.js +2 -2
- package/dist/hooks/useFocusManagement.mjs +1 -1
- package/dist/ui/badge/animated.js +2 -2
- package/dist/ui/badge/animated.mjs +1 -1
- package/dist/ui/badge/badge-base.d.ts +1 -1
- package/dist/ui/badge/badge-base.d.ts.map +1 -1
- package/dist/ui/badge/types.d.ts +1 -0
- package/dist/ui/badge/types.d.ts.map +1 -1
- package/dist/ui/badge/variants.d.ts +7 -7
- package/dist/ui/badge.js +4 -4
- package/dist/ui/badge.mjs +2 -2
- package/dist/ui/buttons/animated.js +3 -3
- package/dist/ui/buttons/animated.mjs +1 -1
- package/dist/ui/buttons.js +4 -4
- package/dist/ui/buttons.mjs +2 -2
- package/dist/ui/drawer/animated/drawer-content-animated.d.ts.map +1 -1
- package/dist/ui/drawer/animated.js +17 -18
- package/dist/ui/drawer/animated.js.map +1 -1
- package/dist/ui/drawer/animated.mjs +8 -9
- package/dist/ui/drawer/animated.mjs.map +1 -1
- package/dist/ui/drawer/drawer-base.d.ts +1 -1
- package/dist/ui/drawer/drawer-base.d.ts.map +1 -1
- package/dist/ui/drawer/types.d.ts +1 -0
- package/dist/ui/drawer/types.d.ts.map +1 -1
- package/dist/ui/drawer.js +12 -12
- package/dist/ui/drawer.mjs +2 -2
- package/dist/ui/dropdown/dropdown.d.ts +1 -1
- package/dist/ui/dropdown/dropdown.d.ts.map +1 -1
- package/dist/ui/dropdown/types.d.ts +1 -0
- package/dist/ui/dropdown/types.d.ts.map +1 -1
- package/dist/ui/dropdown/variants.d.ts +1 -1
- package/dist/ui/dropdown.js +25 -7
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +26 -8
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/empty-state/animated.js +2 -2
- package/dist/ui/empty-state/animated.mjs +1 -1
- package/dist/ui/empty-state/empty-state-base.d.ts.map +1 -1
- package/dist/ui/empty-state/types.d.ts +1 -0
- package/dist/ui/empty-state/types.d.ts.map +1 -1
- package/dist/ui/empty-state.js +10 -10
- package/dist/ui/empty-state.mjs +2 -2
- package/dist/ui/file-upload/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +1 -3
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/file-upload.mjs +1 -3
- package/dist/ui/file-upload.mjs.map +1 -1
- package/dist/ui/inputs/input-base.d.ts.map +1 -1
- package/dist/ui/inputs/types.d.ts +3 -1
- package/dist/ui/inputs/types.d.ts.map +1 -1
- package/dist/ui/inputs.js +46 -2
- package/dist/ui/inputs.js.map +1 -1
- package/dist/ui/inputs.mjs +46 -2
- package/dist/ui/inputs.mjs.map +1 -1
- package/dist/ui/modal/animated/modal-content-animated.d.ts.map +1 -1
- package/dist/ui/modal/animated.js +10 -11
- package/dist/ui/modal/animated.js.map +1 -1
- package/dist/ui/modal/animated.mjs +7 -8
- package/dist/ui/modal/animated.mjs.map +1 -1
- package/dist/ui/modal/modal-base.d.ts +4 -2
- package/dist/ui/modal/modal-base.d.ts.map +1 -1
- package/dist/ui/modal.js +13 -13
- package/dist/ui/modal.mjs +3 -3
- package/dist/ui/pagination.js +6 -6
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +3 -3
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/progress/animated/progress-animated.d.ts.map +1 -1
- package/dist/ui/progress/animated.js +49 -11
- package/dist/ui/progress/animated.js.map +1 -1
- package/dist/ui/progress/animated.mjs +44 -6
- package/dist/ui/progress/animated.mjs.map +1 -1
- package/dist/ui/progress/progress-base.d.ts.map +1 -1
- package/dist/ui/progress/types.d.ts +3 -0
- package/dist/ui/progress/types.d.ts.map +1 -1
- package/dist/ui/progress.js +9 -9
- package/dist/ui/progress.mjs +2 -2
- package/dist/ui/search/search-bar.d.ts +1 -1
- package/dist/ui/search/search-bar.d.ts.map +1 -1
- package/dist/ui/search.js +2 -0
- package/dist/ui/search.js.map +1 -1
- package/dist/ui/search.mjs +2 -0
- package/dist/ui/search.mjs.map +1 -1
- package/dist/ui/select/select.d.ts +1 -1
- package/dist/ui/select/select.d.ts.map +1 -1
- package/dist/ui/select/types.d.ts +1 -0
- package/dist/ui/select/types.d.ts.map +1 -1
- package/dist/ui/select/variants.d.ts +1 -1
- package/dist/ui/select/variants.d.ts.map +1 -1
- package/dist/ui/select.js +121 -39
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/select.mjs +122 -40
- package/dist/ui/select.mjs.map +1 -1
- package/dist/ui/skeleton/variants.d.ts +1 -1
- package/dist/ui/slider/slider.d.ts.map +1 -1
- package/dist/ui/slider/types.d.ts +8 -2
- package/dist/ui/slider/types.d.ts.map +1 -1
- package/dist/ui/slider.js +43 -7
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/slider.mjs +43 -7
- package/dist/ui/slider.mjs.map +1 -1
- package/dist/ui/spinner/animated/spinner.d.ts.map +1 -1
- package/dist/ui/spinner/animated.js +62 -50
- package/dist/ui/spinner/animated.js.map +1 -1
- package/dist/ui/spinner/animated.mjs +63 -51
- package/dist/ui/spinner/animated.mjs.map +1 -1
- package/dist/ui/stepper/stepper.d.ts +2 -7
- package/dist/ui/stepper/stepper.d.ts.map +1 -1
- package/dist/ui/stepper/types.d.ts +3 -3
- package/dist/ui/stepper/types.d.ts.map +1 -1
- package/dist/ui/stepper/variants.d.ts +1 -1
- package/dist/ui/stepper.js +7 -5
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/stepper.mjs +7 -5
- package/dist/ui/stepper.mjs.map +1 -1
- package/dist/ui/table/animated.js +8 -8
- package/dist/ui/table/animated.mjs +2 -2
- package/dist/ui/table/table-base.d.ts +1 -1
- package/dist/ui/table/table-base.d.ts.map +1 -1
- package/dist/ui/table/types.d.ts +5 -1
- package/dist/ui/table/types.d.ts.map +1 -1
- package/dist/ui/table.js +14 -14
- package/dist/ui/table.mjs +1 -1
- package/dist/ui/tabs/animated.js +2 -2
- package/dist/ui/tabs/animated.mjs +1 -1
- package/dist/ui/tabs/tabs-base.d.ts.map +1 -1
- package/dist/ui/tabs/types.d.ts +2 -1
- package/dist/ui/tabs/types.d.ts.map +1 -1
- package/dist/ui/tabs.js +9 -9
- package/dist/ui/tabs.mjs +1 -1
- package/dist/ui/toast/animated.js +7 -7
- package/dist/ui/toast/animated.mjs +1 -1
- package/dist/ui/toast.js +12 -12
- package/dist/ui/toast.mjs +1 -1
- package/dist/ui/toggle/toggle-base.d.ts.map +1 -1
- package/dist/ui/toggle.js +28 -3
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/toggle.mjs +29 -4
- package/dist/ui/toggle.mjs.map +1 -1
- package/dist/ui/tooltip/animated.js +3 -3
- package/dist/ui/tooltip/animated.mjs +1 -1
- package/dist/ui/tooltip/tooltip-base.d.ts.map +1 -1
- package/dist/ui/tooltip/types.d.ts +1 -0
- package/dist/ui/tooltip/types.d.ts.map +1 -1
- package/dist/ui/tooltip.js +7 -7
- package/dist/ui/tooltip.mjs +1 -1
- package/package.json +1 -1
- package/src/hooks/useFocusManagement/useFocusManagement.test.tsx +8 -0
- package/src/hooks/useFocusManagement/useFocusManagement.ts +162 -33
- package/src/ui/badge/badge-base.tsx +4 -1
- package/src/ui/badge/types.ts +1 -0
- package/src/ui/badge/variants.ts +7 -7
- package/src/ui/buttons/button.test.tsx +1 -1
- package/src/ui/buttons/variants.ts +8 -8
- package/src/ui/drawer/animated/drawer-content-animated.tsx +4 -5
- package/src/ui/drawer/drawer-base.tsx +16 -8
- package/src/ui/drawer/types.ts +1 -0
- package/src/ui/dropdown/dropdown.test.tsx +1 -3
- package/src/ui/dropdown/dropdown.tsx +23 -5
- package/src/ui/dropdown/types.ts +1 -0
- package/src/ui/dropdown/variants.ts +2 -2
- package/src/ui/empty-state/empty-state-base.tsx +9 -1
- package/src/ui/empty-state/types.ts +1 -0
- package/src/ui/file-upload/file-upload.tsx +0 -2
- package/src/ui/inputs/input-base.tsx +60 -6
- package/src/ui/inputs/types.ts +3 -1
- package/src/ui/modal/animated/modal-content-animated.tsx +4 -5
- package/src/ui/modal/modal-base.tsx +19 -9
- package/src/ui/modal/modal.test.tsx +38 -0
- package/src/ui/pagination/pagination.tsx +2 -2
- package/src/ui/progress/animated/progress-animated.tsx +42 -3
- package/src/ui/progress/progress-base.tsx +59 -3
- package/src/ui/progress/types.ts +3 -0
- package/src/ui/search/search-bar.tsx +5 -0
- package/src/ui/select/select.tsx +97 -6
- package/src/ui/select/types.ts +1 -0
- package/src/ui/select/variants.ts +5 -3
- package/src/ui/slider/slider.test.tsx +25 -1
- package/src/ui/slider/slider.tsx +45 -4
- package/src/ui/slider/types.ts +8 -2
- package/src/ui/spinner/animated/spinner.tsx +4 -0
- package/src/ui/stepper/stepper.test.tsx +6 -7
- package/src/ui/stepper/stepper.tsx +11 -10
- package/src/ui/stepper/types.ts +7 -3
- package/src/ui/table/table-base.tsx +32 -6
- package/src/ui/table/types.ts +8 -1
- package/src/ui/tabs/tabs-base.tsx +71 -10
- package/src/ui/tabs/types.ts +2 -1
- package/src/ui/tabs/variants.ts +1 -1
- package/src/ui/toast/toast-base.tsx +1 -1
- package/src/ui/toggle/toggle-base.tsx +37 -4
- package/src/ui/tooltip/tooltip-base.tsx +119 -22
- package/src/ui/tooltip/types.ts +1 -0
- package/src/ui/tooltip/variants.ts +2 -2
- package/dist/chunk-2PQEXQVR.js.map +0 -1
- package/dist/chunk-3OR47XMY.js.map +0 -1
- package/dist/chunk-5QB2KNZQ.js.map +0 -1
- package/dist/chunk-7HL3A4YF.mjs.map +0 -1
- package/dist/chunk-BVXTOEBI.mjs.map +0 -1
- package/dist/chunk-E3DZNJAD.js.map +0 -1
- package/dist/chunk-IXDJ3IPG.mjs.map +0 -1
- package/dist/chunk-N4NO3SYL.js.map +0 -1
- package/dist/chunk-P5HUBXUX.js.map +0 -1
- package/dist/chunk-PGH27VTL.mjs.map +0 -1
- package/dist/chunk-RDSPHBHK.mjs.map +0 -1
- package/dist/chunk-WDCIZHXY.mjs.map +0 -1
- package/dist/chunk-WL5I7RVS.mjs +0 -54
- package/dist/chunk-WL5I7RVS.mjs.map +0 -1
- package/dist/chunk-WZKGRU3U.js.map +0 -1
- package/dist/chunk-XLAFQ24R.js.map +0 -1
- package/dist/chunk-XWM2S6VV.mjs.map +0 -1
- package/dist/chunk-YNCD6TKE.mjs.map +0 -1
- package/dist/chunk-YPLVTUYL.js +0 -56
- package/dist/chunk-YPLVTUYL.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/ui/spinner/animated/spinner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../src/ui/spinner/animated/spinner.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAuI1C;yBAvIe,OAAO"}
|
|
@@ -68,7 +68,7 @@ function Spinner(props) {
|
|
|
68
68
|
className
|
|
69
69
|
);
|
|
70
70
|
if (variant === "ring") {
|
|
71
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
71
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
72
72
|
framerMotion.motion.span,
|
|
73
73
|
{
|
|
74
74
|
ref,
|
|
@@ -78,15 +78,18 @@ function Spinner(props) {
|
|
|
78
78
|
className: chunkUOZYPWDZ_js.cn(rootClass, "relative"),
|
|
79
79
|
initial: false,
|
|
80
80
|
...rest,
|
|
81
|
-
children:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
81
|
+
children: [
|
|
82
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
84
|
+
framerMotion.motion.span,
|
|
85
|
+
{
|
|
86
|
+
className: "block size-full rounded-full border-2 border-current border-t-transparent",
|
|
87
|
+
animate: { rotate: 360 },
|
|
88
|
+
transition: { repeat: Infinity, ease: "linear", duration: 0.85 },
|
|
89
|
+
"aria-hidden": true
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
]
|
|
90
93
|
}
|
|
91
94
|
);
|
|
92
95
|
}
|
|
@@ -99,7 +102,7 @@ function Spinner(props) {
|
|
|
99
102
|
xl: "size-3"
|
|
100
103
|
};
|
|
101
104
|
const dotSize = dotSizes[size];
|
|
102
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
105
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
103
106
|
framerMotion.motion.span,
|
|
104
107
|
{
|
|
105
108
|
ref,
|
|
@@ -109,26 +112,29 @@ function Spinner(props) {
|
|
|
109
112
|
className: chunkUOZYPWDZ_js.cn(rootClass, "gap-1"),
|
|
110
113
|
initial: false,
|
|
111
114
|
...rest,
|
|
112
|
-
children: [
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
115
|
+
children: [
|
|
116
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
117
|
+
[0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
118
|
+
framerMotion.motion.span,
|
|
119
|
+
{
|
|
120
|
+
className: chunkUOZYPWDZ_js.cn("rounded-full bg-current", dotSize),
|
|
121
|
+
animate: { y: [0, -5, 0], opacity: [0.45, 1, 0.45] },
|
|
122
|
+
transition: {
|
|
123
|
+
repeat: Infinity,
|
|
124
|
+
duration: 0.55,
|
|
125
|
+
ease: "easeInOut",
|
|
126
|
+
delay: index * 0.12
|
|
127
|
+
},
|
|
128
|
+
"aria-hidden": true
|
|
122
129
|
},
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
))
|
|
130
|
+
index
|
|
131
|
+
))
|
|
132
|
+
]
|
|
127
133
|
}
|
|
128
134
|
);
|
|
129
135
|
}
|
|
130
136
|
if (variant === "pulse") {
|
|
131
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
137
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
132
138
|
framerMotion.motion.span,
|
|
133
139
|
{
|
|
134
140
|
ref,
|
|
@@ -138,15 +144,18 @@ function Spinner(props) {
|
|
|
138
144
|
className: chunkUOZYPWDZ_js.cn(rootClass),
|
|
139
145
|
initial: false,
|
|
140
146
|
...rest,
|
|
141
|
-
children:
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
147
|
+
children: [
|
|
148
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
149
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
150
|
+
framerMotion.motion.span,
|
|
151
|
+
{
|
|
152
|
+
className: "block size-full rounded-full bg-current",
|
|
153
|
+
animate: { scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] },
|
|
154
|
+
transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" },
|
|
155
|
+
"aria-hidden": true
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
]
|
|
150
159
|
}
|
|
151
160
|
);
|
|
152
161
|
}
|
|
@@ -158,7 +167,7 @@ function Spinner(props) {
|
|
|
158
167
|
xl: "w-2"
|
|
159
168
|
};
|
|
160
169
|
const barWidth = barWidths[size];
|
|
161
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
170
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
162
171
|
framerMotion.motion.span,
|
|
163
172
|
{
|
|
164
173
|
ref,
|
|
@@ -168,21 +177,24 @@ function Spinner(props) {
|
|
|
168
177
|
className: chunkUOZYPWDZ_js.cn(rootClass, "gap-1"),
|
|
169
178
|
initial: false,
|
|
170
179
|
...rest,
|
|
171
|
-
children: [
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
180
|
+
children: [
|
|
181
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
182
|
+
[0, 1, 2, 3].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
183
|
+
framerMotion.motion.span,
|
|
184
|
+
{
|
|
185
|
+
className: chunkUOZYPWDZ_js.cn("h-full max-h-[70%] rounded-full bg-current", barWidth),
|
|
186
|
+
animate: { scaleY: [0.35, 1, 0.35] },
|
|
187
|
+
transition: {
|
|
188
|
+
repeat: Infinity,
|
|
189
|
+
duration: 0.65,
|
|
190
|
+
ease: "easeInOut",
|
|
191
|
+
delay: index * 0.1
|
|
192
|
+
},
|
|
193
|
+
"aria-hidden": true
|
|
181
194
|
},
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
))
|
|
195
|
+
index
|
|
196
|
+
))
|
|
197
|
+
]
|
|
186
198
|
}
|
|
187
199
|
);
|
|
188
200
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ui/spinner/animated/variants.ts","../../../src/ui/spinner/animated/spinner.tsx"],"names":["cva","cn","jsx","motion"],"mappings":"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","file":"animated.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nconst spinnerAppearances = {\n default: \"text-slate-50\",\n secondary: \"text-slate-300\",\n destructive: \"text-rose-400\",\n ghost: \"text-slate-300\",\n emerald: \"text-emerald-400\",\n indigo: \"text-indigo-400\",\n purple: \"text-purple-400\",\n pink: \"text-pink-400\",\n rose: \"text-rose-400\",\n sky: \"text-sky-400\",\n teal: \"text-teal-400\",\n yellow: \"text-yellow-400\",\n orange: \"text-orange-400\",\n \"gradient-blue\": \"text-blue-400\",\n \"gradient-green\": \"text-green-400\",\n \"gradient-red\": \"text-red-400\",\n \"gradient-yellow\": \"text-yellow-400\",\n \"gradient-purple\": \"text-purple-400\",\n \"gradient-teal\": \"text-teal-400\",\n \"gradient-indigo\": \"text-indigo-400\",\n \"gradient-pink\": \"text-pink-400\",\n \"gradient-orange\": \"text-orange-400\",\n} as const;\n\nexport const spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n variants: {\n appearance: spinnerAppearances,\n size: {\n xs: \"size-3\",\n sm: \"size-4\",\n md: \"size-6\",\n lg: \"size-8\",\n xl: \"size-10\",\n },\n variant: {\n ring: \"\",\n dots: \"\",\n pulse: \"\",\n bars: \"\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n variant: \"ring\",\n },\n});\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n const {\n className,\n appearance,\n size,\n variant = \"ring\",\n ref,\n \"aria-label\": ariaLabel = \"Loading\",\n ...rest\n } = props;\n const rootClass = cn(\n spinnerVariants({ appearance, size, variant }),\n className,\n );\n\n if (variant === \"ring\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"relative\")}\n initial={false}\n {...rest}\n >\n <motion.span\n className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n animate={{ rotate: 360 }}\n transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n if (variant === \"dots\") {\n const dotSizes = {\n xs: \"size-1\",\n sm: \"size-1.5\",\n md: \"size-2\",\n lg: \"size-2.5\",\n xl: \"size-3\",\n };\n const dotSize = dotSizes[size as keyof typeof dotSizes];\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n {[0, 1, 2].map((index) => (\n <motion.span\n key={index}\n className={cn(\"rounded-full bg-current\", dotSize)}\n animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n transition={{\n repeat: Infinity,\n duration: 0.55,\n ease: \"easeInOut\",\n delay: index * 0.12,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n }\n\n if (variant === \"pulse\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass)}\n initial={false}\n {...rest}\n >\n <motion.span\n className=\"block size-full rounded-full bg-current\"\n animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n const barWidths = {\n xs: \"w-0.5\",\n sm: \"w-0.5\",\n md: \"w-1\",\n lg: \"w-1.5\",\n xl: \"w-2\",\n };\n\n const barWidth =\n barWidths[size as keyof typeof barWidths];\n \n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n {[0, 1, 2, 3].map((index) => (\n <motion.span\n key={index}\n className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n animate={{ scaleY: [0.35, 1, 0.35] }}\n transition={{\n repeat: Infinity,\n duration: 0.65,\n ease: \"easeInOut\",\n delay: index * 0.1,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n}\n\nSpinner.displayName = \"Spinner\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/spinner/animated/variants.ts","../../../src/ui/spinner/animated/spinner.tsx"],"names":["cva","cn","jsxs","motion","jsx"],"mappings":"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","file":"animated.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nconst spinnerAppearances = {\n default: \"text-slate-50\",\n secondary: \"text-slate-300\",\n destructive: \"text-rose-400\",\n ghost: \"text-slate-300\",\n emerald: \"text-emerald-400\",\n indigo: \"text-indigo-400\",\n purple: \"text-purple-400\",\n pink: \"text-pink-400\",\n rose: \"text-rose-400\",\n sky: \"text-sky-400\",\n teal: \"text-teal-400\",\n yellow: \"text-yellow-400\",\n orange: \"text-orange-400\",\n \"gradient-blue\": \"text-blue-400\",\n \"gradient-green\": \"text-green-400\",\n \"gradient-red\": \"text-red-400\",\n \"gradient-yellow\": \"text-yellow-400\",\n \"gradient-purple\": \"text-purple-400\",\n \"gradient-teal\": \"text-teal-400\",\n \"gradient-indigo\": \"text-indigo-400\",\n \"gradient-pink\": \"text-pink-400\",\n \"gradient-orange\": \"text-orange-400\",\n} as const;\n\nexport const spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n variants: {\n appearance: spinnerAppearances,\n size: {\n xs: \"size-3\",\n sm: \"size-4\",\n md: \"size-6\",\n lg: \"size-8\",\n xl: \"size-10\",\n },\n variant: {\n ring: \"\",\n dots: \"\",\n pulse: \"\",\n bars: \"\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n variant: \"ring\",\n },\n});\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n const {\n className,\n appearance,\n size,\n variant = \"ring\",\n ref,\n \"aria-label\": ariaLabel = \"Loading\",\n ...rest\n } = props;\n const rootClass = cn(\n spinnerVariants({ appearance, size, variant }),\n className,\n );\n\n if (variant === \"ring\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"relative\")}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n <motion.span\n className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n animate={{ rotate: 360 }}\n transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n if (variant === \"dots\") {\n const dotSizes = {\n xs: \"size-1\",\n sm: \"size-1.5\",\n md: \"size-2\",\n lg: \"size-2.5\",\n xl: \"size-3\",\n };\n const dotSize = dotSizes[size as keyof typeof dotSizes];\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n {[0, 1, 2].map((index) => (\n <motion.span\n key={index}\n className={cn(\"rounded-full bg-current\", dotSize)}\n animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n transition={{\n repeat: Infinity,\n duration: 0.55,\n ease: \"easeInOut\",\n delay: index * 0.12,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n }\n\n if (variant === \"pulse\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass)}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n <motion.span\n className=\"block size-full rounded-full bg-current\"\n animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n const barWidths = {\n xs: \"w-0.5\",\n sm: \"w-0.5\",\n md: \"w-1\",\n lg: \"w-1.5\",\n xl: \"w-2\",\n };\n\n const barWidth =\n barWidths[size as keyof typeof barWidths];\n \n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n {[0, 1, 2, 3].map((index) => (\n <motion.span\n key={index}\n className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n animate={{ scaleY: [0.35, 1, 0.35] }}\n transition={{\n repeat: Infinity,\n duration: 0.65,\n ease: \"easeInOut\",\n delay: index * 0.1,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n}\n\nSpinner.displayName = \"Spinner\";\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { cn } from '../../chunk-DFEZH7TC.mjs';
|
|
3
3
|
import { motion } from 'framer-motion';
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
var spinnerAppearances = {
|
|
8
8
|
default: "text-slate-50",
|
|
@@ -66,7 +66,7 @@ function Spinner(props) {
|
|
|
66
66
|
className
|
|
67
67
|
);
|
|
68
68
|
if (variant === "ring") {
|
|
69
|
-
return /* @__PURE__ */
|
|
69
|
+
return /* @__PURE__ */ jsxs(
|
|
70
70
|
motion.span,
|
|
71
71
|
{
|
|
72
72
|
ref,
|
|
@@ -76,15 +76,18 @@ function Spinner(props) {
|
|
|
76
76
|
className: cn(rootClass, "relative"),
|
|
77
77
|
initial: false,
|
|
78
78
|
...rest,
|
|
79
|
-
children:
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
79
|
+
children: [
|
|
80
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
81
|
+
/* @__PURE__ */ jsx(
|
|
82
|
+
motion.span,
|
|
83
|
+
{
|
|
84
|
+
className: "block size-full rounded-full border-2 border-current border-t-transparent",
|
|
85
|
+
animate: { rotate: 360 },
|
|
86
|
+
transition: { repeat: Infinity, ease: "linear", duration: 0.85 },
|
|
87
|
+
"aria-hidden": true
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
]
|
|
88
91
|
}
|
|
89
92
|
);
|
|
90
93
|
}
|
|
@@ -97,7 +100,7 @@ function Spinner(props) {
|
|
|
97
100
|
xl: "size-3"
|
|
98
101
|
};
|
|
99
102
|
const dotSize = dotSizes[size];
|
|
100
|
-
return /* @__PURE__ */
|
|
103
|
+
return /* @__PURE__ */ jsxs(
|
|
101
104
|
motion.span,
|
|
102
105
|
{
|
|
103
106
|
ref,
|
|
@@ -107,26 +110,29 @@ function Spinner(props) {
|
|
|
107
110
|
className: cn(rootClass, "gap-1"),
|
|
108
111
|
initial: false,
|
|
109
112
|
...rest,
|
|
110
|
-
children: [
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
113
|
+
children: [
|
|
114
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
115
|
+
[0, 1, 2].map((index) => /* @__PURE__ */ jsx(
|
|
116
|
+
motion.span,
|
|
117
|
+
{
|
|
118
|
+
className: cn("rounded-full bg-current", dotSize),
|
|
119
|
+
animate: { y: [0, -5, 0], opacity: [0.45, 1, 0.45] },
|
|
120
|
+
transition: {
|
|
121
|
+
repeat: Infinity,
|
|
122
|
+
duration: 0.55,
|
|
123
|
+
ease: "easeInOut",
|
|
124
|
+
delay: index * 0.12
|
|
125
|
+
},
|
|
126
|
+
"aria-hidden": true
|
|
120
127
|
},
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
))
|
|
128
|
+
index
|
|
129
|
+
))
|
|
130
|
+
]
|
|
125
131
|
}
|
|
126
132
|
);
|
|
127
133
|
}
|
|
128
134
|
if (variant === "pulse") {
|
|
129
|
-
return /* @__PURE__ */
|
|
135
|
+
return /* @__PURE__ */ jsxs(
|
|
130
136
|
motion.span,
|
|
131
137
|
{
|
|
132
138
|
ref,
|
|
@@ -136,15 +142,18 @@ function Spinner(props) {
|
|
|
136
142
|
className: cn(rootClass),
|
|
137
143
|
initial: false,
|
|
138
144
|
...rest,
|
|
139
|
-
children:
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
145
|
+
children: [
|
|
146
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
147
|
+
/* @__PURE__ */ jsx(
|
|
148
|
+
motion.span,
|
|
149
|
+
{
|
|
150
|
+
className: "block size-full rounded-full bg-current",
|
|
151
|
+
animate: { scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] },
|
|
152
|
+
transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" },
|
|
153
|
+
"aria-hidden": true
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
]
|
|
148
157
|
}
|
|
149
158
|
);
|
|
150
159
|
}
|
|
@@ -156,7 +165,7 @@ function Spinner(props) {
|
|
|
156
165
|
xl: "w-2"
|
|
157
166
|
};
|
|
158
167
|
const barWidth = barWidths[size];
|
|
159
|
-
return /* @__PURE__ */
|
|
168
|
+
return /* @__PURE__ */ jsxs(
|
|
160
169
|
motion.span,
|
|
161
170
|
{
|
|
162
171
|
ref,
|
|
@@ -166,21 +175,24 @@ function Spinner(props) {
|
|
|
166
175
|
className: cn(rootClass, "gap-1"),
|
|
167
176
|
initial: false,
|
|
168
177
|
...rest,
|
|
169
|
-
children: [
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
178
|
+
children: [
|
|
179
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
|
|
180
|
+
[0, 1, 2, 3].map((index) => /* @__PURE__ */ jsx(
|
|
181
|
+
motion.span,
|
|
182
|
+
{
|
|
183
|
+
className: cn("h-full max-h-[70%] rounded-full bg-current", barWidth),
|
|
184
|
+
animate: { scaleY: [0.35, 1, 0.35] },
|
|
185
|
+
transition: {
|
|
186
|
+
repeat: Infinity,
|
|
187
|
+
duration: 0.65,
|
|
188
|
+
ease: "easeInOut",
|
|
189
|
+
delay: index * 0.1
|
|
190
|
+
},
|
|
191
|
+
"aria-hidden": true
|
|
179
192
|
},
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
))
|
|
193
|
+
index
|
|
194
|
+
))
|
|
195
|
+
]
|
|
184
196
|
}
|
|
185
197
|
);
|
|
186
198
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ui/spinner/animated/variants.ts","../../../src/ui/spinner/animated/spinner.tsx"],"names":[],"mappings":";;;;;AAEA,IAAM,kBAAA,GAAqB;AAAA,EACzB,OAAA,EAAS,eAAA;AAAA,EACT,SAAA,EAAW,gBAAA;AAAA,EACX,WAAA,EAAa,eAAA;AAAA,EACb,KAAA,EAAO,gBAAA;AAAA,EACP,OAAA,EAAS,kBAAA;AAAA,EACT,MAAA,EAAQ,iBAAA;AAAA,EACR,MAAA,EAAQ,iBAAA;AAAA,EACR,IAAA,EAAM,eAAA;AAAA,EACN,IAAA,EAAM,eAAA;AAAA,EACN,GAAA,EAAK,cAAA;AAAA,EACL,IAAA,EAAM,eAAA;AAAA,EACN,MAAA,EAAQ,iBAAA;AAAA,EACR,MAAA,EAAQ,iBAAA;AAAA,EACR,eAAA,EAAiB,eAAA;AAAA,EACjB,gBAAA,EAAkB,gBAAA;AAAA,EAClB,cAAA,EAAgB,cAAA;AAAA,EAChB,iBAAA,EAAmB,iBAAA;AAAA,EACnB,iBAAA,EAAmB,iBAAA;AAAA,EACnB,eAAA,EAAiB,eAAA;AAAA,EACjB,iBAAA,EAAmB,iBAAA;AAAA,EACnB,eAAA,EAAiB,eAAA;AAAA,EACjB,iBAAA,EAAmB;AACrB,CAAA;AAEO,IAAM,eAAA,GAAkB,IAAI,yCAAA,EAA2C;AAAA,EAC5E,QAAA,EAAU;AAAA,IACR,UAAA,EAAY,kBAAA;AAAA,IACZ,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,EAAA;AAAA,MACN,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO,EAAA;AAAA,MACP,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC;ACxCM,SAAS,QAAQ,KAAA,EAAqB;AAC3C,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA,GAAU,MAAA;AAAA,IACV,GAAA;AAAA,IACA,cAAc,SAAA,GAAY,SAAA;AAAA,IAC1B,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,SAAA,GAAY,EAAA;AAAA,IAChB,eAAA,CAAgB,EAAE,UAAA,EAAY,IAAA,EAAM,SAAS,CAAA;AAAA,IAC7C;AAAA,GACF;AAEA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA,CAAO,IAAA;AAAA,MAAP;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,SAAA;AAAA,QACV,YAAA,EAAY,SAAA;AAAA,QACZ,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,UAAU,CAAA;AAAA,QACnC,OAAA,EAAS,KAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA,CAAO,IAAA;AAAA,UAAP;AAAA,YACC,SAAA,EAAU,2EAAA;AAAA,YACV,OAAA,EAAS,EAAE,MAAA,EAAQ,GAAA,EAAI;AAAA,YACvB,YAAY,EAAE,MAAA,EAAQ,UAAU,IAAA,EAAM,QAAA,EAAU,UAAU,IAAA,EAAK;AAAA,YAC/D,aAAA,EAAW;AAAA;AAAA;AACb;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,MAAM,QAAA,GAAW;AAAA,MACf,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,UAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,UAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AACA,IAAA,MAAM,OAAA,GAAU,SAAS,IAA6B,CAAA;AACtD,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA,CAAO,IAAA;AAAA,MAAP;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,SAAA;AAAA,QACV,YAAA,EAAY,SAAA;AAAA,QACZ,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,OAAO,CAAA;AAAA,QAChC,OAAA,EAAS,KAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEH,WAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,qBACd,GAAA;AAAA,UAAC,MAAA,CAAO,IAAA;AAAA,UAAP;AAAA,YAEC,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,OAAO,CAAA;AAAA,YAChD,OAAA,EAAS,EAAE,CAAA,EAAG,CAAC,CAAA,EAAG,EAAA,EAAI,CAAC,CAAA,EAAG,OAAA,EAAS,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAE;AAAA,YACnD,UAAA,EAAY;AAAA,cACV,MAAA,EAAQ,QAAA;AAAA,cACR,QAAA,EAAU,IAAA;AAAA,cACV,IAAA,EAAM,WAAA;AAAA,cACN,OAAO,KAAA,GAAQ;AAAA,aACjB;AAAA,YACA,aAAA,EAAW;AAAA,WAAA;AAAA,UATN;AAAA,SAWR;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,IAAI,YAAY,OAAA,EAAS;AACvB,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA,CAAO,IAAA;AAAA,MAAP;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,SAAA;AAAA,QACV,YAAA,EAAY,SAAA;AAAA,QACZ,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,QACvB,OAAA,EAAS,KAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA,CAAO,IAAA;AAAA,UAAP;AAAA,YACC,SAAA,EAAU,yCAAA;AAAA,YACV,OAAA,EAAS,EAAE,KAAA,EAAO,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAG,OAAA,EAAS,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAE;AAAA,YAC5D,YAAY,EAAE,MAAA,EAAQ,UAAU,QAAA,EAAU,GAAA,EAAK,MAAM,WAAA,EAAY;AAAA,YACjE,aAAA,EAAW;AAAA;AAAA;AACb;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAEA,EAAA,MAAM,QAAA,GACJ,UAAU,IAA8B,CAAA;AAE1C,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA,CAAO,IAAA;AAAA,IAAP;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAU,SAAA;AAAA,MACV,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,OAAO,CAAA;AAAA,MAChC,OAAA,EAAS,KAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,GAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,qBACjB,GAAA;AAAA,QAAC,MAAA,CAAO,IAAA;AAAA,QAAP;AAAA,UAEC,SAAA,EAAW,EAAA,CAAG,4CAAA,EAA8C,QAAQ,CAAA;AAAA,UACpE,SAAS,EAAE,MAAA,EAAQ,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAE;AAAA,UACnC,UAAA,EAAY;AAAA,YACV,MAAA,EAAQ,QAAA;AAAA,YACR,QAAA,EAAU,IAAA;AAAA,YACV,IAAA,EAAM,WAAA;AAAA,YACN,OAAO,KAAA,GAAQ;AAAA,WACjB;AAAA,UACA,aAAA,EAAW;AAAA,SAAA;AAAA,QATN;AAAA,OAWR;AAAA;AAAA,GACH;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"animated.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nconst spinnerAppearances = {\n default: \"text-slate-50\",\n secondary: \"text-slate-300\",\n destructive: \"text-rose-400\",\n ghost: \"text-slate-300\",\n emerald: \"text-emerald-400\",\n indigo: \"text-indigo-400\",\n purple: \"text-purple-400\",\n pink: \"text-pink-400\",\n rose: \"text-rose-400\",\n sky: \"text-sky-400\",\n teal: \"text-teal-400\",\n yellow: \"text-yellow-400\",\n orange: \"text-orange-400\",\n \"gradient-blue\": \"text-blue-400\",\n \"gradient-green\": \"text-green-400\",\n \"gradient-red\": \"text-red-400\",\n \"gradient-yellow\": \"text-yellow-400\",\n \"gradient-purple\": \"text-purple-400\",\n \"gradient-teal\": \"text-teal-400\",\n \"gradient-indigo\": \"text-indigo-400\",\n \"gradient-pink\": \"text-pink-400\",\n \"gradient-orange\": \"text-orange-400\",\n} as const;\n\nexport const spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n variants: {\n appearance: spinnerAppearances,\n size: {\n xs: \"size-3\",\n sm: \"size-4\",\n md: \"size-6\",\n lg: \"size-8\",\n xl: \"size-10\",\n },\n variant: {\n ring: \"\",\n dots: \"\",\n pulse: \"\",\n bars: \"\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n variant: \"ring\",\n },\n});\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n const {\n className,\n appearance,\n size,\n variant = \"ring\",\n ref,\n \"aria-label\": ariaLabel = \"Loading\",\n ...rest\n } = props;\n const rootClass = cn(\n spinnerVariants({ appearance, size, variant }),\n className,\n );\n\n if (variant === \"ring\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"relative\")}\n initial={false}\n {...rest}\n >\n <motion.span\n className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n animate={{ rotate: 360 }}\n transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n if (variant === \"dots\") {\n const dotSizes = {\n xs: \"size-1\",\n sm: \"size-1.5\",\n md: \"size-2\",\n lg: \"size-2.5\",\n xl: \"size-3\",\n };\n const dotSize = dotSizes[size as keyof typeof dotSizes];\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n {[0, 1, 2].map((index) => (\n <motion.span\n key={index}\n className={cn(\"rounded-full bg-current\", dotSize)}\n animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n transition={{\n repeat: Infinity,\n duration: 0.55,\n ease: \"easeInOut\",\n delay: index * 0.12,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n }\n\n if (variant === \"pulse\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass)}\n initial={false}\n {...rest}\n >\n <motion.span\n className=\"block size-full rounded-full bg-current\"\n animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n const barWidths = {\n xs: \"w-0.5\",\n sm: \"w-0.5\",\n md: \"w-1\",\n lg: \"w-1.5\",\n xl: \"w-2\",\n };\n\n const barWidth =\n barWidths[size as keyof typeof barWidths];\n \n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n {[0, 1, 2, 3].map((index) => (\n <motion.span\n key={index}\n className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n animate={{ scaleY: [0.35, 1, 0.35] }}\n transition={{\n repeat: Infinity,\n duration: 0.65,\n ease: \"easeInOut\",\n delay: index * 0.1,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n}\n\nSpinner.displayName = \"Spinner\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/spinner/animated/variants.ts","../../../src/ui/spinner/animated/spinner.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nconst spinnerAppearances = {\n default: \"text-slate-50\",\n secondary: \"text-slate-300\",\n destructive: \"text-rose-400\",\n ghost: \"text-slate-300\",\n emerald: \"text-emerald-400\",\n indigo: \"text-indigo-400\",\n purple: \"text-purple-400\",\n pink: \"text-pink-400\",\n rose: \"text-rose-400\",\n sky: \"text-sky-400\",\n teal: \"text-teal-400\",\n yellow: \"text-yellow-400\",\n orange: \"text-orange-400\",\n \"gradient-blue\": \"text-blue-400\",\n \"gradient-green\": \"text-green-400\",\n \"gradient-red\": \"text-red-400\",\n \"gradient-yellow\": \"text-yellow-400\",\n \"gradient-purple\": \"text-purple-400\",\n \"gradient-teal\": \"text-teal-400\",\n \"gradient-indigo\": \"text-indigo-400\",\n \"gradient-pink\": \"text-pink-400\",\n \"gradient-orange\": \"text-orange-400\",\n} as const;\n\nexport const spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n variants: {\n appearance: spinnerAppearances,\n size: {\n xs: \"size-3\",\n sm: \"size-4\",\n md: \"size-6\",\n lg: \"size-8\",\n xl: \"size-10\",\n },\n variant: {\n ring: \"\",\n dots: \"\",\n pulse: \"\",\n bars: \"\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n variant: \"ring\",\n },\n});\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n const {\n className,\n appearance,\n size,\n variant = \"ring\",\n ref,\n \"aria-label\": ariaLabel = \"Loading\",\n ...rest\n } = props;\n const rootClass = cn(\n spinnerVariants({ appearance, size, variant }),\n className,\n );\n\n if (variant === \"ring\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"relative\")}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n <motion.span\n className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n animate={{ rotate: 360 }}\n transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n if (variant === \"dots\") {\n const dotSizes = {\n xs: \"size-1\",\n sm: \"size-1.5\",\n md: \"size-2\",\n lg: \"size-2.5\",\n xl: \"size-3\",\n };\n const dotSize = dotSizes[size as keyof typeof dotSizes];\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n {[0, 1, 2].map((index) => (\n <motion.span\n key={index}\n className={cn(\"rounded-full bg-current\", dotSize)}\n animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n transition={{\n repeat: Infinity,\n duration: 0.55,\n ease: \"easeInOut\",\n delay: index * 0.12,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n }\n\n if (variant === \"pulse\") {\n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass)}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n <motion.span\n className=\"block size-full rounded-full bg-current\"\n animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n aria-hidden\n />\n </motion.span>\n );\n }\n\n const barWidths = {\n xs: \"w-0.5\",\n sm: \"w-0.5\",\n md: \"w-1\",\n lg: \"w-1.5\",\n xl: \"w-2\",\n };\n\n const barWidth =\n barWidths[size as keyof typeof barWidths];\n \n return (\n <motion.span\n ref={ref}\n role=\"status\"\n data-slot=\"spinner\"\n aria-label={ariaLabel}\n className={cn(rootClass, \"gap-1\")}\n initial={false}\n {...rest}\n >\n <span className=\"sr-only\">{ariaLabel}</span>\n {[0, 1, 2, 3].map((index) => (\n <motion.span\n key={index}\n className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n animate={{ scaleY: [0.35, 1, 0.35] }}\n transition={{\n repeat: Infinity,\n duration: 0.65,\n ease: \"easeInOut\",\n delay: index * 0.1,\n }}\n aria-hidden\n />\n ))}\n </motion.span>\n );\n}\n\nSpinner.displayName = \"Spinner\";\n"]}
|
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import { type Ref } from "react";
|
|
2
1
|
import type { StepperDescriptionProps, StepperIndicatorProps, StepperItemProps, StepperProps, StepperTitleProps } from "./types";
|
|
3
|
-
export declare function Stepper({ className, orientation, size, children, ref, ...rest }: StepperProps
|
|
4
|
-
ref?: Ref<HTMLDivElement>;
|
|
5
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function Stepper({ className, orientation, size, children, ref, ...rest }: StepperProps): import("react/jsx-runtime").JSX.Element;
|
|
6
3
|
export declare namespace Stepper {
|
|
7
4
|
var displayName: string;
|
|
8
5
|
}
|
|
9
|
-
export declare function StepperItem({ className, ref, children, ...rest }: StepperItemProps
|
|
10
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
11
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function StepperItem({ className, ref, children, ...rest }: StepperItemProps): import("react/jsx-runtime").JSX.Element;
|
|
12
7
|
export declare namespace StepperItem {
|
|
13
8
|
var displayName: string;
|
|
14
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/ui/stepper/stepper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/ui/stepper/stepper.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAEV,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EAClB,MAAM,SAAS,CAAC;AA6BjB,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,WAA0B,EAC1B,IAAW,EACX,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,2CAkCd;yBAzCe,OAAO;;;AA6CvB,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,EACH,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAYlB;yBAjBe,WAAW;;;AAqB3B,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,EACH,QAAQ,EACR,UAAU,EACV,GAAG,IAAI,EACR,EAAE,qBAAqB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,2CAa7D;yBAnBe,gBAAgB;;;AAuBhC,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,2CAYzD;yBAhBe,YAAY;;;AAoB5B,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;CAAE,2CASrE;yBAbe,kBAAkB"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { VariantProps } from "class-variance-authority";
|
|
2
|
-
import type { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
|
+
import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
|
|
3
3
|
import type { stepperIndicatorVariants, stepperVariants } from "./variants";
|
|
4
4
|
type StepperVariantProps = VariantProps<typeof stepperVariants>;
|
|
5
5
|
export type StepperProps = StepperVariantProps & {
|
|
6
6
|
size?: VariantProps<typeof stepperIndicatorVariants>["size"];
|
|
7
7
|
children?: ReactNode;
|
|
8
|
-
} & Omit<
|
|
9
|
-
export type StepperItemProps =
|
|
8
|
+
} & Omit<ComponentPropsWithRef<"ol">, "children">;
|
|
9
|
+
export type StepperItemProps = ComponentPropsWithRef<"li"> & {
|
|
10
10
|
children?: ReactNode;
|
|
11
11
|
};
|
|
12
12
|
export type StepperIndicatorProps = ComponentPropsWithoutRef<"div"> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/stepper/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/stepper/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE5E,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG;IAC/C,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC,YAAY,CAAC,CAAC;AAE5F,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,EAAE,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC;IACtD,IAAI,EAAE,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}
|
|
@@ -5,7 +5,7 @@ export declare const stepperItemVariants: (props?: ({
|
|
|
5
5
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export declare const stepperIndicatorVariants: (props?: ({
|
|
8
|
-
appearance?: "emerald" | "indigo" | "purple" | "pink" | "rose" | "sky" | "teal" | "yellow" | "orange" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "
|
|
8
|
+
appearance?: "current" | "emerald" | "indigo" | "purple" | "pink" | "rose" | "sky" | "teal" | "yellow" | "orange" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "complete" | "upcoming" | null | undefined;
|
|
9
9
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
//# sourceMappingURL=variants.d.ts.map
|
package/dist/ui/stepper.js
CHANGED
|
@@ -106,12 +106,15 @@ function Stepper({
|
|
|
106
106
|
[items.length, orientation, size]
|
|
107
107
|
);
|
|
108
108
|
return /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
-
"
|
|
109
|
+
"ol",
|
|
110
110
|
{
|
|
111
111
|
ref,
|
|
112
112
|
"data-slot": "stepper",
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
className: chunkUOZYPWDZ_js.cn(
|
|
114
|
+
stepperVariants({ orientation }),
|
|
115
|
+
"m-0 list-none p-0",
|
|
116
|
+
className
|
|
117
|
+
),
|
|
115
118
|
...rest,
|
|
116
119
|
children: items.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(StepperIndexContext.Provider, { value: index, children: child }, index))
|
|
117
120
|
}
|
|
@@ -126,11 +129,10 @@ function StepperItem({
|
|
|
126
129
|
}) {
|
|
127
130
|
const { orientation } = useStepper("StepperItem");
|
|
128
131
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
129
|
-
"
|
|
132
|
+
"li",
|
|
130
133
|
{
|
|
131
134
|
ref,
|
|
132
135
|
"data-slot": "stepper-item",
|
|
133
|
-
role: "listitem",
|
|
134
136
|
className: chunkUOZYPWDZ_js.cn(stepperItemVariants({ orientation }), className),
|
|
135
137
|
...rest,
|
|
136
138
|
children
|
package/dist/ui/stepper.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/stepper/variants.ts","../../src/ui/stepper/stepper.tsx"],"names":["cva","createContext","useContext","useMemo","Children","isValidElement","jsx","cn"],"mappings":"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","file":"stepper.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const stepperVariants = cva(\"flex w-full\", {\n variants: {\n orientation: {\n horizontal: \"flex-row flex-wrap items-start gap-4\",\n vertical: \"flex-col gap-6\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const stepperItemVariants = cva(\"relative flex gap-3\", {\n variants: {\n orientation: {\n horizontal: \"min-w-0 flex-col items-center text-center\",\n vertical: \"flex-row items-start text-left\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const stepperIndicatorVariants = cva(\n \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\",\n {\n variants: {\n appearance: {\n complete:\n \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n current:\n \"border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50\",\n upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n sky: \"border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30\",\n rose: \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n purple: \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n pink: \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n orange: \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n yellow: \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n teal: \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n indigo: \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n emerald: \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n gray: \"border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30\",\n violet: \"border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30\",\n \"gradient-blue\": \"border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30\",\n \"gradient-green\": \"border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30\",\n \"gradient-red\": \"border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30\",\n \"gradient-yellow\": \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n \"gradient-purple\": \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n \"gradient-teal\": \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n \"gradient-indigo\": \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n \"gradient-pink\": \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n \"gradient-orange\": \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n },\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-9 text-sm\",\n lg: \"size-10 text-base\",\n },\n },\n defaultVariants: {\n appearance: \"upcoming\",\n size: \"md\",\n },\n },\n);\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useMemo,\n type Ref,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n StepperCtx,\n StepperDescriptionProps,\n StepperIndicatorProps,\n StepperItemProps,\n StepperProps,\n StepperTitleProps,\n} from \"./types\";\nimport {\n stepperIndicatorVariants,\n stepperItemVariants,\n stepperVariants,\n} from \"./variants\";\n\n\nconst StepperContext = createContext<StepperCtx | null>(null);\n\nfunction useStepper(component: string): StepperCtx {\n const ctx = useContext(StepperContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Stepper>`);\n }\n return ctx;\n}\n\nconst StepperIndexContext = createContext<number | null>(null);\n\nfunction useStepperIndex(component: string): number {\n const index = useContext(StepperIndexContext);\n if (index === null) {\n throw new Error(`${component} must be used within <StepperItem>`);\n }\n return index;\n}\n\n\nexport function Stepper({\n className,\n orientation = \"horizontal\",\n size = \"md\",\n children,\n ref,\n ...rest\n}: StepperProps & { ref?: Ref<HTMLDivElement> }) {\n const items = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const ctx = useMemo(\n () => ({\n orientation: orientation ?? \"horizontal\",\n size: size ?? \"md\",\n total: items.length,\n }),\n [items.length, orientation, size],\n );\n\n return (\n <StepperContext.Provider value={ctx}>\n <div\n ref={ref}\n data-slot=\"stepper\"\n role=\"list\"\n className={cn(stepperVariants({ orientation }), className)}\n {...rest}\n >\n {items.map((child, index) => (\n <StepperIndexContext.Provider key={index} value={index}>\n {child}\n </StepperIndexContext.Provider>\n ))}\n </div>\n </StepperContext.Provider>\n );\n}\n\nStepper.displayName = \"Stepper\";\n\nexport function StepperItem({\n className,\n ref,\n children,\n ...rest\n}: StepperItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n const { orientation } = useStepper(\"StepperItem\");\n return (\n <div\n ref={ref}\n data-slot=\"stepper-item\"\n role=\"listitem\"\n className={cn(stepperItemVariants({ orientation }), className)}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nStepperItem.displayName = \"StepperItem\";\n\nexport function StepperIndicator({\n className,\n ref,\n children,\n appearance,\n ...rest\n}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n const { size } = useStepper(\"StepperIndicator\");\n const index = useStepperIndex(\"StepperIndicator\");\n return (\n <div\n ref={ref}\n data-slot=\"stepper-indicator\"\n className={cn(stepperIndicatorVariants({ appearance, size }), className)}\n {...rest}\n >\n {children ?? index + 1}\n </div>\n );\n}\n\nStepperIndicator.displayName = \"StepperIndicator\";\n\nexport function StepperTitle({\n className,\n ref,\n ...rest\n}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <div\n ref={ref}\n data-slot=\"stepper-title\"\n className={cn(\n \"mt-3 text-sm font-semibold\",\n className,\n )}\n {...rest}\n />\n );\n}\n\nStepperTitle.displayName = \"StepperTitle\";\n\nexport function StepperDescription({\n className,\n ref,\n ...rest\n}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n return (\n <p\n ref={ref}\n data-slot=\"stepper-description\"\n className={cn(\"mt-1 text-xs text-slate-400\", className)}\n {...rest}\n />\n );\n}\n\nStepperDescription.displayName = \"StepperDescription\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/stepper/variants.ts","../../src/ui/stepper/stepper.tsx"],"names":["cva","createContext","useContext","useMemo","Children","isValidElement","jsx","cn"],"mappings":"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","file":"stepper.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const stepperVariants = cva(\"flex w-full\", {\n variants: {\n orientation: {\n horizontal: \"flex-row flex-wrap items-start gap-4\",\n vertical: \"flex-col gap-6\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const stepperItemVariants = cva(\"relative flex gap-3\", {\n variants: {\n orientation: {\n horizontal: \"min-w-0 flex-col items-center text-center\",\n vertical: \"flex-row items-start text-left\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const stepperIndicatorVariants = cva(\n \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\",\n {\n variants: {\n appearance: {\n complete:\n \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n current:\n \"border-violet-400 bg-violet-500/20 text-white ring-2 ring-violet-400/50\",\n upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n sky: \"border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30\",\n rose: \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n purple: \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n pink: \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n orange: \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n yellow: \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n teal: \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n indigo: \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n emerald: \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n gray: \"border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30\",\n violet: \"border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30\",\n \"gradient-blue\": \"border-blue-500/60 bg-blue-500/20 text-blue-100 ring-2 ring-blue-400/30\",\n \"gradient-green\": \"border-green-500/60 bg-green-500/20 text-green-100 ring-2 ring-green-400/30\",\n \"gradient-red\": \"border-red-500/60 bg-red-500/20 text-red-100 ring-2 ring-red-400/30\",\n \"gradient-yellow\": \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n \"gradient-purple\": \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n \"gradient-teal\": \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n \"gradient-indigo\": \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n \"gradient-pink\": \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n \"gradient-orange\": \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n },\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-9 text-sm\",\n lg: \"size-10 text-base\",\n },\n },\n defaultVariants: {\n appearance: \"upcoming\",\n size: \"md\",\n },\n },\n);\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useMemo,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n StepperCtx,\n StepperDescriptionProps,\n StepperIndicatorProps,\n StepperItemProps,\n StepperProps,\n StepperTitleProps,\n} from \"./types\";\nimport {\n stepperIndicatorVariants,\n stepperItemVariants,\n stepperVariants,\n} from \"./variants\";\n\n\nconst StepperContext = createContext<StepperCtx | null>(null);\n\nfunction useStepper(component: string): StepperCtx {\n const ctx = useContext(StepperContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Stepper>`);\n }\n return ctx;\n}\n\nconst StepperIndexContext = createContext<number | null>(null);\n\nfunction useStepperIndex(component: string): number {\n const index = useContext(StepperIndexContext);\n if (index === null) {\n throw new Error(`${component} must be used within <StepperItem>`);\n }\n return index;\n}\n\n\nexport function Stepper({\n className,\n orientation = \"horizontal\",\n size = \"md\",\n children,\n ref,\n ...rest\n}: StepperProps) {\n const items = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const ctx = useMemo(\n () => ({\n orientation: orientation ?? \"horizontal\",\n size: size ?? \"md\",\n total: items.length,\n }),\n [items.length, orientation, size],\n );\n\n return (\n <StepperContext.Provider value={ctx}>\n <ol\n ref={ref}\n data-slot=\"stepper\"\n className={cn(\n stepperVariants({ orientation }),\n \"m-0 list-none p-0\",\n className,\n )}\n {...rest}\n >\n {items.map((child, index) => (\n <StepperIndexContext.Provider key={index} value={index}>\n {child}\n </StepperIndexContext.Provider>\n ))}\n </ol>\n </StepperContext.Provider>\n );\n}\n\nStepper.displayName = \"Stepper\";\n\nexport function StepperItem({\n className,\n ref,\n children,\n ...rest\n}: StepperItemProps) {\n const { orientation } = useStepper(\"StepperItem\");\n return (\n <li\n ref={ref}\n data-slot=\"stepper-item\"\n className={cn(stepperItemVariants({ orientation }), className)}\n {...rest}\n >\n {children}\n </li>\n );\n}\n\nStepperItem.displayName = \"StepperItem\";\n\nexport function StepperIndicator({\n className,\n ref,\n children,\n appearance,\n ...rest\n}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n const { size } = useStepper(\"StepperIndicator\");\n const index = useStepperIndex(\"StepperIndicator\");\n return (\n <div\n ref={ref}\n data-slot=\"stepper-indicator\"\n className={cn(stepperIndicatorVariants({ appearance, size }), className)}\n {...rest}\n >\n {children ?? index + 1}\n </div>\n );\n}\n\nStepperIndicator.displayName = \"StepperIndicator\";\n\nexport function StepperTitle({\n className,\n ref,\n ...rest\n}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <div\n ref={ref}\n data-slot=\"stepper-title\"\n className={cn(\n \"mt-3 text-sm font-semibold\",\n className,\n )}\n {...rest}\n />\n );\n}\n\nStepperTitle.displayName = \"StepperTitle\";\n\nexport function StepperDescription({\n className,\n ref,\n ...rest\n}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n return (\n <p\n ref={ref}\n data-slot=\"stepper-description\"\n className={cn(\"mt-1 text-xs text-slate-400\", className)}\n {...rest}\n />\n );\n}\n\nStepperDescription.displayName = \"StepperDescription\";\n"]}
|