@zentauri-ui/zentauri-components 1.5.22 → 1.5.31
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 +59 -2
- package/cli/registry.json +2 -0
- package/dist/chunk-7OHC4ERB.mjs +60 -0
- package/dist/chunk-7OHC4ERB.mjs.map +1 -0
- package/dist/{chunk-2VQJ6OIL.js → chunk-HPN7H5ZM.js} +2 -2
- package/dist/{chunk-2VQJ6OIL.js.map → chunk-HPN7H5ZM.js.map} +1 -1
- package/dist/chunk-JJDANNNL.mjs +71 -0
- package/dist/chunk-JJDANNNL.mjs.map +1 -0
- package/dist/chunk-KXUG4WVW.js +62 -0
- package/dist/chunk-KXUG4WVW.js.map +1 -0
- package/dist/chunk-MEJMX4QI.js +73 -0
- package/dist/chunk-MEJMX4QI.js.map +1 -0
- package/dist/chunk-N6B35KWW.mjs +3 -0
- package/dist/chunk-N6B35KWW.mjs.map +1 -0
- package/dist/{chunk-73VCO5TE.mjs → chunk-NWOE2TZN.mjs} +2 -2
- package/dist/{chunk-73VCO5TE.mjs.map → chunk-NWOE2TZN.mjs.map} +1 -1
- package/dist/chunk-RGOMHX4G.js +4 -0
- package/dist/chunk-RGOMHX4G.js.map +1 -0
- package/dist/hooks/useControllableState.js +3 -2
- package/dist/hooks/useControllableState.mjs +2 -1
- package/dist/hooks/useDisclosure.js +3 -2
- package/dist/hooks/useDisclosure.js.map +1 -1
- package/dist/hooks/useDisclosure.mjs +2 -1
- package/dist/hooks/useDisclosure.mjs.map +1 -1
- package/dist/hooks/useDynamicStepper/index.d.ts +2 -0
- package/dist/hooks/useDynamicStepper/index.d.ts.map +1 -0
- package/dist/hooks/useDynamicStepper/useDynamicStepper.d.ts +9 -0
- package/dist/hooks/useDynamicStepper/useDynamicStepper.d.ts.map +1 -0
- package/dist/hooks/useDynamicStepper.js +14 -0
- package/dist/hooks/useDynamicStepper.js.map +1 -0
- package/dist/hooks/useDynamicStepper.mjs +5 -0
- package/dist/hooks/useDynamicStepper.mjs.map +1 -0
- package/dist/ui/buttons.js +7 -55
- package/dist/ui/buttons.js.map +1 -1
- package/dist/ui/buttons.mjs +2 -58
- package/dist/ui/buttons.mjs.map +1 -1
- package/dist/ui/dynamic-stepper/dynamic-stepper.d.ts +6 -0
- package/dist/ui/dynamic-stepper/dynamic-stepper.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper/index.d.ts +5 -0
- package/dist/ui/dynamic-stepper/index.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper/types.d.ts +61 -0
- package/dist/ui/dynamic-stepper/types.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper/variants.d.ts +21 -0
- package/dist/ui/dynamic-stepper/variants.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper.js +312 -0
- package/dist/ui/dynamic-stepper.js.map +1 -0
- package/dist/ui/dynamic-stepper.mjs +305 -0
- package/dist/ui/dynamic-stepper.mjs.map +1 -0
- package/dist/ui/pagination/pagination.d.ts +5 -16
- package/dist/ui/pagination/pagination.d.ts.map +1 -1
- package/dist/ui/pagination/types.d.ts +2 -2
- package/dist/ui/pagination/types.d.ts.map +1 -1
- package/dist/ui/pagination.js +171 -180
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +172 -181
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/typography/blockquote-base.d.ts.map +1 -1
- package/dist/ui/typography/code-block-base.d.ts.map +1 -1
- package/dist/ui/typography/heading-base.d.ts.map +1 -1
- package/dist/ui/typography/inline-code-base.d.ts.map +1 -1
- package/dist/ui/typography.js.map +1 -1
- package/dist/ui/typography.mjs.map +1 -1
- package/package.json +1 -1
- package/src/hooks/useDynamicStepper/index.ts +3 -0
- package/src/hooks/useDynamicStepper/useDynamicStepper.test.ts +107 -0
- package/src/hooks/useDynamicStepper/useDynamicStepper.ts +91 -0
- package/src/ui/dynamic-stepper/dynamic-stepper.test.tsx +109 -0
- package/src/ui/dynamic-stepper/dynamic-stepper.tsx +173 -0
- package/src/ui/dynamic-stepper/index.ts +24 -0
- package/src/ui/dynamic-stepper/types.ts +85 -0
- package/src/ui/dynamic-stepper/variants.ts +238 -0
- package/src/ui/pagination/pagination.tsx +186 -197
- package/src/ui/pagination/types.ts +2 -2
- package/src/ui/typography/blockquote-base.tsx +0 -2
- package/src/ui/typography/code-block-base.tsx +0 -2
- package/src/ui/typography/heading-base.tsx +0 -2
- package/src/ui/typography/inline-code-base.tsx +0 -2
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useDynamicStepper } from '../chunk-JJDANNNL.mjs';
|
|
3
|
+
import '../chunk-NWOE2TZN.mjs';
|
|
4
|
+
import { Button } from '../chunk-7OHC4ERB.mjs';
|
|
5
|
+
import '../chunk-5TV7EL3H.mjs';
|
|
6
|
+
import { cn } from '../chunk-4D54YOL6.mjs';
|
|
7
|
+
import { useId } from 'react';
|
|
8
|
+
import { cva } from 'class-variance-authority';
|
|
9
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
|
+
|
|
11
|
+
var INDICATOR_TONE_CLASSES = {
|
|
12
|
+
default: {
|
|
13
|
+
complete: "border-slate-400/55 bg-slate-500/25 text-slate-50 ring-2 ring-slate-400/25",
|
|
14
|
+
current: "border-slate-300 bg-slate-500/35 text-white ring-2 ring-slate-300/45",
|
|
15
|
+
upcoming: "border-white/15 bg-white/5 text-slate-400"
|
|
16
|
+
},
|
|
17
|
+
secondary: {
|
|
18
|
+
complete: "border-slate-600 bg-slate-800/70 text-slate-200 ring-2 ring-slate-600/35",
|
|
19
|
+
current: "border-slate-500 bg-slate-700/55 text-white ring-2 ring-slate-500/45",
|
|
20
|
+
upcoming: "border-white/10 bg-slate-900/50 text-slate-500"
|
|
21
|
+
},
|
|
22
|
+
destructive: {
|
|
23
|
+
complete: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
|
|
24
|
+
current: "border-rose-400 bg-rose-600/35 text-white ring-2 ring-rose-400/50",
|
|
25
|
+
upcoming: "border-white/15 bg-rose-950/25 text-slate-400"
|
|
26
|
+
},
|
|
27
|
+
outline: {
|
|
28
|
+
complete: "border-emerald-500/55 bg-transparent text-emerald-200 ring-2 ring-emerald-500/25",
|
|
29
|
+
current: "border-white/30 bg-white/10 text-white ring-2 ring-white/25",
|
|
30
|
+
upcoming: "border-white/15 bg-white/5 text-slate-400"
|
|
31
|
+
},
|
|
32
|
+
ghost: {
|
|
33
|
+
complete: "border-transparent bg-emerald-500/15 text-emerald-200 ring-2 ring-emerald-400/20",
|
|
34
|
+
current: "border-transparent bg-white/10 text-white ring-2 ring-white/15",
|
|
35
|
+
upcoming: "border-transparent bg-transparent text-slate-500"
|
|
36
|
+
},
|
|
37
|
+
link: {
|
|
38
|
+
complete: "border-cyan-500/45 bg-cyan-950/35 text-cyan-200 ring-2 ring-cyan-400/25",
|
|
39
|
+
current: "border-cyan-400 bg-cyan-900/45 text-cyan-50 ring-2 ring-cyan-400/45",
|
|
40
|
+
upcoming: "border-white/10 bg-transparent text-slate-500"
|
|
41
|
+
},
|
|
42
|
+
glass: {
|
|
43
|
+
complete: "border-white/25 bg-white/10 text-emerald-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-md ring-2 ring-emerald-400/25",
|
|
44
|
+
current: "border-white/35 bg-white/15 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-md ring-2 ring-white/30",
|
|
45
|
+
upcoming: "border-white/15 bg-white/5 text-slate-400 backdrop-blur-sm"
|
|
46
|
+
},
|
|
47
|
+
emerald: {
|
|
48
|
+
complete: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
|
|
49
|
+
current: "border-emerald-400 bg-emerald-500/30 text-white ring-2 ring-emerald-400/50",
|
|
50
|
+
upcoming: "border-white/15 bg-emerald-950/30 text-emerald-200/55"
|
|
51
|
+
},
|
|
52
|
+
indigo: {
|
|
53
|
+
complete: "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
|
|
54
|
+
current: "border-indigo-400 bg-indigo-500/30 text-white ring-2 ring-indigo-400/50",
|
|
55
|
+
upcoming: "border-white/15 bg-indigo-950/30 text-indigo-200/55"
|
|
56
|
+
},
|
|
57
|
+
purple: {
|
|
58
|
+
complete: "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
|
|
59
|
+
current: "border-purple-400 bg-purple-500/30 text-white ring-2 ring-purple-400/50",
|
|
60
|
+
upcoming: "border-white/15 bg-purple-950/30 text-purple-200/55"
|
|
61
|
+
},
|
|
62
|
+
pink: {
|
|
63
|
+
complete: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
|
|
64
|
+
current: "border-pink-400 bg-pink-500/30 text-white ring-2 ring-pink-400/50",
|
|
65
|
+
upcoming: "border-white/15 bg-pink-950/30 text-pink-200/55"
|
|
66
|
+
},
|
|
67
|
+
rose: {
|
|
68
|
+
complete: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
|
|
69
|
+
current: "border-rose-400 bg-rose-500/30 text-white ring-2 ring-rose-400/50",
|
|
70
|
+
upcoming: "border-white/15 bg-rose-950/30 text-rose-200/55"
|
|
71
|
+
},
|
|
72
|
+
sky: {
|
|
73
|
+
complete: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
|
|
74
|
+
current: "border-sky-400 bg-sky-500/30 text-white ring-2 ring-sky-400/50",
|
|
75
|
+
upcoming: "border-white/15 bg-sky-950/30 text-sky-200/55"
|
|
76
|
+
},
|
|
77
|
+
teal: {
|
|
78
|
+
complete: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
|
|
79
|
+
current: "border-teal-400 bg-teal-500/30 text-white ring-2 ring-teal-400/50",
|
|
80
|
+
upcoming: "border-white/15 bg-teal-950/30 text-teal-200/55"
|
|
81
|
+
},
|
|
82
|
+
yellow: {
|
|
83
|
+
complete: "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
|
|
84
|
+
current: "border-yellow-400 bg-yellow-600/35 text-white ring-2 ring-yellow-400/50",
|
|
85
|
+
upcoming: "border-white/15 bg-yellow-950/35 text-yellow-200/55"
|
|
86
|
+
},
|
|
87
|
+
orange: {
|
|
88
|
+
complete: "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
|
|
89
|
+
current: "border-orange-400 bg-orange-600/35 text-white ring-2 ring-orange-400/50",
|
|
90
|
+
upcoming: "border-white/15 bg-orange-950/30 text-orange-200/55"
|
|
91
|
+
},
|
|
92
|
+
gray: {
|
|
93
|
+
complete: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
|
|
94
|
+
current: "border-gray-400 bg-gray-600/35 text-white ring-2 ring-gray-400/50",
|
|
95
|
+
upcoming: "border-white/15 bg-gray-950/30 text-gray-300/70"
|
|
96
|
+
},
|
|
97
|
+
amber: {
|
|
98
|
+
complete: "border-amber-500/60 bg-amber-500/20 text-amber-100 ring-2 ring-amber-400/30",
|
|
99
|
+
current: "border-amber-400 bg-amber-600/35 text-white ring-2 ring-amber-400/50",
|
|
100
|
+
upcoming: "border-white/15 bg-amber-950/35 text-amber-200/55"
|
|
101
|
+
},
|
|
102
|
+
violet: {
|
|
103
|
+
complete: "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
|
|
104
|
+
current: "border-violet-400 bg-violet-500/30 text-white ring-2 ring-violet-400/50",
|
|
105
|
+
upcoming: "border-white/15 bg-violet-950/30 text-violet-200/55"
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
function dynamicStepperIndicatorToneClass(state, tone) {
|
|
109
|
+
return INDICATOR_TONE_CLASSES[tone][state];
|
|
110
|
+
}
|
|
111
|
+
var dynamicStepperRootVariants = cva("flex w-full", {
|
|
112
|
+
variants: {
|
|
113
|
+
orientation: {
|
|
114
|
+
horizontal: "flex-row flex-wrap items-start justify-between gap-4 md:flex-nowrap md:items-center",
|
|
115
|
+
vertical: "flex-col gap-6"
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
defaultVariants: {
|
|
119
|
+
orientation: "horizontal"
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
var dynamicStepperMapperVariants = cva("m-0 min-w-0 flex-1 list-none p-0", {
|
|
123
|
+
variants: {
|
|
124
|
+
orientation: {
|
|
125
|
+
horizontal: "flex flex-row flex-wrap items-start justify-center gap-4",
|
|
126
|
+
vertical: "flex flex-col gap-6"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
defaultVariants: {
|
|
130
|
+
orientation: "horizontal"
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
var dynamicStepperItemVariants = cva("relative flex gap-3", {
|
|
134
|
+
variants: {
|
|
135
|
+
orientation: {
|
|
136
|
+
horizontal: "min-w-0 flex-col items-center text-center",
|
|
137
|
+
vertical: "flex-row items-start text-left"
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
defaultVariants: {
|
|
141
|
+
orientation: "horizontal"
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
var dynamicStepperIndicatorVariants = cva(
|
|
145
|
+
"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
|
|
146
|
+
{
|
|
147
|
+
variants: {
|
|
148
|
+
size: {
|
|
149
|
+
sm: "size-8 text-xs",
|
|
150
|
+
md: "size-9 text-sm",
|
|
151
|
+
lg: "size-10 text-base"
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
defaultVariants: {
|
|
155
|
+
size: "md"
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
var DynamicStepper = ({
|
|
160
|
+
steps,
|
|
161
|
+
orientation = "horizontal",
|
|
162
|
+
buttonAppearance = "outline",
|
|
163
|
+
buttonSize = "md",
|
|
164
|
+
indicatorSize = "md",
|
|
165
|
+
indicatorCompleteAppearance = "emerald",
|
|
166
|
+
indicatorCurrentAppearance = "violet",
|
|
167
|
+
indicatorUpcomingAppearance = "outline",
|
|
168
|
+
activeStep: activeStepProp,
|
|
169
|
+
defaultActiveStep,
|
|
170
|
+
onActiveStepChange,
|
|
171
|
+
onPrevious,
|
|
172
|
+
onNext,
|
|
173
|
+
prevLabel = "Previous",
|
|
174
|
+
nextLabel = "Next",
|
|
175
|
+
className,
|
|
176
|
+
ref,
|
|
177
|
+
...rest
|
|
178
|
+
}) => {
|
|
179
|
+
const baseId = useId();
|
|
180
|
+
const previousId = `${baseId}-previous`;
|
|
181
|
+
const nextId = `${baseId}-next`;
|
|
182
|
+
const mapperId = `${baseId}-mapper`;
|
|
183
|
+
const { activeStep, goPrevious, goNext, canGoPrevious, canGoNext } = useDynamicStepper({
|
|
184
|
+
stepCount: steps.length,
|
|
185
|
+
activeStep: activeStepProp,
|
|
186
|
+
defaultActiveStep,
|
|
187
|
+
onActiveStepChange,
|
|
188
|
+
onPrevious,
|
|
189
|
+
onNext
|
|
190
|
+
});
|
|
191
|
+
if (steps.length === 0) {
|
|
192
|
+
return null;
|
|
193
|
+
}
|
|
194
|
+
const itemOrientation = orientation === "vertical" ? "vertical" : "horizontal";
|
|
195
|
+
return /* @__PURE__ */ jsxs(
|
|
196
|
+
"div",
|
|
197
|
+
{
|
|
198
|
+
ref,
|
|
199
|
+
role: "navigation",
|
|
200
|
+
"data-slot": "dynamic-stepper",
|
|
201
|
+
className: cn(dynamicStepperRootVariants({ orientation }), className),
|
|
202
|
+
...rest,
|
|
203
|
+
children: [
|
|
204
|
+
/* @__PURE__ */ jsx(
|
|
205
|
+
Button,
|
|
206
|
+
{
|
|
207
|
+
id: previousId,
|
|
208
|
+
"data-slot": "dynamic-stepper-previous",
|
|
209
|
+
type: "button",
|
|
210
|
+
appearance: buttonAppearance,
|
|
211
|
+
size: buttonSize,
|
|
212
|
+
disabled: !canGoPrevious,
|
|
213
|
+
onClick: goPrevious,
|
|
214
|
+
className: orientation === "vertical" ? "shrink-0 self-start" : "shrink-0",
|
|
215
|
+
children: prevLabel
|
|
216
|
+
}
|
|
217
|
+
),
|
|
218
|
+
/* @__PURE__ */ jsx(
|
|
219
|
+
"ol",
|
|
220
|
+
{
|
|
221
|
+
id: mapperId,
|
|
222
|
+
"aria-label": "Steps",
|
|
223
|
+
"data-slot": "dynamic-stepper-mapper",
|
|
224
|
+
className: dynamicStepperMapperVariants({ orientation }),
|
|
225
|
+
children: steps.map((step, index) => {
|
|
226
|
+
const key = step.id ?? `dynamic-stepper-step-${index}`;
|
|
227
|
+
const isCurrent = index === activeStep;
|
|
228
|
+
const semanticState = index < activeStep ? "complete" : isCurrent ? "current" : "upcoming";
|
|
229
|
+
const indicatorTone = semanticState === "complete" ? indicatorCompleteAppearance : semanticState === "current" ? indicatorCurrentAppearance : indicatorUpcomingAppearance;
|
|
230
|
+
const isVertical = orientation === "vertical";
|
|
231
|
+
return /* @__PURE__ */ jsxs(
|
|
232
|
+
"li",
|
|
233
|
+
{
|
|
234
|
+
"data-slot": "dynamic-stepper-item",
|
|
235
|
+
"aria-current": isCurrent ? "step" : void 0,
|
|
236
|
+
className: dynamicStepperItemVariants({
|
|
237
|
+
orientation: itemOrientation
|
|
238
|
+
}),
|
|
239
|
+
children: [
|
|
240
|
+
/* @__PURE__ */ jsx(
|
|
241
|
+
"div",
|
|
242
|
+
{
|
|
243
|
+
"data-slot": "dynamic-stepper-indicator",
|
|
244
|
+
className: cn(
|
|
245
|
+
dynamicStepperIndicatorVariants({ size: indicatorSize }),
|
|
246
|
+
dynamicStepperIndicatorToneClass(
|
|
247
|
+
semanticState,
|
|
248
|
+
indicatorTone
|
|
249
|
+
)
|
|
250
|
+
),
|
|
251
|
+
children: step.indicator ?? index + 1
|
|
252
|
+
}
|
|
253
|
+
),
|
|
254
|
+
/* @__PURE__ */ jsxs(
|
|
255
|
+
"div",
|
|
256
|
+
{
|
|
257
|
+
className: cn(
|
|
258
|
+
"min-w-0",
|
|
259
|
+
!isVertical && "flex flex-col items-center"
|
|
260
|
+
),
|
|
261
|
+
children: [
|
|
262
|
+
step.title != null && /* @__PURE__ */ jsx(
|
|
263
|
+
"div",
|
|
264
|
+
{
|
|
265
|
+
className: cn(
|
|
266
|
+
"text-sm font-semibold text-white",
|
|
267
|
+
!isVertical && "mt-3"
|
|
268
|
+
),
|
|
269
|
+
children: step.title
|
|
270
|
+
}
|
|
271
|
+
),
|
|
272
|
+
step.description != null && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-400", children: step.description })
|
|
273
|
+
]
|
|
274
|
+
}
|
|
275
|
+
)
|
|
276
|
+
]
|
|
277
|
+
},
|
|
278
|
+
key
|
|
279
|
+
);
|
|
280
|
+
})
|
|
281
|
+
}
|
|
282
|
+
),
|
|
283
|
+
/* @__PURE__ */ jsx(
|
|
284
|
+
Button,
|
|
285
|
+
{
|
|
286
|
+
id: nextId,
|
|
287
|
+
"data-slot": "dynamic-stepper-next",
|
|
288
|
+
type: "button",
|
|
289
|
+
appearance: buttonAppearance,
|
|
290
|
+
size: buttonSize,
|
|
291
|
+
disabled: !canGoNext,
|
|
292
|
+
onClick: goNext,
|
|
293
|
+
className: orientation === "vertical" ? "shrink-0 self-start" : "shrink-0",
|
|
294
|
+
children: nextLabel
|
|
295
|
+
}
|
|
296
|
+
)
|
|
297
|
+
]
|
|
298
|
+
}
|
|
299
|
+
);
|
|
300
|
+
};
|
|
301
|
+
DynamicStepper.displayName = "DynamicStepper";
|
|
302
|
+
|
|
303
|
+
export { DynamicStepper, dynamicStepperIndicatorToneClass, dynamicStepperIndicatorVariants, dynamicStepperItemVariants, dynamicStepperMapperVariants, dynamicStepperRootVariants };
|
|
304
|
+
//# sourceMappingURL=dynamic-stepper.mjs.map
|
|
305
|
+
//# sourceMappingURL=dynamic-stepper.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ui/dynamic-stepper/variants.ts","../../src/ui/dynamic-stepper/dynamic-stepper.tsx"],"names":[],"mappings":"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","file":"dynamic-stepper.mjs","sourcesContent":["import type { VariantProps } from \"class-variance-authority\";\nimport { cva } from \"class-variance-authority\";\n\nimport type { buttonVariants } from \"../buttons/variants\";\n\ntype GradientButtonAppearance =\n | \"gradient-blue\"\n | \"gradient-green\"\n | \"gradient-red\"\n | \"gradient-yellow\"\n | \"gradient-purple\"\n | \"gradient-teal\"\n | \"gradient-indigo\"\n | \"gradient-pink\"\n | \"gradient-orange\";\n\n/** Button `appearance` keys usable for indicator tones (gradients excluded). */\nexport type DynamicStepperIndicatorToneAppearance = Exclude<\n NonNullable<VariantProps<typeof buttonVariants>[\"appearance\"]>,\n GradientButtonAppearance\n>;\n\nexport type DynamicStepperIndicatorSemanticState =\n | \"complete\"\n | \"current\"\n | \"upcoming\";\n\nconst INDICATOR_TONE_CLASSES: Record<\n DynamicStepperIndicatorToneAppearance,\n Record<DynamicStepperIndicatorSemanticState, string>\n> = {\n default: {\n complete:\n \"border-slate-400/55 bg-slate-500/25 text-slate-50 ring-2 ring-slate-400/25\",\n current:\n \"border-slate-300 bg-slate-500/35 text-white ring-2 ring-slate-300/45\",\n upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n },\n secondary: {\n complete:\n \"border-slate-600 bg-slate-800/70 text-slate-200 ring-2 ring-slate-600/35\",\n current:\n \"border-slate-500 bg-slate-700/55 text-white ring-2 ring-slate-500/45\",\n upcoming: \"border-white/10 bg-slate-900/50 text-slate-500\",\n },\n destructive: {\n complete:\n \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n current:\n \"border-rose-400 bg-rose-600/35 text-white ring-2 ring-rose-400/50\",\n upcoming: \"border-white/15 bg-rose-950/25 text-slate-400\",\n },\n outline: {\n complete:\n \"border-emerald-500/55 bg-transparent text-emerald-200 ring-2 ring-emerald-500/25\",\n current:\n \"border-white/30 bg-white/10 text-white ring-2 ring-white/25\",\n upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n },\n ghost: {\n complete:\n \"border-transparent bg-emerald-500/15 text-emerald-200 ring-2 ring-emerald-400/20\",\n current:\n \"border-transparent bg-white/10 text-white ring-2 ring-white/15\",\n upcoming: \"border-transparent bg-transparent text-slate-500\",\n },\n link: {\n complete:\n \"border-cyan-500/45 bg-cyan-950/35 text-cyan-200 ring-2 ring-cyan-400/25\",\n current:\n \"border-cyan-400 bg-cyan-900/45 text-cyan-50 ring-2 ring-cyan-400/45\",\n upcoming: \"border-white/10 bg-transparent text-slate-500\",\n },\n glass: {\n complete:\n \"border-white/25 bg-white/10 text-emerald-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-md ring-2 ring-emerald-400/25\",\n current:\n \"border-white/35 bg-white/15 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-md ring-2 ring-white/30\",\n upcoming:\n \"border-white/15 bg-white/5 text-slate-400 backdrop-blur-sm\",\n },\n emerald: {\n complete:\n \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n current:\n \"border-emerald-400 bg-emerald-500/30 text-white ring-2 ring-emerald-400/50\",\n upcoming:\n \"border-white/15 bg-emerald-950/30 text-emerald-200/55\",\n },\n indigo: {\n complete:\n \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n current:\n \"border-indigo-400 bg-indigo-500/30 text-white ring-2 ring-indigo-400/50\",\n upcoming:\n \"border-white/15 bg-indigo-950/30 text-indigo-200/55\",\n },\n purple: {\n complete:\n \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n current:\n \"border-purple-400 bg-purple-500/30 text-white ring-2 ring-purple-400/50\",\n upcoming:\n \"border-white/15 bg-purple-950/30 text-purple-200/55\",\n },\n pink: {\n complete:\n \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n current:\n \"border-pink-400 bg-pink-500/30 text-white ring-2 ring-pink-400/50\",\n upcoming:\n \"border-white/15 bg-pink-950/30 text-pink-200/55\",\n },\n rose: {\n complete:\n \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n current:\n \"border-rose-400 bg-rose-500/30 text-white ring-2 ring-rose-400/50\",\n upcoming:\n \"border-white/15 bg-rose-950/30 text-rose-200/55\",\n },\n sky: {\n complete:\n \"border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30\",\n current:\n \"border-sky-400 bg-sky-500/30 text-white ring-2 ring-sky-400/50\",\n upcoming:\n \"border-white/15 bg-sky-950/30 text-sky-200/55\",\n },\n teal: {\n complete:\n \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n current:\n \"border-teal-400 bg-teal-500/30 text-white ring-2 ring-teal-400/50\",\n upcoming:\n \"border-white/15 bg-teal-950/30 text-teal-200/55\",\n },\n yellow: {\n complete:\n \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n current:\n \"border-yellow-400 bg-yellow-600/35 text-white ring-2 ring-yellow-400/50\",\n upcoming:\n \"border-white/15 bg-yellow-950/35 text-yellow-200/55\",\n },\n orange: {\n complete:\n \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n current:\n \"border-orange-400 bg-orange-600/35 text-white ring-2 ring-orange-400/50\",\n upcoming:\n \"border-white/15 bg-orange-950/30 text-orange-200/55\",\n },\n gray: {\n complete:\n \"border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30\",\n current:\n \"border-gray-400 bg-gray-600/35 text-white ring-2 ring-gray-400/50\",\n upcoming:\n \"border-white/15 bg-gray-950/30 text-gray-300/70\",\n },\n amber: {\n complete:\n \"border-amber-500/60 bg-amber-500/20 text-amber-100 ring-2 ring-amber-400/30\",\n current:\n \"border-amber-400 bg-amber-600/35 text-white ring-2 ring-amber-400/50\",\n upcoming:\n \"border-white/15 bg-amber-950/35 text-amber-200/55\",\n },\n violet: {\n complete:\n \"border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30\",\n current:\n \"border-violet-400 bg-violet-500/30 text-white ring-2 ring-violet-400/50\",\n upcoming:\n \"border-white/15 bg-violet-950/30 text-violet-200/55\",\n },\n};\n\nexport function dynamicStepperIndicatorToneClass(\n state: DynamicStepperIndicatorSemanticState,\n tone: DynamicStepperIndicatorToneAppearance,\n): string {\n return INDICATOR_TONE_CLASSES[tone][state];\n}\n\nexport const dynamicStepperRootVariants = cva(\"flex w-full\", {\n variants: {\n orientation: {\n horizontal:\n \"flex-row flex-wrap items-start justify-between gap-4 md:flex-nowrap md:items-center\",\n vertical: \"flex-col gap-6\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const dynamicStepperMapperVariants = cva(\"m-0 min-w-0 flex-1 list-none p-0\", {\n variants: {\n orientation: {\n horizontal: \"flex flex-row flex-wrap items-start justify-center gap-4\",\n vertical: \"flex flex-col gap-6\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const dynamicStepperItemVariants = 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 dynamicStepperIndicatorVariants = cva(\n \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\",\n {\n variants: {\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 size: \"md\",\n },\n },\n);\n","\"use client\";\n\nimport { useId } from \"react\";\n\nimport { useDynamicStepper } from \"../../hooks/useDynamicStepper/useDynamicStepper\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../buttons/button\";\n\nimport type { DynamicStepperProps } from \"./types\";\nimport {\n dynamicStepperIndicatorToneClass,\n dynamicStepperIndicatorVariants,\n dynamicStepperItemVariants,\n dynamicStepperMapperVariants,\n dynamicStepperRootVariants,\n} from \"./variants\";\n\nexport const DynamicStepper = ({\n steps,\n orientation = \"horizontal\",\n buttonAppearance = \"outline\",\n buttonSize = \"md\",\n indicatorSize = \"md\",\n indicatorCompleteAppearance = \"emerald\",\n indicatorCurrentAppearance = \"violet\",\n indicatorUpcomingAppearance = \"outline\",\n activeStep: activeStepProp,\n defaultActiveStep,\n onActiveStepChange,\n onPrevious,\n onNext,\n prevLabel = \"Previous\",\n nextLabel = \"Next\",\n className,\n ref,\n ...rest\n}: DynamicStepperProps) => {\n const baseId = useId();\n const previousId = `${baseId}-previous`;\n const nextId = `${baseId}-next`;\n const mapperId = `${baseId}-mapper`;\n\n const { activeStep, goPrevious, goNext, canGoPrevious, canGoNext } =\n useDynamicStepper({\n stepCount: steps.length,\n activeStep: activeStepProp,\n defaultActiveStep,\n onActiveStepChange,\n onPrevious,\n onNext,\n });\n\n if (steps.length === 0) {\n return null;\n }\n\n const itemOrientation =\n orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n\n return (\n <div\n ref={ref}\n role=\"navigation\"\n data-slot=\"dynamic-stepper\"\n className={cn(dynamicStepperRootVariants({ orientation }), className)}\n {...rest}\n >\n <Button\n id={previousId}\n data-slot=\"dynamic-stepper-previous\"\n type=\"button\"\n appearance={buttonAppearance}\n size={buttonSize}\n disabled={!canGoPrevious}\n onClick={goPrevious}\n className={\n orientation === \"vertical\" ? \"shrink-0 self-start\" : \"shrink-0\"\n }\n >\n {prevLabel}\n </Button>\n\n <ol\n id={mapperId}\n aria-label=\"Steps\"\n data-slot=\"dynamic-stepper-mapper\"\n className={dynamicStepperMapperVariants({ orientation })}\n >\n {steps.map((step, index) => {\n const key = step.id ?? `dynamic-stepper-step-${index}`;\n const isCurrent = index === activeStep;\n const semanticState =\n index < activeStep\n ? \"complete\"\n : isCurrent\n ? \"current\"\n : \"upcoming\";\n const indicatorTone =\n semanticState === \"complete\"\n ? indicatorCompleteAppearance\n : semanticState === \"current\"\n ? indicatorCurrentAppearance\n : indicatorUpcomingAppearance;\n\n const isVertical = orientation === \"vertical\";\n\n return (\n <li\n key={key}\n data-slot=\"dynamic-stepper-item\"\n aria-current={isCurrent ? \"step\" : undefined}\n className={dynamicStepperItemVariants({\n orientation: itemOrientation,\n })}\n >\n <div\n data-slot=\"dynamic-stepper-indicator\"\n className={cn(\n dynamicStepperIndicatorVariants({ size: indicatorSize }),\n dynamicStepperIndicatorToneClass(\n semanticState,\n indicatorTone,\n ),\n )}\n >\n {step.indicator ?? index + 1}\n </div>\n <div\n className={cn(\n \"min-w-0\",\n !isVertical && \"flex flex-col items-center\",\n )}\n >\n {step.title != null && (\n <div\n className={cn(\n \"text-sm font-semibold text-white\",\n !isVertical && \"mt-3\",\n )}\n >\n {step.title}\n </div>\n )}\n {step.description != null && (\n <p className=\"mt-1 text-xs text-slate-400\">\n {step.description}\n </p>\n )}\n </div>\n </li>\n );\n })}\n </ol>\n\n <Button\n id={nextId}\n data-slot=\"dynamic-stepper-next\"\n type=\"button\"\n appearance={buttonAppearance}\n size={buttonSize}\n disabled={!canGoNext}\n onClick={goNext}\n className={\n orientation === \"vertical\" ? \"shrink-0 self-start\" : \"shrink-0\"\n }\n >\n {nextLabel}\n </Button>\n </div>\n );\n};\n\nDynamicStepper.displayName = \"DynamicStepper\";\n"]}
|
|
@@ -1,17 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
page?: number;
|
|
7
|
-
defaultPage?: number;
|
|
8
|
-
onPageChange?: (page: number) => void;
|
|
9
|
-
siblingCount?: number;
|
|
10
|
-
boundaryCount?: number;
|
|
11
|
-
showPrevNext?: boolean;
|
|
12
|
-
prevLabel?: string;
|
|
13
|
-
nextLabel?: string;
|
|
14
|
-
ellipsisLabel?: string;
|
|
15
|
-
getPageHref?: (page: number) => string | undefined;
|
|
16
|
-
} & import("react").RefAttributes<HTMLElement>>;
|
|
1
|
+
import type { PaginationProps } from "./types";
|
|
2
|
+
export declare const Pagination: {
|
|
3
|
+
({ className, appearance, size, pageCount, page, defaultPage, onPageChange, siblingCount, boundaryCount, showPrevNext, prevLabel, nextLabel, ellipsisLabel, getPageHref, "aria-label": ariaLabel, ref, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
17
6
|
//# sourceMappingURL=pagination.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/ui/pagination/pagination.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/ui/pagination/pagination.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ/C,eAAO,MAAM,UAAU;sNAkBpB,eAAe;;CA8LjB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { VariantProps } from "class-variance-authority";
|
|
2
|
-
import type {
|
|
2
|
+
import type { ComponentPropsWithRef } from "react";
|
|
3
3
|
import type { buttonVariants } from "../buttons/variants";
|
|
4
4
|
export type PaginationAppearance = NonNullable<VariantProps<typeof buttonVariants>["appearance"]>;
|
|
5
5
|
export type PaginationSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
|
|
@@ -29,7 +29,7 @@ export type UsePaginationResult = {
|
|
|
29
29
|
canGoPrev: boolean;
|
|
30
30
|
canGoNext: boolean;
|
|
31
31
|
};
|
|
32
|
-
export type PaginationProps = Omit<
|
|
32
|
+
export type PaginationProps = Omit<ComponentPropsWithRef<"nav">, "onChange"> & VariantProps<typeof buttonVariants> & {
|
|
33
33
|
pageCount: number;
|
|
34
34
|
page?: number;
|
|
35
35
|
defaultPage?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/pagination/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/pagination/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAC5C,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,YAAY,CAAC,CAClD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,CACtC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAC5C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,CACX,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CACpD,CAAC"}
|