@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.cjs
CHANGED
|
@@ -96,6 +96,7 @@ __export(index_exports, {
|
|
|
96
96
|
Tabs: () => Tabs,
|
|
97
97
|
Tag: () => Tag,
|
|
98
98
|
TagGroup: () => TagGroup,
|
|
99
|
+
Text: () => Text,
|
|
99
100
|
Textarea: () => Textarea,
|
|
100
101
|
Toaster: () => Toaster,
|
|
101
102
|
ToggleButton: () => ToggleButton,
|
|
@@ -132,9 +133,6 @@ __export(index_exports, {
|
|
|
132
133
|
});
|
|
133
134
|
module.exports = __toCommonJS(index_exports);
|
|
134
135
|
|
|
135
|
-
// src/components/Button/Button.tsx
|
|
136
|
-
var import_react = require("react");
|
|
137
|
-
|
|
138
136
|
// src/utils/cx.ts
|
|
139
137
|
function cx(...values) {
|
|
140
138
|
const classes = [];
|
|
@@ -149,6 +147,52 @@ function cx(...values) {
|
|
|
149
147
|
return classes.join(" ");
|
|
150
148
|
}
|
|
151
149
|
|
|
150
|
+
// src/components/Text/Text.tsx
|
|
151
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
152
|
+
var elements = {
|
|
153
|
+
hero: "h1",
|
|
154
|
+
"page-title": "h1",
|
|
155
|
+
"section-title": "h2",
|
|
156
|
+
heading: "h3",
|
|
157
|
+
lead: "p",
|
|
158
|
+
prose: "p",
|
|
159
|
+
"dialog-title": "h2",
|
|
160
|
+
"card-title": "h3",
|
|
161
|
+
body: "p",
|
|
162
|
+
copy: "p",
|
|
163
|
+
label: "span",
|
|
164
|
+
button: "span",
|
|
165
|
+
caption: "span",
|
|
166
|
+
badge: "span",
|
|
167
|
+
overline: "span",
|
|
168
|
+
code: "code",
|
|
169
|
+
kbd: "kbd"
|
|
170
|
+
};
|
|
171
|
+
var mutedByDefault = ["lead", "copy", "caption", "overline"];
|
|
172
|
+
function Text({ variant = "body", as, tone, align, truncate = false, className, children, ...props }) {
|
|
173
|
+
const Element = as ?? elements[variant];
|
|
174
|
+
const colour = tone ?? (mutedByDefault.includes(variant) ? "muted" : void 0);
|
|
175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
176
|
+
Element,
|
|
177
|
+
{
|
|
178
|
+
className: cx(
|
|
179
|
+
"ow-text",
|
|
180
|
+
`ow-type-${variant}`,
|
|
181
|
+
`ow-text--${variant}`,
|
|
182
|
+
colour && `ow-text--${colour}`,
|
|
183
|
+
align && align !== "start" && `ow-text--${align}`,
|
|
184
|
+
truncate && "ow-text--truncate",
|
|
185
|
+
className
|
|
186
|
+
),
|
|
187
|
+
...props,
|
|
188
|
+
children
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// src/components/Button/Button.tsx
|
|
194
|
+
var import_react = require("react");
|
|
195
|
+
|
|
152
196
|
// src/utils/text.ts
|
|
153
197
|
function getInitials(name) {
|
|
154
198
|
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
@@ -161,9 +205,9 @@ function toAriaShortcut(shortcut) {
|
|
|
161
205
|
}
|
|
162
206
|
|
|
163
207
|
// src/components/Spinner/Spinner.tsx
|
|
164
|
-
var
|
|
208
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
165
209
|
function Spinner({ size = "md", tone = "primary", label = "Loading", className }) {
|
|
166
|
-
return /* @__PURE__ */ (0,
|
|
210
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
167
211
|
"span",
|
|
168
212
|
{
|
|
169
213
|
className: cx("ow-spinner", `ow-spinner--${size}`, `ow-spinner--${tone}`, className),
|
|
@@ -173,7 +217,7 @@ function Spinner({ size = "md", tone = "primary", label = "Loading", className }
|
|
|
173
217
|
}
|
|
174
218
|
|
|
175
219
|
// src/components/Button/Button.tsx
|
|
176
|
-
var
|
|
220
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
177
221
|
function buttonClassName({
|
|
178
222
|
variant = "secondary",
|
|
179
223
|
size = "md",
|
|
@@ -204,8 +248,8 @@ var Button = (0, import_react.forwardRef)(function Button2({
|
|
|
204
248
|
variant = "secondary",
|
|
205
249
|
...buttonProps
|
|
206
250
|
}, ref) {
|
|
207
|
-
const leading = loading ? /* @__PURE__ */ (0,
|
|
208
|
-
return /* @__PURE__ */ (0,
|
|
251
|
+
const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm", tone: "current", label: "" }) : startIcon;
|
|
252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
209
253
|
"button",
|
|
210
254
|
{
|
|
211
255
|
ref,
|
|
@@ -222,10 +266,10 @@ var Button = (0, import_react.forwardRef)(function Button2({
|
|
|
222
266
|
"aria-keyshortcuts": shortcut ? toAriaShortcut(shortcut) : void 0,
|
|
223
267
|
...buttonProps,
|
|
224
268
|
children: [
|
|
225
|
-
leading ? /* @__PURE__ */ (0,
|
|
269
|
+
leading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ow-button__icon", children: leading }) : null,
|
|
226
270
|
iconOnly && loading ? null : children,
|
|
227
|
-
endIcon && !iconOnly ? /* @__PURE__ */ (0,
|
|
228
|
-
shortcut && !iconOnly ? /* @__PURE__ */ (0,
|
|
271
|
+
endIcon && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ow-button__icon", children: endIcon }) : null,
|
|
272
|
+
shortcut && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("kbd", { "aria-hidden": "true", className: "ow-button__shortcut", children: shortcut }) : null
|
|
229
273
|
]
|
|
230
274
|
}
|
|
231
275
|
);
|
|
@@ -257,10 +301,10 @@ function useControllableState(value, defaultValue, onChange) {
|
|
|
257
301
|
}
|
|
258
302
|
|
|
259
303
|
// src/icons.tsx
|
|
260
|
-
var
|
|
304
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
261
305
|
function icon(paths) {
|
|
262
306
|
return function Icon({ size = 16, strokeWidth = 2, ...props }) {
|
|
263
|
-
return /* @__PURE__ */ (0,
|
|
307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
264
308
|
"svg",
|
|
265
309
|
{
|
|
266
310
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -280,160 +324,160 @@ function icon(paths) {
|
|
|
280
324
|
);
|
|
281
325
|
};
|
|
282
326
|
}
|
|
283
|
-
var CheckIcon = icon(/* @__PURE__ */ (0,
|
|
284
|
-
var ChevronDownIcon = icon(/* @__PURE__ */ (0,
|
|
327
|
+
var CheckIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 6 9 17l-5-5" }));
|
|
328
|
+
var ChevronDownIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" }));
|
|
285
329
|
var SearchIcon = icon(
|
|
286
|
-
/* @__PURE__ */ (0,
|
|
287
|
-
/* @__PURE__ */ (0,
|
|
288
|
-
/* @__PURE__ */ (0,
|
|
330
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
331
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
|
|
332
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m21 21-4.3-4.3" })
|
|
289
333
|
] })
|
|
290
334
|
);
|
|
291
335
|
var CornerDownLeftIcon = icon(
|
|
292
|
-
/* @__PURE__ */ (0,
|
|
293
|
-
/* @__PURE__ */ (0,
|
|
294
|
-
/* @__PURE__ */ (0,
|
|
336
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
337
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "9 10 4 15 9 20" }),
|
|
338
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })
|
|
295
339
|
] })
|
|
296
340
|
);
|
|
297
341
|
var XIcon = icon(
|
|
298
|
-
/* @__PURE__ */ (0,
|
|
299
|
-
/* @__PURE__ */ (0,
|
|
300
|
-
/* @__PURE__ */ (0,
|
|
342
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
343
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18" }),
|
|
344
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 6 12 12" })
|
|
301
345
|
] })
|
|
302
346
|
);
|
|
303
347
|
var UserIcon = icon(
|
|
304
|
-
/* @__PURE__ */ (0,
|
|
305
|
-
/* @__PURE__ */ (0,
|
|
306
|
-
/* @__PURE__ */ (0,
|
|
348
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
349
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
|
|
350
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "7", r: "4" })
|
|
307
351
|
] })
|
|
308
352
|
);
|
|
309
353
|
var TrashIcon = icon(
|
|
310
|
-
/* @__PURE__ */ (0,
|
|
311
|
-
/* @__PURE__ */ (0,
|
|
312
|
-
/* @__PURE__ */ (0,
|
|
313
|
-
/* @__PURE__ */ (0,
|
|
314
|
-
/* @__PURE__ */ (0,
|
|
315
|
-
/* @__PURE__ */ (0,
|
|
354
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
355
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 6h18" }),
|
|
356
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
|
|
357
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
|
|
358
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
|
|
359
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
|
|
316
360
|
] })
|
|
317
361
|
);
|
|
318
362
|
var CircleCheckIcon = icon(
|
|
319
|
-
/* @__PURE__ */ (0,
|
|
320
|
-
/* @__PURE__ */ (0,
|
|
321
|
-
/* @__PURE__ */ (0,
|
|
363
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
364
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
365
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 12 2 2 4-4" })
|
|
322
366
|
] })
|
|
323
367
|
);
|
|
324
368
|
var CircleAlertIcon = icon(
|
|
325
|
-
/* @__PURE__ */ (0,
|
|
326
|
-
/* @__PURE__ */ (0,
|
|
327
|
-
/* @__PURE__ */ (0,
|
|
328
|
-
/* @__PURE__ */ (0,
|
|
369
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
370
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
371
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
|
|
372
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
|
|
329
373
|
] })
|
|
330
374
|
);
|
|
331
|
-
var ChevronRightIcon = icon(/* @__PURE__ */ (0,
|
|
332
|
-
var ChevronLeftIcon = icon(/* @__PURE__ */ (0,
|
|
333
|
-
var ChevronUpIcon = icon(/* @__PURE__ */ (0,
|
|
334
|
-
var MinusIcon = icon(/* @__PURE__ */ (0,
|
|
375
|
+
var ChevronRightIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 18 6-6-6-6" }));
|
|
376
|
+
var ChevronLeftIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m15 18-6-6 6-6" }));
|
|
377
|
+
var ChevronUpIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m18 15-6-6-6 6" }));
|
|
378
|
+
var MinusIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14" }));
|
|
335
379
|
var PlusIcon = icon(
|
|
336
|
-
/* @__PURE__ */ (0,
|
|
337
|
-
/* @__PURE__ */ (0,
|
|
338
|
-
/* @__PURE__ */ (0,
|
|
380
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
381
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14" }),
|
|
382
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 5v14" })
|
|
339
383
|
] })
|
|
340
384
|
);
|
|
341
385
|
var InfoIcon = icon(
|
|
342
|
-
/* @__PURE__ */ (0,
|
|
343
|
-
/* @__PURE__ */ (0,
|
|
344
|
-
/* @__PURE__ */ (0,
|
|
345
|
-
/* @__PURE__ */ (0,
|
|
386
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
387
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
388
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 16v-4" }),
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 8h.01" })
|
|
346
390
|
] })
|
|
347
391
|
);
|
|
348
392
|
var TriangleAlertIcon = icon(
|
|
349
|
-
/* @__PURE__ */ (0,
|
|
350
|
-
/* @__PURE__ */ (0,
|
|
351
|
-
/* @__PURE__ */ (0,
|
|
352
|
-
/* @__PURE__ */ (0,
|
|
393
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
394
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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" }),
|
|
395
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4" }),
|
|
396
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17h.01" })
|
|
353
397
|
] })
|
|
354
398
|
);
|
|
355
399
|
var PipetteIcon = icon(
|
|
356
|
-
/* @__PURE__ */ (0,
|
|
357
|
-
/* @__PURE__ */ (0,
|
|
358
|
-
/* @__PURE__ */ (0,
|
|
359
|
-
/* @__PURE__ */ (0,
|
|
400
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
401
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m2 22 1-1h3l9-9" }),
|
|
402
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 21v-3l9-9" }),
|
|
403
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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" })
|
|
360
404
|
] })
|
|
361
405
|
);
|
|
362
406
|
var CopyIcon = icon(
|
|
363
|
-
/* @__PURE__ */ (0,
|
|
364
|
-
/* @__PURE__ */ (0,
|
|
365
|
-
/* @__PURE__ */ (0,
|
|
407
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
408
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
|
|
409
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
|
|
366
410
|
] })
|
|
367
411
|
);
|
|
368
412
|
var CalendarIcon = icon(
|
|
369
|
-
/* @__PURE__ */ (0,
|
|
370
|
-
/* @__PURE__ */ (0,
|
|
371
|
-
/* @__PURE__ */ (0,
|
|
372
|
-
/* @__PURE__ */ (0,
|
|
373
|
-
/* @__PURE__ */ (0,
|
|
413
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 2v4" }),
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 2v4" }),
|
|
416
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
|
|
417
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 10h18" })
|
|
374
418
|
] })
|
|
375
419
|
);
|
|
376
420
|
var FileIcon = icon(
|
|
377
|
-
/* @__PURE__ */ (0,
|
|
378
|
-
/* @__PURE__ */ (0,
|
|
379
|
-
/* @__PURE__ */ (0,
|
|
421
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
422
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
|
|
423
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
|
|
380
424
|
] })
|
|
381
425
|
);
|
|
382
426
|
var FolderIcon = icon(
|
|
383
|
-
/* @__PURE__ */ (0,
|
|
427
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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" })
|
|
384
428
|
);
|
|
385
429
|
var FolderOpenIcon = icon(
|
|
386
|
-
/* @__PURE__ */ (0,
|
|
430
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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" })
|
|
387
431
|
);
|
|
388
432
|
var UploadIcon = icon(
|
|
389
|
-
/* @__PURE__ */ (0,
|
|
390
|
-
/* @__PURE__ */ (0,
|
|
391
|
-
/* @__PURE__ */ (0,
|
|
392
|
-
/* @__PURE__ */ (0,
|
|
433
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
434
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
435
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "17 8 12 3 7 8" }),
|
|
436
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
|
|
393
437
|
] })
|
|
394
438
|
);
|
|
395
439
|
var ArrowUpRightIcon = icon(
|
|
396
|
-
/* @__PURE__ */ (0,
|
|
397
|
-
/* @__PURE__ */ (0,
|
|
398
|
-
/* @__PURE__ */ (0,
|
|
440
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
441
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 7h10v10" }),
|
|
442
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 17 17 7" })
|
|
399
443
|
] })
|
|
400
444
|
);
|
|
401
445
|
var ArrowUpIcon = icon(
|
|
402
|
-
/* @__PURE__ */ (0,
|
|
403
|
-
/* @__PURE__ */ (0,
|
|
404
|
-
/* @__PURE__ */ (0,
|
|
446
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m5 12 7-7 7 7" }),
|
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 19V5" })
|
|
405
449
|
] })
|
|
406
450
|
);
|
|
407
451
|
var ArrowDownIcon = icon(
|
|
408
|
-
/* @__PURE__ */ (0,
|
|
409
|
-
/* @__PURE__ */ (0,
|
|
410
|
-
/* @__PURE__ */ (0,
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
453
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 5v14" }),
|
|
454
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m19 12-7 7-7-7" })
|
|
411
455
|
] })
|
|
412
456
|
);
|
|
413
457
|
var ChevronsUpDownIcon = icon(
|
|
414
|
-
/* @__PURE__ */ (0,
|
|
415
|
-
/* @__PURE__ */ (0,
|
|
416
|
-
/* @__PURE__ */ (0,
|
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
459
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 15 5 5 5-5" }),
|
|
460
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 9 5-5 5 5" })
|
|
417
461
|
] })
|
|
418
462
|
);
|
|
419
463
|
var InboxIcon = icon(
|
|
420
|
-
/* @__PURE__ */ (0,
|
|
421
|
-
/* @__PURE__ */ (0,
|
|
422
|
-
/* @__PURE__ */ (0,
|
|
464
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
465
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }),
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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" })
|
|
423
467
|
] })
|
|
424
468
|
);
|
|
425
469
|
var EllipsisIcon = icon(
|
|
426
|
-
/* @__PURE__ */ (0,
|
|
427
|
-
/* @__PURE__ */ (0,
|
|
428
|
-
/* @__PURE__ */ (0,
|
|
429
|
-
/* @__PURE__ */ (0,
|
|
470
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
471
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
|
|
472
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
|
|
473
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "5", cy: "12", r: "1" })
|
|
430
474
|
] })
|
|
431
475
|
);
|
|
432
476
|
|
|
433
477
|
// src/components/Button/ButtonGroup.tsx
|
|
434
|
-
var
|
|
478
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
435
479
|
function ButtonGroup({ attached = true, orientation = "horizontal", className, ...props }) {
|
|
436
|
-
return /* @__PURE__ */ (0,
|
|
480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
437
481
|
"div",
|
|
438
482
|
{
|
|
439
483
|
role: "group",
|
|
@@ -448,7 +492,7 @@ function ButtonGroup({ attached = true, orientation = "horizontal", className, .
|
|
|
448
492
|
);
|
|
449
493
|
}
|
|
450
494
|
var CloseButton = (0, import_react3.forwardRef)(function CloseButton2({ size = "md", label = "Close", className, type = "button", ...buttonProps }, ref) {
|
|
451
|
-
return /* @__PURE__ */ (0,
|
|
495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
452
496
|
"button",
|
|
453
497
|
{
|
|
454
498
|
ref,
|
|
@@ -456,13 +500,13 @@ var CloseButton = (0, import_react3.forwardRef)(function CloseButton2({ size = "
|
|
|
456
500
|
"aria-label": label,
|
|
457
501
|
className: cx("ow-close-button", `ow-close-button--${size}`, className),
|
|
458
502
|
...buttonProps,
|
|
459
|
-
children: /* @__PURE__ */ (0,
|
|
503
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XIcon, { size: size === "sm" ? 14 : 17 })
|
|
460
504
|
}
|
|
461
505
|
);
|
|
462
506
|
});
|
|
463
507
|
var ToggleButton = (0, import_react3.forwardRef)(function ToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, className, variant = "secondary", ...buttonProps }, ref) {
|
|
464
508
|
const [isPressed, setPressed] = useControllableState(pressed, defaultPressed, onPressedChange);
|
|
465
|
-
return /* @__PURE__ */ (0,
|
|
509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
466
510
|
Button,
|
|
467
511
|
{
|
|
468
512
|
ref,
|
|
@@ -520,7 +564,7 @@ function useIndicator(containerRef, selector, key) {
|
|
|
520
564
|
}
|
|
521
565
|
|
|
522
566
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
523
|
-
var
|
|
567
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
524
568
|
function SegmentedControl({
|
|
525
569
|
options,
|
|
526
570
|
value,
|
|
@@ -551,7 +595,7 @@ function SegmentedControl({
|
|
|
551
595
|
setCurrent(options[target].value);
|
|
552
596
|
}
|
|
553
597
|
const focusable = options.some((option) => option.value === current && !option.disabled) ? current : enabled[0]?.option.value;
|
|
554
|
-
return /* @__PURE__ */ (0,
|
|
598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
555
599
|
"div",
|
|
556
600
|
{
|
|
557
601
|
ref: groupRef,
|
|
@@ -561,7 +605,7 @@ function SegmentedControl({
|
|
|
561
605
|
children: [
|
|
562
606
|
options.map((option, index) => {
|
|
563
607
|
const isSelected = option.value === current;
|
|
564
|
-
return /* @__PURE__ */ (0,
|
|
608
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
565
609
|
"button",
|
|
566
610
|
{
|
|
567
611
|
ref: (element) => {
|
|
@@ -577,14 +621,14 @@ function SegmentedControl({
|
|
|
577
621
|
onClick: () => setCurrent(option.value),
|
|
578
622
|
onKeyDown: (event) => onKeyDown(event, index),
|
|
579
623
|
children: [
|
|
580
|
-
option.icon ? /* @__PURE__ */ (0,
|
|
624
|
+
option.icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-segmented__icon", children: option.icon }) : null,
|
|
581
625
|
option.label
|
|
582
626
|
]
|
|
583
627
|
},
|
|
584
628
|
option.value
|
|
585
629
|
);
|
|
586
630
|
}),
|
|
587
|
-
/* @__PURE__ */ (0,
|
|
631
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
|
|
588
632
|
]
|
|
589
633
|
}
|
|
590
634
|
);
|
|
@@ -592,9 +636,9 @@ function SegmentedControl({
|
|
|
592
636
|
|
|
593
637
|
// src/components/ChoiceCard/ChoiceCard.tsx
|
|
594
638
|
var import_react6 = require("react");
|
|
595
|
-
var
|
|
639
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
596
640
|
var ChoiceCard = (0, import_react6.forwardRef)(function ChoiceCard2({ className, description, icon: icon2, recommended = false, shortcut, title, type = "button", ...buttonProps }, ref) {
|
|
597
|
-
return /* @__PURE__ */ (0,
|
|
641
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
598
642
|
"button",
|
|
599
643
|
{
|
|
600
644
|
ref,
|
|
@@ -603,13 +647,13 @@ var ChoiceCard = (0, import_react6.forwardRef)(function ChoiceCard2({ className,
|
|
|
603
647
|
"aria-keyshortcuts": shortcut ? toAriaShortcut(shortcut) : void 0,
|
|
604
648
|
...buttonProps,
|
|
605
649
|
children: [
|
|
606
|
-
/* @__PURE__ */ (0,
|
|
607
|
-
/* @__PURE__ */ (0,
|
|
608
|
-
shortcut ? /* @__PURE__ */ (0,
|
|
650
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ow-choice__top", children: [
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-choice__icon", children: icon2 }),
|
|
652
|
+
shortcut ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("kbd", { "aria-hidden": "true", className: "ow-choice__shortcut", children: shortcut }) : null
|
|
609
653
|
] }),
|
|
610
|
-
/* @__PURE__ */ (0,
|
|
611
|
-
/* @__PURE__ */ (0,
|
|
612
|
-
/* @__PURE__ */ (0,
|
|
654
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ow-choice__text", children: [
|
|
655
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-choice__title", children: title }),
|
|
656
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-choice__description", children: description })
|
|
613
657
|
] })
|
|
614
658
|
]
|
|
615
659
|
}
|
|
@@ -644,12 +688,12 @@ async function copyText(text) {
|
|
|
644
688
|
}
|
|
645
689
|
|
|
646
690
|
// src/components/CodeBlock/CodeBlock.tsx
|
|
647
|
-
var
|
|
691
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
648
692
|
function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly = false, tone = "default", onCopy, className }) {
|
|
649
693
|
const [copied, setCopied] = (0, import_react7.useState)(false);
|
|
650
694
|
const timer = (0, import_react7.useRef)(0);
|
|
651
695
|
(0, import_react7.useEffect)(() => () => window.clearTimeout(timer.current), []);
|
|
652
|
-
return /* @__PURE__ */ (0,
|
|
696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
653
697
|
"button",
|
|
654
698
|
{
|
|
655
699
|
type: "button",
|
|
@@ -670,12 +714,12 @@ function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly =
|
|
|
670
714
|
}
|
|
671
715
|
},
|
|
672
716
|
children: [
|
|
673
|
-
/* @__PURE__ */ (0,
|
|
674
|
-
/* @__PURE__ */ (0,
|
|
675
|
-
/* @__PURE__ */ (0,
|
|
717
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "ow-copy-button__icon", "aria-hidden": "true", children: [
|
|
718
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyIcon, { size: 14 }),
|
|
719
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckIcon, { size: 14 })
|
|
676
720
|
] }),
|
|
677
|
-
iconOnly ? null : /* @__PURE__ */ (0,
|
|
678
|
-
/* @__PURE__ */ (0,
|
|
721
|
+
iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: copied ? copiedLabel : label }),
|
|
722
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
|
|
679
723
|
]
|
|
680
724
|
}
|
|
681
725
|
);
|
|
@@ -683,31 +727,31 @@ function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly =
|
|
|
683
727
|
function CodeBlock({ code, html, title, language, showLineNumbers = false, copyable = true, maxHeight, className }) {
|
|
684
728
|
const hasHeader = title !== void 0 || language !== void 0;
|
|
685
729
|
const lines = code.replace(/\n$/, "").split("\n");
|
|
686
|
-
return /* @__PURE__ */ (0,
|
|
687
|
-
hasHeader ? /* @__PURE__ */ (0,
|
|
688
|
-
/* @__PURE__ */ (0,
|
|
689
|
-
language ? /* @__PURE__ */ (0,
|
|
690
|
-
copyable ? /* @__PURE__ */ (0,
|
|
691
|
-
] }) : copyable ? /* @__PURE__ */ (0,
|
|
692
|
-
/* @__PURE__ */ (0,
|
|
693
|
-
showLineNumbers ? /* @__PURE__ */ (0,
|
|
694
|
-
html ? /* @__PURE__ */ (0,
|
|
730
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("ow-code-block", showLineNumbers && "ow-code-block--numbered", className), children: [
|
|
731
|
+
hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ow-code-block__header", children: [
|
|
732
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-code-block__title", children: title }),
|
|
733
|
+
language ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-code-block__language", children: language }) : null,
|
|
734
|
+
copyable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code" }) : null
|
|
735
|
+
] }) : copyable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code", className: "ow-code-block__floating-copy" }) : null,
|
|
736
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("pre", { className: "ow-code-block__pre", style: maxHeight ? { maxHeight } : void 0, tabIndex: 0, children: [
|
|
737
|
+
showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-code-block__numbers", "aria-hidden": "true", children: lines.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: index + 1 }, index)) }) : null,
|
|
738
|
+
html ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "ow-code-block__code", dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "ow-code-block__code", children: code.replace(/\n$/, "") })
|
|
695
739
|
] })
|
|
696
740
|
] });
|
|
697
741
|
}
|
|
698
742
|
function Snippet({ value, prompt = "$", className }) {
|
|
699
|
-
return /* @__PURE__ */ (0,
|
|
700
|
-
/* @__PURE__ */ (0,
|
|
701
|
-
prompt ? /* @__PURE__ */ (0,
|
|
743
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("ow-snippet", className), children: [
|
|
744
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("code", { className: "ow-snippet__code", children: [
|
|
745
|
+
prompt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-snippet__prompt", "aria-hidden": "true", children: prompt }) : null,
|
|
702
746
|
value
|
|
703
747
|
] }),
|
|
704
|
-
/* @__PURE__ */ (0,
|
|
748
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyButton, { value, iconOnly: true, label: `Copy ${value}` })
|
|
705
749
|
] });
|
|
706
750
|
}
|
|
707
751
|
|
|
708
752
|
// src/components/Field/Field.tsx
|
|
709
753
|
var import_react8 = require("react");
|
|
710
|
-
var
|
|
754
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
711
755
|
function Field({ label, children, hint, error, className }) {
|
|
712
756
|
const generatedId = (0, import_react8.useId)();
|
|
713
757
|
const hintId = `${generatedId}-hint`;
|
|
@@ -716,21 +760,21 @@ function Field({ label, children, hint, error, className }) {
|
|
|
716
760
|
const controlId = child?.props.id ?? `${generatedId}-control`;
|
|
717
761
|
const describedBy = [child?.props["aria-describedby"], hint ? hintId : void 0, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
|
|
718
762
|
const invalidProp = child && typeof child.type !== "string" ? { isInvalid: child.props.isInvalid ?? Boolean(error) } : { "aria-invalid": error ? true : void 0 };
|
|
719
|
-
return /* @__PURE__ */ (0,
|
|
720
|
-
/* @__PURE__ */ (0,
|
|
763
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("ow-field", className), children: [
|
|
764
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ow-field__label", htmlFor: controlId, children: label }),
|
|
721
765
|
child ? (0, import_react8.cloneElement)(child, { id: controlId, "aria-describedby": describedBy, ...invalidProp }) : children,
|
|
722
|
-
hint ? /* @__PURE__ */ (0,
|
|
723
|
-
error ? /* @__PURE__ */ (0,
|
|
766
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: hintId, className: "ow-field__hint", children: hint }) : null,
|
|
767
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: errorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
724
768
|
] });
|
|
725
769
|
}
|
|
726
770
|
|
|
727
771
|
// src/components/Input/Input.tsx
|
|
728
772
|
var import_react9 = require("react");
|
|
729
|
-
var
|
|
773
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
730
774
|
var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid = false, size = "md", startContent, endContent, ...inputProps }, ref) {
|
|
731
775
|
const invalid = isInvalid || void 0;
|
|
732
776
|
if (startContent === void 0 && endContent === void 0) {
|
|
733
|
-
return /* @__PURE__ */ (0,
|
|
777
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
734
778
|
"input",
|
|
735
779
|
{
|
|
736
780
|
ref,
|
|
@@ -740,7 +784,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
|
|
|
740
784
|
}
|
|
741
785
|
);
|
|
742
786
|
}
|
|
743
|
-
return /* @__PURE__ */ (0,
|
|
787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
744
788
|
"div",
|
|
745
789
|
{
|
|
746
790
|
className: cx(
|
|
@@ -751,9 +795,9 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
|
|
|
751
795
|
className
|
|
752
796
|
),
|
|
753
797
|
children: [
|
|
754
|
-
startContent !== void 0 ? /* @__PURE__ */ (0,
|
|
755
|
-
/* @__PURE__ */ (0,
|
|
756
|
-
endContent !== void 0 ? /* @__PURE__ */ (0,
|
|
798
|
+
startContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-input-group__addon", children: startContent }) : null,
|
|
799
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { ref, className: "ow-input-group__input", "aria-invalid": invalid, ...inputProps }),
|
|
800
|
+
endContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-input-group__addon", children: endContent }) : null
|
|
757
801
|
]
|
|
758
802
|
}
|
|
759
803
|
);
|
|
@@ -761,7 +805,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
|
|
|
761
805
|
|
|
762
806
|
// src/components/SearchField/SearchField.tsx
|
|
763
807
|
var import_react10 = require("react");
|
|
764
|
-
var
|
|
808
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
765
809
|
function assignRef(ref, value) {
|
|
766
810
|
if (typeof ref === "function") ref(value);
|
|
767
811
|
else if (ref) ref.current = value;
|
|
@@ -791,7 +835,7 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
|
|
|
791
835
|
onSubmit?.(text);
|
|
792
836
|
}
|
|
793
837
|
}
|
|
794
|
-
return /* @__PURE__ */ (0,
|
|
838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
795
839
|
Input,
|
|
796
840
|
{
|
|
797
841
|
ref: (element) => {
|
|
@@ -805,8 +849,8 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
|
|
|
805
849
|
value: text,
|
|
806
850
|
onChange: (event) => setText(event.target.value),
|
|
807
851
|
onKeyDown: handleKeyDown,
|
|
808
|
-
startContent: /* @__PURE__ */ (0,
|
|
809
|
-
endContent: loading ? /* @__PURE__ */ (0,
|
|
852
|
+
startContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchIcon, { size: size === "sm" ? 14 : 16 }),
|
|
853
|
+
endContent: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { size: "sm", label: "Searching" }) : text ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
810
854
|
CloseButton,
|
|
811
855
|
{
|
|
812
856
|
size: "sm",
|
|
@@ -824,7 +868,7 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
|
|
|
824
868
|
|
|
825
869
|
// src/components/NumberField/NumberField.tsx
|
|
826
870
|
var import_react11 = require("react");
|
|
827
|
-
var
|
|
871
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
828
872
|
var decimals = (step) => (String(step).split(".")[1] ?? "").length;
|
|
829
873
|
var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
830
874
|
value,
|
|
@@ -888,7 +932,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
888
932
|
}
|
|
889
933
|
const atMin = min !== void 0 && number !== null && number <= min;
|
|
890
934
|
const atMax = max !== void 0 && number !== null && number >= max;
|
|
891
|
-
return /* @__PURE__ */ (0,
|
|
935
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
892
936
|
"div",
|
|
893
937
|
{
|
|
894
938
|
className: cx(
|
|
@@ -899,7 +943,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
899
943
|
className
|
|
900
944
|
),
|
|
901
945
|
children: [
|
|
902
|
-
/* @__PURE__ */ (0,
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
903
947
|
"button",
|
|
904
948
|
{
|
|
905
949
|
type: "button",
|
|
@@ -908,10 +952,10 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
908
952
|
tabIndex: -1,
|
|
909
953
|
disabled: disabled || atMin,
|
|
910
954
|
onClick: () => stepBy(-1),
|
|
911
|
-
children: /* @__PURE__ */ (0,
|
|
955
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MinusIcon, { size: 14 })
|
|
912
956
|
}
|
|
913
957
|
),
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
958
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
915
959
|
"input",
|
|
916
960
|
{
|
|
917
961
|
ref,
|
|
@@ -940,7 +984,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
940
984
|
...inputProps
|
|
941
985
|
}
|
|
942
986
|
),
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
987
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
944
988
|
"button",
|
|
945
989
|
{
|
|
946
990
|
type: "button",
|
|
@@ -949,7 +993,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
949
993
|
tabIndex: -1,
|
|
950
994
|
disabled: disabled || atMax,
|
|
951
995
|
onClick: () => stepBy(1),
|
|
952
|
-
children: /* @__PURE__ */ (0,
|
|
996
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlusIcon, { size: 14 })
|
|
953
997
|
}
|
|
954
998
|
)
|
|
955
999
|
]
|
|
@@ -959,7 +1003,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
959
1003
|
|
|
960
1004
|
// src/components/InputOTP/InputOTP.tsx
|
|
961
1005
|
var import_react12 = require("react");
|
|
962
|
-
var
|
|
1006
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
963
1007
|
function InputOTP({
|
|
964
1008
|
length = 6,
|
|
965
1009
|
value,
|
|
@@ -1021,10 +1065,10 @@ function InputOTP({
|
|
|
1021
1065
|
const pasted = clean(event.clipboardData.getData("text"));
|
|
1022
1066
|
if (pasted) update(chars.slice(0, index).join("") + pasted, index + pasted.length);
|
|
1023
1067
|
}
|
|
1024
|
-
return /* @__PURE__ */ (0,
|
|
1025
|
-
chars.map((char, index) => /* @__PURE__ */ (0,
|
|
1026
|
-
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ (0,
|
|
1027
|
-
/* @__PURE__ */ (0,
|
|
1068
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { role: "group", "aria-label": ariaLabel, className: cx("ow-otp", isInvalid && "ow-otp--invalid", className), children: [
|
|
1069
|
+
chars.map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ow-otp__slot", children: [
|
|
1070
|
+
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-otp__separator", "aria-hidden": "true" }) : null,
|
|
1071
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1028
1072
|
"input",
|
|
1029
1073
|
{
|
|
1030
1074
|
ref: (element) => {
|
|
@@ -1052,7 +1096,7 @@ function InputOTP({
|
|
|
1052
1096
|
}
|
|
1053
1097
|
)
|
|
1054
1098
|
] }, index)),
|
|
1055
|
-
name ? /* @__PURE__ */ (0,
|
|
1099
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "hidden", name, value: code }) : null
|
|
1056
1100
|
] });
|
|
1057
1101
|
}
|
|
1058
1102
|
|
|
@@ -1087,7 +1131,7 @@ function resizeTextArea(textArea) {
|
|
|
1087
1131
|
}
|
|
1088
1132
|
|
|
1089
1133
|
// src/components/Textarea/Textarea.tsx
|
|
1090
|
-
var
|
|
1134
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1091
1135
|
var defaultAutoGrowMaxHeight = 180;
|
|
1092
1136
|
function assignRef2(ref, element) {
|
|
1093
1137
|
if (typeof ref === "function") ref(element);
|
|
@@ -1121,7 +1165,7 @@ var Textarea = (0, import_react13.forwardRef)(function Textarea2({
|
|
|
1121
1165
|
...style,
|
|
1122
1166
|
maxHeight: typeof autoGrowMaxHeight === "number" ? `${autoGrowMaxHeight}px` : autoGrowMaxHeight
|
|
1123
1167
|
} : style;
|
|
1124
|
-
return /* @__PURE__ */ (0,
|
|
1168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1125
1169
|
"textarea",
|
|
1126
1170
|
{
|
|
1127
1171
|
...textareaProps,
|
|
@@ -1286,7 +1330,7 @@ function usePresence(open, exitMs = exitDuration) {
|
|
|
1286
1330
|
}
|
|
1287
1331
|
|
|
1288
1332
|
// src/components/Select/Select.tsx
|
|
1289
|
-
var
|
|
1333
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1290
1334
|
var menuGap = 4;
|
|
1291
1335
|
var menuMaxHeight = 288;
|
|
1292
1336
|
var typeaheadResetMs = 600;
|
|
@@ -1457,7 +1501,7 @@ function Select({
|
|
|
1457
1501
|
const index = flatIndex;
|
|
1458
1502
|
const isSelected = index === selectedIndex;
|
|
1459
1503
|
const isActive = index === activeIndex;
|
|
1460
|
-
return /* @__PURE__ */ (0,
|
|
1504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1461
1505
|
"div",
|
|
1462
1506
|
{
|
|
1463
1507
|
id: optionId(index),
|
|
@@ -1475,18 +1519,18 @@ function Select({
|
|
|
1475
1519
|
onMouseDown: (event) => event.preventDefault(),
|
|
1476
1520
|
onClick: () => choose(index),
|
|
1477
1521
|
children: [
|
|
1478
|
-
/* @__PURE__ */ (0,
|
|
1479
|
-
/* @__PURE__ */ (0,
|
|
1480
|
-
/* @__PURE__ */ (0,
|
|
1481
|
-
option.description ? /* @__PURE__ */ (0,
|
|
1522
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckIcon, { size: 14 }) : null }),
|
|
1523
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ow-option__text", children: [
|
|
1524
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cx("ow-option__label", valueClassName), children: option.label }),
|
|
1525
|
+
option.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__description", children: option.description }) : null
|
|
1482
1526
|
] })
|
|
1483
1527
|
]
|
|
1484
1528
|
},
|
|
1485
1529
|
`${option.value}-${index}`
|
|
1486
1530
|
);
|
|
1487
1531
|
};
|
|
1488
|
-
return /* @__PURE__ */ (0,
|
|
1489
|
-
/* @__PURE__ */ (0,
|
|
1532
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1533
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1490
1534
|
"button",
|
|
1491
1535
|
{
|
|
1492
1536
|
ref: triggerRef,
|
|
@@ -1510,12 +1554,12 @@ function Select({
|
|
|
1510
1554
|
if (!menuRef.current?.contains(event.relatedTarget)) close();
|
|
1511
1555
|
},
|
|
1512
1556
|
children: [
|
|
1513
|
-
/* @__PURE__ */ (0,
|
|
1514
|
-
/* @__PURE__ */ (0,
|
|
1557
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cx("ow-select__value", !selected && "ow-select__value--placeholder", valueClassName), children: selected ? selected.label : placeholder }),
|
|
1558
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
1515
1559
|
]
|
|
1516
1560
|
}
|
|
1517
1561
|
),
|
|
1518
|
-
mounted ? /* @__PURE__ */ (0,
|
|
1562
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1519
1563
|
"div",
|
|
1520
1564
|
{
|
|
1521
1565
|
ref: menuRef,
|
|
@@ -1530,12 +1574,12 @@ function Select({
|
|
|
1530
1574
|
style: floatingStyle,
|
|
1531
1575
|
children: [
|
|
1532
1576
|
options.map(
|
|
1533
|
-
(item, groupIndex) => isGroup(item) ? /* @__PURE__ */ (0,
|
|
1534
|
-
/* @__PURE__ */ (0,
|
|
1577
|
+
(item, groupIndex) => isGroup(item) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { role: "group", "aria-label": item.label, className: "ow-listbox__group", children: [
|
|
1578
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__group-label", "aria-hidden": "true", children: item.label }),
|
|
1535
1579
|
item.options.map(renderOption)
|
|
1536
1580
|
] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
|
|
1537
1581
|
),
|
|
1538
|
-
flat.length === 0 ? /* @__PURE__ */ (0,
|
|
1582
|
+
flat.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__empty", children: "No options" }) : null
|
|
1539
1583
|
]
|
|
1540
1584
|
}
|
|
1541
1585
|
) : null
|
|
@@ -1544,7 +1588,7 @@ function Select({
|
|
|
1544
1588
|
|
|
1545
1589
|
// src/components/Combobox/Combobox.tsx
|
|
1546
1590
|
var import_react17 = require("react");
|
|
1547
|
-
var
|
|
1591
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1548
1592
|
function assignRef3(ref, value) {
|
|
1549
1593
|
if (typeof ref === "function") ref(value);
|
|
1550
1594
|
else if (ref) ref.current = value;
|
|
@@ -1657,8 +1701,8 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1657
1701
|
break;
|
|
1658
1702
|
}
|
|
1659
1703
|
}
|
|
1660
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1704
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
1705
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1662
1706
|
"div",
|
|
1663
1707
|
{
|
|
1664
1708
|
ref: fieldRef,
|
|
@@ -1671,7 +1715,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1671
1715
|
className
|
|
1672
1716
|
),
|
|
1673
1717
|
children: [
|
|
1674
|
-
/* @__PURE__ */ (0,
|
|
1718
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1675
1719
|
"input",
|
|
1676
1720
|
{
|
|
1677
1721
|
ref: (element) => {
|
|
@@ -1702,7 +1746,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1702
1746
|
...aria
|
|
1703
1747
|
}
|
|
1704
1748
|
),
|
|
1705
|
-
/* @__PURE__ */ (0,
|
|
1749
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1706
1750
|
"button",
|
|
1707
1751
|
{
|
|
1708
1752
|
type: "button",
|
|
@@ -1718,13 +1762,13 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1718
1762
|
inputRef.current?.focus();
|
|
1719
1763
|
}
|
|
1720
1764
|
},
|
|
1721
|
-
children: /* @__PURE__ */ (0,
|
|
1765
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: cx("ow-select__chevron", isOpen && "ow-combobox__chevron--open") })
|
|
1722
1766
|
}
|
|
1723
1767
|
)
|
|
1724
1768
|
]
|
|
1725
1769
|
}
|
|
1726
1770
|
),
|
|
1727
|
-
mounted ? /* @__PURE__ */ (0,
|
|
1771
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1728
1772
|
"div",
|
|
1729
1773
|
{
|
|
1730
1774
|
ref: listRef,
|
|
@@ -1739,7 +1783,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1739
1783
|
children: [
|
|
1740
1784
|
results.map((option, index) => {
|
|
1741
1785
|
const isSelected = option.value === selected;
|
|
1742
|
-
return /* @__PURE__ */ (0,
|
|
1786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1743
1787
|
"div",
|
|
1744
1788
|
{
|
|
1745
1789
|
id: optionId(index),
|
|
@@ -1755,17 +1799,17 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1755
1799
|
onMouseDown: (event) => event.preventDefault(),
|
|
1756
1800
|
onClick: () => choose(option),
|
|
1757
1801
|
children: [
|
|
1758
|
-
/* @__PURE__ */ (0,
|
|
1759
|
-
/* @__PURE__ */ (0,
|
|
1760
|
-
/* @__PURE__ */ (0,
|
|
1761
|
-
option.description ? /* @__PURE__ */ (0,
|
|
1802
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { size: 14 }) : null }),
|
|
1803
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ow-option__text", children: [
|
|
1804
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__label", children: option.label }),
|
|
1805
|
+
option.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__description", children: option.description }) : null
|
|
1762
1806
|
] })
|
|
1763
1807
|
]
|
|
1764
1808
|
},
|
|
1765
1809
|
option.value
|
|
1766
1810
|
);
|
|
1767
1811
|
}),
|
|
1768
|
-
results.length === 0 ? /* @__PURE__ */ (0,
|
|
1812
|
+
results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
|
|
1769
1813
|
]
|
|
1770
1814
|
}
|
|
1771
1815
|
) : null
|
|
@@ -1774,7 +1818,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1774
1818
|
|
|
1775
1819
|
// src/components/Checkbox/Checkbox.tsx
|
|
1776
1820
|
var import_react18 = require("react");
|
|
1777
|
-
var
|
|
1821
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1778
1822
|
var CheckboxGroupContext = (0, import_react18.createContext)(null);
|
|
1779
1823
|
function assignRef4(ref, value) {
|
|
1780
1824
|
if (typeof ref === "function") ref(value);
|
|
@@ -1802,7 +1846,7 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
|
|
|
1802
1846
|
(0, import_react18.useEffect)(() => {
|
|
1803
1847
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
1804
1848
|
}, [indeterminate]);
|
|
1805
|
-
const box = /* @__PURE__ */ (0,
|
|
1849
|
+
const box = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1806
1850
|
"span",
|
|
1807
1851
|
{
|
|
1808
1852
|
className: cx(
|
|
@@ -1812,7 +1856,7 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
|
|
|
1812
1856
|
children === void 0 && className
|
|
1813
1857
|
),
|
|
1814
1858
|
children: [
|
|
1815
|
-
/* @__PURE__ */ (0,
|
|
1859
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1816
1860
|
"input",
|
|
1817
1861
|
{
|
|
1818
1862
|
ref: (element) => {
|
|
@@ -1833,16 +1877,16 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
|
|
|
1833
1877
|
...inputProps
|
|
1834
1878
|
}
|
|
1835
1879
|
),
|
|
1836
|
-
indeterminate ? /* @__PURE__ */ (0,
|
|
1880
|
+
indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MinusIcon, { className: "ow-checkbox__check ow-checkbox__check--dash", size: size === "sm" ? 10 : 12, strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckIcon, { className: "ow-checkbox__check", size: size === "sm" ? 10 : 12, strokeWidth: 3 })
|
|
1837
1881
|
]
|
|
1838
1882
|
}
|
|
1839
1883
|
);
|
|
1840
1884
|
if (children === void 0) return box;
|
|
1841
|
-
return /* @__PURE__ */ (0,
|
|
1885
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: cx("ow-check-label", (disabled || inGroup && group.disabled) && "ow-check-label--disabled", className), children: [
|
|
1842
1886
|
box,
|
|
1843
|
-
/* @__PURE__ */ (0,
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
1845
|
-
description ? /* @__PURE__ */ (0,
|
|
1887
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-check-label__text", children: [
|
|
1888
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children }),
|
|
1889
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1846
1890
|
] })
|
|
1847
1891
|
] });
|
|
1848
1892
|
});
|
|
@@ -1862,7 +1906,7 @@ function CheckboxGroup({
|
|
|
1862
1906
|
const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
|
|
1863
1907
|
const generatedName = (0, import_react18.useId)();
|
|
1864
1908
|
const errorId = (0, import_react18.useId)();
|
|
1865
|
-
return /* @__PURE__ */ (0,
|
|
1909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1866
1910
|
CheckboxGroupContext.Provider,
|
|
1867
1911
|
{
|
|
1868
1912
|
value: {
|
|
@@ -1873,7 +1917,7 @@ function CheckboxGroup({
|
|
|
1873
1917
|
setCurrent(checked ? [...current.filter((v) => v !== item), item] : current.filter((v) => v !== item));
|
|
1874
1918
|
}
|
|
1875
1919
|
},
|
|
1876
|
-
children: /* @__PURE__ */ (0,
|
|
1920
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1877
1921
|
Fieldset,
|
|
1878
1922
|
{
|
|
1879
1923
|
legend: label,
|
|
@@ -1891,17 +1935,17 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1891
1935
|
const generatedId = (0, import_react18.useId)();
|
|
1892
1936
|
const descriptionId = `${generatedId}-description`;
|
|
1893
1937
|
const resolvedErrorId = errorId ?? `${generatedId}-error`;
|
|
1894
|
-
return /* @__PURE__ */ (0,
|
|
1938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1895
1939
|
"fieldset",
|
|
1896
1940
|
{
|
|
1897
1941
|
className: cx("ow-fieldset", className),
|
|
1898
1942
|
disabled,
|
|
1899
1943
|
"aria-describedby": [description ? descriptionId : "", error ? resolvedErrorId : ""].filter(Boolean).join(" ") || void 0,
|
|
1900
1944
|
children: [
|
|
1901
|
-
/* @__PURE__ */ (0,
|
|
1902
|
-
description ? /* @__PURE__ */ (0,
|
|
1903
|
-
/* @__PURE__ */ (0,
|
|
1904
|
-
error ? /* @__PURE__ */ (0,
|
|
1945
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("legend", { className: "ow-fieldset__legend", children: legend }),
|
|
1946
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: descriptionId, className: "ow-fieldset__description", children: description }) : null,
|
|
1947
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ow-fieldset__content", children }),
|
|
1948
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: resolvedErrorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
1905
1949
|
]
|
|
1906
1950
|
}
|
|
1907
1951
|
);
|
|
@@ -1909,7 +1953,7 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1909
1953
|
|
|
1910
1954
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
1911
1955
|
var import_react19 = require("react");
|
|
1912
|
-
var
|
|
1956
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1913
1957
|
var RadioGroupContext = (0, import_react19.createContext)(null);
|
|
1914
1958
|
function RadioGroup({
|
|
1915
1959
|
label,
|
|
@@ -1927,7 +1971,7 @@ function RadioGroup({
|
|
|
1927
1971
|
}) {
|
|
1928
1972
|
const [current, select] = useControllableState(value, defaultValue, onChange);
|
|
1929
1973
|
const generatedName = (0, import_react19.useId)();
|
|
1930
|
-
return /* @__PURE__ */ (0,
|
|
1974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1931
1975
|
Fieldset,
|
|
1932
1976
|
{
|
|
1933
1977
|
legend: label,
|
|
@@ -1948,8 +1992,8 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1948
1992
|
const descriptionId = (0, import_react19.useId)();
|
|
1949
1993
|
if (!group) throw new Error("Radio must be inside <RadioGroup>.");
|
|
1950
1994
|
const isDisabled = disabled || group.disabled;
|
|
1951
|
-
return /* @__PURE__ */ (0,
|
|
1952
|
-
/* @__PURE__ */ (0,
|
|
1995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: cx("ow-check-label", "ow-radio-label", isDisabled && "ow-check-label--disabled", className), children: [
|
|
1996
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ow-radio", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1953
1997
|
"input",
|
|
1954
1998
|
{
|
|
1955
1999
|
type: "radio",
|
|
@@ -1963,18 +2007,18 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1963
2007
|
...inputProps
|
|
1964
2008
|
}
|
|
1965
2009
|
) }),
|
|
1966
|
-
/* @__PURE__ */ (0,
|
|
1967
|
-
/* @__PURE__ */ (0,
|
|
1968
|
-
description ? /* @__PURE__ */ (0,
|
|
2010
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "ow-check-label__text", children: [
|
|
2011
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children }),
|
|
2012
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1969
2013
|
] })
|
|
1970
2014
|
] });
|
|
1971
2015
|
}
|
|
1972
2016
|
|
|
1973
2017
|
// src/components/Switch/Switch.tsx
|
|
1974
2018
|
var import_react20 = require("react");
|
|
1975
|
-
var
|
|
2019
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1976
2020
|
var Switch = (0, import_react20.forwardRef)(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
|
|
1977
|
-
return /* @__PURE__ */ (0,
|
|
2021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1978
2022
|
"button",
|
|
1979
2023
|
{
|
|
1980
2024
|
ref,
|
|
@@ -1986,14 +2030,14 @@ var Switch = (0, import_react20.forwardRef)(function Switch2({ checked, onChange
|
|
|
1986
2030
|
className: cx("ow-switch", checked && "ow-switch--on", className),
|
|
1987
2031
|
onClick: () => onChange(!checked),
|
|
1988
2032
|
...buttonProps,
|
|
1989
|
-
children: /* @__PURE__ */ (0,
|
|
2033
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-switch__knob" })
|
|
1990
2034
|
}
|
|
1991
2035
|
);
|
|
1992
2036
|
});
|
|
1993
2037
|
|
|
1994
2038
|
// src/components/Slider/Slider.tsx
|
|
1995
2039
|
var import_react21 = require("react");
|
|
1996
|
-
var
|
|
2040
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1997
2041
|
function Slider({
|
|
1998
2042
|
value,
|
|
1999
2043
|
defaultValue,
|
|
@@ -2019,7 +2063,7 @@ function Slider({
|
|
|
2019
2063
|
const end = () => onChangeEnd?.(current);
|
|
2020
2064
|
const input = (which) => {
|
|
2021
2065
|
const own = which === "low" ? low : high;
|
|
2022
|
-
return /* @__PURE__ */ (0,
|
|
2066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2023
2067
|
"input",
|
|
2024
2068
|
{
|
|
2025
2069
|
type: "range",
|
|
@@ -2044,13 +2088,13 @@ function Slider({
|
|
|
2044
2088
|
}
|
|
2045
2089
|
);
|
|
2046
2090
|
};
|
|
2047
|
-
return /* @__PURE__ */ (0,
|
|
2048
|
-
label || showValue ? /* @__PURE__ */ (0,
|
|
2049
|
-
label ? /* @__PURE__ */ (0,
|
|
2050
|
-
showValue ? /* @__PURE__ */ (0,
|
|
2091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("ow-slider", disabled && "ow-slider--disabled", className), children: [
|
|
2092
|
+
label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ow-slider__header", children: [
|
|
2093
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: labelId, className: "ow-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
|
|
2094
|
+
showValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("output", { className: "ow-slider__value", "aria-hidden": "true", children: display }) : null
|
|
2051
2095
|
] }) : null,
|
|
2052
|
-
/* @__PURE__ */ (0,
|
|
2053
|
-
/* @__PURE__ */ (0,
|
|
2096
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ow-slider__control", style, children: [
|
|
2097
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-slider__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-slider__fill" }) }),
|
|
2054
2098
|
isRange ? input("low") : null,
|
|
2055
2099
|
input("high")
|
|
2056
2100
|
] })
|
|
@@ -2059,7 +2103,7 @@ function Slider({
|
|
|
2059
2103
|
|
|
2060
2104
|
// src/components/FileDropZone/FileDropZone.tsx
|
|
2061
2105
|
var import_react22 = require("react");
|
|
2062
|
-
var
|
|
2106
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2063
2107
|
function matches(file, accept) {
|
|
2064
2108
|
if (!accept) return true;
|
|
2065
2109
|
return accept.split(",").some((rule) => {
|
|
@@ -2103,7 +2147,7 @@ function FileDropZone({
|
|
|
2103
2147
|
}
|
|
2104
2148
|
}
|
|
2105
2149
|
const hasFiles = (event) => event.dataTransfer.types.includes("Files");
|
|
2106
|
-
return /* @__PURE__ */ (0,
|
|
2150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2107
2151
|
"label",
|
|
2108
2152
|
{
|
|
2109
2153
|
className: cx(
|
|
@@ -2136,7 +2180,7 @@ function FileDropZone({
|
|
|
2136
2180
|
take(event.dataTransfer.files);
|
|
2137
2181
|
},
|
|
2138
2182
|
children: [
|
|
2139
|
-
/* @__PURE__ */ (0,
|
|
2183
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2140
2184
|
"input",
|
|
2141
2185
|
{
|
|
2142
2186
|
ref: inputRef,
|
|
@@ -2153,9 +2197,9 @@ function FileDropZone({
|
|
|
2153
2197
|
}
|
|
2154
2198
|
}
|
|
2155
2199
|
),
|
|
2156
|
-
/* @__PURE__ */ (0,
|
|
2157
|
-
/* @__PURE__ */ (0,
|
|
2158
|
-
/* @__PURE__ */ (0,
|
|
2200
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ow-dropzone__icon", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(UploadIcon, { size: 20 }) }),
|
|
2201
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ow-dropzone__label", children: isDragging ? "Drop to add" : label }),
|
|
2202
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: hintId, className: "ow-dropzone__hint", "aria-live": "polite", children: error ?? problem ?? hint })
|
|
2159
2203
|
]
|
|
2160
2204
|
}
|
|
2161
2205
|
);
|
|
@@ -2200,7 +2244,7 @@ function formatDate(iso, locale, options) {
|
|
|
2200
2244
|
}
|
|
2201
2245
|
|
|
2202
2246
|
// src/components/Calendar/Calendar.tsx
|
|
2203
|
-
var
|
|
2247
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2204
2248
|
var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
|
|
2205
2249
|
const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
|
|
2206
2250
|
const today = todayISO();
|
|
@@ -2263,9 +2307,9 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2263
2307
|
const nextMonth = addMonths(first, 1);
|
|
2264
2308
|
const canGoBack = !min || toISO(year, month, 0) >= min;
|
|
2265
2309
|
const canGoForward = !max || nextMonth <= max;
|
|
2266
|
-
return /* @__PURE__ */ (0,
|
|
2267
|
-
/* @__PURE__ */ (0,
|
|
2268
|
-
/* @__PURE__ */ (0,
|
|
2310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx("ow-calendar", className), children: [
|
|
2311
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-calendar__header", children: [
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2269
2313
|
"button",
|
|
2270
2314
|
{
|
|
2271
2315
|
type: "button",
|
|
@@ -2273,10 +2317,10 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2273
2317
|
"aria-label": `Previous month, ${formatDate(prevMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2274
2318
|
disabled: !canGoBack,
|
|
2275
2319
|
onClick: () => setFocused(clampDate(addMonths(focused, -1), min, max)),
|
|
2276
|
-
children: /* @__PURE__ */ (0,
|
|
2320
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronLeftIcon, { size: 16 })
|
|
2277
2321
|
}
|
|
2278
2322
|
),
|
|
2279
|
-
/* @__PURE__ */ (0,
|
|
2323
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ow-calendar__title", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2280
2324
|
"span",
|
|
2281
2325
|
{
|
|
2282
2326
|
className: cx("ow-calendar__title-text", slide.current.direction && `ow-calendar__slide--${slide.current.direction}`),
|
|
@@ -2284,7 +2328,7 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2284
2328
|
},
|
|
2285
2329
|
monthIndex
|
|
2286
2330
|
) }),
|
|
2287
|
-
/* @__PURE__ */ (0,
|
|
2331
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2288
2332
|
"button",
|
|
2289
2333
|
{
|
|
2290
2334
|
type: "button",
|
|
@@ -2292,17 +2336,17 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2292
2336
|
"aria-label": `Next month, ${formatDate(nextMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2293
2337
|
disabled: !canGoForward,
|
|
2294
2338
|
onClick: () => setFocused(clampDate(addMonths(focused, 1), min, max)),
|
|
2295
|
-
children: /* @__PURE__ */ (0,
|
|
2339
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRightIcon, { size: 16 })
|
|
2296
2340
|
}
|
|
2297
2341
|
)
|
|
2298
2342
|
] }),
|
|
2299
|
-
/* @__PURE__ */ (0,
|
|
2300
|
-
/* @__PURE__ */ (0,
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2343
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { ref: gridRef, role: "grid", className: "ow-calendar__grid", "aria-label": monthLabel, children: [
|
|
2344
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: weekdayNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { scope: "col", abbr: name.long, className: "ow-calendar__weekday", children: name.short.slice(0, 2) }, name.long)) }) }),
|
|
2345
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { className: cx(slide.current.direction && `ow-calendar__slide--${slide.current.direction}`), children: weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: week.map((date) => {
|
|
2302
2346
|
const inMonth = parseISO(date).month === month;
|
|
2303
2347
|
const isSelected = date === selected;
|
|
2304
2348
|
const disabled = isDisabled(date);
|
|
2305
|
-
return /* @__PURE__ */ (0,
|
|
2349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { role: "gridcell", "aria-selected": isSelected, className: "ow-calendar__cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2306
2350
|
"button",
|
|
2307
2351
|
{
|
|
2308
2352
|
type: "button",
|
|
@@ -2334,7 +2378,7 @@ function clampDate(date, min, max) {
|
|
|
2334
2378
|
|
|
2335
2379
|
// src/components/Calendar/DatePicker.tsx
|
|
2336
2380
|
var import_react24 = require("react");
|
|
2337
|
-
var
|
|
2381
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2338
2382
|
function assignRef5(ref, value) {
|
|
2339
2383
|
if (typeof ref === "function") ref(value);
|
|
2340
2384
|
else if (ref) ref.current = value;
|
|
@@ -2369,8 +2413,8 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2369
2413
|
}, []);
|
|
2370
2414
|
useDismiss(isOpen, [panelRef, triggerRef], close);
|
|
2371
2415
|
const label = date ? formatDate(date, locale, formatOptions) : placeholder;
|
|
2372
|
-
return /* @__PURE__ */ (0,
|
|
2373
|
-
/* @__PURE__ */ (0,
|
|
2416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
2417
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2374
2418
|
"button",
|
|
2375
2419
|
{
|
|
2376
2420
|
ref: (element) => {
|
|
@@ -2402,12 +2446,12 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2402
2446
|
}
|
|
2403
2447
|
},
|
|
2404
2448
|
children: [
|
|
2405
|
-
/* @__PURE__ */ (0,
|
|
2406
|
-
/* @__PURE__ */ (0,
|
|
2449
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, { size: size === "sm" ? 14 : 16, className: "ow-date-picker__icon" }),
|
|
2450
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: `${panelId}-value`, className: cx("ow-select__value", !date && "ow-select__value--placeholder"), children: label })
|
|
2407
2451
|
]
|
|
2408
2452
|
}
|
|
2409
2453
|
),
|
|
2410
|
-
mounted ? /* @__PURE__ */ (0,
|
|
2454
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2411
2455
|
"div",
|
|
2412
2456
|
{
|
|
2413
2457
|
ref: panelRef,
|
|
@@ -2418,7 +2462,7 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2418
2462
|
"aria-label": "Choose a date",
|
|
2419
2463
|
className: "ow-popover ow-floating ow-date-picker__panel",
|
|
2420
2464
|
style,
|
|
2421
|
-
children: /* @__PURE__ */ (0,
|
|
2465
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2422
2466
|
Calendar,
|
|
2423
2467
|
{
|
|
2424
2468
|
...calendarProps,
|
|
@@ -2437,13 +2481,13 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2437
2481
|
});
|
|
2438
2482
|
|
|
2439
2483
|
// src/components/Alert/Alert.tsx
|
|
2440
|
-
var
|
|
2484
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2441
2485
|
var icons = {
|
|
2442
|
-
info: /* @__PURE__ */ (0,
|
|
2443
|
-
success: /* @__PURE__ */ (0,
|
|
2444
|
-
warning: /* @__PURE__ */ (0,
|
|
2445
|
-
danger: /* @__PURE__ */ (0,
|
|
2446
|
-
neutral: /* @__PURE__ */ (0,
|
|
2486
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InfoIcon, { size: 16 }),
|
|
2487
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CircleCheckIcon, { size: 16 }),
|
|
2488
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TriangleAlertIcon, { size: 16 }),
|
|
2489
|
+
danger: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CircleAlertIcon, { size: 16 }),
|
|
2490
|
+
neutral: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InfoIcon, { size: 16 })
|
|
2447
2491
|
};
|
|
2448
2492
|
function Alert({
|
|
2449
2493
|
variant = "info",
|
|
@@ -2456,37 +2500,37 @@ function Alert({
|
|
|
2456
2500
|
role,
|
|
2457
2501
|
...props
|
|
2458
2502
|
}) {
|
|
2459
|
-
return /* @__PURE__ */ (0,
|
|
2503
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2460
2504
|
"div",
|
|
2461
2505
|
{
|
|
2462
2506
|
role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
|
|
2463
2507
|
className: cx("ow-alert", `ow-alert--${variant}`, className),
|
|
2464
2508
|
...props,
|
|
2465
2509
|
children: [
|
|
2466
|
-
icon2 === false ? null : /* @__PURE__ */ (0,
|
|
2467
|
-
/* @__PURE__ */ (0,
|
|
2468
|
-
title ? /* @__PURE__ */ (0,
|
|
2469
|
-
children ? /* @__PURE__ */ (0,
|
|
2470
|
-
actions ? /* @__PURE__ */ (0,
|
|
2510
|
+
icon2 === false ? null : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ow-alert__icon", children: icon2 ?? icons[variant] }),
|
|
2511
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-alert__body", children: [
|
|
2512
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__title", children: title }) : null,
|
|
2513
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__description", children }) : null,
|
|
2514
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__actions", children: actions }) : null
|
|
2471
2515
|
] }),
|
|
2472
|
-
onClose ? /* @__PURE__ */ (0,
|
|
2516
|
+
onClose ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseButton, { size: "sm", label: "Dismiss", className: "ow-alert__close", onClick: onClose }) : null
|
|
2473
2517
|
]
|
|
2474
2518
|
}
|
|
2475
2519
|
);
|
|
2476
2520
|
}
|
|
2477
2521
|
|
|
2478
2522
|
// src/components/Badge/Badge.tsx
|
|
2479
|
-
var
|
|
2523
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2480
2524
|
function Badge({ children, className, icon: icon2, size = "md", variant = "neutral", ...spanProps }) {
|
|
2481
|
-
return /* @__PURE__ */ (0,
|
|
2482
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
2483
|
-
/* @__PURE__ */ (0,
|
|
2525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx("ow-badge", `ow-badge--${size}`, `ow-badge--${variant}`, className), ...spanProps, children: [
|
|
2526
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ow-badge__icon", children: icon2 }) : null,
|
|
2527
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children })
|
|
2484
2528
|
] });
|
|
2485
2529
|
}
|
|
2486
2530
|
|
|
2487
2531
|
// src/components/Progress/Progress.tsx
|
|
2488
2532
|
var import_react25 = require("react");
|
|
2489
|
-
var
|
|
2533
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2490
2534
|
function ProgressBar({
|
|
2491
2535
|
value,
|
|
2492
2536
|
max = 100,
|
|
@@ -2502,12 +2546,12 @@ function ProgressBar({
|
|
|
2502
2546
|
const indeterminate = value === void 0;
|
|
2503
2547
|
const pct = indeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
|
|
2504
2548
|
const text = valueLabel ?? `${Math.round(pct)}%`;
|
|
2505
|
-
return /* @__PURE__ */ (0,
|
|
2506
|
-
label || showValue && !indeterminate ? /* @__PURE__ */ (0,
|
|
2507
|
-
label ? /* @__PURE__ */ (0,
|
|
2508
|
-
showValue && !indeterminate ? /* @__PURE__ */ (0,
|
|
2549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cx("ow-progress", `ow-progress--${size}`, `ow-progress--${tone}`, className), children: [
|
|
2550
|
+
label || showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-progress__header", children: [
|
|
2551
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { id: labelId, className: "ow-progress__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
|
|
2552
|
+
showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ow-progress__value", children: text }) : null
|
|
2509
2553
|
] }) : null,
|
|
2510
|
-
/* @__PURE__ */ (0,
|
|
2554
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2511
2555
|
"div",
|
|
2512
2556
|
{
|
|
2513
2557
|
role: "progressbar",
|
|
@@ -2518,7 +2562,7 @@ function ProgressBar({
|
|
|
2518
2562
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
2519
2563
|
"aria-valuetext": indeterminate ? void 0 : text,
|
|
2520
2564
|
className: cx("ow-progress__track", indeterminate && "ow-progress__track--indeterminate"),
|
|
2521
|
-
children: /* @__PURE__ */ (0,
|
|
2565
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ow-progress__fill", style: indeterminate ? void 0 : { width: `${pct}%` } })
|
|
2522
2566
|
}
|
|
2523
2567
|
)
|
|
2524
2568
|
] });
|
|
@@ -2537,7 +2581,7 @@ function ProgressCircle({
|
|
|
2537
2581
|
const circumference = 2 * Math.PI * radius;
|
|
2538
2582
|
const indeterminate = value === void 0;
|
|
2539
2583
|
const pct = indeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
|
|
2540
|
-
return /* @__PURE__ */ (0,
|
|
2584
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2541
2585
|
"span",
|
|
2542
2586
|
{
|
|
2543
2587
|
role: "progressbar",
|
|
@@ -2553,9 +2597,9 @@ function ProgressCircle({
|
|
|
2553
2597
|
),
|
|
2554
2598
|
style: { width: box, height: box },
|
|
2555
2599
|
children: [
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
2557
|
-
/* @__PURE__ */ (0,
|
|
2558
|
-
/* @__PURE__ */ (0,
|
|
2600
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
|
|
2601
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
|
|
2602
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2559
2603
|
"circle",
|
|
2560
2604
|
{
|
|
2561
2605
|
className: "ow-progress-circle__fill",
|
|
@@ -2571,7 +2615,7 @@ function ProgressCircle({
|
|
|
2571
2615
|
}
|
|
2572
2616
|
)
|
|
2573
2617
|
] }),
|
|
2574
|
-
size === "lg" && !indeterminate ? /* @__PURE__ */ (0,
|
|
2618
|
+
size === "lg" && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "ow-progress-circle__value", children: [
|
|
2575
2619
|
Math.round(pct),
|
|
2576
2620
|
"%"
|
|
2577
2621
|
] }) : null
|
|
@@ -2582,9 +2626,9 @@ function ProgressCircle({
|
|
|
2582
2626
|
|
|
2583
2627
|
// src/components/Skeleton/Skeleton.tsx
|
|
2584
2628
|
var import_react26 = require("react");
|
|
2585
|
-
var
|
|
2629
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2586
2630
|
function Skeleton({ width = "100%", height = 14, soft = false, shape = "bar", className }) {
|
|
2587
|
-
return /* @__PURE__ */ (0,
|
|
2631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2588
2632
|
"span",
|
|
2589
2633
|
{
|
|
2590
2634
|
className: cx("ow-skeleton", soft && "ow-skeleton--soft", shape === "block" && "ow-skeleton--block", className),
|
|
@@ -2600,26 +2644,26 @@ function SkeletonRows({ label = "Loading", rows = 4, delayMs = 150 }) {
|
|
|
2600
2644
|
const timer = window.setTimeout(() => setIsVisible(true), delayMs);
|
|
2601
2645
|
return () => window.clearTimeout(timer);
|
|
2602
2646
|
}, [delayMs]);
|
|
2603
|
-
return /* @__PURE__ */ (0,
|
|
2604
|
-
/* @__PURE__ */ (0,
|
|
2605
|
-
/* @__PURE__ */ (0,
|
|
2606
|
-
/* @__PURE__ */ (0,
|
|
2647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "status", "aria-label": label, "aria-busy": "true", children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ow-skeleton-rows", "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ow-skeleton-rows__row", children: [
|
|
2648
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ow-skeleton-rows__text", children: [
|
|
2649
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: `${28 + index * 17 % 22}%`, height: 14 }),
|
|
2650
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: `${46 + index * 23 % 30}%`, height: 12, soft: true })
|
|
2607
2651
|
] }),
|
|
2608
|
-
/* @__PURE__ */ (0,
|
|
2652
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: 96, height: 32, soft: true, shape: "block" })
|
|
2609
2653
|
] }, index)) }) : null });
|
|
2610
2654
|
}
|
|
2611
2655
|
|
|
2612
2656
|
// src/components/Toast/Toast.tsx
|
|
2613
2657
|
var import_react27 = require("react");
|
|
2614
2658
|
var import_sonner = require("sonner");
|
|
2615
|
-
var
|
|
2659
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2616
2660
|
var icons2 = {
|
|
2617
|
-
success: /* @__PURE__ */ (0,
|
|
2618
|
-
error: /* @__PURE__ */ (0,
|
|
2619
|
-
warning: /* @__PURE__ */ (0,
|
|
2620
|
-
info: /* @__PURE__ */ (0,
|
|
2621
|
-
loading: /* @__PURE__ */ (0,
|
|
2622
|
-
close: /* @__PURE__ */ (0,
|
|
2661
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleCheckIcon, { size: 16 }),
|
|
2662
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleAlertIcon, { size: 16 }),
|
|
2663
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TriangleAlertIcon, { size: 16 }),
|
|
2664
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, { size: 16 }),
|
|
2665
|
+
loading: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Spinner, { size: "sm", label: "" }),
|
|
2666
|
+
close: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(XIcon, { size: 12 })
|
|
2623
2667
|
};
|
|
2624
2668
|
function Toaster({
|
|
2625
2669
|
position = "bottom-center",
|
|
@@ -2650,7 +2694,7 @@ function Toaster({
|
|
|
2650
2694
|
observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ["open"] });
|
|
2651
2695
|
return () => observer.disconnect();
|
|
2652
2696
|
}, []);
|
|
2653
|
-
return /* @__PURE__ */ (0,
|
|
2697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: layerRef, ...manualPopover, className: "ow-toaster-layer", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2654
2698
|
import_sonner.Toaster,
|
|
2655
2699
|
{
|
|
2656
2700
|
id,
|
|
@@ -2672,7 +2716,7 @@ function Toaster({
|
|
|
2672
2716
|
|
|
2673
2717
|
// src/components/Tooltip/Tooltip.tsx
|
|
2674
2718
|
var import_react28 = require("react");
|
|
2675
|
-
var
|
|
2719
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2676
2720
|
var lastClosedAt = 0;
|
|
2677
2721
|
var warmWindow = 500;
|
|
2678
2722
|
function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
@@ -2703,7 +2747,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
|
2703
2747
|
document.addEventListener("keydown", onKeyDown);
|
|
2704
2748
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
2705
2749
|
}, [open]);
|
|
2706
|
-
return /* @__PURE__ */ (0,
|
|
2750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2707
2751
|
"span",
|
|
2708
2752
|
{
|
|
2709
2753
|
ref: anchorRef,
|
|
@@ -2719,7 +2763,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
|
2719
2763
|
onBlur: hide,
|
|
2720
2764
|
children: [
|
|
2721
2765
|
children,
|
|
2722
|
-
mounted ? /* @__PURE__ */ (0,
|
|
2766
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { ref: bubbleRef, ...manualPopover, "data-state": state, className: "ow-tooltip__bubble ow-floating", style, "aria-hidden": "true", children: label }) : null
|
|
2723
2767
|
]
|
|
2724
2768
|
}
|
|
2725
2769
|
);
|
|
@@ -2785,7 +2829,7 @@ function useModalDialog(open, onCancel) {
|
|
|
2785
2829
|
}
|
|
2786
2830
|
|
|
2787
2831
|
// src/components/Dialog/Dialog.tsx
|
|
2788
|
-
var
|
|
2832
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2789
2833
|
function Dialog({
|
|
2790
2834
|
open,
|
|
2791
2835
|
onClose,
|
|
@@ -2804,15 +2848,15 @@ function Dialog({
|
|
|
2804
2848
|
if (dismissible) onClose();
|
|
2805
2849
|
});
|
|
2806
2850
|
if (!mounted) return null;
|
|
2807
|
-
const body = /* @__PURE__ */ (0,
|
|
2808
|
-
/* @__PURE__ */ (0,
|
|
2809
|
-
/* @__PURE__ */ (0,
|
|
2810
|
-
description ? /* @__PURE__ */ (0,
|
|
2851
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
2852
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-dialog__header", children: [
|
|
2853
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { id: titleId, className: "ow-dialog__title", children: title }),
|
|
2854
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: descriptionId, className: "ow-dialog__description", children: description }) : null
|
|
2811
2855
|
] }),
|
|
2812
2856
|
children,
|
|
2813
|
-
actions ? /* @__PURE__ */ (0,
|
|
2857
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-dialog__actions", children: actions }) : null
|
|
2814
2858
|
] });
|
|
2815
|
-
return /* @__PURE__ */ (0,
|
|
2859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2816
2860
|
"dialog",
|
|
2817
2861
|
{
|
|
2818
2862
|
ref: dialogRef,
|
|
@@ -2820,7 +2864,7 @@ function Dialog({
|
|
|
2820
2864
|
style: { width: `min(${width}px, calc(100% - 32px))` },
|
|
2821
2865
|
"aria-labelledby": titleId,
|
|
2822
2866
|
"aria-describedby": description ? descriptionId : void 0,
|
|
2823
|
-
children: onSubmit ? /* @__PURE__ */ (0,
|
|
2867
|
+
children: onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2824
2868
|
"form",
|
|
2825
2869
|
{
|
|
2826
2870
|
className: "ow-dialog__body",
|
|
@@ -2830,7 +2874,7 @@ function Dialog({
|
|
|
2830
2874
|
},
|
|
2831
2875
|
children: body
|
|
2832
2876
|
}
|
|
2833
|
-
) : /* @__PURE__ */ (0,
|
|
2877
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-dialog__body", children: body })
|
|
2834
2878
|
}
|
|
2835
2879
|
);
|
|
2836
2880
|
}
|
|
@@ -2861,7 +2905,7 @@ function ConfirmDialog({
|
|
|
2861
2905
|
setIsWorking(false);
|
|
2862
2906
|
}
|
|
2863
2907
|
}
|
|
2864
|
-
return /* @__PURE__ */ (0,
|
|
2908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2865
2909
|
Dialog,
|
|
2866
2910
|
{
|
|
2867
2911
|
open,
|
|
@@ -2869,17 +2913,17 @@ function ConfirmDialog({
|
|
|
2869
2913
|
dismissible: !isWorking,
|
|
2870
2914
|
width: 380,
|
|
2871
2915
|
className: "ow-dialog--confirm",
|
|
2872
|
-
title: /* @__PURE__ */ (0,
|
|
2873
|
-
destructive ? /* @__PURE__ */ (0,
|
|
2916
|
+
title: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
2917
|
+
destructive ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ow-dialog__danger-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TrashIcon, { size: 18 }) }) : null,
|
|
2874
2918
|
title
|
|
2875
2919
|
] }),
|
|
2876
2920
|
description,
|
|
2877
2921
|
onSubmit: () => {
|
|
2878
2922
|
if (!confirmDisabled && !isWorking) void confirm();
|
|
2879
2923
|
},
|
|
2880
|
-
actions: /* @__PURE__ */ (0,
|
|
2881
|
-
/* @__PURE__ */ (0,
|
|
2882
|
-
/* @__PURE__ */ (0,
|
|
2924
|
+
actions: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
2925
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { type: "button", disabled: isWorking, autoFocus: true, onClick: onClose, children: "Cancel" }),
|
|
2926
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2883
2927
|
Button,
|
|
2884
2928
|
{
|
|
2885
2929
|
type: "submit",
|
|
@@ -2891,7 +2935,7 @@ function ConfirmDialog({
|
|
|
2891
2935
|
] }),
|
|
2892
2936
|
children: [
|
|
2893
2937
|
children,
|
|
2894
|
-
error ? /* @__PURE__ */ (0,
|
|
2938
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { role: "alert", className: "ow-dialog__error", children: error }) : null
|
|
2895
2939
|
]
|
|
2896
2940
|
}
|
|
2897
2941
|
);
|
|
@@ -2899,7 +2943,7 @@ function ConfirmDialog({
|
|
|
2899
2943
|
|
|
2900
2944
|
// src/components/Drawer/Drawer.tsx
|
|
2901
2945
|
var import_react31 = require("react");
|
|
2902
|
-
var
|
|
2946
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2903
2947
|
function Drawer({
|
|
2904
2948
|
open,
|
|
2905
2949
|
onClose,
|
|
@@ -2919,7 +2963,7 @@ function Drawer({
|
|
|
2919
2963
|
});
|
|
2920
2964
|
if (!mounted) return null;
|
|
2921
2965
|
const sizeStyle = side === "bottom" ? { height: `min(${size}px, 90dvh)` } : { width: `min(${size}px, 100vw - 24px)` };
|
|
2922
|
-
return /* @__PURE__ */ (0,
|
|
2966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2923
2967
|
"dialog",
|
|
2924
2968
|
{
|
|
2925
2969
|
ref: dialogRef,
|
|
@@ -2928,15 +2972,15 @@ function Drawer({
|
|
|
2928
2972
|
"aria-labelledby": titleId,
|
|
2929
2973
|
"aria-describedby": description ? descriptionId : void 0,
|
|
2930
2974
|
children: [
|
|
2931
|
-
/* @__PURE__ */ (0,
|
|
2932
|
-
/* @__PURE__ */ (0,
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2934
|
-
description ? /* @__PURE__ */ (0,
|
|
2975
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: "ow-drawer__header", children: [
|
|
2976
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ow-drawer__titles", children: [
|
|
2977
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { id: titleId, className: "ow-drawer__title", children: title }),
|
|
2978
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: descriptionId, className: "ow-drawer__description", children: description }) : null
|
|
2935
2979
|
] }),
|
|
2936
|
-
dismissible ? /* @__PURE__ */ (0,
|
|
2980
|
+
dismissible ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseButton, { onClick: onClose }) : null
|
|
2937
2981
|
] }),
|
|
2938
|
-
/* @__PURE__ */ (0,
|
|
2939
|
-
footer ? /* @__PURE__ */ (0,
|
|
2982
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "ow-drawer__body", children }),
|
|
2983
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("footer", { className: "ow-drawer__footer", children: footer }) : null
|
|
2940
2984
|
]
|
|
2941
2985
|
}
|
|
2942
2986
|
);
|
|
@@ -2944,7 +2988,7 @@ function Drawer({
|
|
|
2944
2988
|
|
|
2945
2989
|
// src/components/Popover/Popover.tsx
|
|
2946
2990
|
var import_react32 = require("react");
|
|
2947
|
-
var
|
|
2991
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2948
2992
|
function Popover({
|
|
2949
2993
|
trigger,
|
|
2950
2994
|
children,
|
|
@@ -2996,9 +3040,9 @@ function Popover({
|
|
|
2996
3040
|
if (!event.defaultPrevented) setOpen(!isOpen);
|
|
2997
3041
|
}
|
|
2998
3042
|
}) : trigger;
|
|
2999
|
-
return /* @__PURE__ */ (0,
|
|
3000
|
-
/* @__PURE__ */ (0,
|
|
3001
|
-
mounted ? /* @__PURE__ */ (0,
|
|
3043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
|
|
3044
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ref: anchorRef, className: "ow-popover-anchor", children: triggerElement }),
|
|
3045
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
3002
3046
|
"div",
|
|
3003
3047
|
{
|
|
3004
3048
|
ref: panelRef,
|
|
@@ -3016,7 +3060,7 @@ function Popover({
|
|
|
3016
3060
|
if (next && !panelRef.current?.contains(next) && !anchorRef.current?.contains(next)) setOpen(false);
|
|
3017
3061
|
},
|
|
3018
3062
|
children: [
|
|
3019
|
-
title ? /* @__PURE__ */ (0,
|
|
3063
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: `${id}-title`, className: "ow-popover__title", children: title }) : null,
|
|
3020
3064
|
children
|
|
3021
3065
|
]
|
|
3022
3066
|
}
|
|
@@ -3082,7 +3126,7 @@ function useMenuKeyboard({
|
|
|
3082
3126
|
}
|
|
3083
3127
|
|
|
3084
3128
|
// src/components/Menu/Menu.tsx
|
|
3085
|
-
var
|
|
3129
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3086
3130
|
var MenuContext = (0, import_react34.createContext)(null);
|
|
3087
3131
|
function Menu({ trigger, children, label, align = "start", above = false, width, defaultOpen = false, className }) {
|
|
3088
3132
|
const [open, setOpen] = (0, import_react34.useState)(defaultOpen);
|
|
@@ -3120,9 +3164,9 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3120
3164
|
if (!event.defaultPrevented) setOpen((current) => !current);
|
|
3121
3165
|
}
|
|
3122
3166
|
}) : trigger;
|
|
3123
|
-
return /* @__PURE__ */ (0,
|
|
3167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { ref: rootRef, className: "ow-menu", children: [
|
|
3124
3168
|
triggerElement,
|
|
3125
|
-
mounted ? /* @__PURE__ */ (0,
|
|
3169
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3126
3170
|
MenuContext.Provider,
|
|
3127
3171
|
{
|
|
3128
3172
|
value: {
|
|
@@ -3131,7 +3175,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3131
3175
|
triggerRef.current?.focus();
|
|
3132
3176
|
}
|
|
3133
3177
|
},
|
|
3134
|
-
children: /* @__PURE__ */ (0,
|
|
3178
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3135
3179
|
"div",
|
|
3136
3180
|
{
|
|
3137
3181
|
ref: menuRef,
|
|
@@ -3152,7 +3196,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3152
3196
|
}
|
|
3153
3197
|
var MenuItem = (0, import_react34.forwardRef)(function MenuItem2({ icon: icon2, onSelect, destructive = false, shortcut, className, children, onClick, ...buttonProps }, ref) {
|
|
3154
3198
|
const menu = (0, import_react34.useContext)(MenuContext);
|
|
3155
|
-
return /* @__PURE__ */ (0,
|
|
3199
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
3156
3200
|
"button",
|
|
3157
3201
|
{
|
|
3158
3202
|
ref,
|
|
@@ -3168,18 +3212,18 @@ var MenuItem = (0, import_react34.forwardRef)(function MenuItem2({ icon: icon2,
|
|
|
3168
3212
|
},
|
|
3169
3213
|
...buttonProps,
|
|
3170
3214
|
children: [
|
|
3171
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3172
|
-
/* @__PURE__ */ (0,
|
|
3173
|
-
shortcut ? /* @__PURE__ */ (0,
|
|
3215
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-menu__icon", children: icon2 }) : null,
|
|
3216
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-menu__label", children }),
|
|
3217
|
+
shortcut ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "ow-menu__shortcut", children: shortcut }) : null
|
|
3174
3218
|
]
|
|
3175
3219
|
}
|
|
3176
3220
|
);
|
|
3177
3221
|
});
|
|
3178
3222
|
function MenuLabel({ children }) {
|
|
3179
|
-
return /* @__PURE__ */ (0,
|
|
3223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-menu__group-label", role: "presentation", children });
|
|
3180
3224
|
}
|
|
3181
3225
|
function MenuSeparator() {
|
|
3182
|
-
return /* @__PURE__ */ (0,
|
|
3226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-menu__separator", role: "separator" });
|
|
3183
3227
|
}
|
|
3184
3228
|
|
|
3185
3229
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
@@ -3220,7 +3264,7 @@ function filterCommands(commands, query) {
|
|
|
3220
3264
|
}
|
|
3221
3265
|
|
|
3222
3266
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
3223
|
-
var
|
|
3267
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3224
3268
|
function CommandPalette({ open, onClose, commands, placeholder = "Search commands\u2026" }) {
|
|
3225
3269
|
const { dialogRef, mounted } = useModalDialog(open, onClose);
|
|
3226
3270
|
const [query, setQuery] = (0, import_react35.useState)("");
|
|
@@ -3246,10 +3290,10 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3246
3290
|
if (!results.length) return;
|
|
3247
3291
|
setActiveIndex((index) => (Math.min(index, results.length - 1) + step + results.length) % results.length);
|
|
3248
3292
|
}
|
|
3249
|
-
return /* @__PURE__ */ (0,
|
|
3250
|
-
/* @__PURE__ */ (0,
|
|
3251
|
-
/* @__PURE__ */ (0,
|
|
3252
|
-
/* @__PURE__ */ (0,
|
|
3293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("dialog", { ref: dialogRef, className: "ow-dialog ow-palette", "aria-label": "Command palette", children: [
|
|
3294
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ow-palette__search", children: [
|
|
3295
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SearchIcon, { size: 16, className: "ow-palette__search-icon" }),
|
|
3296
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3253
3297
|
"input",
|
|
3254
3298
|
{
|
|
3255
3299
|
autoFocus: true,
|
|
@@ -3276,14 +3320,14 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3276
3320
|
}
|
|
3277
3321
|
}
|
|
3278
3322
|
),
|
|
3279
|
-
/* @__PURE__ */ (0,
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("kbd", { className: "ow-palette__esc", children: "esc" })
|
|
3280
3324
|
] }),
|
|
3281
|
-
/* @__PURE__ */ (0,
|
|
3325
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "ow-palette__list", children: results.length ? results.map((command, index) => {
|
|
3282
3326
|
const showGroup = !query.trim() && command.group && command.group !== results[index - 1]?.group;
|
|
3283
3327
|
const isActive = command === active;
|
|
3284
|
-
return /* @__PURE__ */ (0,
|
|
3285
|
-
showGroup ? /* @__PURE__ */ (0,
|
|
3286
|
-
/* @__PURE__ */ (0,
|
|
3328
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { role: "presentation", children: [
|
|
3329
|
+
showGroup ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ow-palette__group", children: command.group }) : null,
|
|
3330
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3287
3331
|
"div",
|
|
3288
3332
|
{
|
|
3289
3333
|
id: `${listId}-${command.id}`,
|
|
@@ -3298,16 +3342,16 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3298
3342
|
onMouseMove: () => setActiveIndex(index),
|
|
3299
3343
|
onClick: () => run(command),
|
|
3300
3344
|
children: [
|
|
3301
|
-
/* @__PURE__ */ (0,
|
|
3302
|
-
/* @__PURE__ */ (0,
|
|
3303
|
-
command.disabled && isActive ? /* @__PURE__ */ (0,
|
|
3304
|
-
command.shortcut ? /* @__PURE__ */ (0,
|
|
3305
|
-
isActive && !command.disabled ? /* @__PURE__ */ (0,
|
|
3345
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__icon", "aria-hidden": "true", children: command.icon }),
|
|
3346
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__title", children: command.title }),
|
|
3347
|
+
command.disabled && isActive ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__hint", children: command.disabled }) : command.hint ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__hint", children: command.hint }) : null,
|
|
3348
|
+
command.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("kbd", { className: "ow-palette__shortcut", children: command.shortcut }) : null,
|
|
3349
|
+
isActive && !command.disabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CornerDownLeftIcon, { size: 13, className: "ow-palette__enter" }) : null
|
|
3306
3350
|
]
|
|
3307
3351
|
}
|
|
3308
3352
|
)
|
|
3309
3353
|
] }, command.id);
|
|
3310
|
-
}) : /* @__PURE__ */ (0,
|
|
3354
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "ow-palette__empty", children: [
|
|
3311
3355
|
"No commands match \u201C",
|
|
3312
3356
|
query,
|
|
3313
3357
|
"\u201D."
|
|
@@ -3317,7 +3361,7 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3317
3361
|
|
|
3318
3362
|
// src/components/Tabs/Tabs.tsx
|
|
3319
3363
|
var import_react36 = require("react");
|
|
3320
|
-
var
|
|
3364
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3321
3365
|
var TabsContext = (0, import_react36.createContext)(null);
|
|
3322
3366
|
function useTabs(component) {
|
|
3323
3367
|
const context = (0, import_react36.useContext)(TabsContext);
|
|
@@ -3328,7 +3372,7 @@ var idPart = (value) => value.replace(/[^\w-]/g, "_");
|
|
|
3328
3372
|
function Tabs({ value, defaultValue = "", onValueChange, variant = "segmented", className, children, ...props }) {
|
|
3329
3373
|
const [current, select] = useControllableState(value, defaultValue, onValueChange);
|
|
3330
3374
|
const baseId = (0, import_react36.useId)();
|
|
3331
|
-
return /* @__PURE__ */ (0,
|
|
3375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TabsContext.Provider, { value: { value: current, select, baseId, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("ow-tabs", `ow-tabs--${variant}`, className), ...props, children }) });
|
|
3332
3376
|
}
|
|
3333
3377
|
function TabList({ className, onKeyDown, children, ...props }) {
|
|
3334
3378
|
const { value, select } = useTabs("TabList");
|
|
@@ -3352,15 +3396,15 @@ function TabList({ className, onKeyDown, children, ...props }) {
|
|
|
3352
3396
|
next.focus();
|
|
3353
3397
|
if (next.dataset.value) select(next.dataset.value);
|
|
3354
3398
|
}
|
|
3355
|
-
return /* @__PURE__ */ (0,
|
|
3399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: listRef, role: "tablist", className: cx("ow-tabs__list", className), onKeyDown: handleKeyDown, ...props, children: [
|
|
3356
3400
|
children,
|
|
3357
|
-
/* @__PURE__ */ (0,
|
|
3401
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
|
|
3358
3402
|
] });
|
|
3359
3403
|
}
|
|
3360
3404
|
function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
3361
3405
|
const { value: current, select, baseId } = useTabs("Tab");
|
|
3362
3406
|
const selected = current === value;
|
|
3363
|
-
return /* @__PURE__ */ (0,
|
|
3407
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
3364
3408
|
"button",
|
|
3365
3409
|
{
|
|
3366
3410
|
type: "button",
|
|
@@ -3377,7 +3421,7 @@ function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
|
3377
3421
|
},
|
|
3378
3422
|
...props,
|
|
3379
3423
|
children: [
|
|
3380
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3424
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-tab__icon", children: icon2 }) : null,
|
|
3381
3425
|
children
|
|
3382
3426
|
]
|
|
3383
3427
|
}
|
|
@@ -3387,7 +3431,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
|
|
|
3387
3431
|
const { value: current, baseId } = useTabs("TabPanel");
|
|
3388
3432
|
const selected = current === value;
|
|
3389
3433
|
if (!selected && !keepMounted) return null;
|
|
3390
|
-
return /* @__PURE__ */ (0,
|
|
3434
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3391
3435
|
"div",
|
|
3392
3436
|
{
|
|
3393
3437
|
role: "tabpanel",
|
|
@@ -3404,7 +3448,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
|
|
|
3404
3448
|
|
|
3405
3449
|
// src/components/Accordion/Accordion.tsx
|
|
3406
3450
|
var import_react37 = require("react");
|
|
3407
|
-
var
|
|
3451
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3408
3452
|
function DisclosureView({
|
|
3409
3453
|
open,
|
|
3410
3454
|
onToggle,
|
|
@@ -3424,9 +3468,9 @@ function DisclosureView({
|
|
|
3424
3468
|
(0, import_react37.useEffect)(() => {
|
|
3425
3469
|
if (panelRef.current) panelRef.current.inert = !open;
|
|
3426
3470
|
}, [open]);
|
|
3427
|
-
return /* @__PURE__ */ (0,
|
|
3428
|
-
/* @__PURE__ */ (0,
|
|
3429
|
-
/* @__PURE__ */ (0,
|
|
3471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx(item ? "ow-accordion__item" : "ow-disclosure", className), "data-open": open, children: [
|
|
3472
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ow-disclosure__header", children: [
|
|
3473
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Heading, { className: "ow-disclosure__heading", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3430
3474
|
"button",
|
|
3431
3475
|
{
|
|
3432
3476
|
type: "button",
|
|
@@ -3438,18 +3482,18 @@ function DisclosureView({
|
|
|
3438
3482
|
"data-accordion-trigger": item ? "" : void 0,
|
|
3439
3483
|
onClick: onToggle,
|
|
3440
3484
|
children: [
|
|
3441
|
-
/* @__PURE__ */ (0,
|
|
3442
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3443
|
-
/* @__PURE__ */ (0,
|
|
3444
|
-
/* @__PURE__ */ (0,
|
|
3445
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
3485
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { size: 14, className: "ow-disclosure__chevron" }),
|
|
3486
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__icon", children: icon2 }) : null,
|
|
3487
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "ow-disclosure__titles", children: [
|
|
3488
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__title", children: title }),
|
|
3489
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__subtitle", children: subtitle }) : null
|
|
3446
3490
|
] })
|
|
3447
3491
|
]
|
|
3448
3492
|
}
|
|
3449
3493
|
) }),
|
|
3450
|
-
actions ? /* @__PURE__ */ (0,
|
|
3494
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ow-disclosure__actions", children: actions }) : null
|
|
3451
3495
|
] }),
|
|
3452
|
-
/* @__PURE__ */ (0,
|
|
3496
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3453
3497
|
"div",
|
|
3454
3498
|
{
|
|
3455
3499
|
ref: panelRef,
|
|
@@ -3457,7 +3501,7 @@ function DisclosureView({
|
|
|
3457
3501
|
role: "region",
|
|
3458
3502
|
"aria-labelledby": `${id}-trigger`,
|
|
3459
3503
|
className: "ow-disclosure__panel",
|
|
3460
|
-
children: /* @__PURE__ */ (0,
|
|
3504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ow-disclosure__clip", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ow-disclosure__content", children }) })
|
|
3461
3505
|
}
|
|
3462
3506
|
)
|
|
3463
3507
|
] });
|
|
@@ -3472,7 +3516,7 @@ function Disclosure({
|
|
|
3472
3516
|
...props
|
|
3473
3517
|
}) {
|
|
3474
3518
|
const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
|
|
3475
|
-
return /* @__PURE__ */ (0,
|
|
3519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3476
3520
|
DisclosureView,
|
|
3477
3521
|
{
|
|
3478
3522
|
...props,
|
|
@@ -3514,12 +3558,12 @@ function Accordion({
|
|
|
3514
3558
|
event.preventDefault();
|
|
3515
3559
|
triggers[(moves[event.key] + triggers.length) % triggers.length]?.focus();
|
|
3516
3560
|
}
|
|
3517
|
-
return /* @__PURE__ */ (0,
|
|
3561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AccordionContext.Provider, { value: { isOpen: (item) => openValues.includes(item), toggle, headingLevel }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("ow-accordion", `ow-accordion--${variant}`, className), onKeyDown: handleKeyDown, ...props, children }) });
|
|
3518
3562
|
}
|
|
3519
3563
|
function AccordionItem({ value, ...props }) {
|
|
3520
3564
|
const context = (0, import_react37.useContext)(AccordionContext);
|
|
3521
3565
|
if (!context) throw new Error("AccordionItem must be inside <Accordion>.");
|
|
3522
|
-
return /* @__PURE__ */ (0,
|
|
3566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3523
3567
|
DisclosureView,
|
|
3524
3568
|
{
|
|
3525
3569
|
...props,
|
|
@@ -3533,13 +3577,13 @@ function AccordionItem({ value, ...props }) {
|
|
|
3533
3577
|
|
|
3534
3578
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
3535
3579
|
var import_react38 = require("react");
|
|
3536
|
-
var
|
|
3580
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3537
3581
|
function Breadcrumbs({ items: items2, separator = "chevron", label = "Breadcrumb", className }) {
|
|
3538
|
-
return /* @__PURE__ */ (0,
|
|
3582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { "aria-label": label, className: cx("ow-breadcrumbs", className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "ow-breadcrumbs__list", children: items2.map((item, index) => {
|
|
3539
3583
|
const isLast = index === items2.length - 1;
|
|
3540
|
-
return /* @__PURE__ */ (0,
|
|
3541
|
-
isLast ? /* @__PURE__ */ (0,
|
|
3542
|
-
isLast ? null : /* @__PURE__ */ (0,
|
|
3584
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { className: "ow-breadcrumbs__item", children: [
|
|
3585
|
+
isLast ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ow-breadcrumbs__current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { className: "ow-breadcrumbs__link", href: item.href, onClick: item.onClick, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "ow-breadcrumbs__link", onClick: item.onClick, children: item.label }),
|
|
3586
|
+
isLast ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ow-breadcrumbs__separator", "aria-hidden": "true", children: separator === "slash" ? "/" : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 14 }) })
|
|
3543
3587
|
] }, index);
|
|
3544
3588
|
}) }) });
|
|
3545
3589
|
}
|
|
@@ -3547,7 +3591,7 @@ function linkClassName({ variant = "default" } = {}) {
|
|
|
3547
3591
|
return cx("ow-link", `ow-link--${variant}`);
|
|
3548
3592
|
}
|
|
3549
3593
|
var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default", external = false, className, children, target, rel, ...props }, ref) {
|
|
3550
|
-
return /* @__PURE__ */ (0,
|
|
3594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3551
3595
|
"a",
|
|
3552
3596
|
{
|
|
3553
3597
|
ref,
|
|
@@ -3557,9 +3601,9 @@ var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default",
|
|
|
3557
3601
|
...props,
|
|
3558
3602
|
children: [
|
|
3559
3603
|
children,
|
|
3560
|
-
external ? /* @__PURE__ */ (0,
|
|
3561
|
-
/* @__PURE__ */ (0,
|
|
3562
|
-
/* @__PURE__ */ (0,
|
|
3604
|
+
external ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3605
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowUpRightIcon, { size: 13, className: "ow-link__external" }),
|
|
3606
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
|
|
3563
3607
|
] }) : null
|
|
3564
3608
|
]
|
|
3565
3609
|
}
|
|
@@ -3567,7 +3611,7 @@ var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default",
|
|
|
3567
3611
|
});
|
|
3568
3612
|
|
|
3569
3613
|
// src/components/Pagination/Pagination.tsx
|
|
3570
|
-
var
|
|
3614
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3571
3615
|
function paginationItems(page, pageCount, siblingCount = 1, boundaryCount = 1) {
|
|
3572
3616
|
const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
|
|
3573
3617
|
const startPages = range(1, Math.min(boundaryCount, pageCount));
|
|
@@ -3600,8 +3644,8 @@ function Pagination({
|
|
|
3600
3644
|
}) {
|
|
3601
3645
|
const items2 = paginationItems(page, pageCount, siblingCount, boundaryCount);
|
|
3602
3646
|
const go = (next) => onPageChange(Math.min(Math.max(1, next), pageCount));
|
|
3603
|
-
return /* @__PURE__ */ (0,
|
|
3604
|
-
/* @__PURE__ */ (0,
|
|
3647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("nav", { "aria-label": label, className: cx("ow-pagination", `ow-pagination--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("ul", { className: "ow-pagination__list", children: [
|
|
3648
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3605
3649
|
"button",
|
|
3606
3650
|
{
|
|
3607
3651
|
type: "button",
|
|
@@ -3609,11 +3653,11 @@ function Pagination({
|
|
|
3609
3653
|
"aria-label": "Previous page",
|
|
3610
3654
|
disabled: page <= 1,
|
|
3611
3655
|
onClick: () => go(page - 1),
|
|
3612
|
-
children: /* @__PURE__ */ (0,
|
|
3656
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronLeftIcon, { size: 16 })
|
|
3613
3657
|
}
|
|
3614
3658
|
) }),
|
|
3615
3659
|
items2.map(
|
|
3616
|
-
(item) => typeof item === "number" ? /* @__PURE__ */ (0,
|
|
3660
|
+
(item) => typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3617
3661
|
"button",
|
|
3618
3662
|
{
|
|
3619
3663
|
type: "button",
|
|
@@ -3623,9 +3667,9 @@ function Pagination({
|
|
|
3623
3667
|
onClick: () => go(item),
|
|
3624
3668
|
children: item
|
|
3625
3669
|
}
|
|
3626
|
-
) }, item) : /* @__PURE__ */ (0,
|
|
3670
|
+
) }, item) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { className: "ow-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
|
|
3627
3671
|
),
|
|
3628
|
-
/* @__PURE__ */ (0,
|
|
3672
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3629
3673
|
"button",
|
|
3630
3674
|
{
|
|
3631
3675
|
type: "button",
|
|
@@ -3633,7 +3677,7 @@ function Pagination({
|
|
|
3633
3677
|
"aria-label": "Next page",
|
|
3634
3678
|
disabled: page >= pageCount,
|
|
3635
3679
|
onClick: () => go(page + 1),
|
|
3636
|
-
children: /* @__PURE__ */ (0,
|
|
3680
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronRightIcon, { size: 16 })
|
|
3637
3681
|
}
|
|
3638
3682
|
) })
|
|
3639
3683
|
] }) });
|
|
@@ -3641,43 +3685,43 @@ function Pagination({
|
|
|
3641
3685
|
|
|
3642
3686
|
// src/components/Steps/Steps.tsx
|
|
3643
3687
|
var import_react39 = require("react");
|
|
3644
|
-
var
|
|
3688
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3645
3689
|
function Steps({ items: items2, current = 0, orientation = "vertical", title, label = "Steps", className }) {
|
|
3646
3690
|
const statuses = items2.map((item, index) => item.status ?? (index < current ? "done" : index === current ? "current" : "upcoming"));
|
|
3647
3691
|
const doneCount = statuses.filter((status) => status === "done").length;
|
|
3648
3692
|
const headingId = (0, import_react39.useId)();
|
|
3649
|
-
const list = /* @__PURE__ */ (0,
|
|
3693
|
+
const list = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ol", { className: "ow-steps__list", children: items2.map((item, index) => {
|
|
3650
3694
|
const status = statuses[index];
|
|
3651
|
-
return /* @__PURE__ */ (0,
|
|
3695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
3652
3696
|
"li",
|
|
3653
3697
|
{
|
|
3654
3698
|
className: cx("ow-steps__item", `ow-steps__item--${status}`),
|
|
3655
3699
|
"aria-current": status === "current" ? "step" : void 0,
|
|
3656
3700
|
children: [
|
|
3657
|
-
/* @__PURE__ */ (0,
|
|
3658
|
-
/* @__PURE__ */ (0,
|
|
3659
|
-
/* @__PURE__ */ (0,
|
|
3660
|
-
status === "done" ? /* @__PURE__ */ (0,
|
|
3701
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__marker", children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckIcon, { size: 14, strokeWidth: 3 }) : index + 1 }),
|
|
3702
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__text", children: [
|
|
3703
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__title", children: [
|
|
3704
|
+
status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-visually-hidden", children: "Done: " }) : null,
|
|
3661
3705
|
item.title
|
|
3662
3706
|
] }),
|
|
3663
|
-
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0,
|
|
3707
|
+
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__description", children: item.description }) : null
|
|
3664
3708
|
] }),
|
|
3665
|
-
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ (0,
|
|
3709
|
+
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__action", children: item.action }) : null
|
|
3666
3710
|
]
|
|
3667
3711
|
},
|
|
3668
3712
|
index
|
|
3669
3713
|
);
|
|
3670
3714
|
}) });
|
|
3671
|
-
return /* @__PURE__ */ (0,
|
|
3715
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
3672
3716
|
"section",
|
|
3673
3717
|
{
|
|
3674
3718
|
className: cx("ow-steps", `ow-steps--${orientation}`, className),
|
|
3675
3719
|
"aria-labelledby": title && orientation === "vertical" ? headingId : void 0,
|
|
3676
3720
|
"aria-label": title && orientation === "vertical" ? void 0 : label,
|
|
3677
3721
|
children: [
|
|
3678
|
-
title && orientation === "vertical" ? /* @__PURE__ */ (0,
|
|
3679
|
-
/* @__PURE__ */ (0,
|
|
3680
|
-
/* @__PURE__ */ (0,
|
|
3722
|
+
title && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ow-steps__header", children: [
|
|
3723
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { id: headingId, className: "ow-steps__heading", children: title }),
|
|
3724
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__count", children: [
|
|
3681
3725
|
doneCount,
|
|
3682
3726
|
" of ",
|
|
3683
3727
|
items2.length,
|
|
@@ -3692,25 +3736,25 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3692
3736
|
|
|
3693
3737
|
// src/components/NavList/NavList.tsx
|
|
3694
3738
|
var import_react40 = require("react");
|
|
3695
|
-
var
|
|
3739
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3696
3740
|
function NavList({ label, heading, orientation = "vertical", children, className }) {
|
|
3697
|
-
return /* @__PURE__ */ (0,
|
|
3698
|
-
heading && orientation === "vertical" ? /* @__PURE__ */ (0,
|
|
3741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
|
|
3742
|
+
heading && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__heading", children: heading }) : null,
|
|
3699
3743
|
children
|
|
3700
3744
|
] });
|
|
3701
3745
|
}
|
|
3702
3746
|
var NavItem = (0, import_react40.forwardRef)(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
|
|
3703
|
-
const content = /* @__PURE__ */ (0,
|
|
3704
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3705
|
-
/* @__PURE__ */ (0,
|
|
3706
|
-
end !== void 0 ? /* @__PURE__ */ (0,
|
|
3747
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
3748
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__icon", children: icon2 }) : null,
|
|
3749
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__label", children }),
|
|
3750
|
+
end !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__end", children: end }) : null
|
|
3707
3751
|
] });
|
|
3708
3752
|
const shared = {
|
|
3709
3753
|
"aria-current": active ? "page" : void 0,
|
|
3710
3754
|
className: cx("ow-nav__item", active && "ow-nav__item--active", className)
|
|
3711
3755
|
};
|
|
3712
3756
|
if (href !== void 0) {
|
|
3713
|
-
return /* @__PURE__ */ (0,
|
|
3757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3714
3758
|
"a",
|
|
3715
3759
|
{
|
|
3716
3760
|
ref,
|
|
@@ -3721,12 +3765,12 @@ var NavItem = (0, import_react40.forwardRef)(function NavItem2({ icon: icon2, ac
|
|
|
3721
3765
|
}
|
|
3722
3766
|
);
|
|
3723
3767
|
}
|
|
3724
|
-
return /* @__PURE__ */ (0,
|
|
3768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { ref, type, ...shared, ...buttonProps, children: content });
|
|
3725
3769
|
});
|
|
3726
3770
|
|
|
3727
3771
|
// src/components/Table/Table.tsx
|
|
3728
3772
|
var import_react41 = require("react");
|
|
3729
|
-
var
|
|
3773
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3730
3774
|
function compare(a, b) {
|
|
3731
3775
|
if (typeof a === "number" && typeof b === "number") return a - b;
|
|
3732
3776
|
return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
|
|
@@ -3777,16 +3821,16 @@ function Table({
|
|
|
3777
3821
|
);
|
|
3778
3822
|
}
|
|
3779
3823
|
const selectable = selectionMode === "multiple";
|
|
3780
|
-
return /* @__PURE__ */ (0,
|
|
3824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3781
3825
|
"div",
|
|
3782
3826
|
{
|
|
3783
3827
|
className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
|
|
3784
3828
|
style: maxHeight ? { maxHeight } : void 0,
|
|
3785
3829
|
tabIndex: maxHeight ? 0 : void 0,
|
|
3786
|
-
children: /* @__PURE__ */ (0,
|
|
3787
|
-
caption ? /* @__PURE__ */ (0,
|
|
3788
|
-
/* @__PURE__ */ (0,
|
|
3789
|
-
selectable ? /* @__PURE__ */ (0,
|
|
3830
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [
|
|
3831
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
|
|
3832
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
|
|
3833
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3790
3834
|
Checkbox,
|
|
3791
3835
|
{
|
|
3792
3836
|
size: "sm",
|
|
@@ -3800,27 +3844,27 @@ function Table({
|
|
|
3800
3844
|
) }) : null,
|
|
3801
3845
|
columns.map((column) => {
|
|
3802
3846
|
const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
|
|
3803
|
-
return /* @__PURE__ */ (0,
|
|
3847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3804
3848
|
"th",
|
|
3805
3849
|
{
|
|
3806
3850
|
scope: "col",
|
|
3807
3851
|
"aria-sort": direction ?? (column.sortable ? "none" : void 0),
|
|
3808
3852
|
className: cx(`ow-table__cell--${column.align ?? "start"}`),
|
|
3809
3853
|
style: column.width !== void 0 ? { width: column.width } : void 0,
|
|
3810
|
-
children: column.sortable ? /* @__PURE__ */ (0,
|
|
3854
|
+
children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
|
|
3811
3855
|
column.header,
|
|
3812
|
-
/* @__PURE__ */ (0,
|
|
3856
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronsUpDownIcon, { size: 12 }) })
|
|
3813
3857
|
] }) : column.header
|
|
3814
3858
|
},
|
|
3815
3859
|
column.key
|
|
3816
3860
|
);
|
|
3817
3861
|
})
|
|
3818
3862
|
] }) }),
|
|
3819
|
-
/* @__PURE__ */ (0,
|
|
3863
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row, index) => {
|
|
3820
3864
|
const key = keyOf(row);
|
|
3821
3865
|
const isSelected = selected.includes(key);
|
|
3822
|
-
return /* @__PURE__ */ (0,
|
|
3823
|
-
selectable ? /* @__PURE__ */ (0,
|
|
3866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
|
|
3867
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "ow-table__select", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3824
3868
|
Checkbox,
|
|
3825
3869
|
{
|
|
3826
3870
|
size: "sm",
|
|
@@ -3831,7 +3875,7 @@ function Table({
|
|
|
3831
3875
|
)
|
|
3832
3876
|
}
|
|
3833
3877
|
) }) : null,
|
|
3834
|
-
columns.map((column) => /* @__PURE__ */ (0,
|
|
3878
|
+
columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
|
|
3835
3879
|
] }, key);
|
|
3836
3880
|
}) })
|
|
3837
3881
|
] })
|
|
@@ -3840,7 +3884,7 @@ function Table({
|
|
|
3840
3884
|
}
|
|
3841
3885
|
|
|
3842
3886
|
// src/components/Stat/Stat.tsx
|
|
3843
|
-
var
|
|
3887
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3844
3888
|
function Sparkline({ values }) {
|
|
3845
3889
|
const max = Math.max(...values);
|
|
3846
3890
|
const min = Math.min(...values);
|
|
@@ -3852,37 +3896,37 @@ function Sparkline({ values }) {
|
|
|
3852
3896
|
});
|
|
3853
3897
|
const line = points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(2)} ${y.toFixed(2)}`).join(" ");
|
|
3854
3898
|
const [lastX, lastY] = points[points.length - 1];
|
|
3855
|
-
return /* @__PURE__ */ (0,
|
|
3856
|
-
/* @__PURE__ */ (0,
|
|
3857
|
-
/* @__PURE__ */ (0,
|
|
3858
|
-
/* @__PURE__ */ (0,
|
|
3899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
|
|
3900
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
|
|
3901
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
|
|
3902
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
|
|
3859
3903
|
] }),
|
|
3860
|
-
/* @__PURE__ */ (0,
|
|
3904
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
|
|
3861
3905
|
] });
|
|
3862
3906
|
}
|
|
3863
3907
|
function Stat({ label, value, icon: icon2, change, changeTone, description, trend, className }) {
|
|
3864
3908
|
const tone = changeTone ?? (change?.startsWith("+") ? "positive" : /^[-−]/.test(change ?? "") ? "negative" : "neutral");
|
|
3865
3909
|
const rising = change ? !/^[-−]/.test(change) : false;
|
|
3866
|
-
return /* @__PURE__ */ (0,
|
|
3867
|
-
/* @__PURE__ */ (0,
|
|
3868
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3869
|
-
/* @__PURE__ */ (0,
|
|
3910
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx("ow-stat", className), children: [
|
|
3911
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__label", children: [
|
|
3912
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__icon", children: icon2 }) : null,
|
|
3913
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: label })
|
|
3870
3914
|
] }),
|
|
3871
|
-
/* @__PURE__ */ (0,
|
|
3872
|
-
/* @__PURE__ */ (0,
|
|
3873
|
-
change ? /* @__PURE__ */ (0,
|
|
3874
|
-
tone === "neutral" ? null : rising ? /* @__PURE__ */ (0,
|
|
3915
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__row", children: [
|
|
3916
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__value", children: value }),
|
|
3917
|
+
change ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
|
|
3918
|
+
tone === "neutral" ? null : rising ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArrowDownIcon, { size: 12 }),
|
|
3875
3919
|
change
|
|
3876
3920
|
] }) : null
|
|
3877
3921
|
] }),
|
|
3878
|
-
description ? /* @__PURE__ */ (0,
|
|
3879
|
-
trend && trend.length > 1 ? /* @__PURE__ */ (0,
|
|
3922
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "ow-stat__description", children: description }) : null,
|
|
3923
|
+
trend && trend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Sparkline, { values: trend }) : null
|
|
3880
3924
|
] });
|
|
3881
3925
|
}
|
|
3882
3926
|
|
|
3883
3927
|
// src/components/FileTree/FileTree.tsx
|
|
3884
3928
|
var import_react42 = require("react");
|
|
3885
|
-
var
|
|
3929
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3886
3930
|
function flatten(nodes, expanded, parent, level = 1) {
|
|
3887
3931
|
return nodes.flatMap((node) => {
|
|
3888
3932
|
const path = parent ? `${parent}/${node.name}` : node.name;
|
|
@@ -3960,8 +4004,8 @@ function FileTree({
|
|
|
3960
4004
|
const row = rows.find((entry) => entry.path === path);
|
|
3961
4005
|
if (!row) return null;
|
|
3962
4006
|
const isOpen = row.isFolder && expanded.has(path);
|
|
3963
|
-
const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0,
|
|
3964
|
-
return /* @__PURE__ */ (0,
|
|
4007
|
+
const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FolderIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FileIcon, { size: 16 }));
|
|
4008
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3965
4009
|
"li",
|
|
3966
4010
|
{
|
|
3967
4011
|
ref: (element) => {
|
|
@@ -3979,7 +4023,7 @@ function FileTree({
|
|
|
3979
4023
|
if (event.target === event.currentTarget) setFocusPath(path);
|
|
3980
4024
|
},
|
|
3981
4025
|
children: [
|
|
3982
|
-
/* @__PURE__ */ (0,
|
|
4026
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3983
4027
|
"div",
|
|
3984
4028
|
{
|
|
3985
4029
|
className: cx("ow-tree__row", !row.isFolder && current === path && "ow-tree__row--selected"),
|
|
@@ -3989,51 +4033,51 @@ function FileTree({
|
|
|
3989
4033
|
activate(row);
|
|
3990
4034
|
},
|
|
3991
4035
|
children: [
|
|
3992
|
-
row.isFolder ? /* @__PURE__ */ (0,
|
|
3993
|
-
/* @__PURE__ */ (0,
|
|
3994
|
-
/* @__PURE__ */ (0,
|
|
3995
|
-
node.meta ? /* @__PURE__ */ (0,
|
|
4036
|
+
row.isFolder ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__spacer" }),
|
|
4037
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
|
|
4038
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__name", children: node.name }),
|
|
4039
|
+
node.meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__meta", children: node.meta }) : null
|
|
3996
4040
|
]
|
|
3997
4041
|
}
|
|
3998
4042
|
),
|
|
3999
|
-
isOpen && node.children.length > 0 ? /* @__PURE__ */ (0,
|
|
4043
|
+
isOpen && node.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
|
|
4000
4044
|
]
|
|
4001
4045
|
},
|
|
4002
4046
|
path
|
|
4003
4047
|
);
|
|
4004
4048
|
});
|
|
4005
4049
|
}
|
|
4006
|
-
return /* @__PURE__ */ (0,
|
|
4050
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
|
|
4007
4051
|
}
|
|
4008
4052
|
|
|
4009
4053
|
// src/components/EmptyState/EmptyState.tsx
|
|
4010
|
-
var
|
|
4054
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
4011
4055
|
function EmptyState({ title, description, icon: icon2, actions, bordered = false, className }) {
|
|
4012
|
-
return /* @__PURE__ */ (0,
|
|
4013
|
-
/* @__PURE__ */ (0,
|
|
4014
|
-
/* @__PURE__ */ (0,
|
|
4015
|
-
/* @__PURE__ */ (0,
|
|
4016
|
-
description ? /* @__PURE__ */ (0,
|
|
4056
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
|
|
4057
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InboxIcon, { size: 20 }) }),
|
|
4058
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "ow-empty__text", children: [
|
|
4059
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "ow-empty__title", children: title }),
|
|
4060
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "ow-empty__description", children: description }) : null
|
|
4017
4061
|
] }),
|
|
4018
|
-
actions ? /* @__PURE__ */ (0,
|
|
4062
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ow-empty__actions", children: actions }) : null
|
|
4019
4063
|
] });
|
|
4020
4064
|
}
|
|
4021
4065
|
|
|
4022
4066
|
// src/components/Tag/Tag.tsx
|
|
4023
|
-
var
|
|
4067
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
4024
4068
|
function Tag({ onRemove, variant = "neutral", size = "md", icon: icon2, removeLabel, className, children, ...props }) {
|
|
4025
4069
|
const name = removeLabel ?? (typeof children === "string" ? children : "tag");
|
|
4026
|
-
return /* @__PURE__ */ (0,
|
|
4027
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
4028
|
-
/* @__PURE__ */ (0,
|
|
4029
|
-
onRemove ? /* @__PURE__ */ (0,
|
|
4070
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size}`, onRemove && "ow-tag--removable", className), ...props, children: [
|
|
4071
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-tag__icon", children: icon2 }) : null,
|
|
4072
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-tag__label", children }),
|
|
4073
|
+
onRemove ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(XIcon, { size: 12 }) }) : null
|
|
4030
4074
|
] });
|
|
4031
4075
|
}
|
|
4032
4076
|
function TagGroup({ label, className, children, ...props }) {
|
|
4033
|
-
return /* @__PURE__ */ (0,
|
|
4077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
|
|
4034
4078
|
}
|
|
4035
4079
|
function ColorSwatch({ color, name, value, size = "md", shape = "square", className }) {
|
|
4036
|
-
const swatch = /* @__PURE__ */ (0,
|
|
4080
|
+
const swatch = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4037
4081
|
"span",
|
|
4038
4082
|
{
|
|
4039
4083
|
className: cx("ow-swatch", `ow-swatch--${size}`, shape === "circle" && "ow-swatch--circle"),
|
|
@@ -4041,19 +4085,19 @@ function ColorSwatch({ color, name, value, size = "md", shape = "square", classN
|
|
|
4041
4085
|
...name && !value ? { role: "img", "aria-label": name } : { "aria-hidden": true }
|
|
4042
4086
|
}
|
|
4043
4087
|
);
|
|
4044
|
-
if (!name && !value) return /* @__PURE__ */ (0,
|
|
4045
|
-
return /* @__PURE__ */ (0,
|
|
4088
|
+
if (!name && !value) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className, children: swatch });
|
|
4089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: cx("ow-swatch-label", className), children: [
|
|
4046
4090
|
swatch,
|
|
4047
|
-
/* @__PURE__ */ (0,
|
|
4048
|
-
name ? /* @__PURE__ */ (0,
|
|
4049
|
-
/* @__PURE__ */ (0,
|
|
4091
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "ow-swatch-label__text", children: [
|
|
4092
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-swatch-label__name", children: name }) : null,
|
|
4093
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-swatch-label__value", children: value })
|
|
4050
4094
|
] })
|
|
4051
4095
|
] });
|
|
4052
4096
|
}
|
|
4053
4097
|
|
|
4054
4098
|
// src/components/Avatar/Avatar.tsx
|
|
4055
4099
|
var import_react43 = require("react");
|
|
4056
|
-
var
|
|
4100
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
4057
4101
|
var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
|
|
4058
4102
|
function avatarSize(size) {
|
|
4059
4103
|
if (typeof size === "number") {
|
|
@@ -4066,33 +4110,33 @@ function Avatar({ name, src, size = "md", label, className }) {
|
|
|
4066
4110
|
const [failedImage, setFailedImage] = (0, import_react43.useState)();
|
|
4067
4111
|
const showImage = src && src !== failedImage;
|
|
4068
4112
|
const sizing = avatarSize(size);
|
|
4069
|
-
return /* @__PURE__ */ (0,
|
|
4113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4070
4114
|
"span",
|
|
4071
4115
|
{
|
|
4072
4116
|
className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
|
|
4073
4117
|
style: sizing.style,
|
|
4074
4118
|
...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
|
|
4075
|
-
children: showImage ? /* @__PURE__ */ (0,
|
|
4119
|
+
children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
|
|
4076
4120
|
}
|
|
4077
4121
|
);
|
|
4078
4122
|
}
|
|
4079
4123
|
|
|
4080
4124
|
// src/components/Avatar/AvatarGroup.tsx
|
|
4081
4125
|
var import_react44 = require("react");
|
|
4082
|
-
var
|
|
4126
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
4083
4127
|
function AvatarGroup({ children, max = 4, size = "md", label, className }) {
|
|
4084
4128
|
const avatars = import_react44.Children.toArray(children).filter(import_react44.isValidElement);
|
|
4085
4129
|
const sizing = avatarSize(size);
|
|
4086
4130
|
const shown = avatars.slice(0, max);
|
|
4087
4131
|
const hidden = avatars.length - shown.length;
|
|
4088
|
-
return /* @__PURE__ */ (0,
|
|
4132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
|
|
4089
4133
|
shown.map((avatar) => (0, import_react44.cloneElement)(avatar, { size })),
|
|
4090
|
-
hidden > 0 ? /* @__PURE__ */ (0,
|
|
4091
|
-
/* @__PURE__ */ (0,
|
|
4134
|
+
hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
|
|
4135
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { "aria-hidden": "true", children: [
|
|
4092
4136
|
"+",
|
|
4093
4137
|
hidden
|
|
4094
4138
|
] }),
|
|
4095
|
-
/* @__PURE__ */ (0,
|
|
4139
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "ow-visually-hidden", children: [
|
|
4096
4140
|
"and ",
|
|
4097
4141
|
hidden,
|
|
4098
4142
|
" more"
|
|
@@ -4105,42 +4149,42 @@ function userSize(size) {
|
|
|
4105
4149
|
return size >= 48 ? "ow-user--xl" : size >= 36 ? "ow-user--lg" : size >= 28 ? "ow-user--md" : "ow-user--sm";
|
|
4106
4150
|
}
|
|
4107
4151
|
function User({ name, description, src, size = "md", className }) {
|
|
4108
|
-
return /* @__PURE__ */ (0,
|
|
4109
|
-
/* @__PURE__ */ (0,
|
|
4110
|
-
/* @__PURE__ */ (0,
|
|
4111
|
-
/* @__PURE__ */ (0,
|
|
4112
|
-
description ? /* @__PURE__ */ (0,
|
|
4152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cx("ow-user", userSize(size), className), children: [
|
|
4153
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Avatar, { name, src, size }),
|
|
4154
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "ow-user__text", children: [
|
|
4155
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ow-user__name", children: name }),
|
|
4156
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ow-user__description", children: description }) : null
|
|
4113
4157
|
] })
|
|
4114
4158
|
] });
|
|
4115
4159
|
}
|
|
4116
4160
|
|
|
4117
4161
|
// src/components/Kbd/Kbd.tsx
|
|
4118
|
-
var
|
|
4162
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
4119
4163
|
function Kbd({ className, ...props }) {
|
|
4120
|
-
return /* @__PURE__ */ (0,
|
|
4164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("kbd", { className: cx("ow-kbd", className), ...props });
|
|
4121
4165
|
}
|
|
4122
4166
|
function Code({ className, ...props }) {
|
|
4123
|
-
return /* @__PURE__ */ (0,
|
|
4167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("code", { className: cx("ow-code", className), ...props });
|
|
4124
4168
|
}
|
|
4125
4169
|
|
|
4126
4170
|
// src/components/Card/Card.tsx
|
|
4127
|
-
var
|
|
4171
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
4128
4172
|
function Card({ className, padding = "md", ...props }) {
|
|
4129
|
-
return /* @__PURE__ */ (0,
|
|
4173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
|
|
4130
4174
|
}
|
|
4131
4175
|
function SettingsRow({ children, description, label, className }) {
|
|
4132
|
-
return /* @__PURE__ */ (0,
|
|
4133
|
-
/* @__PURE__ */ (0,
|
|
4134
|
-
/* @__PURE__ */ (0,
|
|
4135
|
-
description ? /* @__PURE__ */ (0,
|
|
4176
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cx("ow-settings-row", className), children: [
|
|
4177
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "ow-settings-row__text", children: [
|
|
4178
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ow-settings-row__label", children: label }),
|
|
4179
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ow-settings-row__description", children: description }) : null
|
|
4136
4180
|
] }),
|
|
4137
|
-
/* @__PURE__ */ (0,
|
|
4181
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ow-settings-row__control", children })
|
|
4138
4182
|
] });
|
|
4139
4183
|
}
|
|
4140
4184
|
|
|
4141
4185
|
// src/components/Layout/Layout.tsx
|
|
4142
4186
|
var import_react45 = require("react");
|
|
4143
|
-
var
|
|
4187
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
4144
4188
|
var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
|
|
4145
4189
|
var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
|
|
4146
4190
|
function Stack({
|
|
@@ -4156,7 +4200,7 @@ function Stack({
|
|
|
4156
4200
|
...props
|
|
4157
4201
|
}) {
|
|
4158
4202
|
const Element = as;
|
|
4159
|
-
return /* @__PURE__ */ (0,
|
|
4203
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4160
4204
|
Element,
|
|
4161
4205
|
{
|
|
4162
4206
|
className: cx("ow-stack", className),
|
|
@@ -4176,9 +4220,9 @@ function Stack({
|
|
|
4176
4220
|
function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
|
|
4177
4221
|
const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
|
|
4178
4222
|
if (label && orientation === "horizontal") {
|
|
4179
|
-
return /* @__PURE__ */ (0,
|
|
4223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-separator-label__text", children: label }) });
|
|
4180
4224
|
}
|
|
4181
|
-
return /* @__PURE__ */ (0,
|
|
4225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4182
4226
|
"div",
|
|
4183
4227
|
{
|
|
4184
4228
|
role: "separator",
|
|
@@ -4218,7 +4262,7 @@ function ScrollShadow({
|
|
|
4218
4262
|
observer?.disconnect();
|
|
4219
4263
|
};
|
|
4220
4264
|
}, [orientation]);
|
|
4221
|
-
return /* @__PURE__ */ (0,
|
|
4265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4222
4266
|
"div",
|
|
4223
4267
|
{
|
|
4224
4268
|
ref,
|
|
@@ -4239,14 +4283,14 @@ function ScrollShadow({
|
|
|
4239
4283
|
);
|
|
4240
4284
|
}
|
|
4241
4285
|
function VisuallyHidden({ className, ...props }) {
|
|
4242
|
-
return /* @__PURE__ */ (0,
|
|
4286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
|
|
4243
4287
|
}
|
|
4244
4288
|
|
|
4245
4289
|
// src/components/Marketing/Marketing.tsx
|
|
4246
4290
|
var import_react46 = require("react");
|
|
4247
|
-
var
|
|
4291
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
4248
4292
|
function Chip({ className, ...props }) {
|
|
4249
|
-
return /* @__PURE__ */ (0,
|
|
4293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: cx("ow-chip", className), ...props });
|
|
4250
4294
|
}
|
|
4251
4295
|
function SectionHeading({
|
|
4252
4296
|
eyebrow,
|
|
@@ -4256,17 +4300,17 @@ function SectionHeading({
|
|
|
4256
4300
|
as: Heading = "h2",
|
|
4257
4301
|
className
|
|
4258
4302
|
}) {
|
|
4259
|
-
return /* @__PURE__ */ (0,
|
|
4260
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
4261
|
-
/* @__PURE__ */ (0,
|
|
4262
|
-
intro ? /* @__PURE__ */ (0,
|
|
4303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
|
|
4304
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Chip, { children: eyebrow }) : null,
|
|
4305
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
|
|
4306
|
+
intro ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
|
|
4263
4307
|
] });
|
|
4264
4308
|
}
|
|
4265
4309
|
function SiteHeader({ brand, nav, actions, className }) {
|
|
4266
|
-
return /* @__PURE__ */ (0,
|
|
4267
|
-
/* @__PURE__ */ (0,
|
|
4268
|
-
nav ? /* @__PURE__ */ (0,
|
|
4269
|
-
actions ? /* @__PURE__ */ (0,
|
|
4310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("header", { className: cx("ow-site-header", className), children: [
|
|
4311
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-site-header__brand", children: brand }),
|
|
4312
|
+
nav ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
|
|
4313
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
|
|
4270
4314
|
] });
|
|
4271
4315
|
}
|
|
4272
4316
|
function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
|
|
@@ -4279,7 +4323,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4279
4323
|
element.style.setProperty("--ow-pointer-x", `${event.clientX - rect.left}px`);
|
|
4280
4324
|
element.style.setProperty("--ow-pointer-y", `${event.clientY - rect.top}px`);
|
|
4281
4325
|
}
|
|
4282
|
-
return /* @__PURE__ */ (0,
|
|
4326
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
4283
4327
|
"div",
|
|
4284
4328
|
{
|
|
4285
4329
|
ref,
|
|
@@ -4287,9 +4331,9 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4287
4331
|
onPointerMove: track,
|
|
4288
4332
|
...props,
|
|
4289
4333
|
children: [
|
|
4290
|
-
/* @__PURE__ */ (0,
|
|
4291
|
-
interactive ? /* @__PURE__ */ (0,
|
|
4292
|
-
/* @__PURE__ */ (0,
|
|
4334
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
|
|
4335
|
+
interactive ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
|
|
4336
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-dot-grid__content", children })
|
|
4293
4337
|
]
|
|
4294
4338
|
}
|
|
4295
4339
|
);
|
|
@@ -4298,7 +4342,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4298
4342
|
// src/components/ColorPicker/ColorPicker.tsx
|
|
4299
4343
|
var import_react47 = require("react");
|
|
4300
4344
|
var import_react_colorful = require("react-colorful");
|
|
4301
|
-
var
|
|
4345
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
4302
4346
|
var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
|
|
4303
4347
|
var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
|
|
4304
4348
|
var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
|
|
@@ -4333,13 +4377,13 @@ function ColorPicker({
|
|
|
4333
4377
|
} catch {
|
|
4334
4378
|
}
|
|
4335
4379
|
}
|
|
4336
|
-
return /* @__PURE__ */ (0,
|
|
4337
|
-
/* @__PURE__ */ (0,
|
|
4338
|
-
showInput || eyeDropper && canPick ? /* @__PURE__ */ (0,
|
|
4339
|
-
eyeDropper && canPick ? /* @__PURE__ */ (0,
|
|
4340
|
-
showInput ? /* @__PURE__ */ (0,
|
|
4341
|
-
/* @__PURE__ */ (0,
|
|
4342
|
-
/* @__PURE__ */ (0,
|
|
4380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
|
|
4381
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Picker, { color, onChange: change }),
|
|
4382
|
+
showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-color-picker__row", children: [
|
|
4383
|
+
eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PipetteIcon, { size: 15 }) }) : null,
|
|
4384
|
+
showInput ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
|
|
4385
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
|
|
4386
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4343
4387
|
import_react_colorful.HexColorInput,
|
|
4344
4388
|
{
|
|
4345
4389
|
className: "ow-input-group__input",
|
|
@@ -4351,11 +4395,11 @@ function ColorPicker({
|
|
|
4351
4395
|
}
|
|
4352
4396
|
)
|
|
4353
4397
|
] }) : null,
|
|
4354
|
-
/* @__PURE__ */ (0,
|
|
4398
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
|
|
4355
4399
|
] }) : null,
|
|
4356
|
-
swatches?.length ? /* @__PURE__ */ (0,
|
|
4400
|
+
swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
|
|
4357
4401
|
const swatchValue = swatchColor(swatch);
|
|
4358
|
-
return /* @__PURE__ */ (0,
|
|
4402
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4359
4403
|
"button",
|
|
4360
4404
|
{
|
|
4361
4405
|
type: "button",
|
|
@@ -4407,8 +4451,8 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
|
|
|
4407
4451
|
const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
|
|
4408
4452
|
return () => cancelAnimationFrame(frame);
|
|
4409
4453
|
}, [isOpen]);
|
|
4410
|
-
return /* @__PURE__ */ (0,
|
|
4411
|
-
/* @__PURE__ */ (0,
|
|
4454
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
4455
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
4412
4456
|
"button",
|
|
4413
4457
|
{
|
|
4414
4458
|
ref: (element) => {
|
|
@@ -4440,13 +4484,13 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
|
|
|
4440
4484
|
}
|
|
4441
4485
|
},
|
|
4442
4486
|
children: [
|
|
4443
|
-
/* @__PURE__ */ (0,
|
|
4444
|
-
/* @__PURE__ */ (0,
|
|
4445
|
-
/* @__PURE__ */ (0,
|
|
4487
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
|
|
4488
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
|
|
4489
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
4446
4490
|
]
|
|
4447
4491
|
}
|
|
4448
4492
|
),
|
|
4449
|
-
mounted ? /* @__PURE__ */ (0,
|
|
4493
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4450
4494
|
"div",
|
|
4451
4495
|
{
|
|
4452
4496
|
ref: panelRef,
|
|
@@ -4460,7 +4504,7 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
|
|
|
4460
4504
|
onKeyDown: (event) => {
|
|
4461
4505
|
if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
|
|
4462
4506
|
},
|
|
4463
|
-
children: /* @__PURE__ */ (0,
|
|
4507
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
|
|
4464
4508
|
}
|
|
4465
4509
|
) : null
|
|
4466
4510
|
] });
|