@openwarelabs/ui 0.2.0 → 0.3.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/README.md +8 -6
- package/dist/components/Text/Text.d.cts +26 -0
- package/dist/components/Text/Text.d.ts +26 -0
- package/dist/components.css +117 -15
- package/dist/index.cjs +577 -532
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +437 -392
- package/dist/index.js.map +4 -4
- package/dist/openware-ui.iife.js +6 -6
- package/dist/styles.css +118 -16
- package/dist/tokens.css +1 -1
- package/dist/tokens.json +3 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
// src/components/Button/Button.tsx
|
|
2
|
-
import { forwardRef } from "react";
|
|
3
|
-
|
|
4
1
|
// src/utils/cx.ts
|
|
5
2
|
function cx(...values) {
|
|
6
3
|
const classes = [];
|
|
@@ -15,6 +12,52 @@ function cx(...values) {
|
|
|
15
12
|
return classes.join(" ");
|
|
16
13
|
}
|
|
17
14
|
|
|
15
|
+
// src/components/Text/Text.tsx
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
var elements = {
|
|
18
|
+
hero: "h1",
|
|
19
|
+
"page-title": "h1",
|
|
20
|
+
"section-title": "h2",
|
|
21
|
+
heading: "h3",
|
|
22
|
+
lead: "p",
|
|
23
|
+
prose: "p",
|
|
24
|
+
"dialog-title": "h2",
|
|
25
|
+
"card-title": "h3",
|
|
26
|
+
body: "p",
|
|
27
|
+
copy: "p",
|
|
28
|
+
label: "span",
|
|
29
|
+
button: "span",
|
|
30
|
+
caption: "span",
|
|
31
|
+
badge: "span",
|
|
32
|
+
overline: "span",
|
|
33
|
+
code: "code",
|
|
34
|
+
kbd: "kbd"
|
|
35
|
+
};
|
|
36
|
+
var mutedByDefault = ["lead", "copy", "caption", "overline"];
|
|
37
|
+
function Text({ variant = "body", as, tone, align, truncate = false, className, children, ...props }) {
|
|
38
|
+
const Element = as ?? elements[variant];
|
|
39
|
+
const colour = tone ?? (mutedByDefault.includes(variant) ? "muted" : void 0);
|
|
40
|
+
return /* @__PURE__ */ jsx(
|
|
41
|
+
Element,
|
|
42
|
+
{
|
|
43
|
+
className: cx(
|
|
44
|
+
"ow-text",
|
|
45
|
+
`ow-type-${variant}`,
|
|
46
|
+
`ow-text--${variant}`,
|
|
47
|
+
colour && `ow-text--${colour}`,
|
|
48
|
+
align && align !== "start" && `ow-text--${align}`,
|
|
49
|
+
truncate && "ow-text--truncate",
|
|
50
|
+
className
|
|
51
|
+
),
|
|
52
|
+
...props,
|
|
53
|
+
children
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// src/components/Button/Button.tsx
|
|
59
|
+
import { forwardRef } from "react";
|
|
60
|
+
|
|
18
61
|
// src/utils/text.ts
|
|
19
62
|
function getInitials(name) {
|
|
20
63
|
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
@@ -27,9 +70,9 @@ function toAriaShortcut(shortcut) {
|
|
|
27
70
|
}
|
|
28
71
|
|
|
29
72
|
// src/components/Spinner/Spinner.tsx
|
|
30
|
-
import { jsx } from "react/jsx-runtime";
|
|
73
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
31
74
|
function Spinner({ size = "md", tone = "primary", label = "Loading", className }) {
|
|
32
|
-
return /* @__PURE__ */
|
|
75
|
+
return /* @__PURE__ */ jsx2(
|
|
33
76
|
"span",
|
|
34
77
|
{
|
|
35
78
|
className: cx("ow-spinner", `ow-spinner--${size}`, `ow-spinner--${tone}`, className),
|
|
@@ -39,7 +82,7 @@ function Spinner({ size = "md", tone = "primary", label = "Loading", className }
|
|
|
39
82
|
}
|
|
40
83
|
|
|
41
84
|
// src/components/Button/Button.tsx
|
|
42
|
-
import { jsx as
|
|
85
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
43
86
|
function buttonClassName({
|
|
44
87
|
variant = "secondary",
|
|
45
88
|
size = "md",
|
|
@@ -70,7 +113,7 @@ var Button = forwardRef(function Button2({
|
|
|
70
113
|
variant = "secondary",
|
|
71
114
|
...buttonProps
|
|
72
115
|
}, ref) {
|
|
73
|
-
const leading = loading ? /* @__PURE__ */
|
|
116
|
+
const leading = loading ? /* @__PURE__ */ jsx3(Spinner, { size: "sm", tone: "current", label: "" }) : startIcon;
|
|
74
117
|
return /* @__PURE__ */ jsxs(
|
|
75
118
|
"button",
|
|
76
119
|
{
|
|
@@ -88,10 +131,10 @@ var Button = forwardRef(function Button2({
|
|
|
88
131
|
"aria-keyshortcuts": shortcut ? toAriaShortcut(shortcut) : void 0,
|
|
89
132
|
...buttonProps,
|
|
90
133
|
children: [
|
|
91
|
-
leading ? /* @__PURE__ */
|
|
134
|
+
leading ? /* @__PURE__ */ jsx3("span", { className: "ow-button__icon", children: leading }) : null,
|
|
92
135
|
iconOnly && loading ? null : children,
|
|
93
|
-
endIcon && !iconOnly ? /* @__PURE__ */
|
|
94
|
-
shortcut && !iconOnly ? /* @__PURE__ */
|
|
136
|
+
endIcon && !iconOnly ? /* @__PURE__ */ jsx3("span", { className: "ow-button__icon", children: endIcon }) : null,
|
|
137
|
+
shortcut && !iconOnly ? /* @__PURE__ */ jsx3("kbd", { "aria-hidden": "true", className: "ow-button__shortcut", children: shortcut }) : null
|
|
95
138
|
]
|
|
96
139
|
}
|
|
97
140
|
);
|
|
@@ -123,10 +166,10 @@ function useControllableState(value, defaultValue, onChange) {
|
|
|
123
166
|
}
|
|
124
167
|
|
|
125
168
|
// src/icons.tsx
|
|
126
|
-
import { Fragment, jsx as
|
|
169
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
127
170
|
function icon(paths) {
|
|
128
171
|
return function Icon({ size = 16, strokeWidth = 2, ...props }) {
|
|
129
|
-
return /* @__PURE__ */
|
|
172
|
+
return /* @__PURE__ */ jsx4(
|
|
130
173
|
"svg",
|
|
131
174
|
{
|
|
132
175
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -146,160 +189,160 @@ function icon(paths) {
|
|
|
146
189
|
);
|
|
147
190
|
};
|
|
148
191
|
}
|
|
149
|
-
var CheckIcon = icon(/* @__PURE__ */
|
|
150
|
-
var ChevronDownIcon = icon(/* @__PURE__ */
|
|
192
|
+
var CheckIcon = icon(/* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" }));
|
|
193
|
+
var ChevronDownIcon = icon(/* @__PURE__ */ jsx4("path", { d: "m6 9 6 6 6-6" }));
|
|
151
194
|
var SearchIcon = icon(
|
|
152
195
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
153
|
-
/* @__PURE__ */
|
|
154
|
-
/* @__PURE__ */
|
|
196
|
+
/* @__PURE__ */ jsx4("circle", { cx: "11", cy: "11", r: "8" }),
|
|
197
|
+
/* @__PURE__ */ jsx4("path", { d: "m21 21-4.3-4.3" })
|
|
155
198
|
] })
|
|
156
199
|
);
|
|
157
200
|
var CornerDownLeftIcon = icon(
|
|
158
201
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
159
|
-
/* @__PURE__ */
|
|
160
|
-
/* @__PURE__ */
|
|
202
|
+
/* @__PURE__ */ jsx4("polyline", { points: "9 10 4 15 9 20" }),
|
|
203
|
+
/* @__PURE__ */ jsx4("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })
|
|
161
204
|
] })
|
|
162
205
|
);
|
|
163
206
|
var XIcon = icon(
|
|
164
207
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
165
|
-
/* @__PURE__ */
|
|
166
|
-
/* @__PURE__ */
|
|
208
|
+
/* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
|
|
209
|
+
/* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
|
|
167
210
|
] })
|
|
168
211
|
);
|
|
169
212
|
var UserIcon = icon(
|
|
170
213
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
171
|
-
/* @__PURE__ */
|
|
172
|
-
/* @__PURE__ */
|
|
214
|
+
/* @__PURE__ */ jsx4("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
|
|
215
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "7", r: "4" })
|
|
173
216
|
] })
|
|
174
217
|
);
|
|
175
218
|
var TrashIcon = icon(
|
|
176
219
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
177
|
-
/* @__PURE__ */
|
|
178
|
-
/* @__PURE__ */
|
|
179
|
-
/* @__PURE__ */
|
|
180
|
-
/* @__PURE__ */
|
|
181
|
-
/* @__PURE__ */
|
|
220
|
+
/* @__PURE__ */ jsx4("path", { d: "M3 6h18" }),
|
|
221
|
+
/* @__PURE__ */ jsx4("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
|
|
222
|
+
/* @__PURE__ */ jsx4("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
|
|
223
|
+
/* @__PURE__ */ jsx4("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
|
|
224
|
+
/* @__PURE__ */ jsx4("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
|
|
182
225
|
] })
|
|
183
226
|
);
|
|
184
227
|
var CircleCheckIcon = icon(
|
|
185
228
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
186
|
-
/* @__PURE__ */
|
|
187
|
-
/* @__PURE__ */
|
|
229
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
|
|
230
|
+
/* @__PURE__ */ jsx4("path", { d: "m9 12 2 2 4-4" })
|
|
188
231
|
] })
|
|
189
232
|
);
|
|
190
233
|
var CircleAlertIcon = icon(
|
|
191
234
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
192
|
-
/* @__PURE__ */
|
|
193
|
-
/* @__PURE__ */
|
|
194
|
-
/* @__PURE__ */
|
|
235
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
|
|
236
|
+
/* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
|
|
237
|
+
/* @__PURE__ */ jsx4("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
|
|
195
238
|
] })
|
|
196
239
|
);
|
|
197
|
-
var ChevronRightIcon = icon(/* @__PURE__ */
|
|
198
|
-
var ChevronLeftIcon = icon(/* @__PURE__ */
|
|
199
|
-
var ChevronUpIcon = icon(/* @__PURE__ */
|
|
200
|
-
var MinusIcon = icon(/* @__PURE__ */
|
|
240
|
+
var ChevronRightIcon = icon(/* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" }));
|
|
241
|
+
var ChevronLeftIcon = icon(/* @__PURE__ */ jsx4("path", { d: "m15 18-6-6 6-6" }));
|
|
242
|
+
var ChevronUpIcon = icon(/* @__PURE__ */ jsx4("path", { d: "m18 15-6-6-6 6" }));
|
|
243
|
+
var MinusIcon = icon(/* @__PURE__ */ jsx4("path", { d: "M5 12h14" }));
|
|
201
244
|
var PlusIcon = icon(
|
|
202
245
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
203
|
-
/* @__PURE__ */
|
|
204
|
-
/* @__PURE__ */
|
|
246
|
+
/* @__PURE__ */ jsx4("path", { d: "M5 12h14" }),
|
|
247
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 5v14" })
|
|
205
248
|
] })
|
|
206
249
|
);
|
|
207
250
|
var InfoIcon = icon(
|
|
208
251
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
209
|
-
/* @__PURE__ */
|
|
210
|
-
/* @__PURE__ */
|
|
211
|
-
/* @__PURE__ */
|
|
252
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
|
|
253
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 16v-4" }),
|
|
254
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 8h.01" })
|
|
212
255
|
] })
|
|
213
256
|
);
|
|
214
257
|
var TriangleAlertIcon = icon(
|
|
215
258
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
216
|
-
/* @__PURE__ */
|
|
217
|
-
/* @__PURE__ */
|
|
218
|
-
/* @__PURE__ */
|
|
259
|
+
/* @__PURE__ */ jsx4("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
|
|
260
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 9v4" }),
|
|
261
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 17h.01" })
|
|
219
262
|
] })
|
|
220
263
|
);
|
|
221
264
|
var PipetteIcon = icon(
|
|
222
265
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
223
|
-
/* @__PURE__ */
|
|
224
|
-
/* @__PURE__ */
|
|
225
|
-
/* @__PURE__ */
|
|
266
|
+
/* @__PURE__ */ jsx4("path", { d: "m2 22 1-1h3l9-9" }),
|
|
267
|
+
/* @__PURE__ */ jsx4("path", { d: "M3 21v-3l9-9" }),
|
|
268
|
+
/* @__PURE__ */ jsx4("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
|
|
226
269
|
] })
|
|
227
270
|
);
|
|
228
271
|
var CopyIcon = icon(
|
|
229
272
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
230
|
-
/* @__PURE__ */
|
|
231
|
-
/* @__PURE__ */
|
|
273
|
+
/* @__PURE__ */ jsx4("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
|
|
274
|
+
/* @__PURE__ */ jsx4("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
|
|
232
275
|
] })
|
|
233
276
|
);
|
|
234
277
|
var CalendarIcon = icon(
|
|
235
278
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
236
|
-
/* @__PURE__ */
|
|
237
|
-
/* @__PURE__ */
|
|
238
|
-
/* @__PURE__ */
|
|
239
|
-
/* @__PURE__ */
|
|
279
|
+
/* @__PURE__ */ jsx4("path", { d: "M8 2v4" }),
|
|
280
|
+
/* @__PURE__ */ jsx4("path", { d: "M16 2v4" }),
|
|
281
|
+
/* @__PURE__ */ jsx4("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
|
|
282
|
+
/* @__PURE__ */ jsx4("path", { d: "M3 10h18" })
|
|
240
283
|
] })
|
|
241
284
|
);
|
|
242
285
|
var FileIcon = icon(
|
|
243
286
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
244
|
-
/* @__PURE__ */
|
|
245
|
-
/* @__PURE__ */
|
|
287
|
+
/* @__PURE__ */ jsx4("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
|
|
288
|
+
/* @__PURE__ */ jsx4("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
|
|
246
289
|
] })
|
|
247
290
|
);
|
|
248
291
|
var FolderIcon = icon(
|
|
249
|
-
/* @__PURE__ */
|
|
292
|
+
/* @__PURE__ */ jsx4("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" })
|
|
250
293
|
);
|
|
251
294
|
var FolderOpenIcon = icon(
|
|
252
|
-
/* @__PURE__ */
|
|
295
|
+
/* @__PURE__ */ jsx4("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" })
|
|
253
296
|
);
|
|
254
297
|
var UploadIcon = icon(
|
|
255
298
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
256
|
-
/* @__PURE__ */
|
|
257
|
-
/* @__PURE__ */
|
|
258
|
-
/* @__PURE__ */
|
|
299
|
+
/* @__PURE__ */ jsx4("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
300
|
+
/* @__PURE__ */ jsx4("polyline", { points: "17 8 12 3 7 8" }),
|
|
301
|
+
/* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
|
|
259
302
|
] })
|
|
260
303
|
);
|
|
261
304
|
var ArrowUpRightIcon = icon(
|
|
262
305
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
263
|
-
/* @__PURE__ */
|
|
264
|
-
/* @__PURE__ */
|
|
306
|
+
/* @__PURE__ */ jsx4("path", { d: "M7 7h10v10" }),
|
|
307
|
+
/* @__PURE__ */ jsx4("path", { d: "M7 17 17 7" })
|
|
265
308
|
] })
|
|
266
309
|
);
|
|
267
310
|
var ArrowUpIcon = icon(
|
|
268
311
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
269
|
-
/* @__PURE__ */
|
|
270
|
-
/* @__PURE__ */
|
|
312
|
+
/* @__PURE__ */ jsx4("path", { d: "m5 12 7-7 7 7" }),
|
|
313
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 19V5" })
|
|
271
314
|
] })
|
|
272
315
|
);
|
|
273
316
|
var ArrowDownIcon = icon(
|
|
274
317
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
275
|
-
/* @__PURE__ */
|
|
276
|
-
/* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 5v14" }),
|
|
319
|
+
/* @__PURE__ */ jsx4("path", { d: "m19 12-7 7-7-7" })
|
|
277
320
|
] })
|
|
278
321
|
);
|
|
279
322
|
var ChevronsUpDownIcon = icon(
|
|
280
323
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
281
|
-
/* @__PURE__ */
|
|
282
|
-
/* @__PURE__ */
|
|
324
|
+
/* @__PURE__ */ jsx4("path", { d: "m7 15 5 5 5-5" }),
|
|
325
|
+
/* @__PURE__ */ jsx4("path", { d: "m7 9 5-5 5 5" })
|
|
283
326
|
] })
|
|
284
327
|
);
|
|
285
328
|
var InboxIcon = icon(
|
|
286
329
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
/* @__PURE__ */
|
|
330
|
+
/* @__PURE__ */ jsx4("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }),
|
|
331
|
+
/* @__PURE__ */ jsx4("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
|
|
289
332
|
] })
|
|
290
333
|
);
|
|
291
334
|
var EllipsisIcon = icon(
|
|
292
335
|
/* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
293
|
-
/* @__PURE__ */
|
|
294
|
-
/* @__PURE__ */
|
|
295
|
-
/* @__PURE__ */
|
|
336
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "1" }),
|
|
337
|
+
/* @__PURE__ */ jsx4("circle", { cx: "19", cy: "12", r: "1" }),
|
|
338
|
+
/* @__PURE__ */ jsx4("circle", { cx: "5", cy: "12", r: "1" })
|
|
296
339
|
] })
|
|
297
340
|
);
|
|
298
341
|
|
|
299
342
|
// src/components/Button/ButtonGroup.tsx
|
|
300
|
-
import { jsx as
|
|
343
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
301
344
|
function ButtonGroup({ attached = true, orientation = "horizontal", className, ...props }) {
|
|
302
|
-
return /* @__PURE__ */
|
|
345
|
+
return /* @__PURE__ */ jsx5(
|
|
303
346
|
"div",
|
|
304
347
|
{
|
|
305
348
|
role: "group",
|
|
@@ -314,7 +357,7 @@ function ButtonGroup({ attached = true, orientation = "horizontal", className, .
|
|
|
314
357
|
);
|
|
315
358
|
}
|
|
316
359
|
var CloseButton = forwardRef2(function CloseButton2({ size = "md", label = "Close", className, type = "button", ...buttonProps }, ref) {
|
|
317
|
-
return /* @__PURE__ */
|
|
360
|
+
return /* @__PURE__ */ jsx5(
|
|
318
361
|
"button",
|
|
319
362
|
{
|
|
320
363
|
ref,
|
|
@@ -322,13 +365,13 @@ var CloseButton = forwardRef2(function CloseButton2({ size = "md", label = "Clos
|
|
|
322
365
|
"aria-label": label,
|
|
323
366
|
className: cx("ow-close-button", `ow-close-button--${size}`, className),
|
|
324
367
|
...buttonProps,
|
|
325
|
-
children: /* @__PURE__ */
|
|
368
|
+
children: /* @__PURE__ */ jsx5(XIcon, { size: size === "sm" ? 14 : 17 })
|
|
326
369
|
}
|
|
327
370
|
);
|
|
328
371
|
});
|
|
329
372
|
var ToggleButton = forwardRef2(function ToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, className, variant = "secondary", ...buttonProps }, ref) {
|
|
330
373
|
const [isPressed, setPressed] = useControllableState(pressed, defaultPressed, onPressedChange);
|
|
331
|
-
return /* @__PURE__ */
|
|
374
|
+
return /* @__PURE__ */ jsx5(
|
|
332
375
|
Button,
|
|
333
376
|
{
|
|
334
377
|
ref,
|
|
@@ -386,7 +429,7 @@ function useIndicator(containerRef, selector, key) {
|
|
|
386
429
|
}
|
|
387
430
|
|
|
388
431
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
389
|
-
import { jsx as
|
|
432
|
+
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
390
433
|
function SegmentedControl({
|
|
391
434
|
options,
|
|
392
435
|
value,
|
|
@@ -443,14 +486,14 @@ function SegmentedControl({
|
|
|
443
486
|
onClick: () => setCurrent(option.value),
|
|
444
487
|
onKeyDown: (event) => onKeyDown(event, index),
|
|
445
488
|
children: [
|
|
446
|
-
option.icon ? /* @__PURE__ */
|
|
489
|
+
option.icon ? /* @__PURE__ */ jsx6("span", { className: "ow-segmented__icon", children: option.icon }) : null,
|
|
447
490
|
option.label
|
|
448
491
|
]
|
|
449
492
|
},
|
|
450
493
|
option.value
|
|
451
494
|
);
|
|
452
495
|
}),
|
|
453
|
-
/* @__PURE__ */
|
|
496
|
+
/* @__PURE__ */ jsx6("span", { className: "ow-indicator", "aria-hidden": "true" })
|
|
454
497
|
]
|
|
455
498
|
}
|
|
456
499
|
);
|
|
@@ -458,7 +501,7 @@ function SegmentedControl({
|
|
|
458
501
|
|
|
459
502
|
// src/components/ChoiceCard/ChoiceCard.tsx
|
|
460
503
|
import { forwardRef as forwardRef3 } from "react";
|
|
461
|
-
import { jsx as
|
|
504
|
+
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
462
505
|
var ChoiceCard = forwardRef3(function ChoiceCard2({ className, description, icon: icon2, recommended = false, shortcut, title, type = "button", ...buttonProps }, ref) {
|
|
463
506
|
return /* @__PURE__ */ jsxs4(
|
|
464
507
|
"button",
|
|
@@ -470,12 +513,12 @@ var ChoiceCard = forwardRef3(function ChoiceCard2({ className, description, icon
|
|
|
470
513
|
...buttonProps,
|
|
471
514
|
children: [
|
|
472
515
|
/* @__PURE__ */ jsxs4("span", { className: "ow-choice__top", children: [
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
shortcut ? /* @__PURE__ */
|
|
516
|
+
/* @__PURE__ */ jsx7("span", { className: "ow-choice__icon", children: icon2 }),
|
|
517
|
+
shortcut ? /* @__PURE__ */ jsx7("kbd", { "aria-hidden": "true", className: "ow-choice__shortcut", children: shortcut }) : null
|
|
475
518
|
] }),
|
|
476
519
|
/* @__PURE__ */ jsxs4("span", { className: "ow-choice__text", children: [
|
|
477
|
-
/* @__PURE__ */
|
|
478
|
-
/* @__PURE__ */
|
|
520
|
+
/* @__PURE__ */ jsx7("span", { className: "ow-choice__title", children: title }),
|
|
521
|
+
/* @__PURE__ */ jsx7("span", { className: "ow-choice__description", children: description })
|
|
479
522
|
] })
|
|
480
523
|
]
|
|
481
524
|
}
|
|
@@ -510,7 +553,7 @@ async function copyText(text) {
|
|
|
510
553
|
}
|
|
511
554
|
|
|
512
555
|
// src/components/CodeBlock/CodeBlock.tsx
|
|
513
|
-
import { jsx as
|
|
556
|
+
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
514
557
|
function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly = false, tone = "default", onCopy, className }) {
|
|
515
558
|
const [copied, setCopied] = useState2(false);
|
|
516
559
|
const timer = useRef3(0);
|
|
@@ -537,11 +580,11 @@ function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly =
|
|
|
537
580
|
},
|
|
538
581
|
children: [
|
|
539
582
|
/* @__PURE__ */ jsxs5("span", { className: "ow-copy-button__icon", "aria-hidden": "true", children: [
|
|
540
|
-
/* @__PURE__ */
|
|
541
|
-
/* @__PURE__ */
|
|
583
|
+
/* @__PURE__ */ jsx8(CopyIcon, { size: 14 }),
|
|
584
|
+
/* @__PURE__ */ jsx8(CheckIcon, { size: 14 })
|
|
542
585
|
] }),
|
|
543
|
-
iconOnly ? null : /* @__PURE__ */
|
|
544
|
-
/* @__PURE__ */
|
|
586
|
+
iconOnly ? null : /* @__PURE__ */ jsx8("span", { children: copied ? copiedLabel : label }),
|
|
587
|
+
/* @__PURE__ */ jsx8("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
|
|
545
588
|
]
|
|
546
589
|
}
|
|
547
590
|
);
|
|
@@ -551,29 +594,29 @@ function CodeBlock({ code, html, title, language, showLineNumbers = false, copya
|
|
|
551
594
|
const lines = code.replace(/\n$/, "").split("\n");
|
|
552
595
|
return /* @__PURE__ */ jsxs5("div", { className: cx("ow-code-block", showLineNumbers && "ow-code-block--numbered", className), children: [
|
|
553
596
|
hasHeader ? /* @__PURE__ */ jsxs5("div", { className: "ow-code-block__header", children: [
|
|
554
|
-
/* @__PURE__ */
|
|
555
|
-
language ? /* @__PURE__ */
|
|
556
|
-
copyable ? /* @__PURE__ */
|
|
557
|
-
] }) : copyable ? /* @__PURE__ */
|
|
597
|
+
/* @__PURE__ */ jsx8("span", { className: "ow-code-block__title", children: title }),
|
|
598
|
+
language ? /* @__PURE__ */ jsx8("span", { className: "ow-code-block__language", children: language }) : null,
|
|
599
|
+
copyable ? /* @__PURE__ */ jsx8(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code" }) : null
|
|
600
|
+
] }) : copyable ? /* @__PURE__ */ jsx8(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code", className: "ow-code-block__floating-copy" }) : null,
|
|
558
601
|
/* @__PURE__ */ jsxs5("pre", { className: "ow-code-block__pre", style: maxHeight ? { maxHeight } : void 0, tabIndex: 0, children: [
|
|
559
|
-
showLineNumbers ? /* @__PURE__ */
|
|
560
|
-
html ? /* @__PURE__ */
|
|
602
|
+
showLineNumbers ? /* @__PURE__ */ jsx8("span", { className: "ow-code-block__numbers", "aria-hidden": "true", children: lines.map((_, index) => /* @__PURE__ */ jsx8("span", { children: index + 1 }, index)) }) : null,
|
|
603
|
+
html ? /* @__PURE__ */ jsx8("code", { className: "ow-code-block__code", dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx8("code", { className: "ow-code-block__code", children: code.replace(/\n$/, "") })
|
|
561
604
|
] })
|
|
562
605
|
] });
|
|
563
606
|
}
|
|
564
607
|
function Snippet({ value, prompt = "$", className }) {
|
|
565
608
|
return /* @__PURE__ */ jsxs5("div", { className: cx("ow-snippet", className), children: [
|
|
566
609
|
/* @__PURE__ */ jsxs5("code", { className: "ow-snippet__code", children: [
|
|
567
|
-
prompt ? /* @__PURE__ */
|
|
610
|
+
prompt ? /* @__PURE__ */ jsx8("span", { className: "ow-snippet__prompt", "aria-hidden": "true", children: prompt }) : null,
|
|
568
611
|
value
|
|
569
612
|
] }),
|
|
570
|
-
/* @__PURE__ */
|
|
613
|
+
/* @__PURE__ */ jsx8(CopyButton, { value, iconOnly: true, label: `Copy ${value}` })
|
|
571
614
|
] });
|
|
572
615
|
}
|
|
573
616
|
|
|
574
617
|
// src/components/Field/Field.tsx
|
|
575
618
|
import { cloneElement, isValidElement, useId } from "react";
|
|
576
|
-
import { jsx as
|
|
619
|
+
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
577
620
|
function Field({ label, children, hint, error, className }) {
|
|
578
621
|
const generatedId = useId();
|
|
579
622
|
const hintId = `${generatedId}-hint`;
|
|
@@ -581,22 +624,23 @@ function Field({ label, children, hint, error, className }) {
|
|
|
581
624
|
const child = isValidElement(children) ? children : null;
|
|
582
625
|
const controlId = child?.props.id ?? `${generatedId}-control`;
|
|
583
626
|
const describedBy = [child?.props["aria-describedby"], hint ? hintId : void 0, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
|
|
584
|
-
const
|
|
627
|
+
const invalid = child?.props.isInvalid ?? (error ? true : void 0);
|
|
628
|
+
const invalidProp = child && typeof child.type !== "string" ? invalid === void 0 ? {} : { isInvalid: invalid } : { "aria-invalid": error ? true : void 0 };
|
|
585
629
|
return /* @__PURE__ */ jsxs6("div", { className: cx("ow-field", className), children: [
|
|
586
|
-
/* @__PURE__ */
|
|
630
|
+
/* @__PURE__ */ jsx9("label", { className: "ow-field__label", htmlFor: controlId, children: label }),
|
|
587
631
|
child ? cloneElement(child, { id: controlId, "aria-describedby": describedBy, ...invalidProp }) : children,
|
|
588
|
-
hint ? /* @__PURE__ */
|
|
589
|
-
error ? /* @__PURE__ */
|
|
632
|
+
hint ? /* @__PURE__ */ jsx9("p", { id: hintId, className: "ow-field__hint", children: hint }) : null,
|
|
633
|
+
error ? /* @__PURE__ */ jsx9("p", { id: errorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
590
634
|
] });
|
|
591
635
|
}
|
|
592
636
|
|
|
593
637
|
// src/components/Input/Input.tsx
|
|
594
638
|
import { forwardRef as forwardRef4 } from "react";
|
|
595
|
-
import { jsx as
|
|
639
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
596
640
|
var Input = forwardRef4(function Input2({ className, isInvalid = false, size = "md", startContent, endContent, ...inputProps }, ref) {
|
|
597
641
|
const invalid = isInvalid || void 0;
|
|
598
642
|
if (startContent === void 0 && endContent === void 0) {
|
|
599
|
-
return /* @__PURE__ */
|
|
643
|
+
return /* @__PURE__ */ jsx10(
|
|
600
644
|
"input",
|
|
601
645
|
{
|
|
602
646
|
ref,
|
|
@@ -617,9 +661,9 @@ var Input = forwardRef4(function Input2({ className, isInvalid = false, size = "
|
|
|
617
661
|
className
|
|
618
662
|
),
|
|
619
663
|
children: [
|
|
620
|
-
startContent !== void 0 ? /* @__PURE__ */
|
|
621
|
-
/* @__PURE__ */
|
|
622
|
-
endContent !== void 0 ? /* @__PURE__ */
|
|
664
|
+
startContent !== void 0 ? /* @__PURE__ */ jsx10("span", { className: "ow-input-group__addon", children: startContent }) : null,
|
|
665
|
+
/* @__PURE__ */ jsx10("input", { ref, className: "ow-input-group__input", "aria-invalid": invalid, ...inputProps }),
|
|
666
|
+
endContent !== void 0 ? /* @__PURE__ */ jsx10("span", { className: "ow-input-group__addon", children: endContent }) : null
|
|
623
667
|
]
|
|
624
668
|
}
|
|
625
669
|
);
|
|
@@ -627,7 +671,7 @@ var Input = forwardRef4(function Input2({ className, isInvalid = false, size = "
|
|
|
627
671
|
|
|
628
672
|
// src/components/SearchField/SearchField.tsx
|
|
629
673
|
import { forwardRef as forwardRef5, useRef as useRef4 } from "react";
|
|
630
|
-
import { jsx as
|
|
674
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
631
675
|
function assignRef(ref, value) {
|
|
632
676
|
if (typeof ref === "function") ref(value);
|
|
633
677
|
else if (ref) ref.current = value;
|
|
@@ -657,7 +701,7 @@ var SearchField = forwardRef5(function SearchField2({
|
|
|
657
701
|
onSubmit?.(text);
|
|
658
702
|
}
|
|
659
703
|
}
|
|
660
|
-
return /* @__PURE__ */
|
|
704
|
+
return /* @__PURE__ */ jsx11(
|
|
661
705
|
Input,
|
|
662
706
|
{
|
|
663
707
|
ref: (element) => {
|
|
@@ -671,8 +715,8 @@ var SearchField = forwardRef5(function SearchField2({
|
|
|
671
715
|
value: text,
|
|
672
716
|
onChange: (event) => setText(event.target.value),
|
|
673
717
|
onKeyDown: handleKeyDown,
|
|
674
|
-
startContent: /* @__PURE__ */
|
|
675
|
-
endContent: loading ? /* @__PURE__ */
|
|
718
|
+
startContent: /* @__PURE__ */ jsx11(SearchIcon, { size: size === "sm" ? 14 : 16 }),
|
|
719
|
+
endContent: loading ? /* @__PURE__ */ jsx11(Spinner, { size: "sm", label: "Searching" }) : text ? /* @__PURE__ */ jsx11(
|
|
676
720
|
CloseButton,
|
|
677
721
|
{
|
|
678
722
|
size: "sm",
|
|
@@ -690,7 +734,7 @@ var SearchField = forwardRef5(function SearchField2({
|
|
|
690
734
|
|
|
691
735
|
// src/components/NumberField/NumberField.tsx
|
|
692
736
|
import { forwardRef as forwardRef6, useState as useState3 } from "react";
|
|
693
|
-
import { jsx as
|
|
737
|
+
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
694
738
|
var decimals = (step) => (String(step).split(".")[1] ?? "").length;
|
|
695
739
|
var NumberField = forwardRef6(function NumberField2({
|
|
696
740
|
value,
|
|
@@ -765,7 +809,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
765
809
|
className
|
|
766
810
|
),
|
|
767
811
|
children: [
|
|
768
|
-
/* @__PURE__ */
|
|
812
|
+
/* @__PURE__ */ jsx12(
|
|
769
813
|
"button",
|
|
770
814
|
{
|
|
771
815
|
type: "button",
|
|
@@ -774,10 +818,10 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
774
818
|
tabIndex: -1,
|
|
775
819
|
disabled: disabled || atMin,
|
|
776
820
|
onClick: () => stepBy(-1),
|
|
777
|
-
children: /* @__PURE__ */
|
|
821
|
+
children: /* @__PURE__ */ jsx12(MinusIcon, { size: 14 })
|
|
778
822
|
}
|
|
779
823
|
),
|
|
780
|
-
/* @__PURE__ */
|
|
824
|
+
/* @__PURE__ */ jsx12(
|
|
781
825
|
"input",
|
|
782
826
|
{
|
|
783
827
|
ref,
|
|
@@ -806,7 +850,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
806
850
|
...inputProps
|
|
807
851
|
}
|
|
808
852
|
),
|
|
809
|
-
/* @__PURE__ */
|
|
853
|
+
/* @__PURE__ */ jsx12(
|
|
810
854
|
"button",
|
|
811
855
|
{
|
|
812
856
|
type: "button",
|
|
@@ -815,7 +859,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
815
859
|
tabIndex: -1,
|
|
816
860
|
disabled: disabled || atMax,
|
|
817
861
|
onClick: () => stepBy(1),
|
|
818
|
-
children: /* @__PURE__ */
|
|
862
|
+
children: /* @__PURE__ */ jsx12(PlusIcon, { size: 14 })
|
|
819
863
|
}
|
|
820
864
|
)
|
|
821
865
|
]
|
|
@@ -825,7 +869,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
825
869
|
|
|
826
870
|
// src/components/InputOTP/InputOTP.tsx
|
|
827
871
|
import { useRef as useRef5 } from "react";
|
|
828
|
-
import { jsx as
|
|
872
|
+
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
829
873
|
function InputOTP({
|
|
830
874
|
length = 6,
|
|
831
875
|
value,
|
|
@@ -889,8 +933,8 @@ function InputOTP({
|
|
|
889
933
|
}
|
|
890
934
|
return /* @__PURE__ */ jsxs9("div", { role: "group", "aria-label": ariaLabel, className: cx("ow-otp", isInvalid && "ow-otp--invalid", className), children: [
|
|
891
935
|
chars.map((char, index) => /* @__PURE__ */ jsxs9("span", { className: "ow-otp__slot", children: [
|
|
892
|
-
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */
|
|
893
|
-
/* @__PURE__ */
|
|
936
|
+
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ jsx13("span", { className: "ow-otp__separator", "aria-hidden": "true" }) : null,
|
|
937
|
+
/* @__PURE__ */ jsx13(
|
|
894
938
|
"input",
|
|
895
939
|
{
|
|
896
940
|
ref: (element) => {
|
|
@@ -918,7 +962,7 @@ function InputOTP({
|
|
|
918
962
|
}
|
|
919
963
|
)
|
|
920
964
|
] }, index)),
|
|
921
|
-
name ? /* @__PURE__ */
|
|
965
|
+
name ? /* @__PURE__ */ jsx13("input", { type: "hidden", name, value: code }) : null
|
|
922
966
|
] });
|
|
923
967
|
}
|
|
924
968
|
|
|
@@ -957,7 +1001,7 @@ function resizeTextArea(textArea) {
|
|
|
957
1001
|
}
|
|
958
1002
|
|
|
959
1003
|
// src/components/Textarea/Textarea.tsx
|
|
960
|
-
import { jsx as
|
|
1004
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
961
1005
|
var defaultAutoGrowMaxHeight = 180;
|
|
962
1006
|
function assignRef2(ref, element) {
|
|
963
1007
|
if (typeof ref === "function") ref(element);
|
|
@@ -991,7 +1035,7 @@ var Textarea = forwardRef7(function Textarea2({
|
|
|
991
1035
|
...style,
|
|
992
1036
|
maxHeight: typeof autoGrowMaxHeight === "number" ? `${autoGrowMaxHeight}px` : autoGrowMaxHeight
|
|
993
1037
|
} : style;
|
|
994
|
-
return /* @__PURE__ */
|
|
1038
|
+
return /* @__PURE__ */ jsx14(
|
|
995
1039
|
"textarea",
|
|
996
1040
|
{
|
|
997
1041
|
...textareaProps,
|
|
@@ -1156,7 +1200,7 @@ function usePresence(open, exitMs = exitDuration) {
|
|
|
1156
1200
|
}
|
|
1157
1201
|
|
|
1158
1202
|
// src/components/Select/Select.tsx
|
|
1159
|
-
import { Fragment as Fragment2, jsx as
|
|
1203
|
+
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1160
1204
|
var menuGap = 4;
|
|
1161
1205
|
var menuMaxHeight = 288;
|
|
1162
1206
|
var typeaheadResetMs = 600;
|
|
@@ -1345,10 +1389,10 @@ function Select({
|
|
|
1345
1389
|
onMouseDown: (event) => event.preventDefault(),
|
|
1346
1390
|
onClick: () => choose(index),
|
|
1347
1391
|
children: [
|
|
1348
|
-
/* @__PURE__ */
|
|
1392
|
+
/* @__PURE__ */ jsx15("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ jsx15(CheckIcon, { size: 14 }) : null }),
|
|
1349
1393
|
/* @__PURE__ */ jsxs10("span", { className: "ow-option__text", children: [
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
option.description ? /* @__PURE__ */
|
|
1394
|
+
/* @__PURE__ */ jsx15("span", { className: cx("ow-option__label", valueClassName), children: option.label }),
|
|
1395
|
+
option.description ? /* @__PURE__ */ jsx15("span", { className: "ow-option__description", children: option.description }) : null
|
|
1352
1396
|
] })
|
|
1353
1397
|
]
|
|
1354
1398
|
},
|
|
@@ -1380,8 +1424,8 @@ function Select({
|
|
|
1380
1424
|
if (!menuRef.current?.contains(event.relatedTarget)) close();
|
|
1381
1425
|
},
|
|
1382
1426
|
children: [
|
|
1383
|
-
/* @__PURE__ */
|
|
1384
|
-
/* @__PURE__ */
|
|
1427
|
+
/* @__PURE__ */ jsx15("span", { className: cx("ow-select__value", !selected && "ow-select__value--placeholder", valueClassName), children: selected ? selected.label : placeholder }),
|
|
1428
|
+
/* @__PURE__ */ jsx15(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
1385
1429
|
]
|
|
1386
1430
|
}
|
|
1387
1431
|
),
|
|
@@ -1401,11 +1445,11 @@ function Select({
|
|
|
1401
1445
|
children: [
|
|
1402
1446
|
options.map(
|
|
1403
1447
|
(item, groupIndex) => isGroup(item) ? /* @__PURE__ */ jsxs10("div", { role: "group", "aria-label": item.label, className: "ow-listbox__group", children: [
|
|
1404
|
-
/* @__PURE__ */
|
|
1448
|
+
/* @__PURE__ */ jsx15("div", { className: "ow-listbox__group-label", "aria-hidden": "true", children: item.label }),
|
|
1405
1449
|
item.options.map(renderOption)
|
|
1406
1450
|
] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
|
|
1407
1451
|
),
|
|
1408
|
-
flat.length === 0 ? /* @__PURE__ */
|
|
1452
|
+
flat.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "ow-listbox__empty", children: "No options" }) : null
|
|
1409
1453
|
]
|
|
1410
1454
|
}
|
|
1411
1455
|
) : null
|
|
@@ -1421,7 +1465,7 @@ import {
|
|
|
1421
1465
|
useRef as useRef8,
|
|
1422
1466
|
useState as useState7
|
|
1423
1467
|
} from "react";
|
|
1424
|
-
import { Fragment as Fragment3, jsx as
|
|
1468
|
+
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1425
1469
|
function assignRef3(ref, value) {
|
|
1426
1470
|
if (typeof ref === "function") ref(value);
|
|
1427
1471
|
else if (ref) ref.current = value;
|
|
@@ -1548,7 +1592,7 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1548
1592
|
className
|
|
1549
1593
|
),
|
|
1550
1594
|
children: [
|
|
1551
|
-
/* @__PURE__ */
|
|
1595
|
+
/* @__PURE__ */ jsx16(
|
|
1552
1596
|
"input",
|
|
1553
1597
|
{
|
|
1554
1598
|
ref: (element) => {
|
|
@@ -1579,7 +1623,7 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1579
1623
|
...aria
|
|
1580
1624
|
}
|
|
1581
1625
|
),
|
|
1582
|
-
/* @__PURE__ */
|
|
1626
|
+
/* @__PURE__ */ jsx16(
|
|
1583
1627
|
"button",
|
|
1584
1628
|
{
|
|
1585
1629
|
type: "button",
|
|
@@ -1595,7 +1639,7 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1595
1639
|
inputRef.current?.focus();
|
|
1596
1640
|
}
|
|
1597
1641
|
},
|
|
1598
|
-
children: /* @__PURE__ */
|
|
1642
|
+
children: /* @__PURE__ */ jsx16(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: cx("ow-select__chevron", isOpen && "ow-combobox__chevron--open") })
|
|
1599
1643
|
}
|
|
1600
1644
|
)
|
|
1601
1645
|
]
|
|
@@ -1632,17 +1676,17 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1632
1676
|
onMouseDown: (event) => event.preventDefault(),
|
|
1633
1677
|
onClick: () => choose(option),
|
|
1634
1678
|
children: [
|
|
1635
|
-
/* @__PURE__ */
|
|
1679
|
+
/* @__PURE__ */ jsx16("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ jsx16(CheckIcon, { size: 14 }) : null }),
|
|
1636
1680
|
/* @__PURE__ */ jsxs11("span", { className: "ow-option__text", children: [
|
|
1637
|
-
/* @__PURE__ */
|
|
1638
|
-
option.description ? /* @__PURE__ */
|
|
1681
|
+
/* @__PURE__ */ jsx16("span", { className: "ow-option__label", children: option.label }),
|
|
1682
|
+
option.description ? /* @__PURE__ */ jsx16("span", { className: "ow-option__description", children: option.description }) : null
|
|
1639
1683
|
] })
|
|
1640
1684
|
]
|
|
1641
1685
|
},
|
|
1642
1686
|
option.value
|
|
1643
1687
|
);
|
|
1644
1688
|
}),
|
|
1645
|
-
results.length === 0 ? /* @__PURE__ */
|
|
1689
|
+
results.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
|
|
1646
1690
|
]
|
|
1647
1691
|
}
|
|
1648
1692
|
) : null
|
|
@@ -1658,7 +1702,7 @@ import {
|
|
|
1658
1702
|
useId as useId4,
|
|
1659
1703
|
useRef as useRef9
|
|
1660
1704
|
} from "react";
|
|
1661
|
-
import { jsx as
|
|
1705
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1662
1706
|
var CheckboxGroupContext = createContext(null);
|
|
1663
1707
|
function assignRef4(ref, value) {
|
|
1664
1708
|
if (typeof ref === "function") ref(value);
|
|
@@ -1696,7 +1740,7 @@ var Checkbox = forwardRef9(function Checkbox2({
|
|
|
1696
1740
|
children === void 0 && className
|
|
1697
1741
|
),
|
|
1698
1742
|
children: [
|
|
1699
|
-
/* @__PURE__ */
|
|
1743
|
+
/* @__PURE__ */ jsx17(
|
|
1700
1744
|
"input",
|
|
1701
1745
|
{
|
|
1702
1746
|
ref: (element) => {
|
|
@@ -1717,7 +1761,7 @@ var Checkbox = forwardRef9(function Checkbox2({
|
|
|
1717
1761
|
...inputProps
|
|
1718
1762
|
}
|
|
1719
1763
|
),
|
|
1720
|
-
indeterminate ? /* @__PURE__ */
|
|
1764
|
+
indeterminate ? /* @__PURE__ */ jsx17(MinusIcon, { className: "ow-checkbox__check ow-checkbox__check--dash", size: size === "sm" ? 10 : 12, strokeWidth: 3 }) : /* @__PURE__ */ jsx17(CheckIcon, { className: "ow-checkbox__check", size: size === "sm" ? 10 : 12, strokeWidth: 3 })
|
|
1721
1765
|
]
|
|
1722
1766
|
}
|
|
1723
1767
|
);
|
|
@@ -1725,8 +1769,8 @@ var Checkbox = forwardRef9(function Checkbox2({
|
|
|
1725
1769
|
return /* @__PURE__ */ jsxs12("label", { className: cx("ow-check-label", (disabled || inGroup && group.disabled) && "ow-check-label--disabled", className), children: [
|
|
1726
1770
|
box,
|
|
1727
1771
|
/* @__PURE__ */ jsxs12("span", { className: "ow-check-label__text", children: [
|
|
1728
|
-
/* @__PURE__ */
|
|
1729
|
-
description ? /* @__PURE__ */
|
|
1772
|
+
/* @__PURE__ */ jsx17("span", { children }),
|
|
1773
|
+
description ? /* @__PURE__ */ jsx17("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1730
1774
|
] })
|
|
1731
1775
|
] });
|
|
1732
1776
|
});
|
|
@@ -1746,7 +1790,7 @@ function CheckboxGroup({
|
|
|
1746
1790
|
const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
|
|
1747
1791
|
const generatedName = useId4();
|
|
1748
1792
|
const errorId = useId4();
|
|
1749
|
-
return /* @__PURE__ */
|
|
1793
|
+
return /* @__PURE__ */ jsx17(
|
|
1750
1794
|
CheckboxGroupContext.Provider,
|
|
1751
1795
|
{
|
|
1752
1796
|
value: {
|
|
@@ -1757,7 +1801,7 @@ function CheckboxGroup({
|
|
|
1757
1801
|
setCurrent(checked ? [...current.filter((v) => v !== item), item] : current.filter((v) => v !== item));
|
|
1758
1802
|
}
|
|
1759
1803
|
},
|
|
1760
|
-
children: /* @__PURE__ */
|
|
1804
|
+
children: /* @__PURE__ */ jsx17(
|
|
1761
1805
|
Fieldset,
|
|
1762
1806
|
{
|
|
1763
1807
|
legend: label,
|
|
@@ -1782,10 +1826,10 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1782
1826
|
disabled,
|
|
1783
1827
|
"aria-describedby": [description ? descriptionId : "", error ? resolvedErrorId : ""].filter(Boolean).join(" ") || void 0,
|
|
1784
1828
|
children: [
|
|
1785
|
-
/* @__PURE__ */
|
|
1786
|
-
description ? /* @__PURE__ */
|
|
1787
|
-
/* @__PURE__ */
|
|
1788
|
-
error ? /* @__PURE__ */
|
|
1829
|
+
/* @__PURE__ */ jsx17("legend", { className: "ow-fieldset__legend", children: legend }),
|
|
1830
|
+
description ? /* @__PURE__ */ jsx17("p", { id: descriptionId, className: "ow-fieldset__description", children: description }) : null,
|
|
1831
|
+
/* @__PURE__ */ jsx17("div", { className: "ow-fieldset__content", children }),
|
|
1832
|
+
error ? /* @__PURE__ */ jsx17("p", { id: resolvedErrorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
1789
1833
|
]
|
|
1790
1834
|
}
|
|
1791
1835
|
);
|
|
@@ -1793,7 +1837,7 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1793
1837
|
|
|
1794
1838
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
1795
1839
|
import { createContext as createContext2, useContext as useContext2, useId as useId5 } from "react";
|
|
1796
|
-
import { jsx as
|
|
1840
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1797
1841
|
var RadioGroupContext = createContext2(null);
|
|
1798
1842
|
function RadioGroup({
|
|
1799
1843
|
label,
|
|
@@ -1811,7 +1855,7 @@ function RadioGroup({
|
|
|
1811
1855
|
}) {
|
|
1812
1856
|
const [current, select] = useControllableState(value, defaultValue, onChange);
|
|
1813
1857
|
const generatedName = useId5();
|
|
1814
|
-
return /* @__PURE__ */
|
|
1858
|
+
return /* @__PURE__ */ jsx18(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ jsx18(
|
|
1815
1859
|
Fieldset,
|
|
1816
1860
|
{
|
|
1817
1861
|
legend: label,
|
|
@@ -1833,7 +1877,7 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1833
1877
|
if (!group) throw new Error("Radio must be inside <RadioGroup>.");
|
|
1834
1878
|
const isDisabled = disabled || group.disabled;
|
|
1835
1879
|
return /* @__PURE__ */ jsxs13("label", { className: cx("ow-check-label", "ow-radio-label", isDisabled && "ow-check-label--disabled", className), children: [
|
|
1836
|
-
/* @__PURE__ */
|
|
1880
|
+
/* @__PURE__ */ jsx18("span", { className: "ow-radio", children: /* @__PURE__ */ jsx18(
|
|
1837
1881
|
"input",
|
|
1838
1882
|
{
|
|
1839
1883
|
type: "radio",
|
|
@@ -1848,17 +1892,17 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1848
1892
|
}
|
|
1849
1893
|
) }),
|
|
1850
1894
|
/* @__PURE__ */ jsxs13("span", { className: "ow-check-label__text", children: [
|
|
1851
|
-
/* @__PURE__ */
|
|
1852
|
-
description ? /* @__PURE__ */
|
|
1895
|
+
/* @__PURE__ */ jsx18("span", { children }),
|
|
1896
|
+
description ? /* @__PURE__ */ jsx18("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1853
1897
|
] })
|
|
1854
1898
|
] });
|
|
1855
1899
|
}
|
|
1856
1900
|
|
|
1857
1901
|
// src/components/Switch/Switch.tsx
|
|
1858
1902
|
import { forwardRef as forwardRef10 } from "react";
|
|
1859
|
-
import { jsx as
|
|
1903
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1860
1904
|
var Switch = forwardRef10(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
|
|
1861
|
-
return /* @__PURE__ */
|
|
1905
|
+
return /* @__PURE__ */ jsx19(
|
|
1862
1906
|
"button",
|
|
1863
1907
|
{
|
|
1864
1908
|
ref,
|
|
@@ -1870,14 +1914,14 @@ var Switch = forwardRef10(function Switch2({ checked, onChange, label, className
|
|
|
1870
1914
|
className: cx("ow-switch", checked && "ow-switch--on", className),
|
|
1871
1915
|
onClick: () => onChange(!checked),
|
|
1872
1916
|
...buttonProps,
|
|
1873
|
-
children: /* @__PURE__ */
|
|
1917
|
+
children: /* @__PURE__ */ jsx19("span", { className: "ow-switch__knob" })
|
|
1874
1918
|
}
|
|
1875
1919
|
);
|
|
1876
1920
|
});
|
|
1877
1921
|
|
|
1878
1922
|
// src/components/Slider/Slider.tsx
|
|
1879
1923
|
import { useId as useId6 } from "react";
|
|
1880
|
-
import { jsx as
|
|
1924
|
+
import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1881
1925
|
function Slider({
|
|
1882
1926
|
value,
|
|
1883
1927
|
defaultValue,
|
|
@@ -1903,7 +1947,7 @@ function Slider({
|
|
|
1903
1947
|
const end = () => onChangeEnd?.(current);
|
|
1904
1948
|
const input = (which) => {
|
|
1905
1949
|
const own = which === "low" ? low : high;
|
|
1906
|
-
return /* @__PURE__ */
|
|
1950
|
+
return /* @__PURE__ */ jsx20(
|
|
1907
1951
|
"input",
|
|
1908
1952
|
{
|
|
1909
1953
|
type: "range",
|
|
@@ -1930,11 +1974,11 @@ function Slider({
|
|
|
1930
1974
|
};
|
|
1931
1975
|
return /* @__PURE__ */ jsxs14("div", { className: cx("ow-slider", disabled && "ow-slider--disabled", className), children: [
|
|
1932
1976
|
label || showValue ? /* @__PURE__ */ jsxs14("div", { className: "ow-slider__header", children: [
|
|
1933
|
-
label ? /* @__PURE__ */
|
|
1934
|
-
showValue ? /* @__PURE__ */
|
|
1977
|
+
label ? /* @__PURE__ */ jsx20("span", { id: labelId, className: "ow-slider__label", children: label }) : /* @__PURE__ */ jsx20("span", {}),
|
|
1978
|
+
showValue ? /* @__PURE__ */ jsx20("output", { className: "ow-slider__value", "aria-hidden": "true", children: display }) : null
|
|
1935
1979
|
] }) : null,
|
|
1936
1980
|
/* @__PURE__ */ jsxs14("div", { className: "ow-slider__control", style, children: [
|
|
1937
|
-
/* @__PURE__ */
|
|
1981
|
+
/* @__PURE__ */ jsx20("span", { className: "ow-slider__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: "ow-slider__fill" }) }),
|
|
1938
1982
|
isRange ? input("low") : null,
|
|
1939
1983
|
input("high")
|
|
1940
1984
|
] })
|
|
@@ -1943,7 +1987,7 @@ function Slider({
|
|
|
1943
1987
|
|
|
1944
1988
|
// src/components/FileDropZone/FileDropZone.tsx
|
|
1945
1989
|
import { useId as useId7, useRef as useRef10, useState as useState8 } from "react";
|
|
1946
|
-
import { jsx as
|
|
1990
|
+
import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1947
1991
|
function matches(file, accept) {
|
|
1948
1992
|
if (!accept) return true;
|
|
1949
1993
|
return accept.split(",").some((rule) => {
|
|
@@ -2020,7 +2064,7 @@ function FileDropZone({
|
|
|
2020
2064
|
take(event.dataTransfer.files);
|
|
2021
2065
|
},
|
|
2022
2066
|
children: [
|
|
2023
|
-
/* @__PURE__ */
|
|
2067
|
+
/* @__PURE__ */ jsx21(
|
|
2024
2068
|
"input",
|
|
2025
2069
|
{
|
|
2026
2070
|
ref: inputRef,
|
|
@@ -2037,9 +2081,9 @@ function FileDropZone({
|
|
|
2037
2081
|
}
|
|
2038
2082
|
}
|
|
2039
2083
|
),
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2042
|
-
/* @__PURE__ */
|
|
2084
|
+
/* @__PURE__ */ jsx21("span", { className: "ow-dropzone__icon", children: icon2 ?? /* @__PURE__ */ jsx21(UploadIcon, { size: 20 }) }),
|
|
2085
|
+
/* @__PURE__ */ jsx21("span", { className: "ow-dropzone__label", children: isDragging ? "Drop to add" : label }),
|
|
2086
|
+
/* @__PURE__ */ jsx21("span", { id: hintId, className: "ow-dropzone__hint", "aria-live": "polite", children: error ?? problem ?? hint })
|
|
2043
2087
|
]
|
|
2044
2088
|
}
|
|
2045
2089
|
);
|
|
@@ -2084,7 +2128,7 @@ function formatDate(iso, locale, options) {
|
|
|
2084
2128
|
}
|
|
2085
2129
|
|
|
2086
2130
|
// src/components/Calendar/Calendar.tsx
|
|
2087
|
-
import { jsx as
|
|
2131
|
+
import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2088
2132
|
var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
|
|
2089
2133
|
const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
|
|
2090
2134
|
const today = todayISO();
|
|
@@ -2149,7 +2193,7 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2149
2193
|
const canGoForward = !max || nextMonth <= max;
|
|
2150
2194
|
return /* @__PURE__ */ jsxs16("div", { className: cx("ow-calendar", className), children: [
|
|
2151
2195
|
/* @__PURE__ */ jsxs16("div", { className: "ow-calendar__header", children: [
|
|
2152
|
-
/* @__PURE__ */
|
|
2196
|
+
/* @__PURE__ */ jsx22(
|
|
2153
2197
|
"button",
|
|
2154
2198
|
{
|
|
2155
2199
|
type: "button",
|
|
@@ -2157,10 +2201,10 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2157
2201
|
"aria-label": `Previous month, ${formatDate(prevMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2158
2202
|
disabled: !canGoBack,
|
|
2159
2203
|
onClick: () => setFocused(clampDate(addMonths(focused, -1), min, max)),
|
|
2160
|
-
children: /* @__PURE__ */
|
|
2204
|
+
children: /* @__PURE__ */ jsx22(ChevronLeftIcon, { size: 16 })
|
|
2161
2205
|
}
|
|
2162
2206
|
),
|
|
2163
|
-
/* @__PURE__ */
|
|
2207
|
+
/* @__PURE__ */ jsx22("h2", { className: "ow-calendar__title", "aria-live": "polite", children: /* @__PURE__ */ jsx22(
|
|
2164
2208
|
"span",
|
|
2165
2209
|
{
|
|
2166
2210
|
className: cx("ow-calendar__title-text", slide.current.direction && `ow-calendar__slide--${slide.current.direction}`),
|
|
@@ -2168,7 +2212,7 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2168
2212
|
},
|
|
2169
2213
|
monthIndex
|
|
2170
2214
|
) }),
|
|
2171
|
-
/* @__PURE__ */
|
|
2215
|
+
/* @__PURE__ */ jsx22(
|
|
2172
2216
|
"button",
|
|
2173
2217
|
{
|
|
2174
2218
|
type: "button",
|
|
@@ -2176,17 +2220,17 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2176
2220
|
"aria-label": `Next month, ${formatDate(nextMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2177
2221
|
disabled: !canGoForward,
|
|
2178
2222
|
onClick: () => setFocused(clampDate(addMonths(focused, 1), min, max)),
|
|
2179
|
-
children: /* @__PURE__ */
|
|
2223
|
+
children: /* @__PURE__ */ jsx22(ChevronRightIcon, { size: 16 })
|
|
2180
2224
|
}
|
|
2181
2225
|
)
|
|
2182
2226
|
] }),
|
|
2183
2227
|
/* @__PURE__ */ jsxs16("table", { ref: gridRef, role: "grid", className: "ow-calendar__grid", "aria-label": monthLabel, children: [
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2228
|
+
/* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsx22("tr", { children: weekdayNames.map((name) => /* @__PURE__ */ jsx22("th", { scope: "col", abbr: name.long, className: "ow-calendar__weekday", children: name.short.slice(0, 2) }, name.long)) }) }),
|
|
2229
|
+
/* @__PURE__ */ jsx22("tbody", { className: cx(slide.current.direction && `ow-calendar__slide--${slide.current.direction}`), children: weeks.map((week) => /* @__PURE__ */ jsx22("tr", { children: week.map((date) => {
|
|
2186
2230
|
const inMonth = parseISO(date).month === month;
|
|
2187
2231
|
const isSelected = date === selected;
|
|
2188
2232
|
const disabled = isDisabled(date);
|
|
2189
|
-
return /* @__PURE__ */
|
|
2233
|
+
return /* @__PURE__ */ jsx22("td", { role: "gridcell", "aria-selected": isSelected, className: "ow-calendar__cell", children: /* @__PURE__ */ jsx22(
|
|
2190
2234
|
"button",
|
|
2191
2235
|
{
|
|
2192
2236
|
type: "button",
|
|
@@ -2218,7 +2262,7 @@ function clampDate(date, min, max) {
|
|
|
2218
2262
|
|
|
2219
2263
|
// src/components/Calendar/DatePicker.tsx
|
|
2220
2264
|
import { forwardRef as forwardRef12, useCallback as useCallback4, useId as useId8, useRef as useRef12, useState as useState10 } from "react";
|
|
2221
|
-
import { Fragment as Fragment4, jsx as
|
|
2265
|
+
import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2222
2266
|
function assignRef5(ref, value) {
|
|
2223
2267
|
if (typeof ref === "function") ref(value);
|
|
2224
2268
|
else if (ref) ref.current = value;
|
|
@@ -2286,12 +2330,12 @@ var DatePicker = forwardRef12(function DatePicker2({
|
|
|
2286
2330
|
}
|
|
2287
2331
|
},
|
|
2288
2332
|
children: [
|
|
2289
|
-
/* @__PURE__ */
|
|
2290
|
-
/* @__PURE__ */
|
|
2333
|
+
/* @__PURE__ */ jsx23(CalendarIcon, { size: size === "sm" ? 14 : 16, className: "ow-date-picker__icon" }),
|
|
2334
|
+
/* @__PURE__ */ jsx23("span", { id: `${panelId}-value`, className: cx("ow-select__value", !date && "ow-select__value--placeholder"), children: label })
|
|
2291
2335
|
]
|
|
2292
2336
|
}
|
|
2293
2337
|
),
|
|
2294
|
-
mounted ? /* @__PURE__ */
|
|
2338
|
+
mounted ? /* @__PURE__ */ jsx23(
|
|
2295
2339
|
"div",
|
|
2296
2340
|
{
|
|
2297
2341
|
ref: panelRef,
|
|
@@ -2302,7 +2346,7 @@ var DatePicker = forwardRef12(function DatePicker2({
|
|
|
2302
2346
|
"aria-label": "Choose a date",
|
|
2303
2347
|
className: "ow-popover ow-floating ow-date-picker__panel",
|
|
2304
2348
|
style,
|
|
2305
|
-
children: /* @__PURE__ */
|
|
2349
|
+
children: /* @__PURE__ */ jsx23(
|
|
2306
2350
|
Calendar,
|
|
2307
2351
|
{
|
|
2308
2352
|
...calendarProps,
|
|
@@ -2321,13 +2365,13 @@ var DatePicker = forwardRef12(function DatePicker2({
|
|
|
2321
2365
|
});
|
|
2322
2366
|
|
|
2323
2367
|
// src/components/Alert/Alert.tsx
|
|
2324
|
-
import { jsx as
|
|
2368
|
+
import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2325
2369
|
var icons = {
|
|
2326
|
-
info: /* @__PURE__ */
|
|
2327
|
-
success: /* @__PURE__ */
|
|
2328
|
-
warning: /* @__PURE__ */
|
|
2329
|
-
danger: /* @__PURE__ */
|
|
2330
|
-
neutral: /* @__PURE__ */
|
|
2370
|
+
info: /* @__PURE__ */ jsx24(InfoIcon, { size: 16 }),
|
|
2371
|
+
success: /* @__PURE__ */ jsx24(CircleCheckIcon, { size: 16 }),
|
|
2372
|
+
warning: /* @__PURE__ */ jsx24(TriangleAlertIcon, { size: 16 }),
|
|
2373
|
+
danger: /* @__PURE__ */ jsx24(CircleAlertIcon, { size: 16 }),
|
|
2374
|
+
neutral: /* @__PURE__ */ jsx24(InfoIcon, { size: 16 })
|
|
2331
2375
|
};
|
|
2332
2376
|
function Alert({
|
|
2333
2377
|
variant = "info",
|
|
@@ -2347,30 +2391,30 @@ function Alert({
|
|
|
2347
2391
|
className: cx("ow-alert", `ow-alert--${variant}`, className),
|
|
2348
2392
|
...props,
|
|
2349
2393
|
children: [
|
|
2350
|
-
icon2 === false ? null : /* @__PURE__ */
|
|
2394
|
+
icon2 === false ? null : /* @__PURE__ */ jsx24("span", { className: "ow-alert__icon", children: icon2 ?? icons[variant] }),
|
|
2351
2395
|
/* @__PURE__ */ jsxs18("div", { className: "ow-alert__body", children: [
|
|
2352
|
-
title ? /* @__PURE__ */
|
|
2353
|
-
children ? /* @__PURE__ */
|
|
2354
|
-
actions ? /* @__PURE__ */
|
|
2396
|
+
title ? /* @__PURE__ */ jsx24("div", { className: "ow-alert__title", children: title }) : null,
|
|
2397
|
+
children ? /* @__PURE__ */ jsx24("div", { className: "ow-alert__description", children }) : null,
|
|
2398
|
+
actions ? /* @__PURE__ */ jsx24("div", { className: "ow-alert__actions", children: actions }) : null
|
|
2355
2399
|
] }),
|
|
2356
|
-
onClose ? /* @__PURE__ */
|
|
2400
|
+
onClose ? /* @__PURE__ */ jsx24(CloseButton, { size: "sm", label: "Dismiss", className: "ow-alert__close", onClick: onClose }) : null
|
|
2357
2401
|
]
|
|
2358
2402
|
}
|
|
2359
2403
|
);
|
|
2360
2404
|
}
|
|
2361
2405
|
|
|
2362
2406
|
// src/components/Badge/Badge.tsx
|
|
2363
|
-
import { jsx as
|
|
2407
|
+
import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2364
2408
|
function Badge({ children, className, icon: icon2, size = "md", variant = "neutral", ...spanProps }) {
|
|
2365
2409
|
return /* @__PURE__ */ jsxs19("span", { className: cx("ow-badge", `ow-badge--${size}`, `ow-badge--${variant}`, className), ...spanProps, children: [
|
|
2366
|
-
icon2 ? /* @__PURE__ */
|
|
2367
|
-
/* @__PURE__ */
|
|
2410
|
+
icon2 ? /* @__PURE__ */ jsx25("span", { className: "ow-badge__icon", children: icon2 }) : null,
|
|
2411
|
+
/* @__PURE__ */ jsx25("span", { children })
|
|
2368
2412
|
] });
|
|
2369
2413
|
}
|
|
2370
2414
|
|
|
2371
2415
|
// src/components/Progress/Progress.tsx
|
|
2372
2416
|
import { useId as useId9 } from "react";
|
|
2373
|
-
import { jsx as
|
|
2417
|
+
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2374
2418
|
function ProgressBar({
|
|
2375
2419
|
value,
|
|
2376
2420
|
max = 100,
|
|
@@ -2388,10 +2432,10 @@ function ProgressBar({
|
|
|
2388
2432
|
const text = valueLabel ?? `${Math.round(pct)}%`;
|
|
2389
2433
|
return /* @__PURE__ */ jsxs20("div", { className: cx("ow-progress", `ow-progress--${size}`, `ow-progress--${tone}`, className), children: [
|
|
2390
2434
|
label || showValue && !indeterminate ? /* @__PURE__ */ jsxs20("div", { className: "ow-progress__header", children: [
|
|
2391
|
-
label ? /* @__PURE__ */
|
|
2392
|
-
showValue && !indeterminate ? /* @__PURE__ */
|
|
2435
|
+
label ? /* @__PURE__ */ jsx26("span", { id: labelId, className: "ow-progress__label", children: label }) : /* @__PURE__ */ jsx26("span", {}),
|
|
2436
|
+
showValue && !indeterminate ? /* @__PURE__ */ jsx26("span", { className: "ow-progress__value", children: text }) : null
|
|
2393
2437
|
] }) : null,
|
|
2394
|
-
/* @__PURE__ */
|
|
2438
|
+
/* @__PURE__ */ jsx26(
|
|
2395
2439
|
"div",
|
|
2396
2440
|
{
|
|
2397
2441
|
role: "progressbar",
|
|
@@ -2402,7 +2446,7 @@ function ProgressBar({
|
|
|
2402
2446
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
2403
2447
|
"aria-valuetext": indeterminate ? void 0 : text,
|
|
2404
2448
|
className: cx("ow-progress__track", indeterminate && "ow-progress__track--indeterminate"),
|
|
2405
|
-
children: /* @__PURE__ */
|
|
2449
|
+
children: /* @__PURE__ */ jsx26("div", { className: "ow-progress__fill", style: indeterminate ? void 0 : { width: `${pct}%` } })
|
|
2406
2450
|
}
|
|
2407
2451
|
)
|
|
2408
2452
|
] });
|
|
@@ -2438,8 +2482,8 @@ function ProgressCircle({
|
|
|
2438
2482
|
style: { width: box, height: box },
|
|
2439
2483
|
children: [
|
|
2440
2484
|
/* @__PURE__ */ jsxs20("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
|
|
2441
|
-
/* @__PURE__ */
|
|
2442
|
-
/* @__PURE__ */
|
|
2485
|
+
/* @__PURE__ */ jsx26("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
|
|
2486
|
+
/* @__PURE__ */ jsx26(
|
|
2443
2487
|
"circle",
|
|
2444
2488
|
{
|
|
2445
2489
|
className: "ow-progress-circle__fill",
|
|
@@ -2466,9 +2510,9 @@ function ProgressCircle({
|
|
|
2466
2510
|
|
|
2467
2511
|
// src/components/Skeleton/Skeleton.tsx
|
|
2468
2512
|
import { useEffect as useEffect8, useState as useState11 } from "react";
|
|
2469
|
-
import { jsx as
|
|
2513
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2470
2514
|
function Skeleton({ width = "100%", height = 14, soft = false, shape = "bar", className }) {
|
|
2471
|
-
return /* @__PURE__ */
|
|
2515
|
+
return /* @__PURE__ */ jsx27(
|
|
2472
2516
|
"span",
|
|
2473
2517
|
{
|
|
2474
2518
|
className: cx("ow-skeleton", soft && "ow-skeleton--soft", shape === "block" && "ow-skeleton--block", className),
|
|
@@ -2484,26 +2528,26 @@ function SkeletonRows({ label = "Loading", rows = 4, delayMs = 150 }) {
|
|
|
2484
2528
|
const timer = window.setTimeout(() => setIsVisible(true), delayMs);
|
|
2485
2529
|
return () => window.clearTimeout(timer);
|
|
2486
2530
|
}, [delayMs]);
|
|
2487
|
-
return /* @__PURE__ */
|
|
2531
|
+
return /* @__PURE__ */ jsx27("div", { role: "status", "aria-label": label, "aria-busy": "true", children: isVisible ? /* @__PURE__ */ jsx27("div", { className: "ow-skeleton-rows", "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs21("div", { className: "ow-skeleton-rows__row", children: [
|
|
2488
2532
|
/* @__PURE__ */ jsxs21("div", { className: "ow-skeleton-rows__text", children: [
|
|
2489
|
-
/* @__PURE__ */
|
|
2490
|
-
/* @__PURE__ */
|
|
2533
|
+
/* @__PURE__ */ jsx27(Skeleton, { width: `${28 + index * 17 % 22}%`, height: 14 }),
|
|
2534
|
+
/* @__PURE__ */ jsx27(Skeleton, { width: `${46 + index * 23 % 30}%`, height: 12, soft: true })
|
|
2491
2535
|
] }),
|
|
2492
|
-
/* @__PURE__ */
|
|
2536
|
+
/* @__PURE__ */ jsx27(Skeleton, { width: 96, height: 32, soft: true, shape: "block" })
|
|
2493
2537
|
] }, index)) }) : null });
|
|
2494
2538
|
}
|
|
2495
2539
|
|
|
2496
2540
|
// src/components/Toast/Toast.tsx
|
|
2497
2541
|
import { useEffect as useEffect9, useRef as useRef13 } from "react";
|
|
2498
2542
|
import { Toaster as SonnerToaster, toast } from "sonner";
|
|
2499
|
-
import { jsx as
|
|
2543
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
2500
2544
|
var icons2 = {
|
|
2501
|
-
success: /* @__PURE__ */
|
|
2502
|
-
error: /* @__PURE__ */
|
|
2503
|
-
warning: /* @__PURE__ */
|
|
2504
|
-
info: /* @__PURE__ */
|
|
2505
|
-
loading: /* @__PURE__ */
|
|
2506
|
-
close: /* @__PURE__ */
|
|
2545
|
+
success: /* @__PURE__ */ jsx28(CircleCheckIcon, { size: 16 }),
|
|
2546
|
+
error: /* @__PURE__ */ jsx28(CircleAlertIcon, { size: 16 }),
|
|
2547
|
+
warning: /* @__PURE__ */ jsx28(TriangleAlertIcon, { size: 16 }),
|
|
2548
|
+
info: /* @__PURE__ */ jsx28(InfoIcon, { size: 16 }),
|
|
2549
|
+
loading: /* @__PURE__ */ jsx28(Spinner, { size: "sm", label: "" }),
|
|
2550
|
+
close: /* @__PURE__ */ jsx28(XIcon, { size: 12 })
|
|
2507
2551
|
};
|
|
2508
2552
|
function Toaster({
|
|
2509
2553
|
position = "bottom-center",
|
|
@@ -2534,7 +2578,7 @@ function Toaster({
|
|
|
2534
2578
|
observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ["open"] });
|
|
2535
2579
|
return () => observer.disconnect();
|
|
2536
2580
|
}, []);
|
|
2537
|
-
return /* @__PURE__ */
|
|
2581
|
+
return /* @__PURE__ */ jsx28("div", { ref: layerRef, ...manualPopover, className: "ow-toaster-layer", children: /* @__PURE__ */ jsx28(
|
|
2538
2582
|
SonnerToaster,
|
|
2539
2583
|
{
|
|
2540
2584
|
id,
|
|
@@ -2556,7 +2600,7 @@ function Toaster({
|
|
|
2556
2600
|
|
|
2557
2601
|
// src/components/Tooltip/Tooltip.tsx
|
|
2558
2602
|
import { useEffect as useEffect10, useRef as useRef14, useState as useState12 } from "react";
|
|
2559
|
-
import { jsx as
|
|
2603
|
+
import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2560
2604
|
var lastClosedAt = 0;
|
|
2561
2605
|
var warmWindow = 500;
|
|
2562
2606
|
function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
@@ -2603,7 +2647,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
|
2603
2647
|
onBlur: hide,
|
|
2604
2648
|
children: [
|
|
2605
2649
|
children,
|
|
2606
|
-
mounted ? /* @__PURE__ */
|
|
2650
|
+
mounted ? /* @__PURE__ */ jsx29("span", { ref: bubbleRef, ...manualPopover, "data-state": state, className: "ow-tooltip__bubble ow-floating", style, "aria-hidden": "true", children: label }) : null
|
|
2607
2651
|
]
|
|
2608
2652
|
}
|
|
2609
2653
|
);
|
|
@@ -2669,7 +2713,7 @@ function useModalDialog(open, onCancel) {
|
|
|
2669
2713
|
}
|
|
2670
2714
|
|
|
2671
2715
|
// src/components/Dialog/Dialog.tsx
|
|
2672
|
-
import { Fragment as Fragment5, jsx as
|
|
2716
|
+
import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2673
2717
|
function Dialog({
|
|
2674
2718
|
open,
|
|
2675
2719
|
onClose,
|
|
@@ -2690,13 +2734,13 @@ function Dialog({
|
|
|
2690
2734
|
if (!mounted) return null;
|
|
2691
2735
|
const body = /* @__PURE__ */ jsxs23(Fragment5, { children: [
|
|
2692
2736
|
/* @__PURE__ */ jsxs23("div", { className: "ow-dialog__header", children: [
|
|
2693
|
-
/* @__PURE__ */
|
|
2694
|
-
description ? /* @__PURE__ */
|
|
2737
|
+
/* @__PURE__ */ jsx30("h2", { id: titleId, className: "ow-dialog__title", children: title }),
|
|
2738
|
+
description ? /* @__PURE__ */ jsx30("div", { id: descriptionId, className: "ow-dialog__description", children: description }) : null
|
|
2695
2739
|
] }),
|
|
2696
2740
|
children,
|
|
2697
|
-
actions ? /* @__PURE__ */
|
|
2741
|
+
actions ? /* @__PURE__ */ jsx30("div", { className: "ow-dialog__actions", children: actions }) : null
|
|
2698
2742
|
] });
|
|
2699
|
-
return /* @__PURE__ */
|
|
2743
|
+
return /* @__PURE__ */ jsx30(
|
|
2700
2744
|
"dialog",
|
|
2701
2745
|
{
|
|
2702
2746
|
ref: dialogRef,
|
|
@@ -2704,7 +2748,7 @@ function Dialog({
|
|
|
2704
2748
|
style: { width: `min(${width}px, calc(100% - 32px))` },
|
|
2705
2749
|
"aria-labelledby": titleId,
|
|
2706
2750
|
"aria-describedby": description ? descriptionId : void 0,
|
|
2707
|
-
children: onSubmit ? /* @__PURE__ */
|
|
2751
|
+
children: onSubmit ? /* @__PURE__ */ jsx30(
|
|
2708
2752
|
"form",
|
|
2709
2753
|
{
|
|
2710
2754
|
className: "ow-dialog__body",
|
|
@@ -2714,7 +2758,7 @@ function Dialog({
|
|
|
2714
2758
|
},
|
|
2715
2759
|
children: body
|
|
2716
2760
|
}
|
|
2717
|
-
) : /* @__PURE__ */
|
|
2761
|
+
) : /* @__PURE__ */ jsx30("div", { className: "ow-dialog__body", children: body })
|
|
2718
2762
|
}
|
|
2719
2763
|
);
|
|
2720
2764
|
}
|
|
@@ -2754,7 +2798,7 @@ function ConfirmDialog({
|
|
|
2754
2798
|
width: 380,
|
|
2755
2799
|
className: "ow-dialog--confirm",
|
|
2756
2800
|
title: /* @__PURE__ */ jsxs23(Fragment5, { children: [
|
|
2757
|
-
destructive ? /* @__PURE__ */
|
|
2801
|
+
destructive ? /* @__PURE__ */ jsx30("span", { className: "ow-dialog__danger-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(TrashIcon, { size: 18 }) }) : null,
|
|
2758
2802
|
title
|
|
2759
2803
|
] }),
|
|
2760
2804
|
description,
|
|
@@ -2762,8 +2806,8 @@ function ConfirmDialog({
|
|
|
2762
2806
|
if (!confirmDisabled && !isWorking) void confirm();
|
|
2763
2807
|
},
|
|
2764
2808
|
actions: /* @__PURE__ */ jsxs23(Fragment5, { children: [
|
|
2765
|
-
/* @__PURE__ */
|
|
2766
|
-
/* @__PURE__ */
|
|
2809
|
+
/* @__PURE__ */ jsx30(Button, { type: "button", disabled: isWorking, autoFocus: true, onClick: onClose, children: "Cancel" }),
|
|
2810
|
+
/* @__PURE__ */ jsx30(
|
|
2767
2811
|
Button,
|
|
2768
2812
|
{
|
|
2769
2813
|
type: "submit",
|
|
@@ -2775,7 +2819,7 @@ function ConfirmDialog({
|
|
|
2775
2819
|
] }),
|
|
2776
2820
|
children: [
|
|
2777
2821
|
children,
|
|
2778
|
-
error ? /* @__PURE__ */
|
|
2822
|
+
error ? /* @__PURE__ */ jsx30("span", { role: "alert", className: "ow-dialog__error", children: error }) : null
|
|
2779
2823
|
]
|
|
2780
2824
|
}
|
|
2781
2825
|
);
|
|
@@ -2783,7 +2827,7 @@ function ConfirmDialog({
|
|
|
2783
2827
|
|
|
2784
2828
|
// src/components/Drawer/Drawer.tsx
|
|
2785
2829
|
import { useId as useId11 } from "react";
|
|
2786
|
-
import { jsx as
|
|
2830
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2787
2831
|
function Drawer({
|
|
2788
2832
|
open,
|
|
2789
2833
|
onClose,
|
|
@@ -2814,13 +2858,13 @@ function Drawer({
|
|
|
2814
2858
|
children: [
|
|
2815
2859
|
/* @__PURE__ */ jsxs24("header", { className: "ow-drawer__header", children: [
|
|
2816
2860
|
/* @__PURE__ */ jsxs24("div", { className: "ow-drawer__titles", children: [
|
|
2817
|
-
/* @__PURE__ */
|
|
2818
|
-
description ? /* @__PURE__ */
|
|
2861
|
+
/* @__PURE__ */ jsx31("h2", { id: titleId, className: "ow-drawer__title", children: title }),
|
|
2862
|
+
description ? /* @__PURE__ */ jsx31("p", { id: descriptionId, className: "ow-drawer__description", children: description }) : null
|
|
2819
2863
|
] }),
|
|
2820
|
-
dismissible ? /* @__PURE__ */
|
|
2864
|
+
dismissible ? /* @__PURE__ */ jsx31(CloseButton, { onClick: onClose }) : null
|
|
2821
2865
|
] }),
|
|
2822
|
-
/* @__PURE__ */
|
|
2823
|
-
footer ? /* @__PURE__ */
|
|
2866
|
+
/* @__PURE__ */ jsx31("div", { className: "ow-drawer__body", children }),
|
|
2867
|
+
footer ? /* @__PURE__ */ jsx31("footer", { className: "ow-drawer__footer", children: footer }) : null
|
|
2824
2868
|
]
|
|
2825
2869
|
}
|
|
2826
2870
|
);
|
|
@@ -2835,7 +2879,7 @@ import {
|
|
|
2835
2879
|
useId as useId12,
|
|
2836
2880
|
useRef as useRef16
|
|
2837
2881
|
} from "react";
|
|
2838
|
-
import { Fragment as Fragment6, jsx as
|
|
2882
|
+
import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2839
2883
|
function Popover({
|
|
2840
2884
|
trigger,
|
|
2841
2885
|
children,
|
|
@@ -2888,7 +2932,7 @@ function Popover({
|
|
|
2888
2932
|
}
|
|
2889
2933
|
}) : trigger;
|
|
2890
2934
|
return /* @__PURE__ */ jsxs25(Fragment6, { children: [
|
|
2891
|
-
/* @__PURE__ */
|
|
2935
|
+
/* @__PURE__ */ jsx32("span", { ref: anchorRef, className: "ow-popover-anchor", children: triggerElement }),
|
|
2892
2936
|
mounted ? /* @__PURE__ */ jsxs25(
|
|
2893
2937
|
"div",
|
|
2894
2938
|
{
|
|
@@ -2907,7 +2951,7 @@ function Popover({
|
|
|
2907
2951
|
if (next && !panelRef.current?.contains(next) && !anchorRef.current?.contains(next)) setOpen(false);
|
|
2908
2952
|
},
|
|
2909
2953
|
children: [
|
|
2910
|
-
title ? /* @__PURE__ */
|
|
2954
|
+
title ? /* @__PURE__ */ jsx32("div", { id: `${id}-title`, className: "ow-popover__title", children: title }) : null,
|
|
2911
2955
|
children
|
|
2912
2956
|
]
|
|
2913
2957
|
}
|
|
@@ -2983,7 +3027,7 @@ function useMenuKeyboard({
|
|
|
2983
3027
|
}
|
|
2984
3028
|
|
|
2985
3029
|
// src/components/Menu/Menu.tsx
|
|
2986
|
-
import { jsx as
|
|
3030
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2987
3031
|
var MenuContext = createContext3(null);
|
|
2988
3032
|
function Menu({ trigger, children, label, align = "start", above = false, width, defaultOpen = false, className }) {
|
|
2989
3033
|
const [open, setOpen] = useState15(defaultOpen);
|
|
@@ -3023,7 +3067,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3023
3067
|
}) : trigger;
|
|
3024
3068
|
return /* @__PURE__ */ jsxs26("span", { ref: rootRef, className: "ow-menu", children: [
|
|
3025
3069
|
triggerElement,
|
|
3026
|
-
mounted ? /* @__PURE__ */
|
|
3070
|
+
mounted ? /* @__PURE__ */ jsx33(
|
|
3027
3071
|
MenuContext.Provider,
|
|
3028
3072
|
{
|
|
3029
3073
|
value: {
|
|
@@ -3032,7 +3076,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3032
3076
|
triggerRef.current?.focus();
|
|
3033
3077
|
}
|
|
3034
3078
|
},
|
|
3035
|
-
children: /* @__PURE__ */
|
|
3079
|
+
children: /* @__PURE__ */ jsx33(
|
|
3036
3080
|
"div",
|
|
3037
3081
|
{
|
|
3038
3082
|
ref: menuRef,
|
|
@@ -3069,18 +3113,18 @@ var MenuItem = forwardRef13(function MenuItem2({ icon: icon2, onSelect, destruct
|
|
|
3069
3113
|
},
|
|
3070
3114
|
...buttonProps,
|
|
3071
3115
|
children: [
|
|
3072
|
-
icon2 ? /* @__PURE__ */
|
|
3073
|
-
/* @__PURE__ */
|
|
3074
|
-
shortcut ? /* @__PURE__ */
|
|
3116
|
+
icon2 ? /* @__PURE__ */ jsx33("span", { className: "ow-menu__icon", children: icon2 }) : null,
|
|
3117
|
+
/* @__PURE__ */ jsx33("span", { className: "ow-menu__label", children }),
|
|
3118
|
+
shortcut ? /* @__PURE__ */ jsx33("kbd", { className: "ow-menu__shortcut", children: shortcut }) : null
|
|
3075
3119
|
]
|
|
3076
3120
|
}
|
|
3077
3121
|
);
|
|
3078
3122
|
});
|
|
3079
3123
|
function MenuLabel({ children }) {
|
|
3080
|
-
return /* @__PURE__ */
|
|
3124
|
+
return /* @__PURE__ */ jsx33("div", { className: "ow-menu__group-label", role: "presentation", children });
|
|
3081
3125
|
}
|
|
3082
3126
|
function MenuSeparator() {
|
|
3083
|
-
return /* @__PURE__ */
|
|
3127
|
+
return /* @__PURE__ */ jsx33("div", { className: "ow-menu__separator", role: "separator" });
|
|
3084
3128
|
}
|
|
3085
3129
|
|
|
3086
3130
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
@@ -3121,7 +3165,7 @@ function filterCommands(commands, query) {
|
|
|
3121
3165
|
}
|
|
3122
3166
|
|
|
3123
3167
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
3124
|
-
import { jsx as
|
|
3168
|
+
import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3125
3169
|
function CommandPalette({ open, onClose, commands, placeholder = "Search commands\u2026" }) {
|
|
3126
3170
|
const { dialogRef, mounted } = useModalDialog(open, onClose);
|
|
3127
3171
|
const [query, setQuery] = useState16("");
|
|
@@ -3149,8 +3193,8 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3149
3193
|
}
|
|
3150
3194
|
return /* @__PURE__ */ jsxs27("dialog", { ref: dialogRef, className: "ow-dialog ow-palette", "aria-label": "Command palette", children: [
|
|
3151
3195
|
/* @__PURE__ */ jsxs27("div", { className: "ow-palette__search", children: [
|
|
3152
|
-
/* @__PURE__ */
|
|
3153
|
-
/* @__PURE__ */
|
|
3196
|
+
/* @__PURE__ */ jsx34(SearchIcon, { size: 16, className: "ow-palette__search-icon" }),
|
|
3197
|
+
/* @__PURE__ */ jsx34(
|
|
3154
3198
|
"input",
|
|
3155
3199
|
{
|
|
3156
3200
|
autoFocus: true,
|
|
@@ -3177,13 +3221,13 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3177
3221
|
}
|
|
3178
3222
|
}
|
|
3179
3223
|
),
|
|
3180
|
-
/* @__PURE__ */
|
|
3224
|
+
/* @__PURE__ */ jsx34("kbd", { className: "ow-palette__esc", children: "esc" })
|
|
3181
3225
|
] }),
|
|
3182
|
-
/* @__PURE__ */
|
|
3226
|
+
/* @__PURE__ */ jsx34("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "ow-palette__list", children: results.length ? results.map((command, index) => {
|
|
3183
3227
|
const showGroup = !query.trim() && command.group && command.group !== results[index - 1]?.group;
|
|
3184
3228
|
const isActive = command === active;
|
|
3185
3229
|
return /* @__PURE__ */ jsxs27("li", { role: "presentation", children: [
|
|
3186
|
-
showGroup ? /* @__PURE__ */
|
|
3230
|
+
showGroup ? /* @__PURE__ */ jsx34("div", { className: "ow-palette__group", children: command.group }) : null,
|
|
3187
3231
|
/* @__PURE__ */ jsxs27(
|
|
3188
3232
|
"div",
|
|
3189
3233
|
{
|
|
@@ -3199,11 +3243,11 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3199
3243
|
onMouseMove: () => setActiveIndex(index),
|
|
3200
3244
|
onClick: () => run(command),
|
|
3201
3245
|
children: [
|
|
3202
|
-
/* @__PURE__ */
|
|
3203
|
-
/* @__PURE__ */
|
|
3204
|
-
command.disabled && isActive ? /* @__PURE__ */
|
|
3205
|
-
command.shortcut ? /* @__PURE__ */
|
|
3206
|
-
isActive && !command.disabled ? /* @__PURE__ */
|
|
3246
|
+
/* @__PURE__ */ jsx34("span", { className: "ow-palette__icon", "aria-hidden": "true", children: command.icon }),
|
|
3247
|
+
/* @__PURE__ */ jsx34("span", { className: "ow-palette__title", children: command.title }),
|
|
3248
|
+
command.disabled && isActive ? /* @__PURE__ */ jsx34("span", { className: "ow-palette__hint", children: command.disabled }) : command.hint ? /* @__PURE__ */ jsx34("span", { className: "ow-palette__hint", children: command.hint }) : null,
|
|
3249
|
+
command.shortcut ? /* @__PURE__ */ jsx34("kbd", { className: "ow-palette__shortcut", children: command.shortcut }) : null,
|
|
3250
|
+
isActive && !command.disabled ? /* @__PURE__ */ jsx34(CornerDownLeftIcon, { size: 13, className: "ow-palette__enter" }) : null
|
|
3207
3251
|
]
|
|
3208
3252
|
}
|
|
3209
3253
|
)
|
|
@@ -3224,7 +3268,7 @@ import {
|
|
|
3224
3268
|
useLayoutEffect as useLayoutEffect4,
|
|
3225
3269
|
useRef as useRef19
|
|
3226
3270
|
} from "react";
|
|
3227
|
-
import { jsx as
|
|
3271
|
+
import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3228
3272
|
var TabsContext = createContext4(null);
|
|
3229
3273
|
function useTabs(component) {
|
|
3230
3274
|
const context = useContext4(TabsContext);
|
|
@@ -3235,7 +3279,7 @@ var idPart = (value) => value.replace(/[^\w-]/g, "_");
|
|
|
3235
3279
|
function Tabs({ value, defaultValue = "", onValueChange, variant = "segmented", className, children, ...props }) {
|
|
3236
3280
|
const [current, select] = useControllableState(value, defaultValue, onValueChange);
|
|
3237
3281
|
const baseId = useId15();
|
|
3238
|
-
return /* @__PURE__ */
|
|
3282
|
+
return /* @__PURE__ */ jsx35(TabsContext.Provider, { value: { value: current, select, baseId, variant }, children: /* @__PURE__ */ jsx35("div", { className: cx("ow-tabs", `ow-tabs--${variant}`, className), ...props, children }) });
|
|
3239
3283
|
}
|
|
3240
3284
|
function TabList({ className, onKeyDown, children, ...props }) {
|
|
3241
3285
|
const { value, select } = useTabs("TabList");
|
|
@@ -3261,7 +3305,7 @@ function TabList({ className, onKeyDown, children, ...props }) {
|
|
|
3261
3305
|
}
|
|
3262
3306
|
return /* @__PURE__ */ jsxs28("div", { ref: listRef, role: "tablist", className: cx("ow-tabs__list", className), onKeyDown: handleKeyDown, ...props, children: [
|
|
3263
3307
|
children,
|
|
3264
|
-
/* @__PURE__ */
|
|
3308
|
+
/* @__PURE__ */ jsx35("span", { className: "ow-indicator", "aria-hidden": "true" })
|
|
3265
3309
|
] });
|
|
3266
3310
|
}
|
|
3267
3311
|
function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
@@ -3284,7 +3328,7 @@ function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
|
3284
3328
|
},
|
|
3285
3329
|
...props,
|
|
3286
3330
|
children: [
|
|
3287
|
-
icon2 ? /* @__PURE__ */
|
|
3331
|
+
icon2 ? /* @__PURE__ */ jsx35("span", { className: "ow-tab__icon", children: icon2 }) : null,
|
|
3288
3332
|
children
|
|
3289
3333
|
]
|
|
3290
3334
|
}
|
|
@@ -3294,7 +3338,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
|
|
|
3294
3338
|
const { value: current, baseId } = useTabs("TabPanel");
|
|
3295
3339
|
const selected = current === value;
|
|
3296
3340
|
if (!selected && !keepMounted) return null;
|
|
3297
|
-
return /* @__PURE__ */
|
|
3341
|
+
return /* @__PURE__ */ jsx35(
|
|
3298
3342
|
"div",
|
|
3299
3343
|
{
|
|
3300
3344
|
role: "tabpanel",
|
|
@@ -3317,7 +3361,7 @@ import {
|
|
|
3317
3361
|
useId as useId16,
|
|
3318
3362
|
useRef as useRef20
|
|
3319
3363
|
} from "react";
|
|
3320
|
-
import { jsx as
|
|
3364
|
+
import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3321
3365
|
function DisclosureView({
|
|
3322
3366
|
open,
|
|
3323
3367
|
onToggle,
|
|
@@ -3339,7 +3383,7 @@ function DisclosureView({
|
|
|
3339
3383
|
}, [open]);
|
|
3340
3384
|
return /* @__PURE__ */ jsxs29("div", { className: cx(item ? "ow-accordion__item" : "ow-disclosure", className), "data-open": open, children: [
|
|
3341
3385
|
/* @__PURE__ */ jsxs29("div", { className: "ow-disclosure__header", children: [
|
|
3342
|
-
/* @__PURE__ */
|
|
3386
|
+
/* @__PURE__ */ jsx36(Heading, { className: "ow-disclosure__heading", children: /* @__PURE__ */ jsxs29(
|
|
3343
3387
|
"button",
|
|
3344
3388
|
{
|
|
3345
3389
|
type: "button",
|
|
@@ -3351,18 +3395,18 @@ function DisclosureView({
|
|
|
3351
3395
|
"data-accordion-trigger": item ? "" : void 0,
|
|
3352
3396
|
onClick: onToggle,
|
|
3353
3397
|
children: [
|
|
3354
|
-
/* @__PURE__ */
|
|
3355
|
-
icon2 ? /* @__PURE__ */
|
|
3398
|
+
/* @__PURE__ */ jsx36(ChevronRightIcon, { size: 14, className: "ow-disclosure__chevron" }),
|
|
3399
|
+
icon2 ? /* @__PURE__ */ jsx36("span", { className: "ow-disclosure__icon", children: icon2 }) : null,
|
|
3356
3400
|
/* @__PURE__ */ jsxs29("span", { className: "ow-disclosure__titles", children: [
|
|
3357
|
-
/* @__PURE__ */
|
|
3358
|
-
subtitle ? /* @__PURE__ */
|
|
3401
|
+
/* @__PURE__ */ jsx36("span", { className: "ow-disclosure__title", children: title }),
|
|
3402
|
+
subtitle ? /* @__PURE__ */ jsx36("span", { className: "ow-disclosure__subtitle", children: subtitle }) : null
|
|
3359
3403
|
] })
|
|
3360
3404
|
]
|
|
3361
3405
|
}
|
|
3362
3406
|
) }),
|
|
3363
|
-
actions ? /* @__PURE__ */
|
|
3407
|
+
actions ? /* @__PURE__ */ jsx36("div", { className: "ow-disclosure__actions", children: actions }) : null
|
|
3364
3408
|
] }),
|
|
3365
|
-
/* @__PURE__ */
|
|
3409
|
+
/* @__PURE__ */ jsx36(
|
|
3366
3410
|
"div",
|
|
3367
3411
|
{
|
|
3368
3412
|
ref: panelRef,
|
|
@@ -3370,7 +3414,7 @@ function DisclosureView({
|
|
|
3370
3414
|
role: "region",
|
|
3371
3415
|
"aria-labelledby": `${id}-trigger`,
|
|
3372
3416
|
className: "ow-disclosure__panel",
|
|
3373
|
-
children: /* @__PURE__ */
|
|
3417
|
+
children: /* @__PURE__ */ jsx36("div", { className: "ow-disclosure__clip", children: /* @__PURE__ */ jsx36("div", { className: "ow-disclosure__content", children }) })
|
|
3374
3418
|
}
|
|
3375
3419
|
)
|
|
3376
3420
|
] });
|
|
@@ -3385,7 +3429,7 @@ function Disclosure({
|
|
|
3385
3429
|
...props
|
|
3386
3430
|
}) {
|
|
3387
3431
|
const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
|
|
3388
|
-
return /* @__PURE__ */
|
|
3432
|
+
return /* @__PURE__ */ jsx36(
|
|
3389
3433
|
DisclosureView,
|
|
3390
3434
|
{
|
|
3391
3435
|
...props,
|
|
@@ -3427,12 +3471,12 @@ function Accordion({
|
|
|
3427
3471
|
event.preventDefault();
|
|
3428
3472
|
triggers[(moves[event.key] + triggers.length) % triggers.length]?.focus();
|
|
3429
3473
|
}
|
|
3430
|
-
return /* @__PURE__ */
|
|
3474
|
+
return /* @__PURE__ */ jsx36(AccordionContext.Provider, { value: { isOpen: (item) => openValues.includes(item), toggle, headingLevel }, children: /* @__PURE__ */ jsx36("div", { className: cx("ow-accordion", `ow-accordion--${variant}`, className), onKeyDown: handleKeyDown, ...props, children }) });
|
|
3431
3475
|
}
|
|
3432
3476
|
function AccordionItem({ value, ...props }) {
|
|
3433
3477
|
const context = useContext5(AccordionContext);
|
|
3434
3478
|
if (!context) throw new Error("AccordionItem must be inside <Accordion>.");
|
|
3435
|
-
return /* @__PURE__ */
|
|
3479
|
+
return /* @__PURE__ */ jsx36(
|
|
3436
3480
|
DisclosureView,
|
|
3437
3481
|
{
|
|
3438
3482
|
...props,
|
|
@@ -3446,13 +3490,13 @@ function AccordionItem({ value, ...props }) {
|
|
|
3446
3490
|
|
|
3447
3491
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
3448
3492
|
import { forwardRef as forwardRef14 } from "react";
|
|
3449
|
-
import { Fragment as Fragment7, jsx as
|
|
3493
|
+
import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3450
3494
|
function Breadcrumbs({ items: items2, separator = "chevron", label = "Breadcrumb", className }) {
|
|
3451
|
-
return /* @__PURE__ */
|
|
3495
|
+
return /* @__PURE__ */ jsx37("nav", { "aria-label": label, className: cx("ow-breadcrumbs", className), children: /* @__PURE__ */ jsx37("ol", { className: "ow-breadcrumbs__list", children: items2.map((item, index) => {
|
|
3452
3496
|
const isLast = index === items2.length - 1;
|
|
3453
3497
|
return /* @__PURE__ */ jsxs30("li", { className: "ow-breadcrumbs__item", children: [
|
|
3454
|
-
isLast ? /* @__PURE__ */
|
|
3455
|
-
isLast ? null : /* @__PURE__ */
|
|
3498
|
+
isLast ? /* @__PURE__ */ jsx37("span", { className: "ow-breadcrumbs__current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx37("a", { className: "ow-breadcrumbs__link", href: item.href, onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx37("button", { type: "button", className: "ow-breadcrumbs__link", onClick: item.onClick, children: item.label }),
|
|
3499
|
+
isLast ? null : /* @__PURE__ */ jsx37("span", { className: "ow-breadcrumbs__separator", "aria-hidden": "true", children: separator === "slash" ? "/" : /* @__PURE__ */ jsx37(ChevronRightIcon, { size: 14 }) })
|
|
3456
3500
|
] }, index);
|
|
3457
3501
|
}) }) });
|
|
3458
3502
|
}
|
|
@@ -3471,8 +3515,8 @@ var Link = forwardRef14(function Link2({ variant = "default", external = false,
|
|
|
3471
3515
|
children: [
|
|
3472
3516
|
children,
|
|
3473
3517
|
external ? /* @__PURE__ */ jsxs30(Fragment7, { children: [
|
|
3474
|
-
/* @__PURE__ */
|
|
3475
|
-
/* @__PURE__ */
|
|
3518
|
+
/* @__PURE__ */ jsx37(ArrowUpRightIcon, { size: 13, className: "ow-link__external" }),
|
|
3519
|
+
/* @__PURE__ */ jsx37("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
|
|
3476
3520
|
] }) : null
|
|
3477
3521
|
]
|
|
3478
3522
|
}
|
|
@@ -3480,7 +3524,7 @@ var Link = forwardRef14(function Link2({ variant = "default", external = false,
|
|
|
3480
3524
|
});
|
|
3481
3525
|
|
|
3482
3526
|
// src/components/Pagination/Pagination.tsx
|
|
3483
|
-
import { jsx as
|
|
3527
|
+
import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3484
3528
|
function paginationItems(page, pageCount, siblingCount = 1, boundaryCount = 1) {
|
|
3485
3529
|
const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
|
|
3486
3530
|
const startPages = range(1, Math.min(boundaryCount, pageCount));
|
|
@@ -3513,8 +3557,8 @@ function Pagination({
|
|
|
3513
3557
|
}) {
|
|
3514
3558
|
const items2 = paginationItems(page, pageCount, siblingCount, boundaryCount);
|
|
3515
3559
|
const go = (next) => onPageChange(Math.min(Math.max(1, next), pageCount));
|
|
3516
|
-
return /* @__PURE__ */
|
|
3517
|
-
/* @__PURE__ */
|
|
3560
|
+
return /* @__PURE__ */ jsx38("nav", { "aria-label": label, className: cx("ow-pagination", `ow-pagination--${size}`, className), children: /* @__PURE__ */ jsxs31("ul", { className: "ow-pagination__list", children: [
|
|
3561
|
+
/* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
|
|
3518
3562
|
"button",
|
|
3519
3563
|
{
|
|
3520
3564
|
type: "button",
|
|
@@ -3522,11 +3566,11 @@ function Pagination({
|
|
|
3522
3566
|
"aria-label": "Previous page",
|
|
3523
3567
|
disabled: page <= 1,
|
|
3524
3568
|
onClick: () => go(page - 1),
|
|
3525
|
-
children: /* @__PURE__ */
|
|
3569
|
+
children: /* @__PURE__ */ jsx38(ChevronLeftIcon, { size: 16 })
|
|
3526
3570
|
}
|
|
3527
3571
|
) }),
|
|
3528
3572
|
items2.map(
|
|
3529
|
-
(item) => typeof item === "number" ? /* @__PURE__ */
|
|
3573
|
+
(item) => typeof item === "number" ? /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
|
|
3530
3574
|
"button",
|
|
3531
3575
|
{
|
|
3532
3576
|
type: "button",
|
|
@@ -3536,9 +3580,9 @@ function Pagination({
|
|
|
3536
3580
|
onClick: () => go(item),
|
|
3537
3581
|
children: item
|
|
3538
3582
|
}
|
|
3539
|
-
) }, item) : /* @__PURE__ */
|
|
3583
|
+
) }, item) : /* @__PURE__ */ jsx38("li", { className: "ow-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
|
|
3540
3584
|
),
|
|
3541
|
-
/* @__PURE__ */
|
|
3585
|
+
/* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
|
|
3542
3586
|
"button",
|
|
3543
3587
|
{
|
|
3544
3588
|
type: "button",
|
|
@@ -3546,7 +3590,7 @@ function Pagination({
|
|
|
3546
3590
|
"aria-label": "Next page",
|
|
3547
3591
|
disabled: page >= pageCount,
|
|
3548
3592
|
onClick: () => go(page + 1),
|
|
3549
|
-
children: /* @__PURE__ */
|
|
3593
|
+
children: /* @__PURE__ */ jsx38(ChevronRightIcon, { size: 16 })
|
|
3550
3594
|
}
|
|
3551
3595
|
) })
|
|
3552
3596
|
] }) });
|
|
@@ -3554,12 +3598,12 @@ function Pagination({
|
|
|
3554
3598
|
|
|
3555
3599
|
// src/components/Steps/Steps.tsx
|
|
3556
3600
|
import { useId as useId17 } from "react";
|
|
3557
|
-
import { jsx as
|
|
3601
|
+
import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3558
3602
|
function Steps({ items: items2, current = 0, orientation = "vertical", title, label = "Steps", className }) {
|
|
3559
3603
|
const statuses = items2.map((item, index) => item.status ?? (index < current ? "done" : index === current ? "current" : "upcoming"));
|
|
3560
3604
|
const doneCount = statuses.filter((status) => status === "done").length;
|
|
3561
3605
|
const headingId = useId17();
|
|
3562
|
-
const list = /* @__PURE__ */
|
|
3606
|
+
const list = /* @__PURE__ */ jsx39("ol", { className: "ow-steps__list", children: items2.map((item, index) => {
|
|
3563
3607
|
const status = statuses[index];
|
|
3564
3608
|
return /* @__PURE__ */ jsxs32(
|
|
3565
3609
|
"li",
|
|
@@ -3567,15 +3611,15 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3567
3611
|
className: cx("ow-steps__item", `ow-steps__item--${status}`),
|
|
3568
3612
|
"aria-current": status === "current" ? "step" : void 0,
|
|
3569
3613
|
children: [
|
|
3570
|
-
/* @__PURE__ */
|
|
3614
|
+
/* @__PURE__ */ jsx39("span", { className: "ow-steps__marker", children: status === "done" ? /* @__PURE__ */ jsx39(CheckIcon, { size: 14, strokeWidth: 3 }) : index + 1 }),
|
|
3571
3615
|
/* @__PURE__ */ jsxs32("span", { className: "ow-steps__text", children: [
|
|
3572
3616
|
/* @__PURE__ */ jsxs32("span", { className: "ow-steps__title", children: [
|
|
3573
|
-
status === "done" ? /* @__PURE__ */
|
|
3617
|
+
status === "done" ? /* @__PURE__ */ jsx39("span", { className: "ow-visually-hidden", children: "Done: " }) : null,
|
|
3574
3618
|
item.title
|
|
3575
3619
|
] }),
|
|
3576
|
-
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */
|
|
3620
|
+
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ jsx39("span", { className: "ow-steps__description", children: item.description }) : null
|
|
3577
3621
|
] }),
|
|
3578
|
-
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */
|
|
3622
|
+
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ jsx39("span", { className: "ow-steps__action", children: item.action }) : null
|
|
3579
3623
|
]
|
|
3580
3624
|
},
|
|
3581
3625
|
index
|
|
@@ -3589,7 +3633,7 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3589
3633
|
"aria-label": title && orientation === "vertical" ? void 0 : label,
|
|
3590
3634
|
children: [
|
|
3591
3635
|
title && orientation === "vertical" ? /* @__PURE__ */ jsxs32("div", { className: "ow-steps__header", children: [
|
|
3592
|
-
/* @__PURE__ */
|
|
3636
|
+
/* @__PURE__ */ jsx39("h3", { id: headingId, className: "ow-steps__heading", children: title }),
|
|
3593
3637
|
/* @__PURE__ */ jsxs32("span", { className: "ow-steps__count", children: [
|
|
3594
3638
|
doneCount,
|
|
3595
3639
|
" of ",
|
|
@@ -3605,25 +3649,25 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3605
3649
|
|
|
3606
3650
|
// src/components/NavList/NavList.tsx
|
|
3607
3651
|
import { forwardRef as forwardRef15 } from "react";
|
|
3608
|
-
import { Fragment as Fragment8, jsx as
|
|
3652
|
+
import { Fragment as Fragment8, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3609
3653
|
function NavList({ label, heading, orientation = "vertical", children, className }) {
|
|
3610
3654
|
return /* @__PURE__ */ jsxs33("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
|
|
3611
|
-
heading && orientation === "vertical" ? /* @__PURE__ */
|
|
3655
|
+
heading && orientation === "vertical" ? /* @__PURE__ */ jsx40("span", { className: "ow-nav__heading", children: heading }) : null,
|
|
3612
3656
|
children
|
|
3613
3657
|
] });
|
|
3614
3658
|
}
|
|
3615
3659
|
var NavItem = forwardRef15(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
|
|
3616
3660
|
const content = /* @__PURE__ */ jsxs33(Fragment8, { children: [
|
|
3617
|
-
icon2 ? /* @__PURE__ */
|
|
3618
|
-
/* @__PURE__ */
|
|
3619
|
-
end !== void 0 ? /* @__PURE__ */
|
|
3661
|
+
icon2 ? /* @__PURE__ */ jsx40("span", { className: "ow-nav__icon", children: icon2 }) : null,
|
|
3662
|
+
/* @__PURE__ */ jsx40("span", { className: "ow-nav__label", children }),
|
|
3663
|
+
end !== void 0 ? /* @__PURE__ */ jsx40("span", { className: "ow-nav__end", children: end }) : null
|
|
3620
3664
|
] });
|
|
3621
3665
|
const shared = {
|
|
3622
3666
|
"aria-current": active ? "page" : void 0,
|
|
3623
3667
|
className: cx("ow-nav__item", active && "ow-nav__item--active", className)
|
|
3624
3668
|
};
|
|
3625
3669
|
if (href !== void 0) {
|
|
3626
|
-
return /* @__PURE__ */
|
|
3670
|
+
return /* @__PURE__ */ jsx40(
|
|
3627
3671
|
"a",
|
|
3628
3672
|
{
|
|
3629
3673
|
ref,
|
|
@@ -3634,12 +3678,12 @@ var NavItem = forwardRef15(function NavItem2({ icon: icon2, active = false, clas
|
|
|
3634
3678
|
}
|
|
3635
3679
|
);
|
|
3636
3680
|
}
|
|
3637
|
-
return /* @__PURE__ */
|
|
3681
|
+
return /* @__PURE__ */ jsx40("button", { ref, type, ...shared, ...buttonProps, children: content });
|
|
3638
3682
|
});
|
|
3639
3683
|
|
|
3640
3684
|
// src/components/Table/Table.tsx
|
|
3641
3685
|
import { useMemo as useMemo5 } from "react";
|
|
3642
|
-
import { jsx as
|
|
3686
|
+
import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3643
3687
|
function compare(a, b) {
|
|
3644
3688
|
if (typeof a === "number" && typeof b === "number") return a - b;
|
|
3645
3689
|
return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
|
|
@@ -3690,16 +3734,16 @@ function Table({
|
|
|
3690
3734
|
);
|
|
3691
3735
|
}
|
|
3692
3736
|
const selectable = selectionMode === "multiple";
|
|
3693
|
-
return /* @__PURE__ */
|
|
3737
|
+
return /* @__PURE__ */ jsx41(
|
|
3694
3738
|
"div",
|
|
3695
3739
|
{
|
|
3696
3740
|
className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
|
|
3697
3741
|
style: maxHeight ? { maxHeight } : void 0,
|
|
3698
3742
|
tabIndex: maxHeight ? 0 : void 0,
|
|
3699
3743
|
children: /* @__PURE__ */ jsxs34("table", { className: cx("ow-table", `ow-table--${density}`), children: [
|
|
3700
|
-
caption ? /* @__PURE__ */
|
|
3701
|
-
/* @__PURE__ */
|
|
3702
|
-
selectable ? /* @__PURE__ */
|
|
3744
|
+
caption ? /* @__PURE__ */ jsx41("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
|
|
3745
|
+
/* @__PURE__ */ jsx41("thead", { children: /* @__PURE__ */ jsxs34("tr", { children: [
|
|
3746
|
+
selectable ? /* @__PURE__ */ jsx41("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ jsx41(
|
|
3703
3747
|
Checkbox,
|
|
3704
3748
|
{
|
|
3705
3749
|
size: "sm",
|
|
@@ -3713,7 +3757,7 @@ function Table({
|
|
|
3713
3757
|
) }) : null,
|
|
3714
3758
|
columns.map((column) => {
|
|
3715
3759
|
const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
|
|
3716
|
-
return /* @__PURE__ */
|
|
3760
|
+
return /* @__PURE__ */ jsx41(
|
|
3717
3761
|
"th",
|
|
3718
3762
|
{
|
|
3719
3763
|
scope: "col",
|
|
@@ -3722,18 +3766,18 @@ function Table({
|
|
|
3722
3766
|
style: column.width !== void 0 ? { width: column.width } : void 0,
|
|
3723
3767
|
children: column.sortable ? /* @__PURE__ */ jsxs34("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
|
|
3724
3768
|
column.header,
|
|
3725
|
-
/* @__PURE__ */
|
|
3769
|
+
/* @__PURE__ */ jsx41("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ jsx41(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ jsx41(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ jsx41(ChevronsUpDownIcon, { size: 12 }) })
|
|
3726
3770
|
] }) : column.header
|
|
3727
3771
|
},
|
|
3728
3772
|
column.key
|
|
3729
3773
|
);
|
|
3730
3774
|
})
|
|
3731
3775
|
] }) }),
|
|
3732
|
-
/* @__PURE__ */
|
|
3776
|
+
/* @__PURE__ */ jsx41("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row, index) => {
|
|
3733
3777
|
const key = keyOf(row);
|
|
3734
3778
|
const isSelected = selected.includes(key);
|
|
3735
3779
|
return /* @__PURE__ */ jsxs34("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
|
|
3736
|
-
selectable ? /* @__PURE__ */
|
|
3780
|
+
selectable ? /* @__PURE__ */ jsx41("td", { className: "ow-table__select", children: /* @__PURE__ */ jsx41(
|
|
3737
3781
|
Checkbox,
|
|
3738
3782
|
{
|
|
3739
3783
|
size: "sm",
|
|
@@ -3744,7 +3788,7 @@ function Table({
|
|
|
3744
3788
|
)
|
|
3745
3789
|
}
|
|
3746
3790
|
) }) : null,
|
|
3747
|
-
columns.map((column) => /* @__PURE__ */
|
|
3791
|
+
columns.map((column) => /* @__PURE__ */ jsx41("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
|
|
3748
3792
|
] }, key);
|
|
3749
3793
|
}) })
|
|
3750
3794
|
] })
|
|
@@ -3753,7 +3797,7 @@ function Table({
|
|
|
3753
3797
|
}
|
|
3754
3798
|
|
|
3755
3799
|
// src/components/Stat/Stat.tsx
|
|
3756
|
-
import { jsx as
|
|
3800
|
+
import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3757
3801
|
function Sparkline({ values }) {
|
|
3758
3802
|
const max = Math.max(...values);
|
|
3759
3803
|
const min = Math.min(...values);
|
|
@@ -3767,10 +3811,10 @@ function Sparkline({ values }) {
|
|
|
3767
3811
|
const [lastX, lastY] = points[points.length - 1];
|
|
3768
3812
|
return /* @__PURE__ */ jsxs35("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
|
|
3769
3813
|
/* @__PURE__ */ jsxs35("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
|
|
3770
|
-
/* @__PURE__ */
|
|
3771
|
-
/* @__PURE__ */
|
|
3814
|
+
/* @__PURE__ */ jsx42("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
|
|
3815
|
+
/* @__PURE__ */ jsx42("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
|
|
3772
3816
|
] }),
|
|
3773
|
-
/* @__PURE__ */
|
|
3817
|
+
/* @__PURE__ */ jsx42("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
|
|
3774
3818
|
] });
|
|
3775
3819
|
}
|
|
3776
3820
|
function Stat({ label, value, icon: icon2, change, changeTone, description, trend, className }) {
|
|
@@ -3778,24 +3822,24 @@ function Stat({ label, value, icon: icon2, change, changeTone, description, tren
|
|
|
3778
3822
|
const rising = change ? !/^[-−]/.test(change) : false;
|
|
3779
3823
|
return /* @__PURE__ */ jsxs35("div", { className: cx("ow-stat", className), children: [
|
|
3780
3824
|
/* @__PURE__ */ jsxs35("div", { className: "ow-stat__label", children: [
|
|
3781
|
-
icon2 ? /* @__PURE__ */
|
|
3782
|
-
/* @__PURE__ */
|
|
3825
|
+
icon2 ? /* @__PURE__ */ jsx42("span", { className: "ow-stat__icon", children: icon2 }) : null,
|
|
3826
|
+
/* @__PURE__ */ jsx42("span", { children: label })
|
|
3783
3827
|
] }),
|
|
3784
3828
|
/* @__PURE__ */ jsxs35("div", { className: "ow-stat__row", children: [
|
|
3785
|
-
/* @__PURE__ */
|
|
3829
|
+
/* @__PURE__ */ jsx42("span", { className: "ow-stat__value", children: value }),
|
|
3786
3830
|
change ? /* @__PURE__ */ jsxs35("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
|
|
3787
|
-
tone === "neutral" ? null : rising ? /* @__PURE__ */
|
|
3831
|
+
tone === "neutral" ? null : rising ? /* @__PURE__ */ jsx42(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ jsx42(ArrowDownIcon, { size: 12 }),
|
|
3788
3832
|
change
|
|
3789
3833
|
] }) : null
|
|
3790
3834
|
] }),
|
|
3791
|
-
description ? /* @__PURE__ */
|
|
3792
|
-
trend && trend.length > 1 ? /* @__PURE__ */
|
|
3835
|
+
description ? /* @__PURE__ */ jsx42("div", { className: "ow-stat__description", children: description }) : null,
|
|
3836
|
+
trend && trend.length > 1 ? /* @__PURE__ */ jsx42(Sparkline, { values: trend }) : null
|
|
3793
3837
|
] });
|
|
3794
3838
|
}
|
|
3795
3839
|
|
|
3796
3840
|
// src/components/FileTree/FileTree.tsx
|
|
3797
3841
|
import { useMemo as useMemo6, useRef as useRef21, useState as useState17 } from "react";
|
|
3798
|
-
import { jsx as
|
|
3842
|
+
import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3799
3843
|
function flatten(nodes, expanded, parent, level = 1) {
|
|
3800
3844
|
return nodes.flatMap((node) => {
|
|
3801
3845
|
const path = parent ? `${parent}/${node.name}` : node.name;
|
|
@@ -3873,7 +3917,7 @@ function FileTree({
|
|
|
3873
3917
|
const row = rows.find((entry) => entry.path === path);
|
|
3874
3918
|
if (!row) return null;
|
|
3875
3919
|
const isOpen = row.isFolder && expanded.has(path);
|
|
3876
|
-
const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */
|
|
3920
|
+
const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ jsx43(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ jsx43(FolderIcon, { size: 16 }) : /* @__PURE__ */ jsx43(FileIcon, { size: 16 }));
|
|
3877
3921
|
return /* @__PURE__ */ jsxs36(
|
|
3878
3922
|
"li",
|
|
3879
3923
|
{
|
|
@@ -3902,51 +3946,51 @@ function FileTree({
|
|
|
3902
3946
|
activate(row);
|
|
3903
3947
|
},
|
|
3904
3948
|
children: [
|
|
3905
|
-
row.isFolder ? /* @__PURE__ */
|
|
3906
|
-
/* @__PURE__ */
|
|
3907
|
-
/* @__PURE__ */
|
|
3908
|
-
node.meta ? /* @__PURE__ */
|
|
3949
|
+
row.isFolder ? /* @__PURE__ */ jsx43(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ jsx43("span", { className: "ow-tree__spacer" }),
|
|
3950
|
+
/* @__PURE__ */ jsx43("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
|
|
3951
|
+
/* @__PURE__ */ jsx43("span", { className: "ow-tree__name", children: node.name }),
|
|
3952
|
+
node.meta ? /* @__PURE__ */ jsx43("span", { className: "ow-tree__meta", children: node.meta }) : null
|
|
3909
3953
|
]
|
|
3910
3954
|
}
|
|
3911
3955
|
),
|
|
3912
|
-
isOpen && node.children.length > 0 ? /* @__PURE__ */
|
|
3956
|
+
isOpen && node.children.length > 0 ? /* @__PURE__ */ jsx43("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
|
|
3913
3957
|
]
|
|
3914
3958
|
},
|
|
3915
3959
|
path
|
|
3916
3960
|
);
|
|
3917
3961
|
});
|
|
3918
3962
|
}
|
|
3919
|
-
return /* @__PURE__ */
|
|
3963
|
+
return /* @__PURE__ */ jsx43("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
|
|
3920
3964
|
}
|
|
3921
3965
|
|
|
3922
3966
|
// src/components/EmptyState/EmptyState.tsx
|
|
3923
|
-
import { jsx as
|
|
3967
|
+
import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3924
3968
|
function EmptyState({ title, description, icon: icon2, actions, bordered = false, className }) {
|
|
3925
3969
|
return /* @__PURE__ */ jsxs37("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
|
|
3926
|
-
/* @__PURE__ */
|
|
3970
|
+
/* @__PURE__ */ jsx44("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ jsx44(InboxIcon, { size: 20 }) }),
|
|
3927
3971
|
/* @__PURE__ */ jsxs37("div", { className: "ow-empty__text", children: [
|
|
3928
|
-
/* @__PURE__ */
|
|
3929
|
-
description ? /* @__PURE__ */
|
|
3972
|
+
/* @__PURE__ */ jsx44("p", { className: "ow-empty__title", children: title }),
|
|
3973
|
+
description ? /* @__PURE__ */ jsx44("p", { className: "ow-empty__description", children: description }) : null
|
|
3930
3974
|
] }),
|
|
3931
|
-
actions ? /* @__PURE__ */
|
|
3975
|
+
actions ? /* @__PURE__ */ jsx44("div", { className: "ow-empty__actions", children: actions }) : null
|
|
3932
3976
|
] });
|
|
3933
3977
|
}
|
|
3934
3978
|
|
|
3935
3979
|
// src/components/Tag/Tag.tsx
|
|
3936
|
-
import { jsx as
|
|
3980
|
+
import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
3937
3981
|
function Tag({ onRemove, variant = "neutral", size = "md", icon: icon2, removeLabel, className, children, ...props }) {
|
|
3938
3982
|
const name = removeLabel ?? (typeof children === "string" ? children : "tag");
|
|
3939
3983
|
return /* @__PURE__ */ jsxs38("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size}`, onRemove && "ow-tag--removable", className), ...props, children: [
|
|
3940
|
-
icon2 ? /* @__PURE__ */
|
|
3941
|
-
/* @__PURE__ */
|
|
3942
|
-
onRemove ? /* @__PURE__ */
|
|
3984
|
+
icon2 ? /* @__PURE__ */ jsx45("span", { className: "ow-tag__icon", children: icon2 }) : null,
|
|
3985
|
+
/* @__PURE__ */ jsx45("span", { className: "ow-tag__label", children }),
|
|
3986
|
+
onRemove ? /* @__PURE__ */ jsx45("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ jsx45(XIcon, { size: 12 }) }) : null
|
|
3943
3987
|
] });
|
|
3944
3988
|
}
|
|
3945
3989
|
function TagGroup({ label, className, children, ...props }) {
|
|
3946
|
-
return /* @__PURE__ */
|
|
3990
|
+
return /* @__PURE__ */ jsx45("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
|
|
3947
3991
|
}
|
|
3948
3992
|
function ColorSwatch({ color, name, value, size = "md", shape = "square", className }) {
|
|
3949
|
-
const swatch = /* @__PURE__ */
|
|
3993
|
+
const swatch = /* @__PURE__ */ jsx45(
|
|
3950
3994
|
"span",
|
|
3951
3995
|
{
|
|
3952
3996
|
className: cx("ow-swatch", `ow-swatch--${size}`, shape === "circle" && "ow-swatch--circle"),
|
|
@@ -3954,19 +3998,19 @@ function ColorSwatch({ color, name, value, size = "md", shape = "square", classN
|
|
|
3954
3998
|
...name && !value ? { role: "img", "aria-label": name } : { "aria-hidden": true }
|
|
3955
3999
|
}
|
|
3956
4000
|
);
|
|
3957
|
-
if (!name && !value) return /* @__PURE__ */
|
|
4001
|
+
if (!name && !value) return /* @__PURE__ */ jsx45("span", { className, children: swatch });
|
|
3958
4002
|
return /* @__PURE__ */ jsxs38("span", { className: cx("ow-swatch-label", className), children: [
|
|
3959
4003
|
swatch,
|
|
3960
4004
|
/* @__PURE__ */ jsxs38("span", { className: "ow-swatch-label__text", children: [
|
|
3961
|
-
name ? /* @__PURE__ */
|
|
3962
|
-
/* @__PURE__ */
|
|
4005
|
+
name ? /* @__PURE__ */ jsx45("span", { className: "ow-swatch-label__name", children: name }) : null,
|
|
4006
|
+
/* @__PURE__ */ jsx45("span", { className: "ow-swatch-label__value", children: value })
|
|
3963
4007
|
] })
|
|
3964
4008
|
] });
|
|
3965
4009
|
}
|
|
3966
4010
|
|
|
3967
4011
|
// src/components/Avatar/Avatar.tsx
|
|
3968
4012
|
import { useState as useState18 } from "react";
|
|
3969
|
-
import { jsx as
|
|
4013
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
3970
4014
|
var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
|
|
3971
4015
|
function avatarSize(size) {
|
|
3972
4016
|
if (typeof size === "number") {
|
|
@@ -3979,20 +4023,20 @@ function Avatar({ name, src, size = "md", label, className }) {
|
|
|
3979
4023
|
const [failedImage, setFailedImage] = useState18();
|
|
3980
4024
|
const showImage = src && src !== failedImage;
|
|
3981
4025
|
const sizing = avatarSize(size);
|
|
3982
|
-
return /* @__PURE__ */
|
|
4026
|
+
return /* @__PURE__ */ jsx46(
|
|
3983
4027
|
"span",
|
|
3984
4028
|
{
|
|
3985
4029
|
className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
|
|
3986
4030
|
style: sizing.style,
|
|
3987
4031
|
...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
|
|
3988
|
-
children: showImage ? /* @__PURE__ */
|
|
4032
|
+
children: showImage ? /* @__PURE__ */ jsx46("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ jsx46(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
|
|
3989
4033
|
}
|
|
3990
4034
|
);
|
|
3991
4035
|
}
|
|
3992
4036
|
|
|
3993
4037
|
// src/components/Avatar/AvatarGroup.tsx
|
|
3994
4038
|
import { Children, cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
|
|
3995
|
-
import { jsx as
|
|
4039
|
+
import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
3996
4040
|
function AvatarGroup({ children, max = 4, size = "md", label, className }) {
|
|
3997
4041
|
const avatars = Children.toArray(children).filter(isValidElement4);
|
|
3998
4042
|
const sizing = avatarSize(size);
|
|
@@ -4019,35 +4063,35 @@ function userSize(size) {
|
|
|
4019
4063
|
}
|
|
4020
4064
|
function User({ name, description, src, size = "md", className }) {
|
|
4021
4065
|
return /* @__PURE__ */ jsxs39("div", { className: cx("ow-user", userSize(size), className), children: [
|
|
4022
|
-
/* @__PURE__ */
|
|
4066
|
+
/* @__PURE__ */ jsx47(Avatar, { name, src, size }),
|
|
4023
4067
|
/* @__PURE__ */ jsxs39("div", { className: "ow-user__text", children: [
|
|
4024
|
-
/* @__PURE__ */
|
|
4025
|
-
description ? /* @__PURE__ */
|
|
4068
|
+
/* @__PURE__ */ jsx47("span", { className: "ow-user__name", children: name }),
|
|
4069
|
+
description ? /* @__PURE__ */ jsx47("span", { className: "ow-user__description", children: description }) : null
|
|
4026
4070
|
] })
|
|
4027
4071
|
] });
|
|
4028
4072
|
}
|
|
4029
4073
|
|
|
4030
4074
|
// src/components/Kbd/Kbd.tsx
|
|
4031
|
-
import { jsx as
|
|
4075
|
+
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
4032
4076
|
function Kbd({ className, ...props }) {
|
|
4033
|
-
return /* @__PURE__ */
|
|
4077
|
+
return /* @__PURE__ */ jsx48("kbd", { className: cx("ow-kbd", className), ...props });
|
|
4034
4078
|
}
|
|
4035
4079
|
function Code({ className, ...props }) {
|
|
4036
|
-
return /* @__PURE__ */
|
|
4080
|
+
return /* @__PURE__ */ jsx48("code", { className: cx("ow-code", className), ...props });
|
|
4037
4081
|
}
|
|
4038
4082
|
|
|
4039
4083
|
// src/components/Card/Card.tsx
|
|
4040
|
-
import { jsx as
|
|
4084
|
+
import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
4041
4085
|
function Card({ className, padding = "md", ...props }) {
|
|
4042
|
-
return /* @__PURE__ */
|
|
4086
|
+
return /* @__PURE__ */ jsx49("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
|
|
4043
4087
|
}
|
|
4044
4088
|
function SettingsRow({ children, description, label, className }) {
|
|
4045
4089
|
return /* @__PURE__ */ jsxs40("div", { className: cx("ow-settings-row", className), children: [
|
|
4046
4090
|
/* @__PURE__ */ jsxs40("div", { className: "ow-settings-row__text", children: [
|
|
4047
|
-
/* @__PURE__ */
|
|
4048
|
-
description ? /* @__PURE__ */
|
|
4091
|
+
/* @__PURE__ */ jsx49("span", { className: "ow-settings-row__label", children: label }),
|
|
4092
|
+
description ? /* @__PURE__ */ jsx49("div", { className: "ow-settings-row__description", children: description }) : null
|
|
4049
4093
|
] }),
|
|
4050
|
-
/* @__PURE__ */
|
|
4094
|
+
/* @__PURE__ */ jsx49("div", { className: "ow-settings-row__control", children })
|
|
4051
4095
|
] });
|
|
4052
4096
|
}
|
|
4053
4097
|
|
|
@@ -4057,7 +4101,7 @@ import {
|
|
|
4057
4101
|
useRef as useRef22,
|
|
4058
4102
|
useState as useState19
|
|
4059
4103
|
} from "react";
|
|
4060
|
-
import { jsx as
|
|
4104
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
4061
4105
|
var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
|
|
4062
4106
|
var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
|
|
4063
4107
|
function Stack({
|
|
@@ -4073,7 +4117,7 @@ function Stack({
|
|
|
4073
4117
|
...props
|
|
4074
4118
|
}) {
|
|
4075
4119
|
const Element = as;
|
|
4076
|
-
return /* @__PURE__ */
|
|
4120
|
+
return /* @__PURE__ */ jsx50(
|
|
4077
4121
|
Element,
|
|
4078
4122
|
{
|
|
4079
4123
|
className: cx("ow-stack", className),
|
|
@@ -4093,9 +4137,9 @@ function Stack({
|
|
|
4093
4137
|
function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
|
|
4094
4138
|
const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
|
|
4095
4139
|
if (label && orientation === "horizontal") {
|
|
4096
|
-
return /* @__PURE__ */
|
|
4140
|
+
return /* @__PURE__ */ jsx50("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ jsx50("span", { className: "ow-separator-label__text", children: label }) });
|
|
4097
4141
|
}
|
|
4098
|
-
return /* @__PURE__ */
|
|
4142
|
+
return /* @__PURE__ */ jsx50(
|
|
4099
4143
|
"div",
|
|
4100
4144
|
{
|
|
4101
4145
|
role: "separator",
|
|
@@ -4135,7 +4179,7 @@ function ScrollShadow({
|
|
|
4135
4179
|
observer?.disconnect();
|
|
4136
4180
|
};
|
|
4137
4181
|
}, [orientation]);
|
|
4138
|
-
return /* @__PURE__ */
|
|
4182
|
+
return /* @__PURE__ */ jsx50(
|
|
4139
4183
|
"div",
|
|
4140
4184
|
{
|
|
4141
4185
|
ref,
|
|
@@ -4156,14 +4200,14 @@ function ScrollShadow({
|
|
|
4156
4200
|
);
|
|
4157
4201
|
}
|
|
4158
4202
|
function VisuallyHidden({ className, ...props }) {
|
|
4159
|
-
return /* @__PURE__ */
|
|
4203
|
+
return /* @__PURE__ */ jsx50("span", { className: cx("ow-visually-hidden", className), ...props });
|
|
4160
4204
|
}
|
|
4161
4205
|
|
|
4162
4206
|
// src/components/Marketing/Marketing.tsx
|
|
4163
4207
|
import { useRef as useRef23 } from "react";
|
|
4164
|
-
import { jsx as
|
|
4208
|
+
import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
4165
4209
|
function Chip({ className, ...props }) {
|
|
4166
|
-
return /* @__PURE__ */
|
|
4210
|
+
return /* @__PURE__ */ jsx51("span", { className: cx("ow-chip", className), ...props });
|
|
4167
4211
|
}
|
|
4168
4212
|
function SectionHeading({
|
|
4169
4213
|
eyebrow,
|
|
@@ -4174,16 +4218,16 @@ function SectionHeading({
|
|
|
4174
4218
|
className
|
|
4175
4219
|
}) {
|
|
4176
4220
|
return /* @__PURE__ */ jsxs41("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
|
|
4177
|
-
eyebrow ? /* @__PURE__ */
|
|
4178
|
-
/* @__PURE__ */
|
|
4179
|
-
intro ? /* @__PURE__ */
|
|
4221
|
+
eyebrow ? /* @__PURE__ */ jsx51(Chip, { children: eyebrow }) : null,
|
|
4222
|
+
/* @__PURE__ */ jsx51(Heading, { className: "ow-section-heading__title", children: title }),
|
|
4223
|
+
intro ? /* @__PURE__ */ jsx51("p", { className: "ow-section-heading__intro", children: intro }) : null
|
|
4180
4224
|
] });
|
|
4181
4225
|
}
|
|
4182
4226
|
function SiteHeader({ brand, nav, actions, className }) {
|
|
4183
4227
|
return /* @__PURE__ */ jsxs41("header", { className: cx("ow-site-header", className), children: [
|
|
4184
|
-
/* @__PURE__ */
|
|
4185
|
-
nav ? /* @__PURE__ */
|
|
4186
|
-
actions ? /* @__PURE__ */
|
|
4228
|
+
/* @__PURE__ */ jsx51("div", { className: "ow-site-header__brand", children: brand }),
|
|
4229
|
+
nav ? /* @__PURE__ */ jsx51("nav", { className: "ow-site-header__nav", children: nav }) : null,
|
|
4230
|
+
actions ? /* @__PURE__ */ jsx51("div", { className: "ow-site-header__actions", children: actions }) : null
|
|
4187
4231
|
] });
|
|
4188
4232
|
}
|
|
4189
4233
|
function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
|
|
@@ -4204,9 +4248,9 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4204
4248
|
onPointerMove: track,
|
|
4205
4249
|
...props,
|
|
4206
4250
|
children: [
|
|
4207
|
-
/* @__PURE__ */
|
|
4208
|
-
interactive ? /* @__PURE__ */
|
|
4209
|
-
/* @__PURE__ */
|
|
4251
|
+
/* @__PURE__ */ jsx51("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
|
|
4252
|
+
interactive ? /* @__PURE__ */ jsx51("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
|
|
4253
|
+
/* @__PURE__ */ jsx51("div", { className: "ow-dot-grid__content", children })
|
|
4210
4254
|
]
|
|
4211
4255
|
}
|
|
4212
4256
|
);
|
|
@@ -4215,7 +4259,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4215
4259
|
// src/components/ColorPicker/ColorPicker.tsx
|
|
4216
4260
|
import { forwardRef as forwardRef16, useCallback as useCallback6, useEffect as useEffect18, useId as useId18, useRef as useRef24, useState as useState20 } from "react";
|
|
4217
4261
|
import { HexAlphaColorPicker, HexColorInput, HexColorPicker } from "react-colorful";
|
|
4218
|
-
import { Fragment as Fragment9, jsx as
|
|
4262
|
+
import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
4219
4263
|
var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
|
|
4220
4264
|
var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
|
|
4221
4265
|
var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
|
|
@@ -4251,12 +4295,12 @@ function ColorPicker({
|
|
|
4251
4295
|
}
|
|
4252
4296
|
}
|
|
4253
4297
|
return /* @__PURE__ */ jsxs42("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
|
|
4254
|
-
/* @__PURE__ */
|
|
4298
|
+
/* @__PURE__ */ jsx52(Picker, { color, onChange: change }),
|
|
4255
4299
|
showInput || eyeDropper && canPick ? /* @__PURE__ */ jsxs42("div", { className: "ow-color-picker__row", children: [
|
|
4256
|
-
eyeDropper && canPick ? /* @__PURE__ */
|
|
4300
|
+
eyeDropper && canPick ? /* @__PURE__ */ jsx52("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ jsx52(PipetteIcon, { size: 15 }) }) : null,
|
|
4257
4301
|
showInput ? /* @__PURE__ */ jsxs42("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
|
|
4258
|
-
/* @__PURE__ */
|
|
4259
|
-
/* @__PURE__ */
|
|
4302
|
+
/* @__PURE__ */ jsx52("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
|
|
4303
|
+
/* @__PURE__ */ jsx52(
|
|
4260
4304
|
HexColorInput,
|
|
4261
4305
|
{
|
|
4262
4306
|
className: "ow-input-group__input",
|
|
@@ -4268,11 +4312,11 @@ function ColorPicker({
|
|
|
4268
4312
|
}
|
|
4269
4313
|
)
|
|
4270
4314
|
] }) : null,
|
|
4271
|
-
/* @__PURE__ */
|
|
4315
|
+
/* @__PURE__ */ jsx52("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
|
|
4272
4316
|
] }) : null,
|
|
4273
|
-
swatches?.length ? /* @__PURE__ */
|
|
4317
|
+
swatches?.length ? /* @__PURE__ */ jsx52("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
|
|
4274
4318
|
const swatchValue = swatchColor(swatch);
|
|
4275
|
-
return /* @__PURE__ */
|
|
4319
|
+
return /* @__PURE__ */ jsx52(
|
|
4276
4320
|
"button",
|
|
4277
4321
|
{
|
|
4278
4322
|
type: "button",
|
|
@@ -4357,13 +4401,13 @@ var ColorField = forwardRef16(function ColorField2({
|
|
|
4357
4401
|
}
|
|
4358
4402
|
},
|
|
4359
4403
|
children: [
|
|
4360
|
-
/* @__PURE__ */
|
|
4361
|
-
/* @__PURE__ */
|
|
4362
|
-
/* @__PURE__ */
|
|
4404
|
+
/* @__PURE__ */ jsx52("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
|
|
4405
|
+
/* @__PURE__ */ jsx52("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
|
|
4406
|
+
/* @__PURE__ */ jsx52(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
4363
4407
|
]
|
|
4364
4408
|
}
|
|
4365
4409
|
),
|
|
4366
|
-
mounted ? /* @__PURE__ */
|
|
4410
|
+
mounted ? /* @__PURE__ */ jsx52(
|
|
4367
4411
|
"div",
|
|
4368
4412
|
{
|
|
4369
4413
|
ref: panelRef,
|
|
@@ -4377,7 +4421,7 @@ var ColorField = forwardRef16(function ColorField2({
|
|
|
4377
4421
|
onKeyDown: (event) => {
|
|
4378
4422
|
if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
|
|
4379
4423
|
},
|
|
4380
|
-
children: /* @__PURE__ */
|
|
4424
|
+
children: /* @__PURE__ */ jsx52(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
|
|
4381
4425
|
}
|
|
4382
4426
|
) : null
|
|
4383
4427
|
] });
|
|
@@ -4652,6 +4696,7 @@ export {
|
|
|
4652
4696
|
Tabs,
|
|
4653
4697
|
Tag,
|
|
4654
4698
|
TagGroup,
|
|
4699
|
+
Text,
|
|
4655
4700
|
Textarea,
|
|
4656
4701
|
Toaster,
|
|
4657
4702
|
ToggleButton,
|