@openwarelabs/ui 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- 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 +575 -531
- 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 +435 -391
- 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`;
|
|
@@ -583,20 +626,20 @@ function Field({ label, children, hint, error, className }) {
|
|
|
583
626
|
const describedBy = [child?.props["aria-describedby"], hint ? hintId : void 0, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
|
|
584
627
|
const invalidProp = child && typeof child.type !== "string" ? { isInvalid: child.props.isInvalid ?? Boolean(error) } : { "aria-invalid": error ? true : void 0 };
|
|
585
628
|
return /* @__PURE__ */ jsxs6("div", { className: cx("ow-field", className), children: [
|
|
586
|
-
/* @__PURE__ */
|
|
629
|
+
/* @__PURE__ */ jsx9("label", { className: "ow-field__label", htmlFor: controlId, children: label }),
|
|
587
630
|
child ? cloneElement(child, { id: controlId, "aria-describedby": describedBy, ...invalidProp }) : children,
|
|
588
|
-
hint ? /* @__PURE__ */
|
|
589
|
-
error ? /* @__PURE__ */
|
|
631
|
+
hint ? /* @__PURE__ */ jsx9("p", { id: hintId, className: "ow-field__hint", children: hint }) : null,
|
|
632
|
+
error ? /* @__PURE__ */ jsx9("p", { id: errorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
590
633
|
] });
|
|
591
634
|
}
|
|
592
635
|
|
|
593
636
|
// src/components/Input/Input.tsx
|
|
594
637
|
import { forwardRef as forwardRef4 } from "react";
|
|
595
|
-
import { jsx as
|
|
638
|
+
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
596
639
|
var Input = forwardRef4(function Input2({ className, isInvalid = false, size = "md", startContent, endContent, ...inputProps }, ref) {
|
|
597
640
|
const invalid = isInvalid || void 0;
|
|
598
641
|
if (startContent === void 0 && endContent === void 0) {
|
|
599
|
-
return /* @__PURE__ */
|
|
642
|
+
return /* @__PURE__ */ jsx10(
|
|
600
643
|
"input",
|
|
601
644
|
{
|
|
602
645
|
ref,
|
|
@@ -617,9 +660,9 @@ var Input = forwardRef4(function Input2({ className, isInvalid = false, size = "
|
|
|
617
660
|
className
|
|
618
661
|
),
|
|
619
662
|
children: [
|
|
620
|
-
startContent !== void 0 ? /* @__PURE__ */
|
|
621
|
-
/* @__PURE__ */
|
|
622
|
-
endContent !== void 0 ? /* @__PURE__ */
|
|
663
|
+
startContent !== void 0 ? /* @__PURE__ */ jsx10("span", { className: "ow-input-group__addon", children: startContent }) : null,
|
|
664
|
+
/* @__PURE__ */ jsx10("input", { ref, className: "ow-input-group__input", "aria-invalid": invalid, ...inputProps }),
|
|
665
|
+
endContent !== void 0 ? /* @__PURE__ */ jsx10("span", { className: "ow-input-group__addon", children: endContent }) : null
|
|
623
666
|
]
|
|
624
667
|
}
|
|
625
668
|
);
|
|
@@ -627,7 +670,7 @@ var Input = forwardRef4(function Input2({ className, isInvalid = false, size = "
|
|
|
627
670
|
|
|
628
671
|
// src/components/SearchField/SearchField.tsx
|
|
629
672
|
import { forwardRef as forwardRef5, useRef as useRef4 } from "react";
|
|
630
|
-
import { jsx as
|
|
673
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
631
674
|
function assignRef(ref, value) {
|
|
632
675
|
if (typeof ref === "function") ref(value);
|
|
633
676
|
else if (ref) ref.current = value;
|
|
@@ -657,7 +700,7 @@ var SearchField = forwardRef5(function SearchField2({
|
|
|
657
700
|
onSubmit?.(text);
|
|
658
701
|
}
|
|
659
702
|
}
|
|
660
|
-
return /* @__PURE__ */
|
|
703
|
+
return /* @__PURE__ */ jsx11(
|
|
661
704
|
Input,
|
|
662
705
|
{
|
|
663
706
|
ref: (element) => {
|
|
@@ -671,8 +714,8 @@ var SearchField = forwardRef5(function SearchField2({
|
|
|
671
714
|
value: text,
|
|
672
715
|
onChange: (event) => setText(event.target.value),
|
|
673
716
|
onKeyDown: handleKeyDown,
|
|
674
|
-
startContent: /* @__PURE__ */
|
|
675
|
-
endContent: loading ? /* @__PURE__ */
|
|
717
|
+
startContent: /* @__PURE__ */ jsx11(SearchIcon, { size: size === "sm" ? 14 : 16 }),
|
|
718
|
+
endContent: loading ? /* @__PURE__ */ jsx11(Spinner, { size: "sm", label: "Searching" }) : text ? /* @__PURE__ */ jsx11(
|
|
676
719
|
CloseButton,
|
|
677
720
|
{
|
|
678
721
|
size: "sm",
|
|
@@ -690,7 +733,7 @@ var SearchField = forwardRef5(function SearchField2({
|
|
|
690
733
|
|
|
691
734
|
// src/components/NumberField/NumberField.tsx
|
|
692
735
|
import { forwardRef as forwardRef6, useState as useState3 } from "react";
|
|
693
|
-
import { jsx as
|
|
736
|
+
import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
694
737
|
var decimals = (step) => (String(step).split(".")[1] ?? "").length;
|
|
695
738
|
var NumberField = forwardRef6(function NumberField2({
|
|
696
739
|
value,
|
|
@@ -765,7 +808,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
765
808
|
className
|
|
766
809
|
),
|
|
767
810
|
children: [
|
|
768
|
-
/* @__PURE__ */
|
|
811
|
+
/* @__PURE__ */ jsx12(
|
|
769
812
|
"button",
|
|
770
813
|
{
|
|
771
814
|
type: "button",
|
|
@@ -774,10 +817,10 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
774
817
|
tabIndex: -1,
|
|
775
818
|
disabled: disabled || atMin,
|
|
776
819
|
onClick: () => stepBy(-1),
|
|
777
|
-
children: /* @__PURE__ */
|
|
820
|
+
children: /* @__PURE__ */ jsx12(MinusIcon, { size: 14 })
|
|
778
821
|
}
|
|
779
822
|
),
|
|
780
|
-
/* @__PURE__ */
|
|
823
|
+
/* @__PURE__ */ jsx12(
|
|
781
824
|
"input",
|
|
782
825
|
{
|
|
783
826
|
ref,
|
|
@@ -806,7 +849,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
806
849
|
...inputProps
|
|
807
850
|
}
|
|
808
851
|
),
|
|
809
|
-
/* @__PURE__ */
|
|
852
|
+
/* @__PURE__ */ jsx12(
|
|
810
853
|
"button",
|
|
811
854
|
{
|
|
812
855
|
type: "button",
|
|
@@ -815,7 +858,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
815
858
|
tabIndex: -1,
|
|
816
859
|
disabled: disabled || atMax,
|
|
817
860
|
onClick: () => stepBy(1),
|
|
818
|
-
children: /* @__PURE__ */
|
|
861
|
+
children: /* @__PURE__ */ jsx12(PlusIcon, { size: 14 })
|
|
819
862
|
}
|
|
820
863
|
)
|
|
821
864
|
]
|
|
@@ -825,7 +868,7 @@ var NumberField = forwardRef6(function NumberField2({
|
|
|
825
868
|
|
|
826
869
|
// src/components/InputOTP/InputOTP.tsx
|
|
827
870
|
import { useRef as useRef5 } from "react";
|
|
828
|
-
import { jsx as
|
|
871
|
+
import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
829
872
|
function InputOTP({
|
|
830
873
|
length = 6,
|
|
831
874
|
value,
|
|
@@ -889,8 +932,8 @@ function InputOTP({
|
|
|
889
932
|
}
|
|
890
933
|
return /* @__PURE__ */ jsxs9("div", { role: "group", "aria-label": ariaLabel, className: cx("ow-otp", isInvalid && "ow-otp--invalid", className), children: [
|
|
891
934
|
chars.map((char, index) => /* @__PURE__ */ jsxs9("span", { className: "ow-otp__slot", children: [
|
|
892
|
-
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */
|
|
893
|
-
/* @__PURE__ */
|
|
935
|
+
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ jsx13("span", { className: "ow-otp__separator", "aria-hidden": "true" }) : null,
|
|
936
|
+
/* @__PURE__ */ jsx13(
|
|
894
937
|
"input",
|
|
895
938
|
{
|
|
896
939
|
ref: (element) => {
|
|
@@ -918,7 +961,7 @@ function InputOTP({
|
|
|
918
961
|
}
|
|
919
962
|
)
|
|
920
963
|
] }, index)),
|
|
921
|
-
name ? /* @__PURE__ */
|
|
964
|
+
name ? /* @__PURE__ */ jsx13("input", { type: "hidden", name, value: code }) : null
|
|
922
965
|
] });
|
|
923
966
|
}
|
|
924
967
|
|
|
@@ -957,7 +1000,7 @@ function resizeTextArea(textArea) {
|
|
|
957
1000
|
}
|
|
958
1001
|
|
|
959
1002
|
// src/components/Textarea/Textarea.tsx
|
|
960
|
-
import { jsx as
|
|
1003
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
961
1004
|
var defaultAutoGrowMaxHeight = 180;
|
|
962
1005
|
function assignRef2(ref, element) {
|
|
963
1006
|
if (typeof ref === "function") ref(element);
|
|
@@ -991,7 +1034,7 @@ var Textarea = forwardRef7(function Textarea2({
|
|
|
991
1034
|
...style,
|
|
992
1035
|
maxHeight: typeof autoGrowMaxHeight === "number" ? `${autoGrowMaxHeight}px` : autoGrowMaxHeight
|
|
993
1036
|
} : style;
|
|
994
|
-
return /* @__PURE__ */
|
|
1037
|
+
return /* @__PURE__ */ jsx14(
|
|
995
1038
|
"textarea",
|
|
996
1039
|
{
|
|
997
1040
|
...textareaProps,
|
|
@@ -1156,7 +1199,7 @@ function usePresence(open, exitMs = exitDuration) {
|
|
|
1156
1199
|
}
|
|
1157
1200
|
|
|
1158
1201
|
// src/components/Select/Select.tsx
|
|
1159
|
-
import { Fragment as Fragment2, jsx as
|
|
1202
|
+
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1160
1203
|
var menuGap = 4;
|
|
1161
1204
|
var menuMaxHeight = 288;
|
|
1162
1205
|
var typeaheadResetMs = 600;
|
|
@@ -1345,10 +1388,10 @@ function Select({
|
|
|
1345
1388
|
onMouseDown: (event) => event.preventDefault(),
|
|
1346
1389
|
onClick: () => choose(index),
|
|
1347
1390
|
children: [
|
|
1348
|
-
/* @__PURE__ */
|
|
1391
|
+
/* @__PURE__ */ jsx15("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ jsx15(CheckIcon, { size: 14 }) : null }),
|
|
1349
1392
|
/* @__PURE__ */ jsxs10("span", { className: "ow-option__text", children: [
|
|
1350
|
-
/* @__PURE__ */
|
|
1351
|
-
option.description ? /* @__PURE__ */
|
|
1393
|
+
/* @__PURE__ */ jsx15("span", { className: cx("ow-option__label", valueClassName), children: option.label }),
|
|
1394
|
+
option.description ? /* @__PURE__ */ jsx15("span", { className: "ow-option__description", children: option.description }) : null
|
|
1352
1395
|
] })
|
|
1353
1396
|
]
|
|
1354
1397
|
},
|
|
@@ -1380,8 +1423,8 @@ function Select({
|
|
|
1380
1423
|
if (!menuRef.current?.contains(event.relatedTarget)) close();
|
|
1381
1424
|
},
|
|
1382
1425
|
children: [
|
|
1383
|
-
/* @__PURE__ */
|
|
1384
|
-
/* @__PURE__ */
|
|
1426
|
+
/* @__PURE__ */ jsx15("span", { className: cx("ow-select__value", !selected && "ow-select__value--placeholder", valueClassName), children: selected ? selected.label : placeholder }),
|
|
1427
|
+
/* @__PURE__ */ jsx15(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
1385
1428
|
]
|
|
1386
1429
|
}
|
|
1387
1430
|
),
|
|
@@ -1401,11 +1444,11 @@ function Select({
|
|
|
1401
1444
|
children: [
|
|
1402
1445
|
options.map(
|
|
1403
1446
|
(item, groupIndex) => isGroup(item) ? /* @__PURE__ */ jsxs10("div", { role: "group", "aria-label": item.label, className: "ow-listbox__group", children: [
|
|
1404
|
-
/* @__PURE__ */
|
|
1447
|
+
/* @__PURE__ */ jsx15("div", { className: "ow-listbox__group-label", "aria-hidden": "true", children: item.label }),
|
|
1405
1448
|
item.options.map(renderOption)
|
|
1406
1449
|
] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
|
|
1407
1450
|
),
|
|
1408
|
-
flat.length === 0 ? /* @__PURE__ */
|
|
1451
|
+
flat.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "ow-listbox__empty", children: "No options" }) : null
|
|
1409
1452
|
]
|
|
1410
1453
|
}
|
|
1411
1454
|
) : null
|
|
@@ -1421,7 +1464,7 @@ import {
|
|
|
1421
1464
|
useRef as useRef8,
|
|
1422
1465
|
useState as useState7
|
|
1423
1466
|
} from "react";
|
|
1424
|
-
import { Fragment as Fragment3, jsx as
|
|
1467
|
+
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1425
1468
|
function assignRef3(ref, value) {
|
|
1426
1469
|
if (typeof ref === "function") ref(value);
|
|
1427
1470
|
else if (ref) ref.current = value;
|
|
@@ -1548,7 +1591,7 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1548
1591
|
className
|
|
1549
1592
|
),
|
|
1550
1593
|
children: [
|
|
1551
|
-
/* @__PURE__ */
|
|
1594
|
+
/* @__PURE__ */ jsx16(
|
|
1552
1595
|
"input",
|
|
1553
1596
|
{
|
|
1554
1597
|
ref: (element) => {
|
|
@@ -1579,7 +1622,7 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1579
1622
|
...aria
|
|
1580
1623
|
}
|
|
1581
1624
|
),
|
|
1582
|
-
/* @__PURE__ */
|
|
1625
|
+
/* @__PURE__ */ jsx16(
|
|
1583
1626
|
"button",
|
|
1584
1627
|
{
|
|
1585
1628
|
type: "button",
|
|
@@ -1595,7 +1638,7 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1595
1638
|
inputRef.current?.focus();
|
|
1596
1639
|
}
|
|
1597
1640
|
},
|
|
1598
|
-
children: /* @__PURE__ */
|
|
1641
|
+
children: /* @__PURE__ */ jsx16(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: cx("ow-select__chevron", isOpen && "ow-combobox__chevron--open") })
|
|
1599
1642
|
}
|
|
1600
1643
|
)
|
|
1601
1644
|
]
|
|
@@ -1632,17 +1675,17 @@ var Combobox = forwardRef8(function Combobox2({
|
|
|
1632
1675
|
onMouseDown: (event) => event.preventDefault(),
|
|
1633
1676
|
onClick: () => choose(option),
|
|
1634
1677
|
children: [
|
|
1635
|
-
/* @__PURE__ */
|
|
1678
|
+
/* @__PURE__ */ jsx16("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ jsx16(CheckIcon, { size: 14 }) : null }),
|
|
1636
1679
|
/* @__PURE__ */ jsxs11("span", { className: "ow-option__text", children: [
|
|
1637
|
-
/* @__PURE__ */
|
|
1638
|
-
option.description ? /* @__PURE__ */
|
|
1680
|
+
/* @__PURE__ */ jsx16("span", { className: "ow-option__label", children: option.label }),
|
|
1681
|
+
option.description ? /* @__PURE__ */ jsx16("span", { className: "ow-option__description", children: option.description }) : null
|
|
1639
1682
|
] })
|
|
1640
1683
|
]
|
|
1641
1684
|
},
|
|
1642
1685
|
option.value
|
|
1643
1686
|
);
|
|
1644
1687
|
}),
|
|
1645
|
-
results.length === 0 ? /* @__PURE__ */
|
|
1688
|
+
results.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
|
|
1646
1689
|
]
|
|
1647
1690
|
}
|
|
1648
1691
|
) : null
|
|
@@ -1658,7 +1701,7 @@ import {
|
|
|
1658
1701
|
useId as useId4,
|
|
1659
1702
|
useRef as useRef9
|
|
1660
1703
|
} from "react";
|
|
1661
|
-
import { jsx as
|
|
1704
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1662
1705
|
var CheckboxGroupContext = createContext(null);
|
|
1663
1706
|
function assignRef4(ref, value) {
|
|
1664
1707
|
if (typeof ref === "function") ref(value);
|
|
@@ -1696,7 +1739,7 @@ var Checkbox = forwardRef9(function Checkbox2({
|
|
|
1696
1739
|
children === void 0 && className
|
|
1697
1740
|
),
|
|
1698
1741
|
children: [
|
|
1699
|
-
/* @__PURE__ */
|
|
1742
|
+
/* @__PURE__ */ jsx17(
|
|
1700
1743
|
"input",
|
|
1701
1744
|
{
|
|
1702
1745
|
ref: (element) => {
|
|
@@ -1717,7 +1760,7 @@ var Checkbox = forwardRef9(function Checkbox2({
|
|
|
1717
1760
|
...inputProps
|
|
1718
1761
|
}
|
|
1719
1762
|
),
|
|
1720
|
-
indeterminate ? /* @__PURE__ */
|
|
1763
|
+
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
1764
|
]
|
|
1722
1765
|
}
|
|
1723
1766
|
);
|
|
@@ -1725,8 +1768,8 @@ var Checkbox = forwardRef9(function Checkbox2({
|
|
|
1725
1768
|
return /* @__PURE__ */ jsxs12("label", { className: cx("ow-check-label", (disabled || inGroup && group.disabled) && "ow-check-label--disabled", className), children: [
|
|
1726
1769
|
box,
|
|
1727
1770
|
/* @__PURE__ */ jsxs12("span", { className: "ow-check-label__text", children: [
|
|
1728
|
-
/* @__PURE__ */
|
|
1729
|
-
description ? /* @__PURE__ */
|
|
1771
|
+
/* @__PURE__ */ jsx17("span", { children }),
|
|
1772
|
+
description ? /* @__PURE__ */ jsx17("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1730
1773
|
] })
|
|
1731
1774
|
] });
|
|
1732
1775
|
});
|
|
@@ -1746,7 +1789,7 @@ function CheckboxGroup({
|
|
|
1746
1789
|
const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
|
|
1747
1790
|
const generatedName = useId4();
|
|
1748
1791
|
const errorId = useId4();
|
|
1749
|
-
return /* @__PURE__ */
|
|
1792
|
+
return /* @__PURE__ */ jsx17(
|
|
1750
1793
|
CheckboxGroupContext.Provider,
|
|
1751
1794
|
{
|
|
1752
1795
|
value: {
|
|
@@ -1757,7 +1800,7 @@ function CheckboxGroup({
|
|
|
1757
1800
|
setCurrent(checked ? [...current.filter((v) => v !== item), item] : current.filter((v) => v !== item));
|
|
1758
1801
|
}
|
|
1759
1802
|
},
|
|
1760
|
-
children: /* @__PURE__ */
|
|
1803
|
+
children: /* @__PURE__ */ jsx17(
|
|
1761
1804
|
Fieldset,
|
|
1762
1805
|
{
|
|
1763
1806
|
legend: label,
|
|
@@ -1782,10 +1825,10 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1782
1825
|
disabled,
|
|
1783
1826
|
"aria-describedby": [description ? descriptionId : "", error ? resolvedErrorId : ""].filter(Boolean).join(" ") || void 0,
|
|
1784
1827
|
children: [
|
|
1785
|
-
/* @__PURE__ */
|
|
1786
|
-
description ? /* @__PURE__ */
|
|
1787
|
-
/* @__PURE__ */
|
|
1788
|
-
error ? /* @__PURE__ */
|
|
1828
|
+
/* @__PURE__ */ jsx17("legend", { className: "ow-fieldset__legend", children: legend }),
|
|
1829
|
+
description ? /* @__PURE__ */ jsx17("p", { id: descriptionId, className: "ow-fieldset__description", children: description }) : null,
|
|
1830
|
+
/* @__PURE__ */ jsx17("div", { className: "ow-fieldset__content", children }),
|
|
1831
|
+
error ? /* @__PURE__ */ jsx17("p", { id: resolvedErrorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
1789
1832
|
]
|
|
1790
1833
|
}
|
|
1791
1834
|
);
|
|
@@ -1793,7 +1836,7 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1793
1836
|
|
|
1794
1837
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
1795
1838
|
import { createContext as createContext2, useContext as useContext2, useId as useId5 } from "react";
|
|
1796
|
-
import { jsx as
|
|
1839
|
+
import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1797
1840
|
var RadioGroupContext = createContext2(null);
|
|
1798
1841
|
function RadioGroup({
|
|
1799
1842
|
label,
|
|
@@ -1811,7 +1854,7 @@ function RadioGroup({
|
|
|
1811
1854
|
}) {
|
|
1812
1855
|
const [current, select] = useControllableState(value, defaultValue, onChange);
|
|
1813
1856
|
const generatedName = useId5();
|
|
1814
|
-
return /* @__PURE__ */
|
|
1857
|
+
return /* @__PURE__ */ jsx18(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ jsx18(
|
|
1815
1858
|
Fieldset,
|
|
1816
1859
|
{
|
|
1817
1860
|
legend: label,
|
|
@@ -1833,7 +1876,7 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1833
1876
|
if (!group) throw new Error("Radio must be inside <RadioGroup>.");
|
|
1834
1877
|
const isDisabled = disabled || group.disabled;
|
|
1835
1878
|
return /* @__PURE__ */ jsxs13("label", { className: cx("ow-check-label", "ow-radio-label", isDisabled && "ow-check-label--disabled", className), children: [
|
|
1836
|
-
/* @__PURE__ */
|
|
1879
|
+
/* @__PURE__ */ jsx18("span", { className: "ow-radio", children: /* @__PURE__ */ jsx18(
|
|
1837
1880
|
"input",
|
|
1838
1881
|
{
|
|
1839
1882
|
type: "radio",
|
|
@@ -1848,17 +1891,17 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1848
1891
|
}
|
|
1849
1892
|
) }),
|
|
1850
1893
|
/* @__PURE__ */ jsxs13("span", { className: "ow-check-label__text", children: [
|
|
1851
|
-
/* @__PURE__ */
|
|
1852
|
-
description ? /* @__PURE__ */
|
|
1894
|
+
/* @__PURE__ */ jsx18("span", { children }),
|
|
1895
|
+
description ? /* @__PURE__ */ jsx18("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1853
1896
|
] })
|
|
1854
1897
|
] });
|
|
1855
1898
|
}
|
|
1856
1899
|
|
|
1857
1900
|
// src/components/Switch/Switch.tsx
|
|
1858
1901
|
import { forwardRef as forwardRef10 } from "react";
|
|
1859
|
-
import { jsx as
|
|
1902
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1860
1903
|
var Switch = forwardRef10(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
|
|
1861
|
-
return /* @__PURE__ */
|
|
1904
|
+
return /* @__PURE__ */ jsx19(
|
|
1862
1905
|
"button",
|
|
1863
1906
|
{
|
|
1864
1907
|
ref,
|
|
@@ -1870,14 +1913,14 @@ var Switch = forwardRef10(function Switch2({ checked, onChange, label, className
|
|
|
1870
1913
|
className: cx("ow-switch", checked && "ow-switch--on", className),
|
|
1871
1914
|
onClick: () => onChange(!checked),
|
|
1872
1915
|
...buttonProps,
|
|
1873
|
-
children: /* @__PURE__ */
|
|
1916
|
+
children: /* @__PURE__ */ jsx19("span", { className: "ow-switch__knob" })
|
|
1874
1917
|
}
|
|
1875
1918
|
);
|
|
1876
1919
|
});
|
|
1877
1920
|
|
|
1878
1921
|
// src/components/Slider/Slider.tsx
|
|
1879
1922
|
import { useId as useId6 } from "react";
|
|
1880
|
-
import { jsx as
|
|
1923
|
+
import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1881
1924
|
function Slider({
|
|
1882
1925
|
value,
|
|
1883
1926
|
defaultValue,
|
|
@@ -1903,7 +1946,7 @@ function Slider({
|
|
|
1903
1946
|
const end = () => onChangeEnd?.(current);
|
|
1904
1947
|
const input = (which) => {
|
|
1905
1948
|
const own = which === "low" ? low : high;
|
|
1906
|
-
return /* @__PURE__ */
|
|
1949
|
+
return /* @__PURE__ */ jsx20(
|
|
1907
1950
|
"input",
|
|
1908
1951
|
{
|
|
1909
1952
|
type: "range",
|
|
@@ -1930,11 +1973,11 @@ function Slider({
|
|
|
1930
1973
|
};
|
|
1931
1974
|
return /* @__PURE__ */ jsxs14("div", { className: cx("ow-slider", disabled && "ow-slider--disabled", className), children: [
|
|
1932
1975
|
label || showValue ? /* @__PURE__ */ jsxs14("div", { className: "ow-slider__header", children: [
|
|
1933
|
-
label ? /* @__PURE__ */
|
|
1934
|
-
showValue ? /* @__PURE__ */
|
|
1976
|
+
label ? /* @__PURE__ */ jsx20("span", { id: labelId, className: "ow-slider__label", children: label }) : /* @__PURE__ */ jsx20("span", {}),
|
|
1977
|
+
showValue ? /* @__PURE__ */ jsx20("output", { className: "ow-slider__value", "aria-hidden": "true", children: display }) : null
|
|
1935
1978
|
] }) : null,
|
|
1936
1979
|
/* @__PURE__ */ jsxs14("div", { className: "ow-slider__control", style, children: [
|
|
1937
|
-
/* @__PURE__ */
|
|
1980
|
+
/* @__PURE__ */ jsx20("span", { className: "ow-slider__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: "ow-slider__fill" }) }),
|
|
1938
1981
|
isRange ? input("low") : null,
|
|
1939
1982
|
input("high")
|
|
1940
1983
|
] })
|
|
@@ -1943,7 +1986,7 @@ function Slider({
|
|
|
1943
1986
|
|
|
1944
1987
|
// src/components/FileDropZone/FileDropZone.tsx
|
|
1945
1988
|
import { useId as useId7, useRef as useRef10, useState as useState8 } from "react";
|
|
1946
|
-
import { jsx as
|
|
1989
|
+
import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1947
1990
|
function matches(file, accept) {
|
|
1948
1991
|
if (!accept) return true;
|
|
1949
1992
|
return accept.split(",").some((rule) => {
|
|
@@ -2020,7 +2063,7 @@ function FileDropZone({
|
|
|
2020
2063
|
take(event.dataTransfer.files);
|
|
2021
2064
|
},
|
|
2022
2065
|
children: [
|
|
2023
|
-
/* @__PURE__ */
|
|
2066
|
+
/* @__PURE__ */ jsx21(
|
|
2024
2067
|
"input",
|
|
2025
2068
|
{
|
|
2026
2069
|
ref: inputRef,
|
|
@@ -2037,9 +2080,9 @@ function FileDropZone({
|
|
|
2037
2080
|
}
|
|
2038
2081
|
}
|
|
2039
2082
|
),
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2042
|
-
/* @__PURE__ */
|
|
2083
|
+
/* @__PURE__ */ jsx21("span", { className: "ow-dropzone__icon", children: icon2 ?? /* @__PURE__ */ jsx21(UploadIcon, { size: 20 }) }),
|
|
2084
|
+
/* @__PURE__ */ jsx21("span", { className: "ow-dropzone__label", children: isDragging ? "Drop to add" : label }),
|
|
2085
|
+
/* @__PURE__ */ jsx21("span", { id: hintId, className: "ow-dropzone__hint", "aria-live": "polite", children: error ?? problem ?? hint })
|
|
2043
2086
|
]
|
|
2044
2087
|
}
|
|
2045
2088
|
);
|
|
@@ -2084,7 +2127,7 @@ function formatDate(iso, locale, options) {
|
|
|
2084
2127
|
}
|
|
2085
2128
|
|
|
2086
2129
|
// src/components/Calendar/Calendar.tsx
|
|
2087
|
-
import { jsx as
|
|
2130
|
+
import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2088
2131
|
var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
|
|
2089
2132
|
const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
|
|
2090
2133
|
const today = todayISO();
|
|
@@ -2149,7 +2192,7 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2149
2192
|
const canGoForward = !max || nextMonth <= max;
|
|
2150
2193
|
return /* @__PURE__ */ jsxs16("div", { className: cx("ow-calendar", className), children: [
|
|
2151
2194
|
/* @__PURE__ */ jsxs16("div", { className: "ow-calendar__header", children: [
|
|
2152
|
-
/* @__PURE__ */
|
|
2195
|
+
/* @__PURE__ */ jsx22(
|
|
2153
2196
|
"button",
|
|
2154
2197
|
{
|
|
2155
2198
|
type: "button",
|
|
@@ -2157,10 +2200,10 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2157
2200
|
"aria-label": `Previous month, ${formatDate(prevMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2158
2201
|
disabled: !canGoBack,
|
|
2159
2202
|
onClick: () => setFocused(clampDate(addMonths(focused, -1), min, max)),
|
|
2160
|
-
children: /* @__PURE__ */
|
|
2203
|
+
children: /* @__PURE__ */ jsx22(ChevronLeftIcon, { size: 16 })
|
|
2161
2204
|
}
|
|
2162
2205
|
),
|
|
2163
|
-
/* @__PURE__ */
|
|
2206
|
+
/* @__PURE__ */ jsx22("h2", { className: "ow-calendar__title", "aria-live": "polite", children: /* @__PURE__ */ jsx22(
|
|
2164
2207
|
"span",
|
|
2165
2208
|
{
|
|
2166
2209
|
className: cx("ow-calendar__title-text", slide.current.direction && `ow-calendar__slide--${slide.current.direction}`),
|
|
@@ -2168,7 +2211,7 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2168
2211
|
},
|
|
2169
2212
|
monthIndex
|
|
2170
2213
|
) }),
|
|
2171
|
-
/* @__PURE__ */
|
|
2214
|
+
/* @__PURE__ */ jsx22(
|
|
2172
2215
|
"button",
|
|
2173
2216
|
{
|
|
2174
2217
|
type: "button",
|
|
@@ -2176,17 +2219,17 @@ var Calendar = forwardRef11(function Calendar2({ value, defaultValue = "", onCha
|
|
|
2176
2219
|
"aria-label": `Next month, ${formatDate(nextMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2177
2220
|
disabled: !canGoForward,
|
|
2178
2221
|
onClick: () => setFocused(clampDate(addMonths(focused, 1), min, max)),
|
|
2179
|
-
children: /* @__PURE__ */
|
|
2222
|
+
children: /* @__PURE__ */ jsx22(ChevronRightIcon, { size: 16 })
|
|
2180
2223
|
}
|
|
2181
2224
|
)
|
|
2182
2225
|
] }),
|
|
2183
2226
|
/* @__PURE__ */ jsxs16("table", { ref: gridRef, role: "grid", className: "ow-calendar__grid", "aria-label": monthLabel, children: [
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2227
|
+
/* @__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)) }) }),
|
|
2228
|
+
/* @__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
2229
|
const inMonth = parseISO(date).month === month;
|
|
2187
2230
|
const isSelected = date === selected;
|
|
2188
2231
|
const disabled = isDisabled(date);
|
|
2189
|
-
return /* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ jsx22("td", { role: "gridcell", "aria-selected": isSelected, className: "ow-calendar__cell", children: /* @__PURE__ */ jsx22(
|
|
2190
2233
|
"button",
|
|
2191
2234
|
{
|
|
2192
2235
|
type: "button",
|
|
@@ -2218,7 +2261,7 @@ function clampDate(date, min, max) {
|
|
|
2218
2261
|
|
|
2219
2262
|
// src/components/Calendar/DatePicker.tsx
|
|
2220
2263
|
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
|
|
2264
|
+
import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2222
2265
|
function assignRef5(ref, value) {
|
|
2223
2266
|
if (typeof ref === "function") ref(value);
|
|
2224
2267
|
else if (ref) ref.current = value;
|
|
@@ -2286,12 +2329,12 @@ var DatePicker = forwardRef12(function DatePicker2({
|
|
|
2286
2329
|
}
|
|
2287
2330
|
},
|
|
2288
2331
|
children: [
|
|
2289
|
-
/* @__PURE__ */
|
|
2290
|
-
/* @__PURE__ */
|
|
2332
|
+
/* @__PURE__ */ jsx23(CalendarIcon, { size: size === "sm" ? 14 : 16, className: "ow-date-picker__icon" }),
|
|
2333
|
+
/* @__PURE__ */ jsx23("span", { id: `${panelId}-value`, className: cx("ow-select__value", !date && "ow-select__value--placeholder"), children: label })
|
|
2291
2334
|
]
|
|
2292
2335
|
}
|
|
2293
2336
|
),
|
|
2294
|
-
mounted ? /* @__PURE__ */
|
|
2337
|
+
mounted ? /* @__PURE__ */ jsx23(
|
|
2295
2338
|
"div",
|
|
2296
2339
|
{
|
|
2297
2340
|
ref: panelRef,
|
|
@@ -2302,7 +2345,7 @@ var DatePicker = forwardRef12(function DatePicker2({
|
|
|
2302
2345
|
"aria-label": "Choose a date",
|
|
2303
2346
|
className: "ow-popover ow-floating ow-date-picker__panel",
|
|
2304
2347
|
style,
|
|
2305
|
-
children: /* @__PURE__ */
|
|
2348
|
+
children: /* @__PURE__ */ jsx23(
|
|
2306
2349
|
Calendar,
|
|
2307
2350
|
{
|
|
2308
2351
|
...calendarProps,
|
|
@@ -2321,13 +2364,13 @@ var DatePicker = forwardRef12(function DatePicker2({
|
|
|
2321
2364
|
});
|
|
2322
2365
|
|
|
2323
2366
|
// src/components/Alert/Alert.tsx
|
|
2324
|
-
import { jsx as
|
|
2367
|
+
import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2325
2368
|
var icons = {
|
|
2326
|
-
info: /* @__PURE__ */
|
|
2327
|
-
success: /* @__PURE__ */
|
|
2328
|
-
warning: /* @__PURE__ */
|
|
2329
|
-
danger: /* @__PURE__ */
|
|
2330
|
-
neutral: /* @__PURE__ */
|
|
2369
|
+
info: /* @__PURE__ */ jsx24(InfoIcon, { size: 16 }),
|
|
2370
|
+
success: /* @__PURE__ */ jsx24(CircleCheckIcon, { size: 16 }),
|
|
2371
|
+
warning: /* @__PURE__ */ jsx24(TriangleAlertIcon, { size: 16 }),
|
|
2372
|
+
danger: /* @__PURE__ */ jsx24(CircleAlertIcon, { size: 16 }),
|
|
2373
|
+
neutral: /* @__PURE__ */ jsx24(InfoIcon, { size: 16 })
|
|
2331
2374
|
};
|
|
2332
2375
|
function Alert({
|
|
2333
2376
|
variant = "info",
|
|
@@ -2347,30 +2390,30 @@ function Alert({
|
|
|
2347
2390
|
className: cx("ow-alert", `ow-alert--${variant}`, className),
|
|
2348
2391
|
...props,
|
|
2349
2392
|
children: [
|
|
2350
|
-
icon2 === false ? null : /* @__PURE__ */
|
|
2393
|
+
icon2 === false ? null : /* @__PURE__ */ jsx24("span", { className: "ow-alert__icon", children: icon2 ?? icons[variant] }),
|
|
2351
2394
|
/* @__PURE__ */ jsxs18("div", { className: "ow-alert__body", children: [
|
|
2352
|
-
title ? /* @__PURE__ */
|
|
2353
|
-
children ? /* @__PURE__ */
|
|
2354
|
-
actions ? /* @__PURE__ */
|
|
2395
|
+
title ? /* @__PURE__ */ jsx24("div", { className: "ow-alert__title", children: title }) : null,
|
|
2396
|
+
children ? /* @__PURE__ */ jsx24("div", { className: "ow-alert__description", children }) : null,
|
|
2397
|
+
actions ? /* @__PURE__ */ jsx24("div", { className: "ow-alert__actions", children: actions }) : null
|
|
2355
2398
|
] }),
|
|
2356
|
-
onClose ? /* @__PURE__ */
|
|
2399
|
+
onClose ? /* @__PURE__ */ jsx24(CloseButton, { size: "sm", label: "Dismiss", className: "ow-alert__close", onClick: onClose }) : null
|
|
2357
2400
|
]
|
|
2358
2401
|
}
|
|
2359
2402
|
);
|
|
2360
2403
|
}
|
|
2361
2404
|
|
|
2362
2405
|
// src/components/Badge/Badge.tsx
|
|
2363
|
-
import { jsx as
|
|
2406
|
+
import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2364
2407
|
function Badge({ children, className, icon: icon2, size = "md", variant = "neutral", ...spanProps }) {
|
|
2365
2408
|
return /* @__PURE__ */ jsxs19("span", { className: cx("ow-badge", `ow-badge--${size}`, `ow-badge--${variant}`, className), ...spanProps, children: [
|
|
2366
|
-
icon2 ? /* @__PURE__ */
|
|
2367
|
-
/* @__PURE__ */
|
|
2409
|
+
icon2 ? /* @__PURE__ */ jsx25("span", { className: "ow-badge__icon", children: icon2 }) : null,
|
|
2410
|
+
/* @__PURE__ */ jsx25("span", { children })
|
|
2368
2411
|
] });
|
|
2369
2412
|
}
|
|
2370
2413
|
|
|
2371
2414
|
// src/components/Progress/Progress.tsx
|
|
2372
2415
|
import { useId as useId9 } from "react";
|
|
2373
|
-
import { jsx as
|
|
2416
|
+
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2374
2417
|
function ProgressBar({
|
|
2375
2418
|
value,
|
|
2376
2419
|
max = 100,
|
|
@@ -2388,10 +2431,10 @@ function ProgressBar({
|
|
|
2388
2431
|
const text = valueLabel ?? `${Math.round(pct)}%`;
|
|
2389
2432
|
return /* @__PURE__ */ jsxs20("div", { className: cx("ow-progress", `ow-progress--${size}`, `ow-progress--${tone}`, className), children: [
|
|
2390
2433
|
label || showValue && !indeterminate ? /* @__PURE__ */ jsxs20("div", { className: "ow-progress__header", children: [
|
|
2391
|
-
label ? /* @__PURE__ */
|
|
2392
|
-
showValue && !indeterminate ? /* @__PURE__ */
|
|
2434
|
+
label ? /* @__PURE__ */ jsx26("span", { id: labelId, className: "ow-progress__label", children: label }) : /* @__PURE__ */ jsx26("span", {}),
|
|
2435
|
+
showValue && !indeterminate ? /* @__PURE__ */ jsx26("span", { className: "ow-progress__value", children: text }) : null
|
|
2393
2436
|
] }) : null,
|
|
2394
|
-
/* @__PURE__ */
|
|
2437
|
+
/* @__PURE__ */ jsx26(
|
|
2395
2438
|
"div",
|
|
2396
2439
|
{
|
|
2397
2440
|
role: "progressbar",
|
|
@@ -2402,7 +2445,7 @@ function ProgressBar({
|
|
|
2402
2445
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
2403
2446
|
"aria-valuetext": indeterminate ? void 0 : text,
|
|
2404
2447
|
className: cx("ow-progress__track", indeterminate && "ow-progress__track--indeterminate"),
|
|
2405
|
-
children: /* @__PURE__ */
|
|
2448
|
+
children: /* @__PURE__ */ jsx26("div", { className: "ow-progress__fill", style: indeterminate ? void 0 : { width: `${pct}%` } })
|
|
2406
2449
|
}
|
|
2407
2450
|
)
|
|
2408
2451
|
] });
|
|
@@ -2438,8 +2481,8 @@ function ProgressCircle({
|
|
|
2438
2481
|
style: { width: box, height: box },
|
|
2439
2482
|
children: [
|
|
2440
2483
|
/* @__PURE__ */ jsxs20("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
|
|
2441
|
-
/* @__PURE__ */
|
|
2442
|
-
/* @__PURE__ */
|
|
2484
|
+
/* @__PURE__ */ jsx26("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
|
|
2485
|
+
/* @__PURE__ */ jsx26(
|
|
2443
2486
|
"circle",
|
|
2444
2487
|
{
|
|
2445
2488
|
className: "ow-progress-circle__fill",
|
|
@@ -2466,9 +2509,9 @@ function ProgressCircle({
|
|
|
2466
2509
|
|
|
2467
2510
|
// src/components/Skeleton/Skeleton.tsx
|
|
2468
2511
|
import { useEffect as useEffect8, useState as useState11 } from "react";
|
|
2469
|
-
import { jsx as
|
|
2512
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2470
2513
|
function Skeleton({ width = "100%", height = 14, soft = false, shape = "bar", className }) {
|
|
2471
|
-
return /* @__PURE__ */
|
|
2514
|
+
return /* @__PURE__ */ jsx27(
|
|
2472
2515
|
"span",
|
|
2473
2516
|
{
|
|
2474
2517
|
className: cx("ow-skeleton", soft && "ow-skeleton--soft", shape === "block" && "ow-skeleton--block", className),
|
|
@@ -2484,26 +2527,26 @@ function SkeletonRows({ label = "Loading", rows = 4, delayMs = 150 }) {
|
|
|
2484
2527
|
const timer = window.setTimeout(() => setIsVisible(true), delayMs);
|
|
2485
2528
|
return () => window.clearTimeout(timer);
|
|
2486
2529
|
}, [delayMs]);
|
|
2487
|
-
return /* @__PURE__ */
|
|
2530
|
+
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
2531
|
/* @__PURE__ */ jsxs21("div", { className: "ow-skeleton-rows__text", children: [
|
|
2489
|
-
/* @__PURE__ */
|
|
2490
|
-
/* @__PURE__ */
|
|
2532
|
+
/* @__PURE__ */ jsx27(Skeleton, { width: `${28 + index * 17 % 22}%`, height: 14 }),
|
|
2533
|
+
/* @__PURE__ */ jsx27(Skeleton, { width: `${46 + index * 23 % 30}%`, height: 12, soft: true })
|
|
2491
2534
|
] }),
|
|
2492
|
-
/* @__PURE__ */
|
|
2535
|
+
/* @__PURE__ */ jsx27(Skeleton, { width: 96, height: 32, soft: true, shape: "block" })
|
|
2493
2536
|
] }, index)) }) : null });
|
|
2494
2537
|
}
|
|
2495
2538
|
|
|
2496
2539
|
// src/components/Toast/Toast.tsx
|
|
2497
2540
|
import { useEffect as useEffect9, useRef as useRef13 } from "react";
|
|
2498
2541
|
import { Toaster as SonnerToaster, toast } from "sonner";
|
|
2499
|
-
import { jsx as
|
|
2542
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
2500
2543
|
var icons2 = {
|
|
2501
|
-
success: /* @__PURE__ */
|
|
2502
|
-
error: /* @__PURE__ */
|
|
2503
|
-
warning: /* @__PURE__ */
|
|
2504
|
-
info: /* @__PURE__ */
|
|
2505
|
-
loading: /* @__PURE__ */
|
|
2506
|
-
close: /* @__PURE__ */
|
|
2544
|
+
success: /* @__PURE__ */ jsx28(CircleCheckIcon, { size: 16 }),
|
|
2545
|
+
error: /* @__PURE__ */ jsx28(CircleAlertIcon, { size: 16 }),
|
|
2546
|
+
warning: /* @__PURE__ */ jsx28(TriangleAlertIcon, { size: 16 }),
|
|
2547
|
+
info: /* @__PURE__ */ jsx28(InfoIcon, { size: 16 }),
|
|
2548
|
+
loading: /* @__PURE__ */ jsx28(Spinner, { size: "sm", label: "" }),
|
|
2549
|
+
close: /* @__PURE__ */ jsx28(XIcon, { size: 12 })
|
|
2507
2550
|
};
|
|
2508
2551
|
function Toaster({
|
|
2509
2552
|
position = "bottom-center",
|
|
@@ -2534,7 +2577,7 @@ function Toaster({
|
|
|
2534
2577
|
observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ["open"] });
|
|
2535
2578
|
return () => observer.disconnect();
|
|
2536
2579
|
}, []);
|
|
2537
|
-
return /* @__PURE__ */
|
|
2580
|
+
return /* @__PURE__ */ jsx28("div", { ref: layerRef, ...manualPopover, className: "ow-toaster-layer", children: /* @__PURE__ */ jsx28(
|
|
2538
2581
|
SonnerToaster,
|
|
2539
2582
|
{
|
|
2540
2583
|
id,
|
|
@@ -2556,7 +2599,7 @@ function Toaster({
|
|
|
2556
2599
|
|
|
2557
2600
|
// src/components/Tooltip/Tooltip.tsx
|
|
2558
2601
|
import { useEffect as useEffect10, useRef as useRef14, useState as useState12 } from "react";
|
|
2559
|
-
import { jsx as
|
|
2602
|
+
import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2560
2603
|
var lastClosedAt = 0;
|
|
2561
2604
|
var warmWindow = 500;
|
|
2562
2605
|
function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
@@ -2603,7 +2646,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
|
2603
2646
|
onBlur: hide,
|
|
2604
2647
|
children: [
|
|
2605
2648
|
children,
|
|
2606
|
-
mounted ? /* @__PURE__ */
|
|
2649
|
+
mounted ? /* @__PURE__ */ jsx29("span", { ref: bubbleRef, ...manualPopover, "data-state": state, className: "ow-tooltip__bubble ow-floating", style, "aria-hidden": "true", children: label }) : null
|
|
2607
2650
|
]
|
|
2608
2651
|
}
|
|
2609
2652
|
);
|
|
@@ -2669,7 +2712,7 @@ function useModalDialog(open, onCancel) {
|
|
|
2669
2712
|
}
|
|
2670
2713
|
|
|
2671
2714
|
// src/components/Dialog/Dialog.tsx
|
|
2672
|
-
import { Fragment as Fragment5, jsx as
|
|
2715
|
+
import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2673
2716
|
function Dialog({
|
|
2674
2717
|
open,
|
|
2675
2718
|
onClose,
|
|
@@ -2690,13 +2733,13 @@ function Dialog({
|
|
|
2690
2733
|
if (!mounted) return null;
|
|
2691
2734
|
const body = /* @__PURE__ */ jsxs23(Fragment5, { children: [
|
|
2692
2735
|
/* @__PURE__ */ jsxs23("div", { className: "ow-dialog__header", children: [
|
|
2693
|
-
/* @__PURE__ */
|
|
2694
|
-
description ? /* @__PURE__ */
|
|
2736
|
+
/* @__PURE__ */ jsx30("h2", { id: titleId, className: "ow-dialog__title", children: title }),
|
|
2737
|
+
description ? /* @__PURE__ */ jsx30("div", { id: descriptionId, className: "ow-dialog__description", children: description }) : null
|
|
2695
2738
|
] }),
|
|
2696
2739
|
children,
|
|
2697
|
-
actions ? /* @__PURE__ */
|
|
2740
|
+
actions ? /* @__PURE__ */ jsx30("div", { className: "ow-dialog__actions", children: actions }) : null
|
|
2698
2741
|
] });
|
|
2699
|
-
return /* @__PURE__ */
|
|
2742
|
+
return /* @__PURE__ */ jsx30(
|
|
2700
2743
|
"dialog",
|
|
2701
2744
|
{
|
|
2702
2745
|
ref: dialogRef,
|
|
@@ -2704,7 +2747,7 @@ function Dialog({
|
|
|
2704
2747
|
style: { width: `min(${width}px, calc(100% - 32px))` },
|
|
2705
2748
|
"aria-labelledby": titleId,
|
|
2706
2749
|
"aria-describedby": description ? descriptionId : void 0,
|
|
2707
|
-
children: onSubmit ? /* @__PURE__ */
|
|
2750
|
+
children: onSubmit ? /* @__PURE__ */ jsx30(
|
|
2708
2751
|
"form",
|
|
2709
2752
|
{
|
|
2710
2753
|
className: "ow-dialog__body",
|
|
@@ -2714,7 +2757,7 @@ function Dialog({
|
|
|
2714
2757
|
},
|
|
2715
2758
|
children: body
|
|
2716
2759
|
}
|
|
2717
|
-
) : /* @__PURE__ */
|
|
2760
|
+
) : /* @__PURE__ */ jsx30("div", { className: "ow-dialog__body", children: body })
|
|
2718
2761
|
}
|
|
2719
2762
|
);
|
|
2720
2763
|
}
|
|
@@ -2754,7 +2797,7 @@ function ConfirmDialog({
|
|
|
2754
2797
|
width: 380,
|
|
2755
2798
|
className: "ow-dialog--confirm",
|
|
2756
2799
|
title: /* @__PURE__ */ jsxs23(Fragment5, { children: [
|
|
2757
|
-
destructive ? /* @__PURE__ */
|
|
2800
|
+
destructive ? /* @__PURE__ */ jsx30("span", { className: "ow-dialog__danger-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(TrashIcon, { size: 18 }) }) : null,
|
|
2758
2801
|
title
|
|
2759
2802
|
] }),
|
|
2760
2803
|
description,
|
|
@@ -2762,8 +2805,8 @@ function ConfirmDialog({
|
|
|
2762
2805
|
if (!confirmDisabled && !isWorking) void confirm();
|
|
2763
2806
|
},
|
|
2764
2807
|
actions: /* @__PURE__ */ jsxs23(Fragment5, { children: [
|
|
2765
|
-
/* @__PURE__ */
|
|
2766
|
-
/* @__PURE__ */
|
|
2808
|
+
/* @__PURE__ */ jsx30(Button, { type: "button", disabled: isWorking, autoFocus: true, onClick: onClose, children: "Cancel" }),
|
|
2809
|
+
/* @__PURE__ */ jsx30(
|
|
2767
2810
|
Button,
|
|
2768
2811
|
{
|
|
2769
2812
|
type: "submit",
|
|
@@ -2775,7 +2818,7 @@ function ConfirmDialog({
|
|
|
2775
2818
|
] }),
|
|
2776
2819
|
children: [
|
|
2777
2820
|
children,
|
|
2778
|
-
error ? /* @__PURE__ */
|
|
2821
|
+
error ? /* @__PURE__ */ jsx30("span", { role: "alert", className: "ow-dialog__error", children: error }) : null
|
|
2779
2822
|
]
|
|
2780
2823
|
}
|
|
2781
2824
|
);
|
|
@@ -2783,7 +2826,7 @@ function ConfirmDialog({
|
|
|
2783
2826
|
|
|
2784
2827
|
// src/components/Drawer/Drawer.tsx
|
|
2785
2828
|
import { useId as useId11 } from "react";
|
|
2786
|
-
import { jsx as
|
|
2829
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2787
2830
|
function Drawer({
|
|
2788
2831
|
open,
|
|
2789
2832
|
onClose,
|
|
@@ -2814,13 +2857,13 @@ function Drawer({
|
|
|
2814
2857
|
children: [
|
|
2815
2858
|
/* @__PURE__ */ jsxs24("header", { className: "ow-drawer__header", children: [
|
|
2816
2859
|
/* @__PURE__ */ jsxs24("div", { className: "ow-drawer__titles", children: [
|
|
2817
|
-
/* @__PURE__ */
|
|
2818
|
-
description ? /* @__PURE__ */
|
|
2860
|
+
/* @__PURE__ */ jsx31("h2", { id: titleId, className: "ow-drawer__title", children: title }),
|
|
2861
|
+
description ? /* @__PURE__ */ jsx31("p", { id: descriptionId, className: "ow-drawer__description", children: description }) : null
|
|
2819
2862
|
] }),
|
|
2820
|
-
dismissible ? /* @__PURE__ */
|
|
2863
|
+
dismissible ? /* @__PURE__ */ jsx31(CloseButton, { onClick: onClose }) : null
|
|
2821
2864
|
] }),
|
|
2822
|
-
/* @__PURE__ */
|
|
2823
|
-
footer ? /* @__PURE__ */
|
|
2865
|
+
/* @__PURE__ */ jsx31("div", { className: "ow-drawer__body", children }),
|
|
2866
|
+
footer ? /* @__PURE__ */ jsx31("footer", { className: "ow-drawer__footer", children: footer }) : null
|
|
2824
2867
|
]
|
|
2825
2868
|
}
|
|
2826
2869
|
);
|
|
@@ -2835,7 +2878,7 @@ import {
|
|
|
2835
2878
|
useId as useId12,
|
|
2836
2879
|
useRef as useRef16
|
|
2837
2880
|
} from "react";
|
|
2838
|
-
import { Fragment as Fragment6, jsx as
|
|
2881
|
+
import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2839
2882
|
function Popover({
|
|
2840
2883
|
trigger,
|
|
2841
2884
|
children,
|
|
@@ -2888,7 +2931,7 @@ function Popover({
|
|
|
2888
2931
|
}
|
|
2889
2932
|
}) : trigger;
|
|
2890
2933
|
return /* @__PURE__ */ jsxs25(Fragment6, { children: [
|
|
2891
|
-
/* @__PURE__ */
|
|
2934
|
+
/* @__PURE__ */ jsx32("span", { ref: anchorRef, className: "ow-popover-anchor", children: triggerElement }),
|
|
2892
2935
|
mounted ? /* @__PURE__ */ jsxs25(
|
|
2893
2936
|
"div",
|
|
2894
2937
|
{
|
|
@@ -2907,7 +2950,7 @@ function Popover({
|
|
|
2907
2950
|
if (next && !panelRef.current?.contains(next) && !anchorRef.current?.contains(next)) setOpen(false);
|
|
2908
2951
|
},
|
|
2909
2952
|
children: [
|
|
2910
|
-
title ? /* @__PURE__ */
|
|
2953
|
+
title ? /* @__PURE__ */ jsx32("div", { id: `${id}-title`, className: "ow-popover__title", children: title }) : null,
|
|
2911
2954
|
children
|
|
2912
2955
|
]
|
|
2913
2956
|
}
|
|
@@ -2983,7 +3026,7 @@ function useMenuKeyboard({
|
|
|
2983
3026
|
}
|
|
2984
3027
|
|
|
2985
3028
|
// src/components/Menu/Menu.tsx
|
|
2986
|
-
import { jsx as
|
|
3029
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2987
3030
|
var MenuContext = createContext3(null);
|
|
2988
3031
|
function Menu({ trigger, children, label, align = "start", above = false, width, defaultOpen = false, className }) {
|
|
2989
3032
|
const [open, setOpen] = useState15(defaultOpen);
|
|
@@ -3023,7 +3066,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3023
3066
|
}) : trigger;
|
|
3024
3067
|
return /* @__PURE__ */ jsxs26("span", { ref: rootRef, className: "ow-menu", children: [
|
|
3025
3068
|
triggerElement,
|
|
3026
|
-
mounted ? /* @__PURE__ */
|
|
3069
|
+
mounted ? /* @__PURE__ */ jsx33(
|
|
3027
3070
|
MenuContext.Provider,
|
|
3028
3071
|
{
|
|
3029
3072
|
value: {
|
|
@@ -3032,7 +3075,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3032
3075
|
triggerRef.current?.focus();
|
|
3033
3076
|
}
|
|
3034
3077
|
},
|
|
3035
|
-
children: /* @__PURE__ */
|
|
3078
|
+
children: /* @__PURE__ */ jsx33(
|
|
3036
3079
|
"div",
|
|
3037
3080
|
{
|
|
3038
3081
|
ref: menuRef,
|
|
@@ -3069,18 +3112,18 @@ var MenuItem = forwardRef13(function MenuItem2({ icon: icon2, onSelect, destruct
|
|
|
3069
3112
|
},
|
|
3070
3113
|
...buttonProps,
|
|
3071
3114
|
children: [
|
|
3072
|
-
icon2 ? /* @__PURE__ */
|
|
3073
|
-
/* @__PURE__ */
|
|
3074
|
-
shortcut ? /* @__PURE__ */
|
|
3115
|
+
icon2 ? /* @__PURE__ */ jsx33("span", { className: "ow-menu__icon", children: icon2 }) : null,
|
|
3116
|
+
/* @__PURE__ */ jsx33("span", { className: "ow-menu__label", children }),
|
|
3117
|
+
shortcut ? /* @__PURE__ */ jsx33("kbd", { className: "ow-menu__shortcut", children: shortcut }) : null
|
|
3075
3118
|
]
|
|
3076
3119
|
}
|
|
3077
3120
|
);
|
|
3078
3121
|
});
|
|
3079
3122
|
function MenuLabel({ children }) {
|
|
3080
|
-
return /* @__PURE__ */
|
|
3123
|
+
return /* @__PURE__ */ jsx33("div", { className: "ow-menu__group-label", role: "presentation", children });
|
|
3081
3124
|
}
|
|
3082
3125
|
function MenuSeparator() {
|
|
3083
|
-
return /* @__PURE__ */
|
|
3126
|
+
return /* @__PURE__ */ jsx33("div", { className: "ow-menu__separator", role: "separator" });
|
|
3084
3127
|
}
|
|
3085
3128
|
|
|
3086
3129
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
@@ -3121,7 +3164,7 @@ function filterCommands(commands, query) {
|
|
|
3121
3164
|
}
|
|
3122
3165
|
|
|
3123
3166
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
3124
|
-
import { jsx as
|
|
3167
|
+
import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3125
3168
|
function CommandPalette({ open, onClose, commands, placeholder = "Search commands\u2026" }) {
|
|
3126
3169
|
const { dialogRef, mounted } = useModalDialog(open, onClose);
|
|
3127
3170
|
const [query, setQuery] = useState16("");
|
|
@@ -3149,8 +3192,8 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3149
3192
|
}
|
|
3150
3193
|
return /* @__PURE__ */ jsxs27("dialog", { ref: dialogRef, className: "ow-dialog ow-palette", "aria-label": "Command palette", children: [
|
|
3151
3194
|
/* @__PURE__ */ jsxs27("div", { className: "ow-palette__search", children: [
|
|
3152
|
-
/* @__PURE__ */
|
|
3153
|
-
/* @__PURE__ */
|
|
3195
|
+
/* @__PURE__ */ jsx34(SearchIcon, { size: 16, className: "ow-palette__search-icon" }),
|
|
3196
|
+
/* @__PURE__ */ jsx34(
|
|
3154
3197
|
"input",
|
|
3155
3198
|
{
|
|
3156
3199
|
autoFocus: true,
|
|
@@ -3177,13 +3220,13 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3177
3220
|
}
|
|
3178
3221
|
}
|
|
3179
3222
|
),
|
|
3180
|
-
/* @__PURE__ */
|
|
3223
|
+
/* @__PURE__ */ jsx34("kbd", { className: "ow-palette__esc", children: "esc" })
|
|
3181
3224
|
] }),
|
|
3182
|
-
/* @__PURE__ */
|
|
3225
|
+
/* @__PURE__ */ jsx34("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "ow-palette__list", children: results.length ? results.map((command, index) => {
|
|
3183
3226
|
const showGroup = !query.trim() && command.group && command.group !== results[index - 1]?.group;
|
|
3184
3227
|
const isActive = command === active;
|
|
3185
3228
|
return /* @__PURE__ */ jsxs27("li", { role: "presentation", children: [
|
|
3186
|
-
showGroup ? /* @__PURE__ */
|
|
3229
|
+
showGroup ? /* @__PURE__ */ jsx34("div", { className: "ow-palette__group", children: command.group }) : null,
|
|
3187
3230
|
/* @__PURE__ */ jsxs27(
|
|
3188
3231
|
"div",
|
|
3189
3232
|
{
|
|
@@ -3199,11 +3242,11 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3199
3242
|
onMouseMove: () => setActiveIndex(index),
|
|
3200
3243
|
onClick: () => run(command),
|
|
3201
3244
|
children: [
|
|
3202
|
-
/* @__PURE__ */
|
|
3203
|
-
/* @__PURE__ */
|
|
3204
|
-
command.disabled && isActive ? /* @__PURE__ */
|
|
3205
|
-
command.shortcut ? /* @__PURE__ */
|
|
3206
|
-
isActive && !command.disabled ? /* @__PURE__ */
|
|
3245
|
+
/* @__PURE__ */ jsx34("span", { className: "ow-palette__icon", "aria-hidden": "true", children: command.icon }),
|
|
3246
|
+
/* @__PURE__ */ jsx34("span", { className: "ow-palette__title", children: command.title }),
|
|
3247
|
+
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,
|
|
3248
|
+
command.shortcut ? /* @__PURE__ */ jsx34("kbd", { className: "ow-palette__shortcut", children: command.shortcut }) : null,
|
|
3249
|
+
isActive && !command.disabled ? /* @__PURE__ */ jsx34(CornerDownLeftIcon, { size: 13, className: "ow-palette__enter" }) : null
|
|
3207
3250
|
]
|
|
3208
3251
|
}
|
|
3209
3252
|
)
|
|
@@ -3224,7 +3267,7 @@ import {
|
|
|
3224
3267
|
useLayoutEffect as useLayoutEffect4,
|
|
3225
3268
|
useRef as useRef19
|
|
3226
3269
|
} from "react";
|
|
3227
|
-
import { jsx as
|
|
3270
|
+
import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3228
3271
|
var TabsContext = createContext4(null);
|
|
3229
3272
|
function useTabs(component) {
|
|
3230
3273
|
const context = useContext4(TabsContext);
|
|
@@ -3235,7 +3278,7 @@ var idPart = (value) => value.replace(/[^\w-]/g, "_");
|
|
|
3235
3278
|
function Tabs({ value, defaultValue = "", onValueChange, variant = "segmented", className, children, ...props }) {
|
|
3236
3279
|
const [current, select] = useControllableState(value, defaultValue, onValueChange);
|
|
3237
3280
|
const baseId = useId15();
|
|
3238
|
-
return /* @__PURE__ */
|
|
3281
|
+
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
3282
|
}
|
|
3240
3283
|
function TabList({ className, onKeyDown, children, ...props }) {
|
|
3241
3284
|
const { value, select } = useTabs("TabList");
|
|
@@ -3261,7 +3304,7 @@ function TabList({ className, onKeyDown, children, ...props }) {
|
|
|
3261
3304
|
}
|
|
3262
3305
|
return /* @__PURE__ */ jsxs28("div", { ref: listRef, role: "tablist", className: cx("ow-tabs__list", className), onKeyDown: handleKeyDown, ...props, children: [
|
|
3263
3306
|
children,
|
|
3264
|
-
/* @__PURE__ */
|
|
3307
|
+
/* @__PURE__ */ jsx35("span", { className: "ow-indicator", "aria-hidden": "true" })
|
|
3265
3308
|
] });
|
|
3266
3309
|
}
|
|
3267
3310
|
function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
@@ -3284,7 +3327,7 @@ function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
|
3284
3327
|
},
|
|
3285
3328
|
...props,
|
|
3286
3329
|
children: [
|
|
3287
|
-
icon2 ? /* @__PURE__ */
|
|
3330
|
+
icon2 ? /* @__PURE__ */ jsx35("span", { className: "ow-tab__icon", children: icon2 }) : null,
|
|
3288
3331
|
children
|
|
3289
3332
|
]
|
|
3290
3333
|
}
|
|
@@ -3294,7 +3337,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
|
|
|
3294
3337
|
const { value: current, baseId } = useTabs("TabPanel");
|
|
3295
3338
|
const selected = current === value;
|
|
3296
3339
|
if (!selected && !keepMounted) return null;
|
|
3297
|
-
return /* @__PURE__ */
|
|
3340
|
+
return /* @__PURE__ */ jsx35(
|
|
3298
3341
|
"div",
|
|
3299
3342
|
{
|
|
3300
3343
|
role: "tabpanel",
|
|
@@ -3317,7 +3360,7 @@ import {
|
|
|
3317
3360
|
useId as useId16,
|
|
3318
3361
|
useRef as useRef20
|
|
3319
3362
|
} from "react";
|
|
3320
|
-
import { jsx as
|
|
3363
|
+
import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3321
3364
|
function DisclosureView({
|
|
3322
3365
|
open,
|
|
3323
3366
|
onToggle,
|
|
@@ -3339,7 +3382,7 @@ function DisclosureView({
|
|
|
3339
3382
|
}, [open]);
|
|
3340
3383
|
return /* @__PURE__ */ jsxs29("div", { className: cx(item ? "ow-accordion__item" : "ow-disclosure", className), "data-open": open, children: [
|
|
3341
3384
|
/* @__PURE__ */ jsxs29("div", { className: "ow-disclosure__header", children: [
|
|
3342
|
-
/* @__PURE__ */
|
|
3385
|
+
/* @__PURE__ */ jsx36(Heading, { className: "ow-disclosure__heading", children: /* @__PURE__ */ jsxs29(
|
|
3343
3386
|
"button",
|
|
3344
3387
|
{
|
|
3345
3388
|
type: "button",
|
|
@@ -3351,18 +3394,18 @@ function DisclosureView({
|
|
|
3351
3394
|
"data-accordion-trigger": item ? "" : void 0,
|
|
3352
3395
|
onClick: onToggle,
|
|
3353
3396
|
children: [
|
|
3354
|
-
/* @__PURE__ */
|
|
3355
|
-
icon2 ? /* @__PURE__ */
|
|
3397
|
+
/* @__PURE__ */ jsx36(ChevronRightIcon, { size: 14, className: "ow-disclosure__chevron" }),
|
|
3398
|
+
icon2 ? /* @__PURE__ */ jsx36("span", { className: "ow-disclosure__icon", children: icon2 }) : null,
|
|
3356
3399
|
/* @__PURE__ */ jsxs29("span", { className: "ow-disclosure__titles", children: [
|
|
3357
|
-
/* @__PURE__ */
|
|
3358
|
-
subtitle ? /* @__PURE__ */
|
|
3400
|
+
/* @__PURE__ */ jsx36("span", { className: "ow-disclosure__title", children: title }),
|
|
3401
|
+
subtitle ? /* @__PURE__ */ jsx36("span", { className: "ow-disclosure__subtitle", children: subtitle }) : null
|
|
3359
3402
|
] })
|
|
3360
3403
|
]
|
|
3361
3404
|
}
|
|
3362
3405
|
) }),
|
|
3363
|
-
actions ? /* @__PURE__ */
|
|
3406
|
+
actions ? /* @__PURE__ */ jsx36("div", { className: "ow-disclosure__actions", children: actions }) : null
|
|
3364
3407
|
] }),
|
|
3365
|
-
/* @__PURE__ */
|
|
3408
|
+
/* @__PURE__ */ jsx36(
|
|
3366
3409
|
"div",
|
|
3367
3410
|
{
|
|
3368
3411
|
ref: panelRef,
|
|
@@ -3370,7 +3413,7 @@ function DisclosureView({
|
|
|
3370
3413
|
role: "region",
|
|
3371
3414
|
"aria-labelledby": `${id}-trigger`,
|
|
3372
3415
|
className: "ow-disclosure__panel",
|
|
3373
|
-
children: /* @__PURE__ */
|
|
3416
|
+
children: /* @__PURE__ */ jsx36("div", { className: "ow-disclosure__clip", children: /* @__PURE__ */ jsx36("div", { className: "ow-disclosure__content", children }) })
|
|
3374
3417
|
}
|
|
3375
3418
|
)
|
|
3376
3419
|
] });
|
|
@@ -3385,7 +3428,7 @@ function Disclosure({
|
|
|
3385
3428
|
...props
|
|
3386
3429
|
}) {
|
|
3387
3430
|
const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
|
|
3388
|
-
return /* @__PURE__ */
|
|
3431
|
+
return /* @__PURE__ */ jsx36(
|
|
3389
3432
|
DisclosureView,
|
|
3390
3433
|
{
|
|
3391
3434
|
...props,
|
|
@@ -3427,12 +3470,12 @@ function Accordion({
|
|
|
3427
3470
|
event.preventDefault();
|
|
3428
3471
|
triggers[(moves[event.key] + triggers.length) % triggers.length]?.focus();
|
|
3429
3472
|
}
|
|
3430
|
-
return /* @__PURE__ */
|
|
3473
|
+
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
3474
|
}
|
|
3432
3475
|
function AccordionItem({ value, ...props }) {
|
|
3433
3476
|
const context = useContext5(AccordionContext);
|
|
3434
3477
|
if (!context) throw new Error("AccordionItem must be inside <Accordion>.");
|
|
3435
|
-
return /* @__PURE__ */
|
|
3478
|
+
return /* @__PURE__ */ jsx36(
|
|
3436
3479
|
DisclosureView,
|
|
3437
3480
|
{
|
|
3438
3481
|
...props,
|
|
@@ -3446,13 +3489,13 @@ function AccordionItem({ value, ...props }) {
|
|
|
3446
3489
|
|
|
3447
3490
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
3448
3491
|
import { forwardRef as forwardRef14 } from "react";
|
|
3449
|
-
import { Fragment as Fragment7, jsx as
|
|
3492
|
+
import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3450
3493
|
function Breadcrumbs({ items: items2, separator = "chevron", label = "Breadcrumb", className }) {
|
|
3451
|
-
return /* @__PURE__ */
|
|
3494
|
+
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
3495
|
const isLast = index === items2.length - 1;
|
|
3453
3496
|
return /* @__PURE__ */ jsxs30("li", { className: "ow-breadcrumbs__item", children: [
|
|
3454
|
-
isLast ? /* @__PURE__ */
|
|
3455
|
-
isLast ? null : /* @__PURE__ */
|
|
3497
|
+
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 }),
|
|
3498
|
+
isLast ? null : /* @__PURE__ */ jsx37("span", { className: "ow-breadcrumbs__separator", "aria-hidden": "true", children: separator === "slash" ? "/" : /* @__PURE__ */ jsx37(ChevronRightIcon, { size: 14 }) })
|
|
3456
3499
|
] }, index);
|
|
3457
3500
|
}) }) });
|
|
3458
3501
|
}
|
|
@@ -3471,8 +3514,8 @@ var Link = forwardRef14(function Link2({ variant = "default", external = false,
|
|
|
3471
3514
|
children: [
|
|
3472
3515
|
children,
|
|
3473
3516
|
external ? /* @__PURE__ */ jsxs30(Fragment7, { children: [
|
|
3474
|
-
/* @__PURE__ */
|
|
3475
|
-
/* @__PURE__ */
|
|
3517
|
+
/* @__PURE__ */ jsx37(ArrowUpRightIcon, { size: 13, className: "ow-link__external" }),
|
|
3518
|
+
/* @__PURE__ */ jsx37("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
|
|
3476
3519
|
] }) : null
|
|
3477
3520
|
]
|
|
3478
3521
|
}
|
|
@@ -3480,7 +3523,7 @@ var Link = forwardRef14(function Link2({ variant = "default", external = false,
|
|
|
3480
3523
|
});
|
|
3481
3524
|
|
|
3482
3525
|
// src/components/Pagination/Pagination.tsx
|
|
3483
|
-
import { jsx as
|
|
3526
|
+
import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3484
3527
|
function paginationItems(page, pageCount, siblingCount = 1, boundaryCount = 1) {
|
|
3485
3528
|
const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
|
|
3486
3529
|
const startPages = range(1, Math.min(boundaryCount, pageCount));
|
|
@@ -3513,8 +3556,8 @@ function Pagination({
|
|
|
3513
3556
|
}) {
|
|
3514
3557
|
const items2 = paginationItems(page, pageCount, siblingCount, boundaryCount);
|
|
3515
3558
|
const go = (next) => onPageChange(Math.min(Math.max(1, next), pageCount));
|
|
3516
|
-
return /* @__PURE__ */
|
|
3517
|
-
/* @__PURE__ */
|
|
3559
|
+
return /* @__PURE__ */ jsx38("nav", { "aria-label": label, className: cx("ow-pagination", `ow-pagination--${size}`, className), children: /* @__PURE__ */ jsxs31("ul", { className: "ow-pagination__list", children: [
|
|
3560
|
+
/* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
|
|
3518
3561
|
"button",
|
|
3519
3562
|
{
|
|
3520
3563
|
type: "button",
|
|
@@ -3522,11 +3565,11 @@ function Pagination({
|
|
|
3522
3565
|
"aria-label": "Previous page",
|
|
3523
3566
|
disabled: page <= 1,
|
|
3524
3567
|
onClick: () => go(page - 1),
|
|
3525
|
-
children: /* @__PURE__ */
|
|
3568
|
+
children: /* @__PURE__ */ jsx38(ChevronLeftIcon, { size: 16 })
|
|
3526
3569
|
}
|
|
3527
3570
|
) }),
|
|
3528
3571
|
items2.map(
|
|
3529
|
-
(item) => typeof item === "number" ? /* @__PURE__ */
|
|
3572
|
+
(item) => typeof item === "number" ? /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
|
|
3530
3573
|
"button",
|
|
3531
3574
|
{
|
|
3532
3575
|
type: "button",
|
|
@@ -3536,9 +3579,9 @@ function Pagination({
|
|
|
3536
3579
|
onClick: () => go(item),
|
|
3537
3580
|
children: item
|
|
3538
3581
|
}
|
|
3539
|
-
) }, item) : /* @__PURE__ */
|
|
3582
|
+
) }, item) : /* @__PURE__ */ jsx38("li", { className: "ow-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
|
|
3540
3583
|
),
|
|
3541
|
-
/* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
|
|
3542
3585
|
"button",
|
|
3543
3586
|
{
|
|
3544
3587
|
type: "button",
|
|
@@ -3546,7 +3589,7 @@ function Pagination({
|
|
|
3546
3589
|
"aria-label": "Next page",
|
|
3547
3590
|
disabled: page >= pageCount,
|
|
3548
3591
|
onClick: () => go(page + 1),
|
|
3549
|
-
children: /* @__PURE__ */
|
|
3592
|
+
children: /* @__PURE__ */ jsx38(ChevronRightIcon, { size: 16 })
|
|
3550
3593
|
}
|
|
3551
3594
|
) })
|
|
3552
3595
|
] }) });
|
|
@@ -3554,12 +3597,12 @@ function Pagination({
|
|
|
3554
3597
|
|
|
3555
3598
|
// src/components/Steps/Steps.tsx
|
|
3556
3599
|
import { useId as useId17 } from "react";
|
|
3557
|
-
import { jsx as
|
|
3600
|
+
import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3558
3601
|
function Steps({ items: items2, current = 0, orientation = "vertical", title, label = "Steps", className }) {
|
|
3559
3602
|
const statuses = items2.map((item, index) => item.status ?? (index < current ? "done" : index === current ? "current" : "upcoming"));
|
|
3560
3603
|
const doneCount = statuses.filter((status) => status === "done").length;
|
|
3561
3604
|
const headingId = useId17();
|
|
3562
|
-
const list = /* @__PURE__ */
|
|
3605
|
+
const list = /* @__PURE__ */ jsx39("ol", { className: "ow-steps__list", children: items2.map((item, index) => {
|
|
3563
3606
|
const status = statuses[index];
|
|
3564
3607
|
return /* @__PURE__ */ jsxs32(
|
|
3565
3608
|
"li",
|
|
@@ -3567,15 +3610,15 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3567
3610
|
className: cx("ow-steps__item", `ow-steps__item--${status}`),
|
|
3568
3611
|
"aria-current": status === "current" ? "step" : void 0,
|
|
3569
3612
|
children: [
|
|
3570
|
-
/* @__PURE__ */
|
|
3613
|
+
/* @__PURE__ */ jsx39("span", { className: "ow-steps__marker", children: status === "done" ? /* @__PURE__ */ jsx39(CheckIcon, { size: 14, strokeWidth: 3 }) : index + 1 }),
|
|
3571
3614
|
/* @__PURE__ */ jsxs32("span", { className: "ow-steps__text", children: [
|
|
3572
3615
|
/* @__PURE__ */ jsxs32("span", { className: "ow-steps__title", children: [
|
|
3573
|
-
status === "done" ? /* @__PURE__ */
|
|
3616
|
+
status === "done" ? /* @__PURE__ */ jsx39("span", { className: "ow-visually-hidden", children: "Done: " }) : null,
|
|
3574
3617
|
item.title
|
|
3575
3618
|
] }),
|
|
3576
|
-
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */
|
|
3619
|
+
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ jsx39("span", { className: "ow-steps__description", children: item.description }) : null
|
|
3577
3620
|
] }),
|
|
3578
|
-
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */
|
|
3621
|
+
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ jsx39("span", { className: "ow-steps__action", children: item.action }) : null
|
|
3579
3622
|
]
|
|
3580
3623
|
},
|
|
3581
3624
|
index
|
|
@@ -3589,7 +3632,7 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3589
3632
|
"aria-label": title && orientation === "vertical" ? void 0 : label,
|
|
3590
3633
|
children: [
|
|
3591
3634
|
title && orientation === "vertical" ? /* @__PURE__ */ jsxs32("div", { className: "ow-steps__header", children: [
|
|
3592
|
-
/* @__PURE__ */
|
|
3635
|
+
/* @__PURE__ */ jsx39("h3", { id: headingId, className: "ow-steps__heading", children: title }),
|
|
3593
3636
|
/* @__PURE__ */ jsxs32("span", { className: "ow-steps__count", children: [
|
|
3594
3637
|
doneCount,
|
|
3595
3638
|
" of ",
|
|
@@ -3605,25 +3648,25 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3605
3648
|
|
|
3606
3649
|
// src/components/NavList/NavList.tsx
|
|
3607
3650
|
import { forwardRef as forwardRef15 } from "react";
|
|
3608
|
-
import { Fragment as Fragment8, jsx as
|
|
3651
|
+
import { Fragment as Fragment8, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3609
3652
|
function NavList({ label, heading, orientation = "vertical", children, className }) {
|
|
3610
3653
|
return /* @__PURE__ */ jsxs33("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
|
|
3611
|
-
heading && orientation === "vertical" ? /* @__PURE__ */
|
|
3654
|
+
heading && orientation === "vertical" ? /* @__PURE__ */ jsx40("span", { className: "ow-nav__heading", children: heading }) : null,
|
|
3612
3655
|
children
|
|
3613
3656
|
] });
|
|
3614
3657
|
}
|
|
3615
3658
|
var NavItem = forwardRef15(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
|
|
3616
3659
|
const content = /* @__PURE__ */ jsxs33(Fragment8, { children: [
|
|
3617
|
-
icon2 ? /* @__PURE__ */
|
|
3618
|
-
/* @__PURE__ */
|
|
3619
|
-
end !== void 0 ? /* @__PURE__ */
|
|
3660
|
+
icon2 ? /* @__PURE__ */ jsx40("span", { className: "ow-nav__icon", children: icon2 }) : null,
|
|
3661
|
+
/* @__PURE__ */ jsx40("span", { className: "ow-nav__label", children }),
|
|
3662
|
+
end !== void 0 ? /* @__PURE__ */ jsx40("span", { className: "ow-nav__end", children: end }) : null
|
|
3620
3663
|
] });
|
|
3621
3664
|
const shared = {
|
|
3622
3665
|
"aria-current": active ? "page" : void 0,
|
|
3623
3666
|
className: cx("ow-nav__item", active && "ow-nav__item--active", className)
|
|
3624
3667
|
};
|
|
3625
3668
|
if (href !== void 0) {
|
|
3626
|
-
return /* @__PURE__ */
|
|
3669
|
+
return /* @__PURE__ */ jsx40(
|
|
3627
3670
|
"a",
|
|
3628
3671
|
{
|
|
3629
3672
|
ref,
|
|
@@ -3634,12 +3677,12 @@ var NavItem = forwardRef15(function NavItem2({ icon: icon2, active = false, clas
|
|
|
3634
3677
|
}
|
|
3635
3678
|
);
|
|
3636
3679
|
}
|
|
3637
|
-
return /* @__PURE__ */
|
|
3680
|
+
return /* @__PURE__ */ jsx40("button", { ref, type, ...shared, ...buttonProps, children: content });
|
|
3638
3681
|
});
|
|
3639
3682
|
|
|
3640
3683
|
// src/components/Table/Table.tsx
|
|
3641
3684
|
import { useMemo as useMemo5 } from "react";
|
|
3642
|
-
import { jsx as
|
|
3685
|
+
import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3643
3686
|
function compare(a, b) {
|
|
3644
3687
|
if (typeof a === "number" && typeof b === "number") return a - b;
|
|
3645
3688
|
return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
|
|
@@ -3690,16 +3733,16 @@ function Table({
|
|
|
3690
3733
|
);
|
|
3691
3734
|
}
|
|
3692
3735
|
const selectable = selectionMode === "multiple";
|
|
3693
|
-
return /* @__PURE__ */
|
|
3736
|
+
return /* @__PURE__ */ jsx41(
|
|
3694
3737
|
"div",
|
|
3695
3738
|
{
|
|
3696
3739
|
className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
|
|
3697
3740
|
style: maxHeight ? { maxHeight } : void 0,
|
|
3698
3741
|
tabIndex: maxHeight ? 0 : void 0,
|
|
3699
3742
|
children: /* @__PURE__ */ jsxs34("table", { className: cx("ow-table", `ow-table--${density}`), children: [
|
|
3700
|
-
caption ? /* @__PURE__ */
|
|
3701
|
-
/* @__PURE__ */
|
|
3702
|
-
selectable ? /* @__PURE__ */
|
|
3743
|
+
caption ? /* @__PURE__ */ jsx41("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
|
|
3744
|
+
/* @__PURE__ */ jsx41("thead", { children: /* @__PURE__ */ jsxs34("tr", { children: [
|
|
3745
|
+
selectable ? /* @__PURE__ */ jsx41("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ jsx41(
|
|
3703
3746
|
Checkbox,
|
|
3704
3747
|
{
|
|
3705
3748
|
size: "sm",
|
|
@@ -3713,7 +3756,7 @@ function Table({
|
|
|
3713
3756
|
) }) : null,
|
|
3714
3757
|
columns.map((column) => {
|
|
3715
3758
|
const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
|
|
3716
|
-
return /* @__PURE__ */
|
|
3759
|
+
return /* @__PURE__ */ jsx41(
|
|
3717
3760
|
"th",
|
|
3718
3761
|
{
|
|
3719
3762
|
scope: "col",
|
|
@@ -3722,18 +3765,18 @@ function Table({
|
|
|
3722
3765
|
style: column.width !== void 0 ? { width: column.width } : void 0,
|
|
3723
3766
|
children: column.sortable ? /* @__PURE__ */ jsxs34("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
|
|
3724
3767
|
column.header,
|
|
3725
|
-
/* @__PURE__ */
|
|
3768
|
+
/* @__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
3769
|
] }) : column.header
|
|
3727
3770
|
},
|
|
3728
3771
|
column.key
|
|
3729
3772
|
);
|
|
3730
3773
|
})
|
|
3731
3774
|
] }) }),
|
|
3732
|
-
/* @__PURE__ */
|
|
3775
|
+
/* @__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
3776
|
const key = keyOf(row);
|
|
3734
3777
|
const isSelected = selected.includes(key);
|
|
3735
3778
|
return /* @__PURE__ */ jsxs34("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
|
|
3736
|
-
selectable ? /* @__PURE__ */
|
|
3779
|
+
selectable ? /* @__PURE__ */ jsx41("td", { className: "ow-table__select", children: /* @__PURE__ */ jsx41(
|
|
3737
3780
|
Checkbox,
|
|
3738
3781
|
{
|
|
3739
3782
|
size: "sm",
|
|
@@ -3744,7 +3787,7 @@ function Table({
|
|
|
3744
3787
|
)
|
|
3745
3788
|
}
|
|
3746
3789
|
) }) : null,
|
|
3747
|
-
columns.map((column) => /* @__PURE__ */
|
|
3790
|
+
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
3791
|
] }, key);
|
|
3749
3792
|
}) })
|
|
3750
3793
|
] })
|
|
@@ -3753,7 +3796,7 @@ function Table({
|
|
|
3753
3796
|
}
|
|
3754
3797
|
|
|
3755
3798
|
// src/components/Stat/Stat.tsx
|
|
3756
|
-
import { jsx as
|
|
3799
|
+
import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3757
3800
|
function Sparkline({ values }) {
|
|
3758
3801
|
const max = Math.max(...values);
|
|
3759
3802
|
const min = Math.min(...values);
|
|
@@ -3767,10 +3810,10 @@ function Sparkline({ values }) {
|
|
|
3767
3810
|
const [lastX, lastY] = points[points.length - 1];
|
|
3768
3811
|
return /* @__PURE__ */ jsxs35("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
|
|
3769
3812
|
/* @__PURE__ */ jsxs35("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
|
|
3770
|
-
/* @__PURE__ */
|
|
3771
|
-
/* @__PURE__ */
|
|
3813
|
+
/* @__PURE__ */ jsx42("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
|
|
3814
|
+
/* @__PURE__ */ jsx42("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
|
|
3772
3815
|
] }),
|
|
3773
|
-
/* @__PURE__ */
|
|
3816
|
+
/* @__PURE__ */ jsx42("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
|
|
3774
3817
|
] });
|
|
3775
3818
|
}
|
|
3776
3819
|
function Stat({ label, value, icon: icon2, change, changeTone, description, trend, className }) {
|
|
@@ -3778,24 +3821,24 @@ function Stat({ label, value, icon: icon2, change, changeTone, description, tren
|
|
|
3778
3821
|
const rising = change ? !/^[-−]/.test(change) : false;
|
|
3779
3822
|
return /* @__PURE__ */ jsxs35("div", { className: cx("ow-stat", className), children: [
|
|
3780
3823
|
/* @__PURE__ */ jsxs35("div", { className: "ow-stat__label", children: [
|
|
3781
|
-
icon2 ? /* @__PURE__ */
|
|
3782
|
-
/* @__PURE__ */
|
|
3824
|
+
icon2 ? /* @__PURE__ */ jsx42("span", { className: "ow-stat__icon", children: icon2 }) : null,
|
|
3825
|
+
/* @__PURE__ */ jsx42("span", { children: label })
|
|
3783
3826
|
] }),
|
|
3784
3827
|
/* @__PURE__ */ jsxs35("div", { className: "ow-stat__row", children: [
|
|
3785
|
-
/* @__PURE__ */
|
|
3828
|
+
/* @__PURE__ */ jsx42("span", { className: "ow-stat__value", children: value }),
|
|
3786
3829
|
change ? /* @__PURE__ */ jsxs35("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
|
|
3787
|
-
tone === "neutral" ? null : rising ? /* @__PURE__ */
|
|
3830
|
+
tone === "neutral" ? null : rising ? /* @__PURE__ */ jsx42(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ jsx42(ArrowDownIcon, { size: 12 }),
|
|
3788
3831
|
change
|
|
3789
3832
|
] }) : null
|
|
3790
3833
|
] }),
|
|
3791
|
-
description ? /* @__PURE__ */
|
|
3792
|
-
trend && trend.length > 1 ? /* @__PURE__ */
|
|
3834
|
+
description ? /* @__PURE__ */ jsx42("div", { className: "ow-stat__description", children: description }) : null,
|
|
3835
|
+
trend && trend.length > 1 ? /* @__PURE__ */ jsx42(Sparkline, { values: trend }) : null
|
|
3793
3836
|
] });
|
|
3794
3837
|
}
|
|
3795
3838
|
|
|
3796
3839
|
// src/components/FileTree/FileTree.tsx
|
|
3797
3840
|
import { useMemo as useMemo6, useRef as useRef21, useState as useState17 } from "react";
|
|
3798
|
-
import { jsx as
|
|
3841
|
+
import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3799
3842
|
function flatten(nodes, expanded, parent, level = 1) {
|
|
3800
3843
|
return nodes.flatMap((node) => {
|
|
3801
3844
|
const path = parent ? `${parent}/${node.name}` : node.name;
|
|
@@ -3873,7 +3916,7 @@ function FileTree({
|
|
|
3873
3916
|
const row = rows.find((entry) => entry.path === path);
|
|
3874
3917
|
if (!row) return null;
|
|
3875
3918
|
const isOpen = row.isFolder && expanded.has(path);
|
|
3876
|
-
const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */
|
|
3919
|
+
const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ jsx43(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ jsx43(FolderIcon, { size: 16 }) : /* @__PURE__ */ jsx43(FileIcon, { size: 16 }));
|
|
3877
3920
|
return /* @__PURE__ */ jsxs36(
|
|
3878
3921
|
"li",
|
|
3879
3922
|
{
|
|
@@ -3902,51 +3945,51 @@ function FileTree({
|
|
|
3902
3945
|
activate(row);
|
|
3903
3946
|
},
|
|
3904
3947
|
children: [
|
|
3905
|
-
row.isFolder ? /* @__PURE__ */
|
|
3906
|
-
/* @__PURE__ */
|
|
3907
|
-
/* @__PURE__ */
|
|
3908
|
-
node.meta ? /* @__PURE__ */
|
|
3948
|
+
row.isFolder ? /* @__PURE__ */ jsx43(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ jsx43("span", { className: "ow-tree__spacer" }),
|
|
3949
|
+
/* @__PURE__ */ jsx43("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
|
|
3950
|
+
/* @__PURE__ */ jsx43("span", { className: "ow-tree__name", children: node.name }),
|
|
3951
|
+
node.meta ? /* @__PURE__ */ jsx43("span", { className: "ow-tree__meta", children: node.meta }) : null
|
|
3909
3952
|
]
|
|
3910
3953
|
}
|
|
3911
3954
|
),
|
|
3912
|
-
isOpen && node.children.length > 0 ? /* @__PURE__ */
|
|
3955
|
+
isOpen && node.children.length > 0 ? /* @__PURE__ */ jsx43("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
|
|
3913
3956
|
]
|
|
3914
3957
|
},
|
|
3915
3958
|
path
|
|
3916
3959
|
);
|
|
3917
3960
|
});
|
|
3918
3961
|
}
|
|
3919
|
-
return /* @__PURE__ */
|
|
3962
|
+
return /* @__PURE__ */ jsx43("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
|
|
3920
3963
|
}
|
|
3921
3964
|
|
|
3922
3965
|
// src/components/EmptyState/EmptyState.tsx
|
|
3923
|
-
import { jsx as
|
|
3966
|
+
import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3924
3967
|
function EmptyState({ title, description, icon: icon2, actions, bordered = false, className }) {
|
|
3925
3968
|
return /* @__PURE__ */ jsxs37("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
|
|
3926
|
-
/* @__PURE__ */
|
|
3969
|
+
/* @__PURE__ */ jsx44("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ jsx44(InboxIcon, { size: 20 }) }),
|
|
3927
3970
|
/* @__PURE__ */ jsxs37("div", { className: "ow-empty__text", children: [
|
|
3928
|
-
/* @__PURE__ */
|
|
3929
|
-
description ? /* @__PURE__ */
|
|
3971
|
+
/* @__PURE__ */ jsx44("p", { className: "ow-empty__title", children: title }),
|
|
3972
|
+
description ? /* @__PURE__ */ jsx44("p", { className: "ow-empty__description", children: description }) : null
|
|
3930
3973
|
] }),
|
|
3931
|
-
actions ? /* @__PURE__ */
|
|
3974
|
+
actions ? /* @__PURE__ */ jsx44("div", { className: "ow-empty__actions", children: actions }) : null
|
|
3932
3975
|
] });
|
|
3933
3976
|
}
|
|
3934
3977
|
|
|
3935
3978
|
// src/components/Tag/Tag.tsx
|
|
3936
|
-
import { jsx as
|
|
3979
|
+
import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
3937
3980
|
function Tag({ onRemove, variant = "neutral", size = "md", icon: icon2, removeLabel, className, children, ...props }) {
|
|
3938
3981
|
const name = removeLabel ?? (typeof children === "string" ? children : "tag");
|
|
3939
3982
|
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__ */
|
|
3983
|
+
icon2 ? /* @__PURE__ */ jsx45("span", { className: "ow-tag__icon", children: icon2 }) : null,
|
|
3984
|
+
/* @__PURE__ */ jsx45("span", { className: "ow-tag__label", children }),
|
|
3985
|
+
onRemove ? /* @__PURE__ */ jsx45("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ jsx45(XIcon, { size: 12 }) }) : null
|
|
3943
3986
|
] });
|
|
3944
3987
|
}
|
|
3945
3988
|
function TagGroup({ label, className, children, ...props }) {
|
|
3946
|
-
return /* @__PURE__ */
|
|
3989
|
+
return /* @__PURE__ */ jsx45("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
|
|
3947
3990
|
}
|
|
3948
3991
|
function ColorSwatch({ color, name, value, size = "md", shape = "square", className }) {
|
|
3949
|
-
const swatch = /* @__PURE__ */
|
|
3992
|
+
const swatch = /* @__PURE__ */ jsx45(
|
|
3950
3993
|
"span",
|
|
3951
3994
|
{
|
|
3952
3995
|
className: cx("ow-swatch", `ow-swatch--${size}`, shape === "circle" && "ow-swatch--circle"),
|
|
@@ -3954,19 +3997,19 @@ function ColorSwatch({ color, name, value, size = "md", shape = "square", classN
|
|
|
3954
3997
|
...name && !value ? { role: "img", "aria-label": name } : { "aria-hidden": true }
|
|
3955
3998
|
}
|
|
3956
3999
|
);
|
|
3957
|
-
if (!name && !value) return /* @__PURE__ */
|
|
4000
|
+
if (!name && !value) return /* @__PURE__ */ jsx45("span", { className, children: swatch });
|
|
3958
4001
|
return /* @__PURE__ */ jsxs38("span", { className: cx("ow-swatch-label", className), children: [
|
|
3959
4002
|
swatch,
|
|
3960
4003
|
/* @__PURE__ */ jsxs38("span", { className: "ow-swatch-label__text", children: [
|
|
3961
|
-
name ? /* @__PURE__ */
|
|
3962
|
-
/* @__PURE__ */
|
|
4004
|
+
name ? /* @__PURE__ */ jsx45("span", { className: "ow-swatch-label__name", children: name }) : null,
|
|
4005
|
+
/* @__PURE__ */ jsx45("span", { className: "ow-swatch-label__value", children: value })
|
|
3963
4006
|
] })
|
|
3964
4007
|
] });
|
|
3965
4008
|
}
|
|
3966
4009
|
|
|
3967
4010
|
// src/components/Avatar/Avatar.tsx
|
|
3968
4011
|
import { useState as useState18 } from "react";
|
|
3969
|
-
import { jsx as
|
|
4012
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
3970
4013
|
var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
|
|
3971
4014
|
function avatarSize(size) {
|
|
3972
4015
|
if (typeof size === "number") {
|
|
@@ -3979,20 +4022,20 @@ function Avatar({ name, src, size = "md", label, className }) {
|
|
|
3979
4022
|
const [failedImage, setFailedImage] = useState18();
|
|
3980
4023
|
const showImage = src && src !== failedImage;
|
|
3981
4024
|
const sizing = avatarSize(size);
|
|
3982
|
-
return /* @__PURE__ */
|
|
4025
|
+
return /* @__PURE__ */ jsx46(
|
|
3983
4026
|
"span",
|
|
3984
4027
|
{
|
|
3985
4028
|
className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
|
|
3986
4029
|
style: sizing.style,
|
|
3987
4030
|
...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
|
|
3988
|
-
children: showImage ? /* @__PURE__ */
|
|
4031
|
+
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
4032
|
}
|
|
3990
4033
|
);
|
|
3991
4034
|
}
|
|
3992
4035
|
|
|
3993
4036
|
// src/components/Avatar/AvatarGroup.tsx
|
|
3994
4037
|
import { Children, cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
|
|
3995
|
-
import { jsx as
|
|
4038
|
+
import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
3996
4039
|
function AvatarGroup({ children, max = 4, size = "md", label, className }) {
|
|
3997
4040
|
const avatars = Children.toArray(children).filter(isValidElement4);
|
|
3998
4041
|
const sizing = avatarSize(size);
|
|
@@ -4019,35 +4062,35 @@ function userSize(size) {
|
|
|
4019
4062
|
}
|
|
4020
4063
|
function User({ name, description, src, size = "md", className }) {
|
|
4021
4064
|
return /* @__PURE__ */ jsxs39("div", { className: cx("ow-user", userSize(size), className), children: [
|
|
4022
|
-
/* @__PURE__ */
|
|
4065
|
+
/* @__PURE__ */ jsx47(Avatar, { name, src, size }),
|
|
4023
4066
|
/* @__PURE__ */ jsxs39("div", { className: "ow-user__text", children: [
|
|
4024
|
-
/* @__PURE__ */
|
|
4025
|
-
description ? /* @__PURE__ */
|
|
4067
|
+
/* @__PURE__ */ jsx47("span", { className: "ow-user__name", children: name }),
|
|
4068
|
+
description ? /* @__PURE__ */ jsx47("span", { className: "ow-user__description", children: description }) : null
|
|
4026
4069
|
] })
|
|
4027
4070
|
] });
|
|
4028
4071
|
}
|
|
4029
4072
|
|
|
4030
4073
|
// src/components/Kbd/Kbd.tsx
|
|
4031
|
-
import { jsx as
|
|
4074
|
+
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
4032
4075
|
function Kbd({ className, ...props }) {
|
|
4033
|
-
return /* @__PURE__ */
|
|
4076
|
+
return /* @__PURE__ */ jsx48("kbd", { className: cx("ow-kbd", className), ...props });
|
|
4034
4077
|
}
|
|
4035
4078
|
function Code({ className, ...props }) {
|
|
4036
|
-
return /* @__PURE__ */
|
|
4079
|
+
return /* @__PURE__ */ jsx48("code", { className: cx("ow-code", className), ...props });
|
|
4037
4080
|
}
|
|
4038
4081
|
|
|
4039
4082
|
// src/components/Card/Card.tsx
|
|
4040
|
-
import { jsx as
|
|
4083
|
+
import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
4041
4084
|
function Card({ className, padding = "md", ...props }) {
|
|
4042
|
-
return /* @__PURE__ */
|
|
4085
|
+
return /* @__PURE__ */ jsx49("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
|
|
4043
4086
|
}
|
|
4044
4087
|
function SettingsRow({ children, description, label, className }) {
|
|
4045
4088
|
return /* @__PURE__ */ jsxs40("div", { className: cx("ow-settings-row", className), children: [
|
|
4046
4089
|
/* @__PURE__ */ jsxs40("div", { className: "ow-settings-row__text", children: [
|
|
4047
|
-
/* @__PURE__ */
|
|
4048
|
-
description ? /* @__PURE__ */
|
|
4090
|
+
/* @__PURE__ */ jsx49("span", { className: "ow-settings-row__label", children: label }),
|
|
4091
|
+
description ? /* @__PURE__ */ jsx49("div", { className: "ow-settings-row__description", children: description }) : null
|
|
4049
4092
|
] }),
|
|
4050
|
-
/* @__PURE__ */
|
|
4093
|
+
/* @__PURE__ */ jsx49("div", { className: "ow-settings-row__control", children })
|
|
4051
4094
|
] });
|
|
4052
4095
|
}
|
|
4053
4096
|
|
|
@@ -4057,7 +4100,7 @@ import {
|
|
|
4057
4100
|
useRef as useRef22,
|
|
4058
4101
|
useState as useState19
|
|
4059
4102
|
} from "react";
|
|
4060
|
-
import { jsx as
|
|
4103
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
4061
4104
|
var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
|
|
4062
4105
|
var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
|
|
4063
4106
|
function Stack({
|
|
@@ -4073,7 +4116,7 @@ function Stack({
|
|
|
4073
4116
|
...props
|
|
4074
4117
|
}) {
|
|
4075
4118
|
const Element = as;
|
|
4076
|
-
return /* @__PURE__ */
|
|
4119
|
+
return /* @__PURE__ */ jsx50(
|
|
4077
4120
|
Element,
|
|
4078
4121
|
{
|
|
4079
4122
|
className: cx("ow-stack", className),
|
|
@@ -4093,9 +4136,9 @@ function Stack({
|
|
|
4093
4136
|
function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
|
|
4094
4137
|
const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
|
|
4095
4138
|
if (label && orientation === "horizontal") {
|
|
4096
|
-
return /* @__PURE__ */
|
|
4139
|
+
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
4140
|
}
|
|
4098
|
-
return /* @__PURE__ */
|
|
4141
|
+
return /* @__PURE__ */ jsx50(
|
|
4099
4142
|
"div",
|
|
4100
4143
|
{
|
|
4101
4144
|
role: "separator",
|
|
@@ -4135,7 +4178,7 @@ function ScrollShadow({
|
|
|
4135
4178
|
observer?.disconnect();
|
|
4136
4179
|
};
|
|
4137
4180
|
}, [orientation]);
|
|
4138
|
-
return /* @__PURE__ */
|
|
4181
|
+
return /* @__PURE__ */ jsx50(
|
|
4139
4182
|
"div",
|
|
4140
4183
|
{
|
|
4141
4184
|
ref,
|
|
@@ -4156,14 +4199,14 @@ function ScrollShadow({
|
|
|
4156
4199
|
);
|
|
4157
4200
|
}
|
|
4158
4201
|
function VisuallyHidden({ className, ...props }) {
|
|
4159
|
-
return /* @__PURE__ */
|
|
4202
|
+
return /* @__PURE__ */ jsx50("span", { className: cx("ow-visually-hidden", className), ...props });
|
|
4160
4203
|
}
|
|
4161
4204
|
|
|
4162
4205
|
// src/components/Marketing/Marketing.tsx
|
|
4163
4206
|
import { useRef as useRef23 } from "react";
|
|
4164
|
-
import { jsx as
|
|
4207
|
+
import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
4165
4208
|
function Chip({ className, ...props }) {
|
|
4166
|
-
return /* @__PURE__ */
|
|
4209
|
+
return /* @__PURE__ */ jsx51("span", { className: cx("ow-chip", className), ...props });
|
|
4167
4210
|
}
|
|
4168
4211
|
function SectionHeading({
|
|
4169
4212
|
eyebrow,
|
|
@@ -4174,16 +4217,16 @@ function SectionHeading({
|
|
|
4174
4217
|
className
|
|
4175
4218
|
}) {
|
|
4176
4219
|
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__ */
|
|
4220
|
+
eyebrow ? /* @__PURE__ */ jsx51(Chip, { children: eyebrow }) : null,
|
|
4221
|
+
/* @__PURE__ */ jsx51(Heading, { className: "ow-section-heading__title", children: title }),
|
|
4222
|
+
intro ? /* @__PURE__ */ jsx51("p", { className: "ow-section-heading__intro", children: intro }) : null
|
|
4180
4223
|
] });
|
|
4181
4224
|
}
|
|
4182
4225
|
function SiteHeader({ brand, nav, actions, className }) {
|
|
4183
4226
|
return /* @__PURE__ */ jsxs41("header", { className: cx("ow-site-header", className), children: [
|
|
4184
|
-
/* @__PURE__ */
|
|
4185
|
-
nav ? /* @__PURE__ */
|
|
4186
|
-
actions ? /* @__PURE__ */
|
|
4227
|
+
/* @__PURE__ */ jsx51("div", { className: "ow-site-header__brand", children: brand }),
|
|
4228
|
+
nav ? /* @__PURE__ */ jsx51("nav", { className: "ow-site-header__nav", children: nav }) : null,
|
|
4229
|
+
actions ? /* @__PURE__ */ jsx51("div", { className: "ow-site-header__actions", children: actions }) : null
|
|
4187
4230
|
] });
|
|
4188
4231
|
}
|
|
4189
4232
|
function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
|
|
@@ -4204,9 +4247,9 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4204
4247
|
onPointerMove: track,
|
|
4205
4248
|
...props,
|
|
4206
4249
|
children: [
|
|
4207
|
-
/* @__PURE__ */
|
|
4208
|
-
interactive ? /* @__PURE__ */
|
|
4209
|
-
/* @__PURE__ */
|
|
4250
|
+
/* @__PURE__ */ jsx51("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
|
|
4251
|
+
interactive ? /* @__PURE__ */ jsx51("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
|
|
4252
|
+
/* @__PURE__ */ jsx51("div", { className: "ow-dot-grid__content", children })
|
|
4210
4253
|
]
|
|
4211
4254
|
}
|
|
4212
4255
|
);
|
|
@@ -4215,7 +4258,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4215
4258
|
// src/components/ColorPicker/ColorPicker.tsx
|
|
4216
4259
|
import { forwardRef as forwardRef16, useCallback as useCallback6, useEffect as useEffect18, useId as useId18, useRef as useRef24, useState as useState20 } from "react";
|
|
4217
4260
|
import { HexAlphaColorPicker, HexColorInput, HexColorPicker } from "react-colorful";
|
|
4218
|
-
import { Fragment as Fragment9, jsx as
|
|
4261
|
+
import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
4219
4262
|
var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
|
|
4220
4263
|
var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
|
|
4221
4264
|
var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
|
|
@@ -4251,12 +4294,12 @@ function ColorPicker({
|
|
|
4251
4294
|
}
|
|
4252
4295
|
}
|
|
4253
4296
|
return /* @__PURE__ */ jsxs42("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
|
|
4254
|
-
/* @__PURE__ */
|
|
4297
|
+
/* @__PURE__ */ jsx52(Picker, { color, onChange: change }),
|
|
4255
4298
|
showInput || eyeDropper && canPick ? /* @__PURE__ */ jsxs42("div", { className: "ow-color-picker__row", children: [
|
|
4256
|
-
eyeDropper && canPick ? /* @__PURE__ */
|
|
4299
|
+
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
4300
|
showInput ? /* @__PURE__ */ jsxs42("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
|
|
4258
|
-
/* @__PURE__ */
|
|
4259
|
-
/* @__PURE__ */
|
|
4301
|
+
/* @__PURE__ */ jsx52("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
|
|
4302
|
+
/* @__PURE__ */ jsx52(
|
|
4260
4303
|
HexColorInput,
|
|
4261
4304
|
{
|
|
4262
4305
|
className: "ow-input-group__input",
|
|
@@ -4268,11 +4311,11 @@ function ColorPicker({
|
|
|
4268
4311
|
}
|
|
4269
4312
|
)
|
|
4270
4313
|
] }) : null,
|
|
4271
|
-
/* @__PURE__ */
|
|
4314
|
+
/* @__PURE__ */ jsx52("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
|
|
4272
4315
|
] }) : null,
|
|
4273
|
-
swatches?.length ? /* @__PURE__ */
|
|
4316
|
+
swatches?.length ? /* @__PURE__ */ jsx52("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
|
|
4274
4317
|
const swatchValue = swatchColor(swatch);
|
|
4275
|
-
return /* @__PURE__ */
|
|
4318
|
+
return /* @__PURE__ */ jsx52(
|
|
4276
4319
|
"button",
|
|
4277
4320
|
{
|
|
4278
4321
|
type: "button",
|
|
@@ -4357,13 +4400,13 @@ var ColorField = forwardRef16(function ColorField2({
|
|
|
4357
4400
|
}
|
|
4358
4401
|
},
|
|
4359
4402
|
children: [
|
|
4360
|
-
/* @__PURE__ */
|
|
4361
|
-
/* @__PURE__ */
|
|
4362
|
-
/* @__PURE__ */
|
|
4403
|
+
/* @__PURE__ */ jsx52("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
|
|
4404
|
+
/* @__PURE__ */ jsx52("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
|
|
4405
|
+
/* @__PURE__ */ jsx52(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
4363
4406
|
]
|
|
4364
4407
|
}
|
|
4365
4408
|
),
|
|
4366
|
-
mounted ? /* @__PURE__ */
|
|
4409
|
+
mounted ? /* @__PURE__ */ jsx52(
|
|
4367
4410
|
"div",
|
|
4368
4411
|
{
|
|
4369
4412
|
ref: panelRef,
|
|
@@ -4377,7 +4420,7 @@ var ColorField = forwardRef16(function ColorField2({
|
|
|
4377
4420
|
onKeyDown: (event) => {
|
|
4378
4421
|
if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
|
|
4379
4422
|
},
|
|
4380
|
-
children: /* @__PURE__ */
|
|
4423
|
+
children: /* @__PURE__ */ jsx52(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
|
|
4381
4424
|
}
|
|
4382
4425
|
) : null
|
|
4383
4426
|
] });
|
|
@@ -4652,6 +4695,7 @@ export {
|
|
|
4652
4695
|
Tabs,
|
|
4653
4696
|
Tag,
|
|
4654
4697
|
TagGroup,
|
|
4698
|
+
Text,
|
|
4655
4699
|
Textarea,
|
|
4656
4700
|
Toaster,
|
|
4657
4701
|
ToggleButton,
|