jaci-ui 0.5.0 → 0.6.1
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/CHANGELOG.md +12 -0
- package/README.md +49 -2
- package/dist/components/navigation/index.d.cts +2 -1
- package/dist/components/navigation/index.d.ts +2 -1
- package/dist/components/navigation/navbar-namespace.cjs +26 -0
- package/dist/components/navigation/navbar-namespace.cjs.map +1 -0
- package/dist/components/navigation/navbar-namespace.d.cts +25 -0
- package/dist/components/navigation/navbar-namespace.d.ts +25 -0
- package/dist/components/navigation/navbar-namespace.js +26 -0
- package/dist/components/navigation/navbar-namespace.js.map +1 -0
- package/dist/components/navigation/navigation.cjs +2 -13
- package/dist/components/navigation/navigation.cjs.map +1 -1
- package/dist/components/navigation/navigation.d.cts +2 -13
- package/dist/components/navigation/navigation.d.ts +2 -13
- package/dist/components/navigation/navigation.js +2 -13
- package/dist/components/navigation/navigation.js.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.cjs +3 -3
- package/dist/components/navigation-menu/navigation-menu.cjs.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.js +3 -3
- package/dist/components/navigation-menu/navigation-menu.js.map +1 -1
- package/dist/components/sidebar/sidebar.cjs +59 -11
- package/dist/components/sidebar/sidebar.cjs.map +1 -1
- package/dist/components/sidebar/sidebar.d.cts +13 -0
- package/dist/components/sidebar/sidebar.d.ts +13 -0
- package/dist/components/sidebar/sidebar.js +59 -13
- package/dist/components/sidebar/sidebar.js.map +1 -1
- package/dist/components/stepper/index.d.cts +2 -0
- package/dist/components/stepper/index.d.ts +2 -0
- package/dist/components/stepper/stepper.cjs +341 -0
- package/dist/components/stepper/stepper.cjs.map +1 -0
- package/dist/components/stepper/stepper.d.cts +52 -0
- package/dist/components/stepper/stepper.d.ts +52 -0
- package/dist/components/stepper/stepper.js +330 -0
- package/dist/components/stepper/stepper.js.map +1 -0
- package/dist/components/toast/toast.cjs +3 -1
- package/dist/components/toast/toast.cjs.map +1 -1
- package/dist/components/toast/toast.js +3 -1
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/index.cjs +15 -1
- package/dist/index.d.cts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +4 -2
- package/dist/styled-system/recipes/sidebar.cjs +3 -0
- package/dist/styled-system/recipes/sidebar.cjs.map +1 -1
- package/dist/styled-system/recipes/sidebar.js +3 -0
- package/dist/styled-system/recipes/sidebar.js.map +1 -1
- package/dist/styled-system/recipes/stepper.cjs +53 -0
- package/dist/styled-system/recipes/stepper.cjs.map +1 -0
- package/dist/styled-system/recipes/stepper.js +53 -0
- package/dist/styled-system/recipes/stepper.js.map +1 -0
- package/dist/styles.css +365 -17
- package/package.json +1 -1
|
@@ -0,0 +1,330 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx } from "../../styled-system/css/cx.js";
|
|
3
|
+
import { stepper } from "../../styled-system/recipes/stepper.js";
|
|
4
|
+
import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/stepper/stepper.tsx
|
|
7
|
+
const StepperContext = createContext(null);
|
|
8
|
+
const StepperItemContext = createContext(null);
|
|
9
|
+
function useStepperContext() {
|
|
10
|
+
const context = useContext(StepperContext);
|
|
11
|
+
if (!context) throw new Error("Stepper parts must be rendered inside Stepper.Root.");
|
|
12
|
+
return context;
|
|
13
|
+
}
|
|
14
|
+
function useStepperItemContext() {
|
|
15
|
+
const context = useContext(StepperItemContext);
|
|
16
|
+
if (!context) throw new Error("This Stepper part must be rendered inside Stepper.Item.");
|
|
17
|
+
return context;
|
|
18
|
+
}
|
|
19
|
+
const StepperRoot = forwardRef(function StepperRoot({ allowStepSelect = true, "aria-label": ariaLabel, children, className, defaultValue, disabled = false, form, linear = false, name, onValueChange, orientation = "horizontal", value: controlledValue, ...props }, ref) {
|
|
20
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
|
|
21
|
+
const [records, setRecords] = useState([]);
|
|
22
|
+
const activeValue = controlledValue ?? uncontrolledValue ?? records[0]?.value;
|
|
23
|
+
const register = useCallback((record) => {
|
|
24
|
+
setRecords((current) => {
|
|
25
|
+
const index = current.findIndex((item) => item.value === record.value);
|
|
26
|
+
if (index === -1) return [...current, record];
|
|
27
|
+
const currentRecord = current[index];
|
|
28
|
+
if (!currentRecord) return current;
|
|
29
|
+
if (currentRecord.disabled === record.disabled && currentRecord.status === record.status) return current;
|
|
30
|
+
const next = current.slice();
|
|
31
|
+
next[index] = record;
|
|
32
|
+
return next;
|
|
33
|
+
});
|
|
34
|
+
}, []);
|
|
35
|
+
const unregister = useCallback((valueToRemove) => {
|
|
36
|
+
setRecords((current) => current.filter((item) => item.value !== valueToRemove));
|
|
37
|
+
}, []);
|
|
38
|
+
const goTo = useCallback((nextValue, options) => {
|
|
39
|
+
if (disabled) return;
|
|
40
|
+
const targetIndex = records.findIndex((item) => item.value === nextValue);
|
|
41
|
+
const activeIndex = records.findIndex((item) => item.value === activeValue);
|
|
42
|
+
const target = records[targetIndex];
|
|
43
|
+
if (!target || target.disabled) return;
|
|
44
|
+
if (nextValue === activeValue) return;
|
|
45
|
+
if (!allowStepSelect && !options?.fromNavigation && nextValue !== activeValue) return;
|
|
46
|
+
if (linear && activeIndex >= 0 && targetIndex > activeIndex + 1) return;
|
|
47
|
+
if (controlledValue === void 0) setUncontrolledValue(nextValue);
|
|
48
|
+
onValueChange?.(nextValue);
|
|
49
|
+
}, [
|
|
50
|
+
activeValue,
|
|
51
|
+
allowStepSelect,
|
|
52
|
+
controlledValue,
|
|
53
|
+
disabled,
|
|
54
|
+
linear,
|
|
55
|
+
onValueChange,
|
|
56
|
+
records
|
|
57
|
+
]);
|
|
58
|
+
const move = useCallback((direction) => {
|
|
59
|
+
let index = records.findIndex((item) => item.value === activeValue) + direction;
|
|
60
|
+
while (index >= 0 && index < records.length && records[index]?.disabled) index += direction;
|
|
61
|
+
const target = records[index];
|
|
62
|
+
if (target) goTo(target.value, { fromNavigation: true });
|
|
63
|
+
}, [
|
|
64
|
+
activeValue,
|
|
65
|
+
goTo,
|
|
66
|
+
records
|
|
67
|
+
]);
|
|
68
|
+
const moveToBoundary = useCallback((direction) => {
|
|
69
|
+
const target = (direction === -1 ? records : records.slice().reverse()).find((record) => !record.disabled);
|
|
70
|
+
if (target) goTo(target.value, { fromNavigation: true });
|
|
71
|
+
}, [goTo, records]);
|
|
72
|
+
const getStatus = useCallback((itemValue, explicitStatus, itemDisabled = false) => {
|
|
73
|
+
if (itemDisabled || disabled) return "disabled";
|
|
74
|
+
if (explicitStatus) return explicitStatus;
|
|
75
|
+
const itemIndex = records.findIndex((item) => item.value === itemValue);
|
|
76
|
+
const activeIndex = records.findIndex((item) => item.value === activeValue);
|
|
77
|
+
if (itemValue === activeValue || activeIndex < 0 && itemIndex === 0) return "current";
|
|
78
|
+
if (itemIndex >= 0 && activeIndex >= 0 && itemIndex < activeIndex) return "complete";
|
|
79
|
+
return "upcoming";
|
|
80
|
+
}, [
|
|
81
|
+
activeValue,
|
|
82
|
+
disabled,
|
|
83
|
+
records
|
|
84
|
+
]);
|
|
85
|
+
const context = useMemo(() => ({
|
|
86
|
+
activeValue,
|
|
87
|
+
allowStepSelect,
|
|
88
|
+
disabled,
|
|
89
|
+
getStatus,
|
|
90
|
+
goTo,
|
|
91
|
+
linear,
|
|
92
|
+
move,
|
|
93
|
+
moveToBoundary,
|
|
94
|
+
orientation,
|
|
95
|
+
register,
|
|
96
|
+
unregister
|
|
97
|
+
}), [
|
|
98
|
+
activeValue,
|
|
99
|
+
allowStepSelect,
|
|
100
|
+
disabled,
|
|
101
|
+
getStatus,
|
|
102
|
+
goTo,
|
|
103
|
+
linear,
|
|
104
|
+
move,
|
|
105
|
+
moveToBoundary,
|
|
106
|
+
orientation,
|
|
107
|
+
register,
|
|
108
|
+
unregister
|
|
109
|
+
]);
|
|
110
|
+
return /* @__PURE__ */ jsx(StepperContext.Provider, {
|
|
111
|
+
value: context,
|
|
112
|
+
children: /* @__PURE__ */ jsxs("nav", {
|
|
113
|
+
...props,
|
|
114
|
+
"aria-label": ariaLabel ?? "Progress",
|
|
115
|
+
className: cx(stepper({ orientation }).root, className),
|
|
116
|
+
"data-jaci-component": "stepper",
|
|
117
|
+
"data-orientation": orientation,
|
|
118
|
+
"data-slot": "stepper",
|
|
119
|
+
"data-state": disabled ? "disabled" : "active",
|
|
120
|
+
ref,
|
|
121
|
+
children: [children, name ? /* @__PURE__ */ jsx("input", {
|
|
122
|
+
"aria-hidden": "true",
|
|
123
|
+
name,
|
|
124
|
+
type: "hidden",
|
|
125
|
+
value: activeValue ?? "",
|
|
126
|
+
form
|
|
127
|
+
}) : null]
|
|
128
|
+
})
|
|
129
|
+
});
|
|
130
|
+
});
|
|
131
|
+
const StepperList = forwardRef(function StepperList({ className, ...props }, ref) {
|
|
132
|
+
const { orientation } = useStepperContext();
|
|
133
|
+
return /* @__PURE__ */ jsx("ol", {
|
|
134
|
+
...props,
|
|
135
|
+
className: cx(stepper({ orientation }).list, className),
|
|
136
|
+
"data-slot": "stepper-list",
|
|
137
|
+
ref
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
const StepperItem = forwardRef(function StepperItem({ children, className, disabled = false, status, value, ...props }, ref) {
|
|
141
|
+
const context = useStepperContext();
|
|
142
|
+
const resolvedStatus = context.getStatus(value, status, disabled);
|
|
143
|
+
useEffect(() => {
|
|
144
|
+
const record = {
|
|
145
|
+
disabled: disabled || status === "disabled",
|
|
146
|
+
value
|
|
147
|
+
};
|
|
148
|
+
if (status !== void 0) record.status = status;
|
|
149
|
+
context.register(record);
|
|
150
|
+
return () => context.unregister(value);
|
|
151
|
+
}, [
|
|
152
|
+
context.register,
|
|
153
|
+
context.unregister,
|
|
154
|
+
disabled,
|
|
155
|
+
status,
|
|
156
|
+
value
|
|
157
|
+
]);
|
|
158
|
+
const itemContext = useMemo(() => ({
|
|
159
|
+
disabled: disabled || context.disabled || resolvedStatus === "disabled",
|
|
160
|
+
status: resolvedStatus,
|
|
161
|
+
value
|
|
162
|
+
}), [
|
|
163
|
+
context.disabled,
|
|
164
|
+
disabled,
|
|
165
|
+
resolvedStatus,
|
|
166
|
+
value
|
|
167
|
+
]);
|
|
168
|
+
const styles = stepper({
|
|
169
|
+
orientation: context.orientation,
|
|
170
|
+
status: resolvedStatus
|
|
171
|
+
});
|
|
172
|
+
return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
|
|
173
|
+
value: itemContext,
|
|
174
|
+
children: /* @__PURE__ */ jsx("li", {
|
|
175
|
+
...props,
|
|
176
|
+
"aria-disabled": itemContext.disabled || void 0,
|
|
177
|
+
className: cx(styles.item, className),
|
|
178
|
+
"data-disabled": itemContext.disabled || void 0,
|
|
179
|
+
"data-jaci-component": "stepper-item",
|
|
180
|
+
"data-slot": "stepper-item",
|
|
181
|
+
"data-status": resolvedStatus,
|
|
182
|
+
"data-value": value,
|
|
183
|
+
ref,
|
|
184
|
+
children
|
|
185
|
+
})
|
|
186
|
+
});
|
|
187
|
+
});
|
|
188
|
+
const StepperTrigger = forwardRef(function StepperTrigger({ className, onClick, onKeyDown, type = "button", ...props }, ref) {
|
|
189
|
+
const context = useStepperContext();
|
|
190
|
+
const item = useStepperItemContext();
|
|
191
|
+
const styles = stepper({
|
|
192
|
+
orientation: context.orientation,
|
|
193
|
+
status: item.status
|
|
194
|
+
});
|
|
195
|
+
return /* @__PURE__ */ jsx("button", {
|
|
196
|
+
...props,
|
|
197
|
+
"aria-current": item.status === "current" ? "step" : void 0,
|
|
198
|
+
"aria-disabled": item.disabled || !context.allowStepSelect && item.status !== "current" || void 0,
|
|
199
|
+
className: cx(styles.trigger, className),
|
|
200
|
+
"data-disabled": item.disabled || void 0,
|
|
201
|
+
"data-slot": "stepper-trigger",
|
|
202
|
+
"data-status": item.status,
|
|
203
|
+
disabled: context.disabled || item.disabled,
|
|
204
|
+
onClick: (event) => {
|
|
205
|
+
if (!event.defaultPrevented) context.goTo(item.value);
|
|
206
|
+
onClick?.(event);
|
|
207
|
+
},
|
|
208
|
+
onKeyDown: (event) => {
|
|
209
|
+
const isForwardKey = context.orientation === "horizontal" && event.key === "ArrowRight" || context.orientation === "vertical" && event.key === "ArrowDown";
|
|
210
|
+
const isBackwardKey = context.orientation === "horizontal" && event.key === "ArrowLeft" || context.orientation === "vertical" && event.key === "ArrowUp";
|
|
211
|
+
if (isForwardKey) {
|
|
212
|
+
event.preventDefault();
|
|
213
|
+
context.move(1);
|
|
214
|
+
} else if (isBackwardKey) {
|
|
215
|
+
event.preventDefault();
|
|
216
|
+
context.move(-1);
|
|
217
|
+
} else if (event.key === "Home") {
|
|
218
|
+
event.preventDefault();
|
|
219
|
+
context.moveToBoundary(-1);
|
|
220
|
+
} else if (event.key === "End") {
|
|
221
|
+
event.preventDefault();
|
|
222
|
+
context.moveToBoundary(1);
|
|
223
|
+
}
|
|
224
|
+
onKeyDown?.(event);
|
|
225
|
+
},
|
|
226
|
+
ref,
|
|
227
|
+
type
|
|
228
|
+
});
|
|
229
|
+
});
|
|
230
|
+
const StepperIndicator = forwardRef(function StepperIndicator({ children, className, ...props }, ref) {
|
|
231
|
+
const { orientation } = useStepperContext();
|
|
232
|
+
const item = useStepperItemContext();
|
|
233
|
+
const styles = stepper({
|
|
234
|
+
orientation,
|
|
235
|
+
status: item.status
|
|
236
|
+
});
|
|
237
|
+
return /* @__PURE__ */ jsx("span", {
|
|
238
|
+
...props,
|
|
239
|
+
"aria-hidden": props["aria-hidden"] ?? true,
|
|
240
|
+
className: cx(styles.indicator, className),
|
|
241
|
+
"data-slot": "stepper-indicator",
|
|
242
|
+
"data-status": item.status,
|
|
243
|
+
ref,
|
|
244
|
+
children: children ?? (item.status === "complete" ? "✓" : "")
|
|
245
|
+
});
|
|
246
|
+
});
|
|
247
|
+
function createSpanSlot(slot) {
|
|
248
|
+
return forwardRef(function StepperSlot({ className, ...props }, ref) {
|
|
249
|
+
const { orientation } = useStepperContext();
|
|
250
|
+
const styles = stepper({
|
|
251
|
+
orientation,
|
|
252
|
+
status: useStepperItemContext().status
|
|
253
|
+
});
|
|
254
|
+
return /* @__PURE__ */ jsx("span", {
|
|
255
|
+
...props,
|
|
256
|
+
className: cx(styles[slot], className),
|
|
257
|
+
"data-slot": `stepper-${slot}`,
|
|
258
|
+
ref
|
|
259
|
+
});
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
const StepperTitle = createSpanSlot("title");
|
|
263
|
+
const StepperDescription = createSpanSlot("description");
|
|
264
|
+
const StepperContent = forwardRef(function StepperContent({ className, hidden, ...props }, ref) {
|
|
265
|
+
const item = useStepperItemContext();
|
|
266
|
+
const { orientation } = useStepperContext();
|
|
267
|
+
const styles = stepper({
|
|
268
|
+
orientation,
|
|
269
|
+
status: item.status
|
|
270
|
+
});
|
|
271
|
+
return /* @__PURE__ */ jsx("div", {
|
|
272
|
+
...props,
|
|
273
|
+
className: cx(styles.content, className),
|
|
274
|
+
"data-slot": "stepper-content",
|
|
275
|
+
hidden: hidden ?? item.status !== "current",
|
|
276
|
+
ref
|
|
277
|
+
});
|
|
278
|
+
});
|
|
279
|
+
const StepperSeparator = createSpanSlot("separator");
|
|
280
|
+
const StepperPrevious = forwardRef(function StepperPrevious({ children = "Previous", className, disabled: disabledProp, ...props }, ref) {
|
|
281
|
+
const context = useStepperContext();
|
|
282
|
+
const styles = stepper({ orientation: context.orientation });
|
|
283
|
+
return /* @__PURE__ */ jsx("button", {
|
|
284
|
+
...props,
|
|
285
|
+
className: cx(styles.previous, className),
|
|
286
|
+
"data-slot": "stepper-previous",
|
|
287
|
+
disabled: disabledProp || context.disabled,
|
|
288
|
+
onClick: (event) => {
|
|
289
|
+
context.move(-1);
|
|
290
|
+
props.onClick?.(event);
|
|
291
|
+
},
|
|
292
|
+
ref,
|
|
293
|
+
type: props.type ?? "button",
|
|
294
|
+
children
|
|
295
|
+
});
|
|
296
|
+
});
|
|
297
|
+
const StepperNext = forwardRef(function StepperNext({ children = "Next", className, disabled: disabledProp, ...props }, ref) {
|
|
298
|
+
const context = useStepperContext();
|
|
299
|
+
const styles = stepper({ orientation: context.orientation });
|
|
300
|
+
return /* @__PURE__ */ jsx("button", {
|
|
301
|
+
...props,
|
|
302
|
+
className: cx(styles.next, className),
|
|
303
|
+
"data-slot": "stepper-next",
|
|
304
|
+
disabled: disabledProp || context.disabled,
|
|
305
|
+
onClick: (event) => {
|
|
306
|
+
context.move(1);
|
|
307
|
+
props.onClick?.(event);
|
|
308
|
+
},
|
|
309
|
+
ref,
|
|
310
|
+
type: props.type ?? "button",
|
|
311
|
+
children
|
|
312
|
+
});
|
|
313
|
+
});
|
|
314
|
+
const Stepper = {
|
|
315
|
+
Root: StepperRoot,
|
|
316
|
+
List: StepperList,
|
|
317
|
+
Item: StepperItem,
|
|
318
|
+
Trigger: StepperTrigger,
|
|
319
|
+
Indicator: StepperIndicator,
|
|
320
|
+
Title: StepperTitle,
|
|
321
|
+
Description: StepperDescription,
|
|
322
|
+
Content: StepperContent,
|
|
323
|
+
Separator: StepperSeparator,
|
|
324
|
+
Previous: StepperPrevious,
|
|
325
|
+
Next: StepperNext
|
|
326
|
+
};
|
|
327
|
+
//#endregion
|
|
328
|
+
export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrevious, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger };
|
|
329
|
+
|
|
330
|
+
//# sourceMappingURL=stepper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stepper.js","names":[],"sources":["../../../src/components/stepper/stepper.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { stepper } from \"../../styled-system/recipes\";\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\nexport type StepperStatus = \"current\" | \"complete\" | \"upcoming\" | \"disabled\";\n\ninterface StepRecord {\n value: string;\n disabled: boolean;\n status?: StepperStatus;\n}\n\ninterface StepperContextValue {\n activeValue: string | undefined;\n allowStepSelect: boolean;\n disabled: boolean;\n getStatus: (value: string, status?: StepperStatus, disabled?: boolean) => StepperStatus;\n goTo: (value: string, options?: { fromNavigation?: boolean }) => void;\n linear: boolean;\n orientation: StepperOrientation;\n register: (record: StepRecord) => void;\n unregister: (value: string) => void;\n move: (direction: -1 | 1) => void;\n moveToBoundary: (direction: -1 | 1) => void;\n}\n\ninterface StepperItemContextValue {\n disabled: boolean;\n status: StepperStatus;\n value: string;\n}\n\nconst StepperContext = createContext<StepperContextValue | null>(null);\nconst StepperItemContext = createContext<StepperItemContextValue | null>(null);\n\nfunction useStepperContext() {\n const context = useContext(StepperContext);\n if (!context) throw new Error(\"Stepper parts must be rendered inside Stepper.Root.\");\n return context;\n}\n\nfunction useStepperItemContext() {\n const context = useContext(StepperItemContext);\n if (!context) throw new Error(\"This Stepper part must be rendered inside Stepper.Item.\");\n return context;\n}\n\nexport interface StepperRootProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n orientation?: StepperOrientation;\n linear?: boolean;\n allowStepSelect?: boolean;\n disabled?: boolean;\n name?: string;\n form?: string;\n children?: ReactNode;\n}\n\nexport const StepperRoot = forwardRef<HTMLElement, StepperRootProps>(function StepperRoot(\n {\n allowStepSelect = true,\n \"aria-label\": ariaLabel,\n children,\n className,\n defaultValue,\n disabled = false,\n form,\n linear = false,\n name,\n onValueChange,\n orientation = \"horizontal\",\n value: controlledValue,\n ...props\n },\n ref,\n) {\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const [records, setRecords] = useState<StepRecord[]>([]);\n const activeValue = controlledValue ?? uncontrolledValue ?? records[0]?.value;\n\n const register = useCallback((record: StepRecord) => {\n setRecords((current) => {\n const index = current.findIndex((item) => item.value === record.value);\n if (index === -1) return [...current, record];\n const currentRecord = current[index];\n if (!currentRecord) return current;\n if (currentRecord.disabled === record.disabled && currentRecord.status === record.status) {\n return current;\n }\n const next = current.slice();\n next[index] = record;\n return next;\n });\n }, []);\n\n const unregister = useCallback((valueToRemove: string) => {\n setRecords((current) => current.filter((item) => item.value !== valueToRemove));\n }, []);\n\n const goTo = useCallback(\n (nextValue: string, options?: { fromNavigation?: boolean }) => {\n if (disabled) return;\n const targetIndex = records.findIndex((item) => item.value === nextValue);\n const activeIndex = records.findIndex((item) => item.value === activeValue);\n const target = records[targetIndex];\n if (!target || target.disabled) return;\n if (nextValue === activeValue) return;\n if (!allowStepSelect && !options?.fromNavigation && nextValue !== activeValue) return;\n if (linear && activeIndex >= 0 && targetIndex > activeIndex + 1) return;\n if (controlledValue === undefined) setUncontrolledValue(nextValue);\n onValueChange?.(nextValue);\n },\n [activeValue, allowStepSelect, controlledValue, disabled, linear, onValueChange, records],\n );\n\n const move = useCallback(\n (direction: -1 | 1) => {\n const activeIndex = records.findIndex((item) => item.value === activeValue);\n let index = activeIndex + direction;\n while (index >= 0 && index < records.length && records[index]?.disabled) index += direction;\n const target = records[index];\n if (target) goTo(target.value, { fromNavigation: true });\n },\n [activeValue, goTo, records],\n );\n\n const moveToBoundary = useCallback(\n (direction: -1 | 1) => {\n const candidates = direction === -1 ? records : records.slice().reverse();\n const target = candidates.find((record) => !record.disabled);\n if (target) goTo(target.value, { fromNavigation: true });\n },\n [goTo, records],\n );\n\n const getStatus = useCallback(\n (itemValue: string, explicitStatus?: StepperStatus, itemDisabled = false) => {\n if (itemDisabled || disabled) return \"disabled\";\n if (explicitStatus) return explicitStatus;\n const itemIndex = records.findIndex((item) => item.value === itemValue);\n const activeIndex = records.findIndex((item) => item.value === activeValue);\n if (itemValue === activeValue || (activeIndex < 0 && itemIndex === 0)) return \"current\";\n if (itemIndex >= 0 && activeIndex >= 0 && itemIndex < activeIndex) return \"complete\";\n return \"upcoming\";\n },\n [activeValue, disabled, records],\n );\n\n const context = useMemo(\n () => ({\n activeValue,\n allowStepSelect,\n disabled,\n getStatus,\n goTo,\n linear,\n move,\n moveToBoundary,\n orientation,\n register,\n unregister,\n }),\n [\n activeValue,\n allowStepSelect,\n disabled,\n getStatus,\n goTo,\n linear,\n move,\n moveToBoundary,\n orientation,\n register,\n unregister,\n ],\n );\n\n return (\n <StepperContext.Provider value={context}>\n <nav\n {...props}\n aria-label={ariaLabel ?? \"Progress\"}\n className={cx(stepper({ orientation }).root, className)}\n data-jaci-component=\"stepper\"\n data-orientation={orientation}\n data-slot=\"stepper\"\n data-state={disabled ? \"disabled\" : \"active\"}\n ref={ref}\n >\n {children}\n {name ? (\n <input\n aria-hidden=\"true\"\n name={name}\n type=\"hidden\"\n value={activeValue ?? \"\"}\n form={form}\n />\n ) : null}\n </nav>\n </StepperContext.Provider>\n );\n});\n\nexport type StepperListProps = ComponentPropsWithoutRef<\"ol\">;\nexport const StepperList = forwardRef<HTMLOListElement, StepperListProps>(function StepperList(\n { className, ...props },\n ref,\n) {\n const { orientation } = useStepperContext();\n return (\n <ol\n {...props}\n className={cx(stepper({ orientation }).list, className)}\n data-slot=\"stepper-list\"\n ref={ref}\n />\n );\n});\n\nexport interface StepperItemProps extends ComponentPropsWithoutRef<\"li\"> {\n value: string;\n status?: StepperStatus;\n disabled?: boolean;\n}\n\nexport const StepperItem = forwardRef<HTMLLIElement, StepperItemProps>(function StepperItem(\n { children, className, disabled = false, status, value, ...props },\n ref,\n) {\n const context = useStepperContext();\n const resolvedStatus = context.getStatus(value, status, disabled);\n useEffect(() => {\n const record: StepRecord = { disabled: disabled || status === \"disabled\", value };\n if (status !== undefined) record.status = status;\n context.register(record);\n return () => context.unregister(value);\n }, [context.register, context.unregister, disabled, status, value]);\n const itemContext = useMemo<StepperItemContextValue>(\n () => ({\n disabled: disabled || context.disabled || resolvedStatus === \"disabled\",\n status: resolvedStatus,\n value,\n }),\n [context.disabled, disabled, resolvedStatus, value],\n );\n const styles = stepper({ orientation: context.orientation, status: resolvedStatus });\n\n return (\n <StepperItemContext.Provider value={itemContext}>\n <li\n {...props}\n aria-disabled={itemContext.disabled || undefined}\n className={cx(styles.item, className)}\n data-disabled={itemContext.disabled || undefined}\n data-jaci-component=\"stepper-item\"\n data-slot=\"stepper-item\"\n data-status={resolvedStatus}\n data-value={value}\n ref={ref}\n >\n {children}\n </li>\n </StepperItemContext.Provider>\n );\n});\n\nexport type StepperTriggerProps = ComponentPropsWithoutRef<\"button\">;\nexport const StepperTrigger = forwardRef<HTMLButtonElement, StepperTriggerProps>(\n function StepperTrigger({ className, onClick, onKeyDown, type = \"button\", ...props }, ref) {\n const context = useStepperContext();\n const item = useStepperItemContext();\n const styles = stepper({ orientation: context.orientation, status: item.status });\n return (\n <button\n {...props}\n aria-current={item.status === \"current\" ? \"step\" : undefined}\n aria-disabled={\n item.disabled || (!context.allowStepSelect && item.status !== \"current\") || undefined\n }\n className={cx(styles.trigger, className)}\n data-disabled={item.disabled || undefined}\n data-slot=\"stepper-trigger\"\n data-status={item.status}\n disabled={context.disabled || item.disabled}\n onClick={(event) => {\n if (!event.defaultPrevented) context.goTo(item.value);\n onClick?.(event);\n }}\n onKeyDown={(event) => {\n const isForwardKey =\n (context.orientation === \"horizontal\" && event.key === \"ArrowRight\") ||\n (context.orientation === \"vertical\" && event.key === \"ArrowDown\");\n const isBackwardKey =\n (context.orientation === \"horizontal\" && event.key === \"ArrowLeft\") ||\n (context.orientation === \"vertical\" && event.key === \"ArrowUp\");\n if (isForwardKey) {\n event.preventDefault();\n context.move(1);\n } else if (isBackwardKey) {\n event.preventDefault();\n context.move(-1);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n context.moveToBoundary(-1);\n } else if (event.key === \"End\") {\n event.preventDefault();\n context.moveToBoundary(1);\n }\n onKeyDown?.(event);\n }}\n ref={ref}\n type={type}\n />\n );\n },\n);\n\nexport type StepperIndicatorProps = ComponentPropsWithoutRef<\"span\">;\nexport const StepperIndicator = forwardRef<HTMLSpanElement, StepperIndicatorProps>(\n function StepperIndicator({ children, className, ...props }, ref) {\n const { orientation } = useStepperContext();\n const item = useStepperItemContext();\n const styles = stepper({ orientation, status: item.status });\n return (\n <span\n {...props}\n aria-hidden={props[\"aria-hidden\"] ?? true}\n className={cx(styles.indicator, className)}\n data-slot=\"stepper-indicator\"\n data-status={item.status}\n ref={ref}\n >\n {children ?? (item.status === \"complete\" ? \"✓\" : \"\")}\n </span>\n );\n },\n);\n\nfunction createSpanSlot(slot: \"title\" | \"description\" | \"separator\") {\n return forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<\"span\">>(function StepperSlot(\n { className, ...props },\n ref,\n ) {\n const { orientation } = useStepperContext();\n const item = useStepperItemContext();\n const styles = stepper({ orientation, status: item.status });\n return (\n <span\n {...props}\n className={cx(styles[slot], className)}\n data-slot={`stepper-${slot}`}\n ref={ref}\n />\n );\n });\n}\n\nexport const StepperTitle = createSpanSlot(\"title\");\nexport const StepperDescription = createSpanSlot(\"description\");\n\nexport const StepperContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n function StepperContent({ className, hidden, ...props }, ref) {\n const item = useStepperItemContext();\n const { orientation } = useStepperContext();\n const styles = stepper({ orientation, status: item.status });\n return (\n <div\n {...props}\n className={cx(styles.content, className)}\n data-slot=\"stepper-content\"\n hidden={hidden ?? item.status !== \"current\"}\n ref={ref}\n />\n );\n },\n);\n\nexport const StepperSeparator = createSpanSlot(\"separator\");\n\nexport interface StepperNavigationButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n children?: ReactNode;\n}\n\nexport const StepperPrevious = forwardRef<HTMLButtonElement, StepperNavigationButtonProps>(\n function StepperPrevious(\n { children = \"Previous\", className, disabled: disabledProp, ...props },\n ref,\n ) {\n const context = useStepperContext();\n const styles = stepper({ orientation: context.orientation });\n return (\n <button\n {...props}\n className={cx(styles.previous, className)}\n data-slot=\"stepper-previous\"\n disabled={disabledProp || context.disabled}\n onClick={(event) => {\n context.move(-1);\n props.onClick?.(event);\n }}\n ref={ref}\n type={props.type ?? \"button\"}\n >\n {children}\n </button>\n );\n },\n);\n\nexport const StepperNext = forwardRef<HTMLButtonElement, StepperNavigationButtonProps>(\n function StepperNext({ children = \"Next\", className, disabled: disabledProp, ...props }, ref) {\n const context = useStepperContext();\n const styles = stepper({ orientation: context.orientation });\n return (\n <button\n {...props}\n className={cx(styles.next, className)}\n data-slot=\"stepper-next\"\n disabled={disabledProp || context.disabled}\n onClick={(event) => {\n context.move(1);\n props.onClick?.(event);\n }}\n ref={ref}\n type={props.type ?? \"button\"}\n >\n {children}\n </button>\n );\n },\n);\n\nexport const Stepper = {\n Root: StepperRoot,\n List: StepperList,\n Item: StepperItem,\n Trigger: StepperTrigger,\n Indicator: StepperIndicator,\n Title: StepperTitle,\n Description: StepperDescription,\n Content: StepperContent,\n Separator: StepperSeparator,\n Previous: StepperPrevious,\n Next: StepperNext,\n};\n"],"mappings":"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"}
|
|
@@ -27,9 +27,11 @@ function ToastProvider(props) {
|
|
|
27
27
|
/**
|
|
28
28
|
* A bottom-centred notification region.
|
|
29
29
|
*/
|
|
30
|
-
const ToastViewport = (0, react.forwardRef)(function ToastViewport({ className, ...props }, ref) {
|
|
30
|
+
const ToastViewport = (0, react.forwardRef)(function ToastViewport({ "aria-label": ariaLabel, "aria-live": ariaLive, className, ...props }, ref) {
|
|
31
31
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Viewport, {
|
|
32
32
|
...props,
|
|
33
|
+
"aria-label": ariaLabel ?? "Notifications",
|
|
34
|
+
"aria-live": ariaLive ?? "polite",
|
|
33
35
|
ref,
|
|
34
36
|
className: require_base_ui.withRecipeClassName(require_toast.toast().viewport, className),
|
|
35
37
|
"data-jaci-component": "toast-viewport",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.cjs","names":["BaseToast","withRecipeClassName","toastRecipe","cx"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":";;;;;;;;AAYA,MAAM,kBAA6C;CACjD,QAAQ;CACR,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,SAAS,YAAY,MAA0B,MAAwC;CACrF,OAAO,SAAS,SAAS,KAAA,IAAY,YAAa,gBAAgB,SAAS;AAC7E;;;;;;AASA,SAAgB,cAAc,OAA2B;CACvD,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,qBAAAA,MAAU,UAAX,EAAoB,GAAI,MAAQ,CAAA;AACzC;;;;AAOA,MAAa,iBAAA,GAAA,MAAA,WAAA,CAA+D,SAAS,cACnF,EAAE,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"toast.cjs","names":["BaseToast","withRecipeClassName","toastRecipe","cx"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { \"aria-label\": ariaLabel, \"aria-live\": ariaLive, className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n aria-label={ariaLabel ?? \"Notifications\"}\n aria-live={ariaLive ?? \"polite\"}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
|
|
@@ -27,9 +27,11 @@ function ToastProvider(props) {
|
|
|
27
27
|
/**
|
|
28
28
|
* A bottom-centred notification region.
|
|
29
29
|
*/
|
|
30
|
-
const ToastViewport = forwardRef(function ToastViewport({ className, ...props }, ref) {
|
|
30
|
+
const ToastViewport = forwardRef(function ToastViewport({ "aria-label": ariaLabel, "aria-live": ariaLive, className, ...props }, ref) {
|
|
31
31
|
return /* @__PURE__ */ jsx(Toast.Viewport, {
|
|
32
32
|
...props,
|
|
33
|
+
"aria-label": ariaLabel ?? "Notifications",
|
|
34
|
+
"aria-live": ariaLive ?? "polite",
|
|
33
35
|
ref,
|
|
34
36
|
className: withRecipeClassName(toast().viewport, className),
|
|
35
37
|
"data-jaci-component": "toast-viewport",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","names":["BaseToast","toastRecipe","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":";;;;;;;;AAYA,MAAM,kBAA6C;CACjD,QAAQ;CACR,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;AACX;AAEA,SAAS,YAAY,MAA0B,MAAwC;CACrF,OAAO,SAAS,SAAS,KAAA,IAAY,YAAa,gBAAgB,SAAS;AAC7E;;;;;;AASA,SAAgB,cAAc,OAA2B;CACvD,OAAO,oBAACA,MAAU,UAAX,EAAoB,GAAI,MAAQ,CAAA;AACzC;;;;AAOA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,GAAG,
|
|
1
|
+
{"version":3,"file":"toast.js","names":["BaseToast","toastRecipe","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { toast as toastRecipe } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type ToastTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst toneByToastType: Record<string, ToastTone> = {\n danger: \"danger\",\n error: \"danger\",\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n};\n\nfunction resolveTone(type: string | undefined, tone: ToastTone | undefined): ToastTone {\n return tone ?? (type === undefined ? \"neutral\" : (toneByToastType[type] ?? \"neutral\"));\n}\n\nexport type ToastProviderProps = ComponentPropsWithoutRef<typeof BaseToast.Provider>;\n\n/**\n * Creates an isolated, declarative toast region. Configure `timeout` and\n * `limit` here; use `Toast.Root` to render each toast from local state or\n * `Toast.useToastManager()`.\n */\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\nexport type ToastViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;\n\n/**\n * A bottom-centred notification region.\n */\nexport const ToastViewport = forwardRef<HTMLDivElement, ToastViewportProps>(function ToastViewport(\n { \"aria-label\": ariaLabel, \"aria-live\": ariaLive, className, ...props },\n ref,\n) {\n return (\n <BaseToast.Viewport\n {...props}\n aria-label={ariaLabel ?? \"Notifications\"}\n aria-live={ariaLive ?? \"polite\"}\n ref={ref}\n className={withRecipeClassName(toastRecipe().viewport, className)}\n data-jaci-component=\"toast-viewport\"\n data-slot=\"toast-viewport\"\n />\n );\n});\n\nexport interface ToastRootProps extends ComponentPropsWithoutRef<typeof BaseToast.Root> {\n /**\n * Visual status. When omitted, the value is inferred from the toast's\n * `type` (`error` maps to `danger`) and otherwise remains neutral.\n */\n tone?: ToastTone;\n}\n\n/**\n * Renders a toast object while preserving Base UI's lifecycle, focus, swipe,\n * and auto-dismiss behavior. It is intentionally composed rather than a\n * global imperative notification API.\n */\nexport const ToastRoot = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(\n { className, toast: toastObject, tone, ...props },\n ref,\n) {\n const resolvedTone = resolveTone(toastObject.type, tone);\n\n return (\n <BaseToast.Root\n {...props}\n ref={ref}\n toast={toastObject}\n className={withRecipeClassName(toastRecipe({ tone: resolvedTone }).root, className)}\n data-jaci-component=\"toast\"\n data-jaci-tone={resolvedTone}\n data-slot=\"toast\"\n />\n );\n});\n\nexport type ToastContentProps = ComponentPropsWithoutRef<typeof BaseToast.Content>;\n\nexport const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(function ToastContent(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().content, className)}\n data-slot=\"toast-content\"\n />\n );\n});\n\n/** A layout wrapper for `Toast.Title` and `Toast.Description`. */\nexport type ToastTextProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const ToastText = forwardRef<HTMLDivElement, ToastTextProps>(function ToastText(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(toastRecipe().text, className)}\n data-slot=\"toast-text\"\n />\n );\n});\n\nexport type ToastTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(function ToastTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().title, className)}\n data-slot=\"toast-title\"\n />\n );\n});\n\nexport type ToastDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;\n\nexport const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(\n function ToastDescription({ className, ...props }, ref) {\n return (\n <BaseToast.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().description, className)}\n data-slot=\"toast-description\"\n />\n );\n },\n);\n\nexport type ToastCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseToast.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Dismiss notification\")}\n ref={ref}\n className={withRecipeClassName(toastRecipe().close, className)}\n data-slot=\"toast-close\"\n >\n {children ?? \"×\"}\n </BaseToast.Close>\n );\n});\n\nexport type ToastActionProps = ComponentPropsWithoutRef<typeof BaseToast.Action>;\n\nexport const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(\n { className, ...props },\n ref,\n) {\n return (\n <BaseToast.Action\n {...props}\n ref={ref}\n className={withRecipeClassName(toastRecipe().action, className)}\n data-slot=\"toast-action\"\n />\n );\n});\n\n/** Base UI's portal is preserved for rendering the viewport at document level. */\nexport const ToastPortal: typeof BaseToast.Portal = BaseToast.Portal;\n\nexport interface ToastComponent {\n Provider: typeof ToastProvider;\n Viewport: typeof ToastViewport;\n Root: typeof ToastRoot;\n Content: typeof ToastContent;\n Text: typeof ToastText;\n Title: typeof ToastTitle;\n Description: typeof ToastDescription;\n Close: typeof ToastClose;\n Action: typeof ToastAction;\n Portal: typeof ToastPortal;\n useToastManager: typeof BaseToast.useToastManager;\n}\n\nexport const Toast: ToastComponent = {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Root: ToastRoot,\n Content: ToastContent,\n Text: ToastText,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Action: ToastAction,\n Portal: ToastPortal,\n useToastManager: BaseToast.useToastManager,\n};\n"],"mappings":"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"}
|
package/dist/index.cjs
CHANGED
|
@@ -41,6 +41,7 @@ const require_menubar = require("./components/menubar/menubar.cjs");
|
|
|
41
41
|
const require_meter = require("./components/meter/meter.cjs");
|
|
42
42
|
const require_number_field = require("./components/number-field/number-field.cjs");
|
|
43
43
|
const require_navigation = require("./components/navigation/navigation.cjs");
|
|
44
|
+
const require_navbar_namespace = require("./components/navigation/navbar-namespace.cjs");
|
|
44
45
|
const require_navigation_menu = require("./components/navigation-menu/navigation-menu.cjs");
|
|
45
46
|
const require_option_selector = require("./components/option-selector/option-selector.cjs");
|
|
46
47
|
const require_pagination = require("./components/pagination/pagination.cjs");
|
|
@@ -54,6 +55,7 @@ const require_slider = require("./components/slider/slider.cjs");
|
|
|
54
55
|
const require_sidebar = require("./components/sidebar/sidebar.cjs");
|
|
55
56
|
const require_scroll_area = require("./components/scroll-area/scroll-area.cjs");
|
|
56
57
|
const require_skeleton = require("./components/skeleton/skeleton.cjs");
|
|
58
|
+
const require_stepper = require("./components/stepper/stepper.cjs");
|
|
57
59
|
const require_tabs = require("./components/tabs/tabs.cjs");
|
|
58
60
|
const require_table = require("./components/table/table.cjs");
|
|
59
61
|
const require_tags_input = require("./components/tags-input/tags-input.cjs");
|
|
@@ -372,7 +374,7 @@ exports.MeterLabel = require_meter.MeterLabel;
|
|
|
372
374
|
exports.MeterRoot = require_meter.MeterRoot;
|
|
373
375
|
exports.MeterTrack = require_meter.MeterTrack;
|
|
374
376
|
exports.MeterValue = require_meter.MeterValue;
|
|
375
|
-
exports.Navbar =
|
|
377
|
+
exports.Navbar = require_navbar_namespace.Navbar;
|
|
376
378
|
exports.NavbarBar = require_navigation.NavbarBar;
|
|
377
379
|
exports.NavbarCenter = require_navigation.NavbarCenter;
|
|
378
380
|
exports.NavbarClose = require_navigation.NavbarClose;
|
|
@@ -500,6 +502,18 @@ exports.SliderTrack = require_slider.SliderTrack;
|
|
|
500
502
|
exports.SliderValue = require_slider.SliderValue;
|
|
501
503
|
exports.Spinner = require_index.Spinner;
|
|
502
504
|
exports.Stack = require_index.Stack;
|
|
505
|
+
exports.Stepper = require_stepper.Stepper;
|
|
506
|
+
exports.StepperContent = require_stepper.StepperContent;
|
|
507
|
+
exports.StepperDescription = require_stepper.StepperDescription;
|
|
508
|
+
exports.StepperIndicator = require_stepper.StepperIndicator;
|
|
509
|
+
exports.StepperItem = require_stepper.StepperItem;
|
|
510
|
+
exports.StepperList = require_stepper.StepperList;
|
|
511
|
+
exports.StepperNext = require_stepper.StepperNext;
|
|
512
|
+
exports.StepperPrevious = require_stepper.StepperPrevious;
|
|
513
|
+
exports.StepperRoot = require_stepper.StepperRoot;
|
|
514
|
+
exports.StepperSeparator = require_stepper.StepperSeparator;
|
|
515
|
+
exports.StepperTitle = require_stepper.StepperTitle;
|
|
516
|
+
exports.StepperTrigger = require_stepper.StepperTrigger;
|
|
503
517
|
exports.Switch = require_switch.Switch;
|
|
504
518
|
exports.Table = require_table.Table;
|
|
505
519
|
exports.TableBody = require_table.TableBody;
|