@szum-tech/design-system 3.12.3 → 3.14.0
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-4IGU5SVP.js +54 -0
- package/dist/{chunk-XJZOANXX.cjs → chunk-6HX7ETL3.cjs} +1 -1
- package/dist/chunk-7OD2NBSV.cjs +50 -0
- package/dist/chunk-B4M7Q5KX.cjs +25 -0
- package/dist/{chunk-S2BCU6WG.cjs → chunk-CAIAZGSW.cjs} +5 -4
- package/dist/chunk-EOTQVIA5.js +993 -0
- package/dist/chunk-EZCWHR56.cjs +2355 -0
- package/dist/chunk-G24PWQKG.js +20 -0
- package/dist/chunk-GEDBA3JU.cjs +49 -0
- package/dist/chunk-IZU3KULT.js +41 -0
- package/dist/{chunk-KQ6QE7BT.cjs → chunk-MNDQXDV4.cjs} +4 -4
- package/dist/chunk-N4TYSZSU.cjs +44 -0
- package/dist/chunk-OZSNSRLV.cjs +1027 -0
- package/dist/{chunk-DL54DIMD.js → chunk-Q2MJKFIE.js} +2 -1
- package/dist/chunk-S3ZUFD6U.js +23 -0
- package/dist/{chunk-WXZE35FK.js → chunk-VK2FJ65F.js} +1 -1
- package/dist/chunk-VL3TPVSB.js +2299 -0
- package/dist/chunk-X5O7GP4S.js +48 -0
- package/dist/{chunk-E5TYGWGE.js → chunk-XKCLVPUC.js} +1 -1
- package/dist/{chunk-XIQUR62A.cjs → chunk-XY3ZNUWR.cjs} +32 -20
- package/dist/color-picker.types-GI7dq2Ig.d.cts +42 -0
- package/dist/color-picker.types-GI7dq2Ig.d.ts +42 -0
- package/dist/components/badge-overflow/index.cjs +3 -2
- package/dist/components/badge-overflow/index.js +2 -1
- package/dist/components/button/index.cjs +16 -12
- package/dist/components/button/index.d.cts +1 -0
- package/dist/components/button/index.d.ts +1 -0
- package/dist/components/button/index.js +15 -11
- package/dist/components/carousel/index.cjs +17 -13
- package/dist/components/carousel/index.d.cts +1 -0
- package/dist/components/carousel/index.d.ts +1 -0
- package/dist/components/carousel/index.js +15 -11
- package/dist/components/color-picker/index.cjs +88 -0
- package/dist/components/color-picker/index.d.cts +71 -0
- package/dist/components/color-picker/index.d.ts +71 -0
- package/dist/components/color-picker/index.js +39 -0
- package/dist/components/dialog/index.d.cts +1 -0
- package/dist/components/dialog/index.d.ts +1 -0
- package/dist/components/file-upload/index.cjs +60 -0
- package/dist/components/file-upload/index.d.cts +131 -0
- package/dist/components/file-upload/index.d.ts +131 -0
- package/dist/components/file-upload/index.js +3 -0
- package/dist/components/index.cjs +216 -84
- package/dist/components/index.d.cts +8 -1
- package/dist/components/index.d.ts +8 -1
- package/dist/components/index.js +15 -11
- package/dist/components/input/index.cjs +2 -2
- package/dist/components/input/index.js +1 -1
- package/dist/components/item/index.d.cts +1 -0
- package/dist/components/item/index.d.ts +1 -0
- package/dist/components/masonry/index.cjs +5 -4
- package/dist/components/masonry/index.js +3 -2
- package/dist/components/popover/index.cjs +35 -0
- package/dist/components/popover/index.d.cts +18 -0
- package/dist/components/popover/index.d.ts +18 -0
- package/dist/components/popover/index.js +2 -0
- package/dist/components/select/index.cjs +7 -7
- package/dist/components/select/index.d.cts +8 -14
- package/dist/components/select/index.d.ts +8 -14
- package/dist/components/select/index.js +1 -1
- package/dist/components/sheet/index.d.cts +2 -1
- package/dist/components/sheet/index.d.ts +2 -1
- package/dist/components/stepper/index.cjs +34 -30
- package/dist/components/stepper/index.d.cts +1 -0
- package/dist/components/stepper/index.d.ts +1 -0
- package/dist/components/stepper/index.js +15 -11
- package/dist/components/switch/index.cjs +11 -0
- package/dist/components/switch/index.d.cts +19 -0
- package/dist/components/switch/index.d.ts +19 -0
- package/dist/components/switch/index.js +2 -0
- package/dist/components/timeline/index.cjs +12 -11
- package/dist/components/timeline/index.d.cts +1 -0
- package/dist/components/timeline/index.d.ts +1 -0
- package/dist/components/timeline/index.js +3 -2
- package/dist/components/toaster/index.cjs +17 -13
- package/dist/components/toaster/index.js +15 -11
- package/dist/components/typing-text/index.d.cts +1 -0
- package/dist/components/typing-text/index.d.ts +1 -0
- package/dist/components/word-rotate/index.d.cts +1 -0
- package/dist/components/word-rotate/index.d.ts +1 -0
- package/dist/hooks/index.cjs +17 -8
- package/dist/hooks/index.d.cts +15 -4
- package/dist/hooks/index.d.ts +15 -4
- package/dist/hooks/index.js +2 -1
- package/dist/popover-trigger-Cf4PPj0z.d.cts +14 -0
- package/dist/popover-trigger-Cf4PPj0z.d.ts +14 -0
- package/dist/select-Bf6XQtt-.d.cts +12 -0
- package/dist/select-Bf6XQtt-.d.ts +12 -0
- package/package.json +1 -1
- package/dist/chunk-5AA4IE2T.cjs +0 -27
- package/dist/chunk-CP43WJCN.cjs +0 -1065
- package/dist/chunk-QTYNFISP.js +0 -1020
- package/dist/chunk-SB5UG7OC.js +0 -41
- package/dist/chunk-UGSNASZM.js +0 -25
package/dist/chunk-CP43WJCN.cjs
DELETED
|
@@ -1,1065 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkKQ6QE7BT_cjs = require('./chunk-KQ6QE7BT.cjs');
|
|
4
|
-
var chunk3WSQRFUY_cjs = require('./chunk-3WSQRFUY.cjs');
|
|
5
|
-
var chunkXIQUR62A_cjs = require('./chunk-XIQUR62A.cjs');
|
|
6
|
-
var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
|
|
7
|
-
var React5 = require('react');
|
|
8
|
-
var reactSlot = require('@radix-ui/react-slot');
|
|
9
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
-
var lucideReact = require('lucide-react');
|
|
11
|
-
var sonner = require('sonner');
|
|
12
|
-
var classVarianceAuthority = require('class-variance-authority');
|
|
13
|
-
|
|
14
|
-
function _interopNamespace(e) {
|
|
15
|
-
if (e && e.__esModule) return e;
|
|
16
|
-
var n = Object.create(null);
|
|
17
|
-
if (e) {
|
|
18
|
-
Object.keys(e).forEach(function (k) {
|
|
19
|
-
if (k !== 'default') {
|
|
20
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function () { return e[k]; }
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
n.default = e;
|
|
29
|
-
return Object.freeze(n);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
|
|
33
|
-
|
|
34
|
-
// src/components/stepper/stepper.constants.ts
|
|
35
|
-
var STEPPER_ROOT_NAME = "Stepper";
|
|
36
|
-
var STEPPER_NAV_NAME = "StepperNav";
|
|
37
|
-
var STEPPER_ITEM_NAME = "StepperItem";
|
|
38
|
-
var STEPPER_TRIGGER_NAME = "StepperTrigger";
|
|
39
|
-
var STEPPER_INDICATOR_NAME = "StepperIndicator";
|
|
40
|
-
var STEPPER_TITLE_NAME = "StepperTitle";
|
|
41
|
-
var STEPPER_DESCRIPTION_NAME = "StepperDescription";
|
|
42
|
-
var STEPPER_CONTENT_NAME = "StepperContent";
|
|
43
|
-
var STEPPER_PREV_TRIGGER_NAME = "StepperPrevTrigger";
|
|
44
|
-
var STEPPER_NEXT_TRIGGER_NAME = "StepperNextTrigger";
|
|
45
|
-
var STEPPER_ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
|
|
46
|
-
var STEPPER_EVENT_OPTIONS = { bubbles: false, cancelable: true };
|
|
47
|
-
var STEPPER_ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
48
|
-
var STEPPER_MAP_KEY_TO_FOCUS_INTENT = {
|
|
49
|
-
ArrowLeft: "prev",
|
|
50
|
-
ArrowUp: "prev",
|
|
51
|
-
ArrowRight: "next",
|
|
52
|
-
ArrowDown: "next",
|
|
53
|
-
PageUp: "first",
|
|
54
|
-
Home: "first",
|
|
55
|
-
PageDown: "last",
|
|
56
|
-
End: "last"
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
// src/components/stepper/stepper.context.tsx
|
|
60
|
-
var StepperContext = React5__namespace.createContext(null);
|
|
61
|
-
function useStepperContext(consumerName) {
|
|
62
|
-
const context = React5__namespace.useContext(StepperContext);
|
|
63
|
-
if (!context) {
|
|
64
|
-
throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
|
|
65
|
-
}
|
|
66
|
-
return context;
|
|
67
|
-
}
|
|
68
|
-
function createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate) {
|
|
69
|
-
const store = {
|
|
70
|
-
subscribe: (cb) => {
|
|
71
|
-
if (listenersRef.current) {
|
|
72
|
-
listenersRef.current.add(cb);
|
|
73
|
-
return () => listenersRef.current?.delete(cb);
|
|
74
|
-
}
|
|
75
|
-
return () => {
|
|
76
|
-
};
|
|
77
|
-
},
|
|
78
|
-
getState: () => stateRef.current ?? {
|
|
79
|
-
steps: /* @__PURE__ */ new Map(),
|
|
80
|
-
value: void 0
|
|
81
|
-
},
|
|
82
|
-
setState: (key, value) => {
|
|
83
|
-
const state = stateRef.current;
|
|
84
|
-
if (!state || Object.is(state[key], value)) return;
|
|
85
|
-
if (key === "value" && typeof value === "string") {
|
|
86
|
-
state.value = value;
|
|
87
|
-
onValueChange?.(value);
|
|
88
|
-
} else {
|
|
89
|
-
state[key] = value;
|
|
90
|
-
}
|
|
91
|
-
store.notify();
|
|
92
|
-
},
|
|
93
|
-
setStateWithValidation: async (value, direction) => {
|
|
94
|
-
if (!onValidate) {
|
|
95
|
-
store.setState("value", value);
|
|
96
|
-
return true;
|
|
97
|
-
}
|
|
98
|
-
try {
|
|
99
|
-
const isValid = await onValidate(value, direction);
|
|
100
|
-
if (isValid) {
|
|
101
|
-
store.setState("value", value);
|
|
102
|
-
}
|
|
103
|
-
return isValid;
|
|
104
|
-
} catch {
|
|
105
|
-
return false;
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
hasValidation: () => !!onValidate,
|
|
109
|
-
addStep: (newStep) => {
|
|
110
|
-
const state = stateRef.current;
|
|
111
|
-
if (state) {
|
|
112
|
-
state.steps = new Map(state.steps);
|
|
113
|
-
state.steps.set(newStep.value, newStep);
|
|
114
|
-
onValueAdd?.(newStep.value);
|
|
115
|
-
store.notify();
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
removeStep: (value) => {
|
|
119
|
-
const state = stateRef.current;
|
|
120
|
-
if (state) {
|
|
121
|
-
state.steps = new Map(state.steps);
|
|
122
|
-
state.steps.delete(value);
|
|
123
|
-
onValueRemove?.(value);
|
|
124
|
-
store.notify();
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
setStep: ({ value, disabled, loading, completed }) => {
|
|
128
|
-
const state = stateRef.current;
|
|
129
|
-
if (state) {
|
|
130
|
-
const step = state.steps.get(value);
|
|
131
|
-
if (step) {
|
|
132
|
-
const updatedStep = { ...step, completed, disabled, loading };
|
|
133
|
-
state.steps = new Map(state.steps);
|
|
134
|
-
state.steps.set(value, updatedStep);
|
|
135
|
-
if (completed !== step.completed) {
|
|
136
|
-
onValueComplete?.(value, completed);
|
|
137
|
-
}
|
|
138
|
-
store.notify();
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
},
|
|
142
|
-
notify: () => {
|
|
143
|
-
if (listenersRef.current) {
|
|
144
|
-
for (const cb of listenersRef.current) {
|
|
145
|
-
cb();
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
return store;
|
|
151
|
-
}
|
|
152
|
-
var StepperStoreContext = React5__namespace.createContext(null);
|
|
153
|
-
function useStepperStoreContext(consumerName) {
|
|
154
|
-
const context = React5__namespace.useContext(StepperStoreContext);
|
|
155
|
-
if (!context) {
|
|
156
|
-
throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
|
|
157
|
-
}
|
|
158
|
-
return context;
|
|
159
|
-
}
|
|
160
|
-
function useStepperStore(selector) {
|
|
161
|
-
const store = useStepperStoreContext("useStore");
|
|
162
|
-
const getSnapshot = React5__namespace.useCallback(() => selector(store.getState()), [selector, store]);
|
|
163
|
-
return React5__namespace.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
164
|
-
}
|
|
165
|
-
function Stepper({
|
|
166
|
-
value,
|
|
167
|
-
defaultValue,
|
|
168
|
-
onValueChange,
|
|
169
|
-
onValueComplete,
|
|
170
|
-
onValueAdd,
|
|
171
|
-
onValueRemove,
|
|
172
|
-
onValidate,
|
|
173
|
-
id: idProp,
|
|
174
|
-
dir: dirProp,
|
|
175
|
-
orientation = "horizontal",
|
|
176
|
-
activationMode = "automatic",
|
|
177
|
-
asChild,
|
|
178
|
-
disabled = false,
|
|
179
|
-
nonInteractive = false,
|
|
180
|
-
loop = false,
|
|
181
|
-
className,
|
|
182
|
-
indicators = {},
|
|
183
|
-
...rootProps
|
|
184
|
-
}) {
|
|
185
|
-
const id = React5__namespace.useId();
|
|
186
|
-
const rootId = idProp ?? id;
|
|
187
|
-
const listenersRef = chunkXIQUR62A_cjs.useLazyRef(() => /* @__PURE__ */ new Set());
|
|
188
|
-
const stateRef = chunkXIQUR62A_cjs.useLazyRef(() => ({
|
|
189
|
-
steps: /* @__PURE__ */ new Map(),
|
|
190
|
-
value: value ?? defaultValue
|
|
191
|
-
}));
|
|
192
|
-
const store = React5__namespace.useMemo(
|
|
193
|
-
() => createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate),
|
|
194
|
-
[listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate]
|
|
195
|
-
);
|
|
196
|
-
chunkXIQUR62A_cjs.useIsomorphicLayoutEffect(() => {
|
|
197
|
-
if (value !== void 0) {
|
|
198
|
-
store.setState("value", value);
|
|
199
|
-
}
|
|
200
|
-
}, [value]);
|
|
201
|
-
const dir = chunkKQ6QE7BT_cjs.useDirection(dirProp);
|
|
202
|
-
const contextValue = React5__namespace.useMemo(
|
|
203
|
-
() => ({
|
|
204
|
-
id: rootId,
|
|
205
|
-
dir,
|
|
206
|
-
orientation,
|
|
207
|
-
activationMode,
|
|
208
|
-
disabled,
|
|
209
|
-
nonInteractive,
|
|
210
|
-
loop,
|
|
211
|
-
indicators
|
|
212
|
-
}),
|
|
213
|
-
[rootId, dir, orientation, activationMode, disabled, nonInteractive, loop, indicators]
|
|
214
|
-
);
|
|
215
|
-
const RootPrimitive = asChild ? reactSlot.Slot : "div";
|
|
216
|
-
return /* @__PURE__ */ jsxRuntime.jsx(StepperStoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
217
|
-
RootPrimitive,
|
|
218
|
-
{
|
|
219
|
-
id: rootId,
|
|
220
|
-
"data-disabled": disabled ? "" : void 0,
|
|
221
|
-
"data-orientation": orientation,
|
|
222
|
-
"data-slot": "stepper",
|
|
223
|
-
dir,
|
|
224
|
-
...rootProps,
|
|
225
|
-
className: chunkH2BWO3SI_cjs.cn("flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row", className)
|
|
226
|
-
}
|
|
227
|
-
) }) });
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
// src/components/stepper/stepper.types.ts
|
|
231
|
-
var StepperFocusIntent = {
|
|
232
|
-
FIRST: "first",
|
|
233
|
-
LAST: "last",
|
|
234
|
-
PREV: "prev",
|
|
235
|
-
NEXT: "next"
|
|
236
|
-
};
|
|
237
|
-
var StepperOrientation = {
|
|
238
|
-
HORIZONTAL: "horizontal",
|
|
239
|
-
VERTICAL: "vertical"
|
|
240
|
-
};
|
|
241
|
-
var StepperNavigationDirection = {
|
|
242
|
-
NEXT: "next",
|
|
243
|
-
PREV: "prev"
|
|
244
|
-
};
|
|
245
|
-
var StepperActivationMode = {
|
|
246
|
-
AUTOMATIC: "automatic",
|
|
247
|
-
MANUAL: "manual"
|
|
248
|
-
};
|
|
249
|
-
var StepperDataState = {
|
|
250
|
-
INACTIVE: "inactive",
|
|
251
|
-
ACTIVE: "active",
|
|
252
|
-
COMPLETED: "completed"
|
|
253
|
-
};
|
|
254
|
-
var StepperFocusContext = React5__namespace.createContext(null);
|
|
255
|
-
function useStepperFocusContext(consumerName) {
|
|
256
|
-
const context = React5__namespace.useContext(StepperFocusContext);
|
|
257
|
-
if (!context) {
|
|
258
|
-
throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
|
|
259
|
-
}
|
|
260
|
-
return context;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
// src/components/stepper/stepper.utils.tsx
|
|
264
|
-
function focusFirst(candidates, preventScroll = false) {
|
|
265
|
-
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
266
|
-
for (const candidateRef of candidates) {
|
|
267
|
-
const candidate = candidateRef.current;
|
|
268
|
-
if (!candidate) continue;
|
|
269
|
-
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
270
|
-
candidate.focus({ preventScroll });
|
|
271
|
-
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
function getDataState(value, itemValue, stepState, steps, variant = "item") {
|
|
275
|
-
const stepKeys = Array.from(steps.keys());
|
|
276
|
-
const currentIndex = stepKeys.indexOf(itemValue);
|
|
277
|
-
if (stepState?.completed) {
|
|
278
|
-
return StepperDataState.COMPLETED;
|
|
279
|
-
}
|
|
280
|
-
if (value === itemValue) {
|
|
281
|
-
return variant === "separator" ? StepperDataState.INACTIVE : StepperDataState.ACTIVE;
|
|
282
|
-
}
|
|
283
|
-
if (value) {
|
|
284
|
-
const activeIndex = stepKeys.indexOf(value);
|
|
285
|
-
if (activeIndex > currentIndex) {
|
|
286
|
-
return StepperDataState.COMPLETED;
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
return StepperDataState.INACTIVE;
|
|
290
|
-
}
|
|
291
|
-
function getId(id, variant, value) {
|
|
292
|
-
return `${id}-${variant}-${value}`;
|
|
293
|
-
}
|
|
294
|
-
function wrapArray(array, startIndex) {
|
|
295
|
-
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
296
|
-
}
|
|
297
|
-
function getDirectionAwareKey(key, dir) {
|
|
298
|
-
if (dir !== "rtl") return key;
|
|
299
|
-
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
|
|
300
|
-
}
|
|
301
|
-
function getFocusIntent(event, dir, orientation) {
|
|
302
|
-
const key = getDirectionAwareKey(event.key, dir);
|
|
303
|
-
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
|
|
304
|
-
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
|
|
305
|
-
return STEPPER_MAP_KEY_TO_FOCUS_INTENT[key];
|
|
306
|
-
}
|
|
307
|
-
function StepperNav({ className, children, asChild, ref, ...listProps }) {
|
|
308
|
-
const context = useStepperContext(STEPPER_NAV_NAME);
|
|
309
|
-
const orientation = context.orientation;
|
|
310
|
-
const currentValue = useStepperStore((state) => state.value);
|
|
311
|
-
const [tabStopId, setTabStopId] = React5__namespace.useState(null);
|
|
312
|
-
const [isTabbingBackOut, setIsTabbingBackOut] = React5__namespace.useState(false);
|
|
313
|
-
const [focusableItemCount, setFocusableItemCount] = React5__namespace.useState(0);
|
|
314
|
-
const isClickFocusRef = React5__namespace.useRef(false);
|
|
315
|
-
const itemsRef = React5__namespace.useRef(/* @__PURE__ */ new Map());
|
|
316
|
-
const listRef = React5__namespace.useRef(null);
|
|
317
|
-
const composedRef = chunkKQ6QE7BT_cjs.useComposedRefs(ref, listRef);
|
|
318
|
-
const onItemFocus = React5__namespace.useCallback((tabStopId2) => {
|
|
319
|
-
setTabStopId(tabStopId2);
|
|
320
|
-
}, []);
|
|
321
|
-
const onItemShiftTab = React5__namespace.useCallback(() => {
|
|
322
|
-
setIsTabbingBackOut(true);
|
|
323
|
-
}, []);
|
|
324
|
-
const onFocusableItemAdd = React5__namespace.useCallback(() => {
|
|
325
|
-
setFocusableItemCount((prevCount) => prevCount + 1);
|
|
326
|
-
}, []);
|
|
327
|
-
const onFocusableItemRemove = React5__namespace.useCallback(() => {
|
|
328
|
-
setFocusableItemCount((prevCount) => prevCount - 1);
|
|
329
|
-
}, []);
|
|
330
|
-
const onItemRegister = React5__namespace.useCallback((item) => {
|
|
331
|
-
itemsRef.current.set(item.id, item);
|
|
332
|
-
}, []);
|
|
333
|
-
const onItemUnregister = React5__namespace.useCallback((id) => {
|
|
334
|
-
itemsRef.current.delete(id);
|
|
335
|
-
}, []);
|
|
336
|
-
const getItems = React5__namespace.useCallback(() => {
|
|
337
|
-
return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
|
|
338
|
-
const elementA = a.ref.current;
|
|
339
|
-
const elementB = b.ref.current;
|
|
340
|
-
if (!elementA || !elementB) return 0;
|
|
341
|
-
const position = elementA.compareDocumentPosition(elementB);
|
|
342
|
-
if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
|
|
343
|
-
return -1;
|
|
344
|
-
}
|
|
345
|
-
if (position & Node.DOCUMENT_POSITION_PRECEDING) {
|
|
346
|
-
return 1;
|
|
347
|
-
}
|
|
348
|
-
return 0;
|
|
349
|
-
});
|
|
350
|
-
}, []);
|
|
351
|
-
const onBlur = React5__namespace.useCallback(
|
|
352
|
-
(event) => {
|
|
353
|
-
listProps.onBlur?.(event);
|
|
354
|
-
if (event.defaultPrevented) return;
|
|
355
|
-
setIsTabbingBackOut(false);
|
|
356
|
-
},
|
|
357
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
358
|
-
[listProps.onBlur]
|
|
359
|
-
);
|
|
360
|
-
const onFocus = React5__namespace.useCallback(
|
|
361
|
-
(event) => {
|
|
362
|
-
listProps.onFocus?.(event);
|
|
363
|
-
if (event.defaultPrevented) return;
|
|
364
|
-
const isKeyboardFocus = !isClickFocusRef.current;
|
|
365
|
-
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
|
|
366
|
-
const entryFocusEvent = new CustomEvent(STEPPER_ENTRY_FOCUS, STEPPER_EVENT_OPTIONS);
|
|
367
|
-
event.currentTarget.dispatchEvent(entryFocusEvent);
|
|
368
|
-
if (!entryFocusEvent.defaultPrevented) {
|
|
369
|
-
const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
|
|
370
|
-
const selectedItem = currentValue ? items.find((item) => item.value === currentValue) : void 0;
|
|
371
|
-
const activeItem = items.find((item) => item.active);
|
|
372
|
-
const currentItem = items.find((item) => item.id === tabStopId);
|
|
373
|
-
const candidateItems = [selectedItem, activeItem, currentItem, ...items].filter(
|
|
374
|
-
Boolean
|
|
375
|
-
);
|
|
376
|
-
const candidateRefs = candidateItems.map((item) => item.ref);
|
|
377
|
-
focusFirst(candidateRefs, false);
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
isClickFocusRef.current = false;
|
|
381
|
-
},
|
|
382
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
383
|
-
[listProps.onFocus, isTabbingBackOut, currentValue, tabStopId]
|
|
384
|
-
);
|
|
385
|
-
const onMouseDown = React5__namespace.useCallback(
|
|
386
|
-
(event) => {
|
|
387
|
-
listProps.onMouseDown?.(event);
|
|
388
|
-
if (event.defaultPrevented) return;
|
|
389
|
-
isClickFocusRef.current = true;
|
|
390
|
-
},
|
|
391
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
392
|
-
[listProps.onMouseDown]
|
|
393
|
-
);
|
|
394
|
-
const focusContextValue = React5__namespace.useMemo(
|
|
395
|
-
() => ({
|
|
396
|
-
tabStopId,
|
|
397
|
-
onItemFocus,
|
|
398
|
-
onItemShiftTab,
|
|
399
|
-
onFocusableItemAdd,
|
|
400
|
-
onFocusableItemRemove,
|
|
401
|
-
onItemRegister,
|
|
402
|
-
onItemUnregister,
|
|
403
|
-
getItems
|
|
404
|
-
}),
|
|
405
|
-
[
|
|
406
|
-
tabStopId,
|
|
407
|
-
onItemFocus,
|
|
408
|
-
onItemShiftTab,
|
|
409
|
-
onFocusableItemAdd,
|
|
410
|
-
onFocusableItemRemove,
|
|
411
|
-
onItemRegister,
|
|
412
|
-
onItemUnregister,
|
|
413
|
-
getItems
|
|
414
|
-
]
|
|
415
|
-
);
|
|
416
|
-
const StepperNavPrimitive = asChild ? reactSlot.Slot : "nav";
|
|
417
|
-
return /* @__PURE__ */ jsxRuntime.jsx(StepperFocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
418
|
-
StepperNavPrimitive,
|
|
419
|
-
{
|
|
420
|
-
role: "tablist",
|
|
421
|
-
"data-slot": "stepper-nav",
|
|
422
|
-
"aria-orientation": orientation,
|
|
423
|
-
"data-orientation": orientation,
|
|
424
|
-
dir: context.dir,
|
|
425
|
-
tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
|
|
426
|
-
ref: composedRef,
|
|
427
|
-
onBlur,
|
|
428
|
-
onFocus,
|
|
429
|
-
onMouseDown,
|
|
430
|
-
className: chunkH2BWO3SI_cjs.cn(
|
|
431
|
-
"group/stepper-nav inline-flex gap-4",
|
|
432
|
-
"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
|
|
433
|
-
className
|
|
434
|
-
),
|
|
435
|
-
...listProps,
|
|
436
|
-
children
|
|
437
|
-
}
|
|
438
|
-
) });
|
|
439
|
-
}
|
|
440
|
-
var StepperItemContext = React5__namespace.createContext(null);
|
|
441
|
-
function useStepperItemContext(consumerName) {
|
|
442
|
-
const context = React5__namespace.useContext(StepperItemContext);
|
|
443
|
-
if (!context) {
|
|
444
|
-
throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ITEM_NAME}\``);
|
|
445
|
-
}
|
|
446
|
-
return context;
|
|
447
|
-
}
|
|
448
|
-
function StepperItem({
|
|
449
|
-
value: itemValue,
|
|
450
|
-
completed = false,
|
|
451
|
-
disabled = false,
|
|
452
|
-
loading = false,
|
|
453
|
-
asChild,
|
|
454
|
-
className,
|
|
455
|
-
children,
|
|
456
|
-
...props
|
|
457
|
-
}) {
|
|
458
|
-
const { orientation, dir } = useStepperContext(STEPPER_ITEM_NAME);
|
|
459
|
-
const store = useStepperStoreContext(STEPPER_ITEM_NAME);
|
|
460
|
-
const value = useStepperStore((state) => state.value);
|
|
461
|
-
chunkXIQUR62A_cjs.useIsomorphicLayoutEffect(() => {
|
|
462
|
-
store.addStep({ value: itemValue, completed, disabled, loading });
|
|
463
|
-
return () => {
|
|
464
|
-
store.removeStep(itemValue);
|
|
465
|
-
};
|
|
466
|
-
}, [itemValue, completed, disabled, loading]);
|
|
467
|
-
chunkXIQUR62A_cjs.useIsomorphicLayoutEffect(() => {
|
|
468
|
-
store.setStep({ value: itemValue, completed, disabled, loading });
|
|
469
|
-
}, [itemValue, completed, disabled, loading]);
|
|
470
|
-
const stepState = useStepperStore((state) => state.steps.get(itemValue));
|
|
471
|
-
const steps = useStepperStore((state) => state.steps);
|
|
472
|
-
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
473
|
-
const itemContextValue = React5__namespace.useMemo(
|
|
474
|
-
() => ({
|
|
475
|
-
value: itemValue,
|
|
476
|
-
stepState
|
|
477
|
-
}),
|
|
478
|
-
[itemValue, stepState]
|
|
479
|
-
);
|
|
480
|
-
const StepperItemPrimitive = asChild ? reactSlot.Slot : "div";
|
|
481
|
-
return /* @__PURE__ */ jsxRuntime.jsx(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
482
|
-
StepperItemPrimitive,
|
|
483
|
-
{
|
|
484
|
-
"data-disabled": stepState?.disabled ? "" : void 0,
|
|
485
|
-
"data-orientation": orientation,
|
|
486
|
-
"data-state": dataState,
|
|
487
|
-
"data-slot": "stepper-item",
|
|
488
|
-
dir,
|
|
489
|
-
className: chunkH2BWO3SI_cjs.cn(
|
|
490
|
-
"group/step flex flex-1 flex-col justify-end data-[disabled]:opacity-50",
|
|
491
|
-
"",
|
|
492
|
-
// "group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
|
|
493
|
-
className
|
|
494
|
-
),
|
|
495
|
-
...props,
|
|
496
|
-
children: [
|
|
497
|
-
children,
|
|
498
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
499
|
-
"div",
|
|
500
|
-
{
|
|
501
|
-
"data-state": dataState,
|
|
502
|
-
className: chunkH2BWO3SI_cjs.cn(
|
|
503
|
-
"bg-border h-1 w-full transition-colors duration-500",
|
|
504
|
-
"data-[state=active]:bg-primary data-[state=completed]:bg-success"
|
|
505
|
-
)
|
|
506
|
-
}
|
|
507
|
-
)
|
|
508
|
-
]
|
|
509
|
-
}
|
|
510
|
-
) });
|
|
511
|
-
}
|
|
512
|
-
function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps }) {
|
|
513
|
-
const context = useStepperContext(STEPPER_TRIGGER_NAME);
|
|
514
|
-
const itemContext = useStepperItemContext(STEPPER_TRIGGER_NAME);
|
|
515
|
-
const store = useStepperStoreContext(STEPPER_TRIGGER_NAME);
|
|
516
|
-
const focusContext = useStepperFocusContext(STEPPER_TRIGGER_NAME);
|
|
517
|
-
const value = useStepperStore((state) => state.value);
|
|
518
|
-
const itemValue = itemContext.value;
|
|
519
|
-
const stepState = useStepperStore((state) => state.steps.get(itemValue));
|
|
520
|
-
const activationMode = context.activationMode;
|
|
521
|
-
const orientation = context.orientation;
|
|
522
|
-
const loop = context.loop;
|
|
523
|
-
const steps = useStepperStore((state) => state.steps);
|
|
524
|
-
const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
|
|
525
|
-
const stepPosition = stepIndex + 1;
|
|
526
|
-
const stepCount = steps.size;
|
|
527
|
-
const triggerId = getId(context.id, "trigger", itemValue);
|
|
528
|
-
const contentId = getId(context.id, "content", itemValue);
|
|
529
|
-
const titleId = getId(context.id, "title", itemValue);
|
|
530
|
-
const descriptionId = getId(context.id, "description", itemValue);
|
|
531
|
-
const isDisabled = context.disabled || stepState?.disabled || disabled;
|
|
532
|
-
const isActive = value === itemValue;
|
|
533
|
-
const isTabStop = focusContext.tabStopId === triggerId;
|
|
534
|
-
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
535
|
-
const triggerRef = React5__namespace.useRef(null);
|
|
536
|
-
const composedRef = chunkKQ6QE7BT_cjs.useComposedRefs(ref, triggerRef);
|
|
537
|
-
const isArrowKeyPressedRef = React5__namespace.useRef(false);
|
|
538
|
-
const isMouseClickRef = React5__namespace.useRef(false);
|
|
539
|
-
React5__namespace.useEffect(() => {
|
|
540
|
-
function onKeyDown2(event) {
|
|
541
|
-
if (STEPPER_ARROW_KEYS.includes(event.key)) {
|
|
542
|
-
isArrowKeyPressedRef.current = true;
|
|
543
|
-
}
|
|
544
|
-
}
|
|
545
|
-
function onKeyUp() {
|
|
546
|
-
isArrowKeyPressedRef.current = false;
|
|
547
|
-
}
|
|
548
|
-
document.addEventListener("keydown", onKeyDown2);
|
|
549
|
-
document.addEventListener("keyup", onKeyUp);
|
|
550
|
-
return () => {
|
|
551
|
-
document.removeEventListener("keydown", onKeyDown2);
|
|
552
|
-
document.removeEventListener("keyup", onKeyUp);
|
|
553
|
-
};
|
|
554
|
-
}, []);
|
|
555
|
-
chunkXIQUR62A_cjs.useIsomorphicLayoutEffect(() => {
|
|
556
|
-
focusContext.onItemRegister({
|
|
557
|
-
id: triggerId,
|
|
558
|
-
ref: triggerRef,
|
|
559
|
-
value: itemValue,
|
|
560
|
-
active: isTabStop,
|
|
561
|
-
disabled: !!isDisabled
|
|
562
|
-
});
|
|
563
|
-
if (!isDisabled) {
|
|
564
|
-
focusContext.onFocusableItemAdd();
|
|
565
|
-
}
|
|
566
|
-
return () => {
|
|
567
|
-
focusContext.onItemUnregister(triggerId);
|
|
568
|
-
if (!isDisabled) {
|
|
569
|
-
focusContext.onFocusableItemRemove();
|
|
570
|
-
}
|
|
571
|
-
};
|
|
572
|
-
}, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
|
|
573
|
-
const onClick = React5__namespace.useCallback(
|
|
574
|
-
async (event) => {
|
|
575
|
-
triggerProps.onClick?.(event);
|
|
576
|
-
if (event.defaultPrevented) return;
|
|
577
|
-
if (!isDisabled && !context.nonInteractive) {
|
|
578
|
-
const currentStepIndex = Array.from(steps.keys()).indexOf(value ?? "");
|
|
579
|
-
const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
|
|
580
|
-
const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
|
|
581
|
-
await store.setStateWithValidation(itemValue, direction);
|
|
582
|
-
}
|
|
583
|
-
},
|
|
584
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
585
|
-
[isDisabled, context.nonInteractive, store, itemValue, value, steps, triggerProps.onClick]
|
|
586
|
-
);
|
|
587
|
-
const onFocus = React5__namespace.useCallback(
|
|
588
|
-
async (event) => {
|
|
589
|
-
triggerProps.onFocus?.(event);
|
|
590
|
-
if (event.defaultPrevented) return;
|
|
591
|
-
focusContext.onItemFocus(triggerId);
|
|
592
|
-
const isKeyboardFocus = !isMouseClickRef.current;
|
|
593
|
-
if (!isActive && !isDisabled && activationMode !== "manual" && !context.nonInteractive && isKeyboardFocus) {
|
|
594
|
-
const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
|
|
595
|
-
const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
|
|
596
|
-
const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
|
|
597
|
-
await store.setStateWithValidation(itemValue, direction);
|
|
598
|
-
}
|
|
599
|
-
isMouseClickRef.current = false;
|
|
600
|
-
},
|
|
601
|
-
[
|
|
602
|
-
triggerProps,
|
|
603
|
-
focusContext,
|
|
604
|
-
triggerId,
|
|
605
|
-
isActive,
|
|
606
|
-
isDisabled,
|
|
607
|
-
activationMode,
|
|
608
|
-
context.nonInteractive,
|
|
609
|
-
steps,
|
|
610
|
-
value,
|
|
611
|
-
itemValue,
|
|
612
|
-
store
|
|
613
|
-
]
|
|
614
|
-
);
|
|
615
|
-
const onKeyDown = React5__namespace.useCallback(
|
|
616
|
-
async (event) => {
|
|
617
|
-
triggerProps.onKeyDown?.(event);
|
|
618
|
-
if (event.defaultPrevented) return;
|
|
619
|
-
if (event.key === "Enter" && context.nonInteractive) {
|
|
620
|
-
event.preventDefault();
|
|
621
|
-
return;
|
|
622
|
-
}
|
|
623
|
-
if ((event.key === "Enter" || event.key === " ") && activationMode === "manual" && !context.nonInteractive) {
|
|
624
|
-
event.preventDefault();
|
|
625
|
-
if (!isDisabled && triggerRef.current) {
|
|
626
|
-
triggerRef.current.click();
|
|
627
|
-
}
|
|
628
|
-
return;
|
|
629
|
-
}
|
|
630
|
-
if (event.key === "Tab" && event.shiftKey) {
|
|
631
|
-
focusContext.onItemShiftTab();
|
|
632
|
-
return;
|
|
633
|
-
}
|
|
634
|
-
if (event.target !== event.currentTarget) return;
|
|
635
|
-
const focusIntent = getFocusIntent(event, context.dir, orientation);
|
|
636
|
-
if (focusIntent !== void 0) {
|
|
637
|
-
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
|
|
638
|
-
event.preventDefault();
|
|
639
|
-
const items = focusContext.getItems().filter((item) => !item.disabled);
|
|
640
|
-
let candidateRefs = items.map((item) => item.ref);
|
|
641
|
-
if (focusIntent === "last") {
|
|
642
|
-
candidateRefs.reverse();
|
|
643
|
-
} else if (focusIntent === "prev" || focusIntent === "next") {
|
|
644
|
-
if (focusIntent === "prev") candidateRefs.reverse();
|
|
645
|
-
const currentIndex = candidateRefs.findIndex((ref2) => ref2.current === event.currentTarget);
|
|
646
|
-
candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
|
|
647
|
-
}
|
|
648
|
-
if (store.hasValidation() && candidateRefs.length > 0) {
|
|
649
|
-
const nextRef = candidateRefs[0];
|
|
650
|
-
const nextElement = nextRef?.current;
|
|
651
|
-
const nextItem = items.find((item) => item.ref.current === nextElement);
|
|
652
|
-
if (nextItem && nextItem.value !== itemValue) {
|
|
653
|
-
const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
|
|
654
|
-
const targetStepIndex = Array.from(steps.keys()).indexOf(nextItem.value);
|
|
655
|
-
const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
|
|
656
|
-
if (direction === "next") {
|
|
657
|
-
const isValid = await store.setStateWithValidation(nextItem.value, direction);
|
|
658
|
-
if (!isValid) return;
|
|
659
|
-
} else {
|
|
660
|
-
store.setState("value", nextItem.value);
|
|
661
|
-
}
|
|
662
|
-
queueMicrotask(() => nextElement?.focus());
|
|
663
|
-
return;
|
|
664
|
-
}
|
|
665
|
-
}
|
|
666
|
-
queueMicrotask(() => focusFirst(candidateRefs));
|
|
667
|
-
}
|
|
668
|
-
},
|
|
669
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
670
|
-
[
|
|
671
|
-
focusContext,
|
|
672
|
-
context.nonInteractive,
|
|
673
|
-
context.dir,
|
|
674
|
-
activationMode,
|
|
675
|
-
orientation,
|
|
676
|
-
loop,
|
|
677
|
-
isDisabled,
|
|
678
|
-
triggerProps.onKeyDown,
|
|
679
|
-
store,
|
|
680
|
-
itemValue,
|
|
681
|
-
value,
|
|
682
|
-
steps
|
|
683
|
-
]
|
|
684
|
-
);
|
|
685
|
-
const onMouseDown = React5__namespace.useCallback(
|
|
686
|
-
(event) => {
|
|
687
|
-
triggerProps.onMouseDown?.(event);
|
|
688
|
-
if (event.defaultPrevented) {
|
|
689
|
-
return;
|
|
690
|
-
}
|
|
691
|
-
isMouseClickRef.current = true;
|
|
692
|
-
if (isDisabled) {
|
|
693
|
-
event.preventDefault();
|
|
694
|
-
} else {
|
|
695
|
-
focusContext.onItemFocus(triggerId);
|
|
696
|
-
}
|
|
697
|
-
},
|
|
698
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
699
|
-
[focusContext, triggerId, isDisabled, triggerProps.onMouseDown]
|
|
700
|
-
);
|
|
701
|
-
const TriggerPrimitive = asChild ? reactSlot.Slot : "button";
|
|
702
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
703
|
-
TriggerPrimitive,
|
|
704
|
-
{
|
|
705
|
-
id: triggerId,
|
|
706
|
-
role: "tab",
|
|
707
|
-
type: "button",
|
|
708
|
-
disabled: isDisabled,
|
|
709
|
-
tabIndex: isTabStop ? 0 : -1,
|
|
710
|
-
ref: composedRef,
|
|
711
|
-
"data-slot": "stepper-trigger",
|
|
712
|
-
"data-disabled": isDisabled ? "" : void 0,
|
|
713
|
-
"data-state": dataState,
|
|
714
|
-
"aria-controls": contentId,
|
|
715
|
-
"aria-current": isActive ? "step" : void 0,
|
|
716
|
-
"aria-describedby": `${titleId} ${descriptionId}`,
|
|
717
|
-
"aria-posinset": stepPosition,
|
|
718
|
-
"aria-selected": isActive,
|
|
719
|
-
"aria-setsize": stepCount,
|
|
720
|
-
className: chunkH2BWO3SI_cjs.cn(
|
|
721
|
-
"inline-flex w-full cursor-pointer items-center gap-3 rounded text-left transition-colors duration-500 outline-none",
|
|
722
|
-
"disabled:pointer-events-none",
|
|
723
|
-
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
724
|
-
className
|
|
725
|
-
),
|
|
726
|
-
onClick,
|
|
727
|
-
onFocus,
|
|
728
|
-
onKeyDown,
|
|
729
|
-
onMouseDown,
|
|
730
|
-
...triggerProps
|
|
731
|
-
}
|
|
732
|
-
);
|
|
733
|
-
}
|
|
734
|
-
function StepperIndicator({ className, children, asChild, ref, ...props }) {
|
|
735
|
-
const { indicators, dir } = useStepperContext(STEPPER_INDICATOR_NAME);
|
|
736
|
-
const itemContext = useStepperItemContext(STEPPER_INDICATOR_NAME);
|
|
737
|
-
const value = useStepperStore((state) => state.value);
|
|
738
|
-
const itemValue = itemContext.value;
|
|
739
|
-
const stepState = useStepperStore((state) => state.steps.get(itemValue));
|
|
740
|
-
const steps = useStepperStore((state) => state.steps);
|
|
741
|
-
const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
|
|
742
|
-
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
743
|
-
const StepperIndicatorPrimitive = asChild ? reactSlot.Slot : "div";
|
|
744
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
745
|
-
StepperIndicatorPrimitive,
|
|
746
|
-
{
|
|
747
|
-
"data-slot": "stepper-indicator",
|
|
748
|
-
"data-state": dataState,
|
|
749
|
-
dir,
|
|
750
|
-
ref,
|
|
751
|
-
className: chunkH2BWO3SI_cjs.cn(
|
|
752
|
-
"bg-muted border-border text-muted-foreground relative flex size-6 shrink-0 items-center justify-center self-end overflow-hidden rounded-t border-x border-t text-xs transition-colors duration-500",
|
|
753
|
-
"data-[state=completed]:bg-success/50 data-[state=completed]:border-success data-[state=completed]:text-success-foreground",
|
|
754
|
-
"data-[state=active]:bg-primary/50 data-[state=active]:border-primary data-[state=active]:text-primary-foreground",
|
|
755
|
-
className
|
|
756
|
-
),
|
|
757
|
-
...props,
|
|
758
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute", children: typeof children === "function" ? children(dataState) : indicators && (itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive) ? itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive : children ? children : stepPosition })
|
|
759
|
-
}
|
|
760
|
-
);
|
|
761
|
-
}
|
|
762
|
-
function StepperTitle({ className, asChild = false, ...props }) {
|
|
763
|
-
const context = useStepperContext(STEPPER_TITLE_NAME);
|
|
764
|
-
const itemContext = useStepperItemContext(STEPPER_TITLE_NAME);
|
|
765
|
-
const titleId = getId(context.id, "title", itemContext.value);
|
|
766
|
-
const TitlePrimitive = asChild ? reactSlot.Slot : "h3";
|
|
767
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
768
|
-
TitlePrimitive,
|
|
769
|
-
{
|
|
770
|
-
id: titleId,
|
|
771
|
-
"data-slot": "stepper-title",
|
|
772
|
-
dir: context.dir,
|
|
773
|
-
className: chunkH2BWO3SI_cjs.cn("text-sm leading-none font-medium", className),
|
|
774
|
-
...props
|
|
775
|
-
}
|
|
776
|
-
);
|
|
777
|
-
}
|
|
778
|
-
function StepperDescription({ className, asChild, ...props }) {
|
|
779
|
-
const context = useStepperContext(STEPPER_DESCRIPTION_NAME);
|
|
780
|
-
const itemContext = useStepperItemContext(STEPPER_DESCRIPTION_NAME);
|
|
781
|
-
const descriptionId = getId(context.id, "description", itemContext.value);
|
|
782
|
-
const StepperDescriptionPrimitive = asChild ? reactSlot.Slot : "span";
|
|
783
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
784
|
-
StepperDescriptionPrimitive,
|
|
785
|
-
{
|
|
786
|
-
id: descriptionId,
|
|
787
|
-
"data-slot": "stepper-description",
|
|
788
|
-
dir: context.dir,
|
|
789
|
-
className: chunkH2BWO3SI_cjs.cn("text-muted-foreground text-sm", className),
|
|
790
|
-
...props
|
|
791
|
-
}
|
|
792
|
-
);
|
|
793
|
-
}
|
|
794
|
-
function StepperPanel({ children, asChild = false, className, ...props }) {
|
|
795
|
-
const currentValue = useStepperStore((state) => state.value);
|
|
796
|
-
const StepperPanelPrimitive = asChild ? reactSlot.Slot : "div";
|
|
797
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
798
|
-
StepperPanelPrimitive,
|
|
799
|
-
{
|
|
800
|
-
"data-slot": "stepper-panel",
|
|
801
|
-
"data-state": currentValue,
|
|
802
|
-
className: chunkH2BWO3SI_cjs.cn("w-full", className),
|
|
803
|
-
...props,
|
|
804
|
-
children
|
|
805
|
-
}
|
|
806
|
-
);
|
|
807
|
-
}
|
|
808
|
-
function StepperContent({
|
|
809
|
-
value: valueProp,
|
|
810
|
-
asChild = false,
|
|
811
|
-
forceMount = false,
|
|
812
|
-
className,
|
|
813
|
-
...props
|
|
814
|
-
}) {
|
|
815
|
-
const context = useStepperContext(STEPPER_CONTENT_NAME);
|
|
816
|
-
const value = useStepperStore((state) => state.value);
|
|
817
|
-
const contentId = getId(context.id, "content", valueProp);
|
|
818
|
-
const triggerId = getId(context.id, "trigger", valueProp);
|
|
819
|
-
const isActive = value === valueProp;
|
|
820
|
-
if (!isActive && !forceMount) {
|
|
821
|
-
return null;
|
|
822
|
-
}
|
|
823
|
-
const ContentPrimitive = asChild ? reactSlot.Slot : "div";
|
|
824
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
825
|
-
ContentPrimitive,
|
|
826
|
-
{
|
|
827
|
-
id: contentId,
|
|
828
|
-
role: "tabpanel",
|
|
829
|
-
"data-state": value,
|
|
830
|
-
"aria-labelledby": triggerId,
|
|
831
|
-
"data-slot": "stepper-content",
|
|
832
|
-
dir: context.dir,
|
|
833
|
-
className: chunkH2BWO3SI_cjs.cn("w-full", className, !isActive && forceMount && "hidden"),
|
|
834
|
-
hidden: !isActive && forceMount,
|
|
835
|
-
...props
|
|
836
|
-
}
|
|
837
|
-
);
|
|
838
|
-
}
|
|
839
|
-
function StepperNextTrigger({ asChild = false, onClick, disabled, ...props }) {
|
|
840
|
-
const store = useStepperStoreContext(STEPPER_NEXT_TRIGGER_NAME);
|
|
841
|
-
const value = useStepperStore((state) => state.value);
|
|
842
|
-
const steps = useStepperStore((state) => state.steps);
|
|
843
|
-
const stepKeys = Array.from(steps.keys());
|
|
844
|
-
const currentIndex = value ? stepKeys.indexOf(value) : -1;
|
|
845
|
-
const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
|
|
846
|
-
const handleClick = React5__namespace.useCallback(
|
|
847
|
-
async (event) => {
|
|
848
|
-
onClick?.(event);
|
|
849
|
-
if (event.defaultPrevented || isDisabled) {
|
|
850
|
-
return;
|
|
851
|
-
}
|
|
852
|
-
const nextIndex = Math.min(currentIndex + 1, stepKeys.length - 1);
|
|
853
|
-
const nextStepValue = stepKeys[nextIndex];
|
|
854
|
-
if (nextStepValue) {
|
|
855
|
-
await store.setStateWithValidation(nextStepValue, "next");
|
|
856
|
-
}
|
|
857
|
-
},
|
|
858
|
-
[onClick, isDisabled, currentIndex, stepKeys, store]
|
|
859
|
-
);
|
|
860
|
-
const StepperNextTriggerPrimitive = asChild ? reactSlot.Slot : "button";
|
|
861
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
862
|
-
StepperNextTriggerPrimitive,
|
|
863
|
-
{
|
|
864
|
-
type: "button",
|
|
865
|
-
"data-slot": "stepper-next-trigger",
|
|
866
|
-
disabled: isDisabled,
|
|
867
|
-
onClick: handleClick,
|
|
868
|
-
...props
|
|
869
|
-
}
|
|
870
|
-
);
|
|
871
|
-
}
|
|
872
|
-
function StepperPrevTrigger({ asChild = false, disabled, onClick, ...props }) {
|
|
873
|
-
const store = useStepperStoreContext(STEPPER_PREV_TRIGGER_NAME);
|
|
874
|
-
const value = useStepperStore((state) => state.value);
|
|
875
|
-
const steps = useStepperStore((state) => state.steps);
|
|
876
|
-
const stepKeys = Array.from(steps.keys());
|
|
877
|
-
const currentIndex = value ? stepKeys.indexOf(value) : -1;
|
|
878
|
-
const isDisabled = disabled || currentIndex <= 0;
|
|
879
|
-
const handleClick = React5__namespace.useCallback(
|
|
880
|
-
async (event) => {
|
|
881
|
-
onClick?.(event);
|
|
882
|
-
if (event.defaultPrevented || isDisabled) {
|
|
883
|
-
return;
|
|
884
|
-
}
|
|
885
|
-
const prevIndex = Math.max(currentIndex - 1, 0);
|
|
886
|
-
const prevStepValue = stepKeys[prevIndex];
|
|
887
|
-
if (prevStepValue) {
|
|
888
|
-
store.setState("value", prevStepValue);
|
|
889
|
-
}
|
|
890
|
-
},
|
|
891
|
-
[currentIndex, isDisabled, onClick, stepKeys, store]
|
|
892
|
-
);
|
|
893
|
-
const StepperPrevTriggerPrimitive = asChild ? reactSlot.Slot : "button";
|
|
894
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
895
|
-
StepperPrevTriggerPrimitive,
|
|
896
|
-
{
|
|
897
|
-
type: "button",
|
|
898
|
-
"data-slot": "stepper-prev-trigger",
|
|
899
|
-
disabled: isDisabled,
|
|
900
|
-
onClick: handleClick,
|
|
901
|
-
...props
|
|
902
|
-
}
|
|
903
|
-
);
|
|
904
|
-
}
|
|
905
|
-
var Toaster = ({ theme = "system", ...props }) => {
|
|
906
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
907
|
-
sonner.Toaster,
|
|
908
|
-
{
|
|
909
|
-
className: "group",
|
|
910
|
-
icons: {
|
|
911
|
-
success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckIcon, { className: "size-4" }),
|
|
912
|
-
info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "size-4" }),
|
|
913
|
-
warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, { className: "size-4" }),
|
|
914
|
-
error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonXIcon, { className: "size-4" }),
|
|
915
|
-
loading: /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, {})
|
|
916
|
-
},
|
|
917
|
-
toastOptions: {
|
|
918
|
-
classNames: {
|
|
919
|
-
toast: "!bg-popover !text-popover-foreground !border !border-border !rounded",
|
|
920
|
-
description: "!text-muted-foreground"
|
|
921
|
-
}
|
|
922
|
-
},
|
|
923
|
-
theme,
|
|
924
|
-
...props
|
|
925
|
-
}
|
|
926
|
-
);
|
|
927
|
-
};
|
|
928
|
-
var buttonVariants = classVarianceAuthority.cva(
|
|
929
|
-
[
|
|
930
|
-
"inline-flex shrink-0 items-center justify-center gap-2 rounded text-sm font-medium whitespace-nowrap transition-all outline-none",
|
|
931
|
-
"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
|
|
932
|
-
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
933
|
-
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring",
|
|
934
|
-
"aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error"
|
|
935
|
-
],
|
|
936
|
-
{
|
|
937
|
-
variants: {
|
|
938
|
-
variant: {
|
|
939
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
940
|
-
error: "bg-error hover:bg-error/90 focus-visible:ring-error/20 dark:focus-visible:ring-error/40 dark:bg-error/60 text-white",
|
|
941
|
-
outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
|
|
942
|
-
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
943
|
-
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
944
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
945
|
-
},
|
|
946
|
-
size: {
|
|
947
|
-
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
948
|
-
sm: "h-8 gap-1.5 rounded px-3 has-[>svg]:px-2.5",
|
|
949
|
-
lg: "h-10 rounded px-6 has-[>svg]:px-4",
|
|
950
|
-
icon: "size-9",
|
|
951
|
-
"icon-sm": "size-8",
|
|
952
|
-
"icon-lg": "size-10"
|
|
953
|
-
},
|
|
954
|
-
fullWidth: {
|
|
955
|
-
true: "w-full"
|
|
956
|
-
}
|
|
957
|
-
},
|
|
958
|
-
defaultVariants: {
|
|
959
|
-
variant: "default",
|
|
960
|
-
size: "default",
|
|
961
|
-
fullWidth: false
|
|
962
|
-
}
|
|
963
|
-
}
|
|
964
|
-
);
|
|
965
|
-
function Button({
|
|
966
|
-
asChild = false,
|
|
967
|
-
variant = "default",
|
|
968
|
-
disabled = false,
|
|
969
|
-
fullWidth = false,
|
|
970
|
-
loadingPosition: loadingPositionProp = "start",
|
|
971
|
-
children,
|
|
972
|
-
type = "button",
|
|
973
|
-
loading = false,
|
|
974
|
-
size = "default",
|
|
975
|
-
endIcon,
|
|
976
|
-
startIcon,
|
|
977
|
-
className,
|
|
978
|
-
...props
|
|
979
|
-
}) {
|
|
980
|
-
const Comp = asChild ? reactSlot.Slot : "button";
|
|
981
|
-
const isDisabled = disabled || loading;
|
|
982
|
-
const loadingPosition = size?.startsWith("icon") ? "center" : loadingPositionProp;
|
|
983
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
984
|
-
Comp,
|
|
985
|
-
{
|
|
986
|
-
"data-slot": "button",
|
|
987
|
-
"aria-disabled": isDisabled || void 0,
|
|
988
|
-
className: chunkH2BWO3SI_cjs.cn(buttonVariants({ fullWidth, size, variant }), className),
|
|
989
|
-
"data-state": loading ? "loading" : void 0,
|
|
990
|
-
disabled: isDisabled,
|
|
991
|
-
role: Comp !== "button" ? "button" : void 0,
|
|
992
|
-
tabIndex: isDisabled ? -1 : 0,
|
|
993
|
-
type: Comp === "button" ? type : void 0,
|
|
994
|
-
"data-size": size,
|
|
995
|
-
"data-variant": variant,
|
|
996
|
-
...props,
|
|
997
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
998
|
-
ButtonContent,
|
|
999
|
-
{
|
|
1000
|
-
loading,
|
|
1001
|
-
size,
|
|
1002
|
-
loadingPosition,
|
|
1003
|
-
startIcon,
|
|
1004
|
-
endIcon,
|
|
1005
|
-
asChild,
|
|
1006
|
-
children
|
|
1007
|
-
}
|
|
1008
|
-
)
|
|
1009
|
-
}
|
|
1010
|
-
);
|
|
1011
|
-
}
|
|
1012
|
-
function ButtonContent({
|
|
1013
|
-
children,
|
|
1014
|
-
loading = false,
|
|
1015
|
-
loadingPosition = "start",
|
|
1016
|
-
startIcon,
|
|
1017
|
-
asChild,
|
|
1018
|
-
endIcon,
|
|
1019
|
-
...props
|
|
1020
|
-
}) {
|
|
1021
|
-
const isStartLoading = loading && loadingPosition === "start";
|
|
1022
|
-
const StartIcon = isStartLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : startIcon || null;
|
|
1023
|
-
const isEndLoading = loading && loadingPosition === "end";
|
|
1024
|
-
const EndIcon = isEndLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : endIcon || null;
|
|
1025
|
-
const isCenterLoading = loading && loadingPosition === "center";
|
|
1026
|
-
return asChild && React5__namespace.isValidElement(children) ? React5__namespace.cloneElement(
|
|
1027
|
-
children,
|
|
1028
|
-
props,
|
|
1029
|
-
/* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.Fragment, { children: [
|
|
1030
|
-
StartIcon,
|
|
1031
|
-
isCenterLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : React5__namespace.isValidElement(children) ? children.props?.children : null,
|
|
1032
|
-
EndIcon
|
|
1033
|
-
] })
|
|
1034
|
-
) : /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.Fragment, { children: [
|
|
1035
|
-
StartIcon,
|
|
1036
|
-
isCenterLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : children,
|
|
1037
|
-
EndIcon
|
|
1038
|
-
] });
|
|
1039
|
-
}
|
|
1040
|
-
|
|
1041
|
-
Object.defineProperty(exports, "toast", {
|
|
1042
|
-
enumerable: true,
|
|
1043
|
-
get: function () { return sonner.toast; }
|
|
1044
|
-
});
|
|
1045
|
-
exports.Button = Button;
|
|
1046
|
-
exports.Stepper = Stepper;
|
|
1047
|
-
exports.StepperActivationMode = StepperActivationMode;
|
|
1048
|
-
exports.StepperContent = StepperContent;
|
|
1049
|
-
exports.StepperDataState = StepperDataState;
|
|
1050
|
-
exports.StepperDescription = StepperDescription;
|
|
1051
|
-
exports.StepperFocusIntent = StepperFocusIntent;
|
|
1052
|
-
exports.StepperIndicator = StepperIndicator;
|
|
1053
|
-
exports.StepperItem = StepperItem;
|
|
1054
|
-
exports.StepperNav = StepperNav;
|
|
1055
|
-
exports.StepperNavigationDirection = StepperNavigationDirection;
|
|
1056
|
-
exports.StepperNextTrigger = StepperNextTrigger;
|
|
1057
|
-
exports.StepperOrientation = StepperOrientation;
|
|
1058
|
-
exports.StepperPanel = StepperPanel;
|
|
1059
|
-
exports.StepperPrevTrigger = StepperPrevTrigger;
|
|
1060
|
-
exports.StepperTitle = StepperTitle;
|
|
1061
|
-
exports.StepperTrigger = StepperTrigger;
|
|
1062
|
-
exports.Toaster = Toaster;
|
|
1063
|
-
exports.useStepperContext = useStepperContext;
|
|
1064
|
-
exports.useStepperFocusContext = useStepperFocusContext;
|
|
1065
|
-
exports.useStepperItemContext = useStepperItemContext;
|