@openwarelabs/ui 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -6
- package/dist/components/Text/Text.d.cts +26 -0
- package/dist/components/Text/Text.d.ts +26 -0
- package/dist/components.css +117 -15
- package/dist/index.cjs +577 -532
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +437 -392
- package/dist/index.js.map +4 -4
- package/dist/openware-ui.iife.js +6 -6
- package/dist/styles.css +118 -16
- package/dist/tokens.css +1 -1
- package/dist/tokens.json +3 -3
- package/package.json +1 -1
package/dist/index.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`;
|
|
@@ -715,22 +759,23 @@ function Field({ label, children, hint, error, className }) {
|
|
|
715
759
|
const child = (0, import_react8.isValidElement)(children) ? children : null;
|
|
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
|
-
const
|
|
719
|
-
|
|
720
|
-
|
|
762
|
+
const invalid = child?.props.isInvalid ?? (error ? true : void 0);
|
|
763
|
+
const invalidProp = child && typeof child.type !== "string" ? invalid === void 0 ? {} : { isInvalid: invalid } : { "aria-invalid": error ? true : void 0 };
|
|
764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("ow-field", className), children: [
|
|
765
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ow-field__label", htmlFor: controlId, children: label }),
|
|
721
766
|
child ? (0, import_react8.cloneElement)(child, { id: controlId, "aria-describedby": describedBy, ...invalidProp }) : children,
|
|
722
|
-
hint ? /* @__PURE__ */ (0,
|
|
723
|
-
error ? /* @__PURE__ */ (0,
|
|
767
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: hintId, className: "ow-field__hint", children: hint }) : null,
|
|
768
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: errorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
724
769
|
] });
|
|
725
770
|
}
|
|
726
771
|
|
|
727
772
|
// src/components/Input/Input.tsx
|
|
728
773
|
var import_react9 = require("react");
|
|
729
|
-
var
|
|
774
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
730
775
|
var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid = false, size = "md", startContent, endContent, ...inputProps }, ref) {
|
|
731
776
|
const invalid = isInvalid || void 0;
|
|
732
777
|
if (startContent === void 0 && endContent === void 0) {
|
|
733
|
-
return /* @__PURE__ */ (0,
|
|
778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
734
779
|
"input",
|
|
735
780
|
{
|
|
736
781
|
ref,
|
|
@@ -740,7 +785,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
|
|
|
740
785
|
}
|
|
741
786
|
);
|
|
742
787
|
}
|
|
743
|
-
return /* @__PURE__ */ (0,
|
|
788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
744
789
|
"div",
|
|
745
790
|
{
|
|
746
791
|
className: cx(
|
|
@@ -751,9 +796,9 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
|
|
|
751
796
|
className
|
|
752
797
|
),
|
|
753
798
|
children: [
|
|
754
|
-
startContent !== void 0 ? /* @__PURE__ */ (0,
|
|
755
|
-
/* @__PURE__ */ (0,
|
|
756
|
-
endContent !== void 0 ? /* @__PURE__ */ (0,
|
|
799
|
+
startContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-input-group__addon", children: startContent }) : null,
|
|
800
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { ref, className: "ow-input-group__input", "aria-invalid": invalid, ...inputProps }),
|
|
801
|
+
endContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-input-group__addon", children: endContent }) : null
|
|
757
802
|
]
|
|
758
803
|
}
|
|
759
804
|
);
|
|
@@ -761,7 +806,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
|
|
|
761
806
|
|
|
762
807
|
// src/components/SearchField/SearchField.tsx
|
|
763
808
|
var import_react10 = require("react");
|
|
764
|
-
var
|
|
809
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
765
810
|
function assignRef(ref, value) {
|
|
766
811
|
if (typeof ref === "function") ref(value);
|
|
767
812
|
else if (ref) ref.current = value;
|
|
@@ -791,7 +836,7 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
|
|
|
791
836
|
onSubmit?.(text);
|
|
792
837
|
}
|
|
793
838
|
}
|
|
794
|
-
return /* @__PURE__ */ (0,
|
|
839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
795
840
|
Input,
|
|
796
841
|
{
|
|
797
842
|
ref: (element) => {
|
|
@@ -805,8 +850,8 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
|
|
|
805
850
|
value: text,
|
|
806
851
|
onChange: (event) => setText(event.target.value),
|
|
807
852
|
onKeyDown: handleKeyDown,
|
|
808
|
-
startContent: /* @__PURE__ */ (0,
|
|
809
|
-
endContent: loading ? /* @__PURE__ */ (0,
|
|
853
|
+
startContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchIcon, { size: size === "sm" ? 14 : 16 }),
|
|
854
|
+
endContent: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { size: "sm", label: "Searching" }) : text ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
810
855
|
CloseButton,
|
|
811
856
|
{
|
|
812
857
|
size: "sm",
|
|
@@ -824,7 +869,7 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
|
|
|
824
869
|
|
|
825
870
|
// src/components/NumberField/NumberField.tsx
|
|
826
871
|
var import_react11 = require("react");
|
|
827
|
-
var
|
|
872
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
828
873
|
var decimals = (step) => (String(step).split(".")[1] ?? "").length;
|
|
829
874
|
var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
830
875
|
value,
|
|
@@ -888,7 +933,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
888
933
|
}
|
|
889
934
|
const atMin = min !== void 0 && number !== null && number <= min;
|
|
890
935
|
const atMax = max !== void 0 && number !== null && number >= max;
|
|
891
|
-
return /* @__PURE__ */ (0,
|
|
936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
892
937
|
"div",
|
|
893
938
|
{
|
|
894
939
|
className: cx(
|
|
@@ -899,7 +944,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
899
944
|
className
|
|
900
945
|
),
|
|
901
946
|
children: [
|
|
902
|
-
/* @__PURE__ */ (0,
|
|
947
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
903
948
|
"button",
|
|
904
949
|
{
|
|
905
950
|
type: "button",
|
|
@@ -908,10 +953,10 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
908
953
|
tabIndex: -1,
|
|
909
954
|
disabled: disabled || atMin,
|
|
910
955
|
onClick: () => stepBy(-1),
|
|
911
|
-
children: /* @__PURE__ */ (0,
|
|
956
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MinusIcon, { size: 14 })
|
|
912
957
|
}
|
|
913
958
|
),
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
959
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
915
960
|
"input",
|
|
916
961
|
{
|
|
917
962
|
ref,
|
|
@@ -940,7 +985,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
940
985
|
...inputProps
|
|
941
986
|
}
|
|
942
987
|
),
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
988
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
944
989
|
"button",
|
|
945
990
|
{
|
|
946
991
|
type: "button",
|
|
@@ -949,7 +994,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
949
994
|
tabIndex: -1,
|
|
950
995
|
disabled: disabled || atMax,
|
|
951
996
|
onClick: () => stepBy(1),
|
|
952
|
-
children: /* @__PURE__ */ (0,
|
|
997
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlusIcon, { size: 14 })
|
|
953
998
|
}
|
|
954
999
|
)
|
|
955
1000
|
]
|
|
@@ -959,7 +1004,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
|
|
|
959
1004
|
|
|
960
1005
|
// src/components/InputOTP/InputOTP.tsx
|
|
961
1006
|
var import_react12 = require("react");
|
|
962
|
-
var
|
|
1007
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
963
1008
|
function InputOTP({
|
|
964
1009
|
length = 6,
|
|
965
1010
|
value,
|
|
@@ -1021,10 +1066,10 @@ function InputOTP({
|
|
|
1021
1066
|
const pasted = clean(event.clipboardData.getData("text"));
|
|
1022
1067
|
if (pasted) update(chars.slice(0, index).join("") + pasted, index + pasted.length);
|
|
1023
1068
|
}
|
|
1024
|
-
return /* @__PURE__ */ (0,
|
|
1025
|
-
chars.map((char, index) => /* @__PURE__ */ (0,
|
|
1026
|
-
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ (0,
|
|
1027
|
-
/* @__PURE__ */ (0,
|
|
1069
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { role: "group", "aria-label": ariaLabel, className: cx("ow-otp", isInvalid && "ow-otp--invalid", className), children: [
|
|
1070
|
+
chars.map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ow-otp__slot", children: [
|
|
1071
|
+
groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-otp__separator", "aria-hidden": "true" }) : null,
|
|
1072
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1028
1073
|
"input",
|
|
1029
1074
|
{
|
|
1030
1075
|
ref: (element) => {
|
|
@@ -1052,7 +1097,7 @@ function InputOTP({
|
|
|
1052
1097
|
}
|
|
1053
1098
|
)
|
|
1054
1099
|
] }, index)),
|
|
1055
|
-
name ? /* @__PURE__ */ (0,
|
|
1100
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "hidden", name, value: code }) : null
|
|
1056
1101
|
] });
|
|
1057
1102
|
}
|
|
1058
1103
|
|
|
@@ -1087,7 +1132,7 @@ function resizeTextArea(textArea) {
|
|
|
1087
1132
|
}
|
|
1088
1133
|
|
|
1089
1134
|
// src/components/Textarea/Textarea.tsx
|
|
1090
|
-
var
|
|
1135
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1091
1136
|
var defaultAutoGrowMaxHeight = 180;
|
|
1092
1137
|
function assignRef2(ref, element) {
|
|
1093
1138
|
if (typeof ref === "function") ref(element);
|
|
@@ -1121,7 +1166,7 @@ var Textarea = (0, import_react13.forwardRef)(function Textarea2({
|
|
|
1121
1166
|
...style,
|
|
1122
1167
|
maxHeight: typeof autoGrowMaxHeight === "number" ? `${autoGrowMaxHeight}px` : autoGrowMaxHeight
|
|
1123
1168
|
} : style;
|
|
1124
|
-
return /* @__PURE__ */ (0,
|
|
1169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1125
1170
|
"textarea",
|
|
1126
1171
|
{
|
|
1127
1172
|
...textareaProps,
|
|
@@ -1286,7 +1331,7 @@ function usePresence(open, exitMs = exitDuration) {
|
|
|
1286
1331
|
}
|
|
1287
1332
|
|
|
1288
1333
|
// src/components/Select/Select.tsx
|
|
1289
|
-
var
|
|
1334
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1290
1335
|
var menuGap = 4;
|
|
1291
1336
|
var menuMaxHeight = 288;
|
|
1292
1337
|
var typeaheadResetMs = 600;
|
|
@@ -1457,7 +1502,7 @@ function Select({
|
|
|
1457
1502
|
const index = flatIndex;
|
|
1458
1503
|
const isSelected = index === selectedIndex;
|
|
1459
1504
|
const isActive = index === activeIndex;
|
|
1460
|
-
return /* @__PURE__ */ (0,
|
|
1505
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1461
1506
|
"div",
|
|
1462
1507
|
{
|
|
1463
1508
|
id: optionId(index),
|
|
@@ -1475,18 +1520,18 @@ function Select({
|
|
|
1475
1520
|
onMouseDown: (event) => event.preventDefault(),
|
|
1476
1521
|
onClick: () => choose(index),
|
|
1477
1522
|
children: [
|
|
1478
|
-
/* @__PURE__ */ (0,
|
|
1479
|
-
/* @__PURE__ */ (0,
|
|
1480
|
-
/* @__PURE__ */ (0,
|
|
1481
|
-
option.description ? /* @__PURE__ */ (0,
|
|
1523
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckIcon, { size: 14 }) : null }),
|
|
1524
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ow-option__text", children: [
|
|
1525
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cx("ow-option__label", valueClassName), children: option.label }),
|
|
1526
|
+
option.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__description", children: option.description }) : null
|
|
1482
1527
|
] })
|
|
1483
1528
|
]
|
|
1484
1529
|
},
|
|
1485
1530
|
`${option.value}-${index}`
|
|
1486
1531
|
);
|
|
1487
1532
|
};
|
|
1488
|
-
return /* @__PURE__ */ (0,
|
|
1489
|
-
/* @__PURE__ */ (0,
|
|
1533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1534
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1490
1535
|
"button",
|
|
1491
1536
|
{
|
|
1492
1537
|
ref: triggerRef,
|
|
@@ -1510,12 +1555,12 @@ function Select({
|
|
|
1510
1555
|
if (!menuRef.current?.contains(event.relatedTarget)) close();
|
|
1511
1556
|
},
|
|
1512
1557
|
children: [
|
|
1513
|
-
/* @__PURE__ */ (0,
|
|
1514
|
-
/* @__PURE__ */ (0,
|
|
1558
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cx("ow-select__value", !selected && "ow-select__value--placeholder", valueClassName), children: selected ? selected.label : placeholder }),
|
|
1559
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
1515
1560
|
]
|
|
1516
1561
|
}
|
|
1517
1562
|
),
|
|
1518
|
-
mounted ? /* @__PURE__ */ (0,
|
|
1563
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1519
1564
|
"div",
|
|
1520
1565
|
{
|
|
1521
1566
|
ref: menuRef,
|
|
@@ -1530,12 +1575,12 @@ function Select({
|
|
|
1530
1575
|
style: floatingStyle,
|
|
1531
1576
|
children: [
|
|
1532
1577
|
options.map(
|
|
1533
|
-
(item, groupIndex) => isGroup(item) ? /* @__PURE__ */ (0,
|
|
1534
|
-
/* @__PURE__ */ (0,
|
|
1578
|
+
(item, groupIndex) => isGroup(item) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { role: "group", "aria-label": item.label, className: "ow-listbox__group", children: [
|
|
1579
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__group-label", "aria-hidden": "true", children: item.label }),
|
|
1535
1580
|
item.options.map(renderOption)
|
|
1536
1581
|
] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
|
|
1537
1582
|
),
|
|
1538
|
-
flat.length === 0 ? /* @__PURE__ */ (0,
|
|
1583
|
+
flat.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__empty", children: "No options" }) : null
|
|
1539
1584
|
]
|
|
1540
1585
|
}
|
|
1541
1586
|
) : null
|
|
@@ -1544,7 +1589,7 @@ function Select({
|
|
|
1544
1589
|
|
|
1545
1590
|
// src/components/Combobox/Combobox.tsx
|
|
1546
1591
|
var import_react17 = require("react");
|
|
1547
|
-
var
|
|
1592
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1548
1593
|
function assignRef3(ref, value) {
|
|
1549
1594
|
if (typeof ref === "function") ref(value);
|
|
1550
1595
|
else if (ref) ref.current = value;
|
|
@@ -1657,8 +1702,8 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1657
1702
|
break;
|
|
1658
1703
|
}
|
|
1659
1704
|
}
|
|
1660
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
1706
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1662
1707
|
"div",
|
|
1663
1708
|
{
|
|
1664
1709
|
ref: fieldRef,
|
|
@@ -1671,7 +1716,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1671
1716
|
className
|
|
1672
1717
|
),
|
|
1673
1718
|
children: [
|
|
1674
|
-
/* @__PURE__ */ (0,
|
|
1719
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1675
1720
|
"input",
|
|
1676
1721
|
{
|
|
1677
1722
|
ref: (element) => {
|
|
@@ -1702,7 +1747,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1702
1747
|
...aria
|
|
1703
1748
|
}
|
|
1704
1749
|
),
|
|
1705
|
-
/* @__PURE__ */ (0,
|
|
1750
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1706
1751
|
"button",
|
|
1707
1752
|
{
|
|
1708
1753
|
type: "button",
|
|
@@ -1718,13 +1763,13 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1718
1763
|
inputRef.current?.focus();
|
|
1719
1764
|
}
|
|
1720
1765
|
},
|
|
1721
|
-
children: /* @__PURE__ */ (0,
|
|
1766
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: cx("ow-select__chevron", isOpen && "ow-combobox__chevron--open") })
|
|
1722
1767
|
}
|
|
1723
1768
|
)
|
|
1724
1769
|
]
|
|
1725
1770
|
}
|
|
1726
1771
|
),
|
|
1727
|
-
mounted ? /* @__PURE__ */ (0,
|
|
1772
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1728
1773
|
"div",
|
|
1729
1774
|
{
|
|
1730
1775
|
ref: listRef,
|
|
@@ -1739,7 +1784,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1739
1784
|
children: [
|
|
1740
1785
|
results.map((option, index) => {
|
|
1741
1786
|
const isSelected = option.value === selected;
|
|
1742
|
-
return /* @__PURE__ */ (0,
|
|
1787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1743
1788
|
"div",
|
|
1744
1789
|
{
|
|
1745
1790
|
id: optionId(index),
|
|
@@ -1755,17 +1800,17 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1755
1800
|
onMouseDown: (event) => event.preventDefault(),
|
|
1756
1801
|
onClick: () => choose(option),
|
|
1757
1802
|
children: [
|
|
1758
|
-
/* @__PURE__ */ (0,
|
|
1759
|
-
/* @__PURE__ */ (0,
|
|
1760
|
-
/* @__PURE__ */ (0,
|
|
1761
|
-
option.description ? /* @__PURE__ */ (0,
|
|
1803
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { size: 14 }) : null }),
|
|
1804
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ow-option__text", children: [
|
|
1805
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__label", children: option.label }),
|
|
1806
|
+
option.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__description", children: option.description }) : null
|
|
1762
1807
|
] })
|
|
1763
1808
|
]
|
|
1764
1809
|
},
|
|
1765
1810
|
option.value
|
|
1766
1811
|
);
|
|
1767
1812
|
}),
|
|
1768
|
-
results.length === 0 ? /* @__PURE__ */ (0,
|
|
1813
|
+
results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
|
|
1769
1814
|
]
|
|
1770
1815
|
}
|
|
1771
1816
|
) : null
|
|
@@ -1774,7 +1819,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
|
|
|
1774
1819
|
|
|
1775
1820
|
// src/components/Checkbox/Checkbox.tsx
|
|
1776
1821
|
var import_react18 = require("react");
|
|
1777
|
-
var
|
|
1822
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1778
1823
|
var CheckboxGroupContext = (0, import_react18.createContext)(null);
|
|
1779
1824
|
function assignRef4(ref, value) {
|
|
1780
1825
|
if (typeof ref === "function") ref(value);
|
|
@@ -1802,7 +1847,7 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
|
|
|
1802
1847
|
(0, import_react18.useEffect)(() => {
|
|
1803
1848
|
if (innerRef.current) innerRef.current.indeterminate = indeterminate;
|
|
1804
1849
|
}, [indeterminate]);
|
|
1805
|
-
const box = /* @__PURE__ */ (0,
|
|
1850
|
+
const box = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1806
1851
|
"span",
|
|
1807
1852
|
{
|
|
1808
1853
|
className: cx(
|
|
@@ -1812,7 +1857,7 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
|
|
|
1812
1857
|
children === void 0 && className
|
|
1813
1858
|
),
|
|
1814
1859
|
children: [
|
|
1815
|
-
/* @__PURE__ */ (0,
|
|
1860
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1816
1861
|
"input",
|
|
1817
1862
|
{
|
|
1818
1863
|
ref: (element) => {
|
|
@@ -1833,16 +1878,16 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
|
|
|
1833
1878
|
...inputProps
|
|
1834
1879
|
}
|
|
1835
1880
|
),
|
|
1836
|
-
indeterminate ? /* @__PURE__ */ (0,
|
|
1881
|
+
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
1882
|
]
|
|
1838
1883
|
}
|
|
1839
1884
|
);
|
|
1840
1885
|
if (children === void 0) return box;
|
|
1841
|
-
return /* @__PURE__ */ (0,
|
|
1886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: cx("ow-check-label", (disabled || inGroup && group.disabled) && "ow-check-label--disabled", className), children: [
|
|
1842
1887
|
box,
|
|
1843
|
-
/* @__PURE__ */ (0,
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
1845
|
-
description ? /* @__PURE__ */ (0,
|
|
1888
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-check-label__text", children: [
|
|
1889
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children }),
|
|
1890
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1846
1891
|
] })
|
|
1847
1892
|
] });
|
|
1848
1893
|
});
|
|
@@ -1862,7 +1907,7 @@ function CheckboxGroup({
|
|
|
1862
1907
|
const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
|
|
1863
1908
|
const generatedName = (0, import_react18.useId)();
|
|
1864
1909
|
const errorId = (0, import_react18.useId)();
|
|
1865
|
-
return /* @__PURE__ */ (0,
|
|
1910
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1866
1911
|
CheckboxGroupContext.Provider,
|
|
1867
1912
|
{
|
|
1868
1913
|
value: {
|
|
@@ -1873,7 +1918,7 @@ function CheckboxGroup({
|
|
|
1873
1918
|
setCurrent(checked ? [...current.filter((v) => v !== item), item] : current.filter((v) => v !== item));
|
|
1874
1919
|
}
|
|
1875
1920
|
},
|
|
1876
|
-
children: /* @__PURE__ */ (0,
|
|
1921
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1877
1922
|
Fieldset,
|
|
1878
1923
|
{
|
|
1879
1924
|
legend: label,
|
|
@@ -1891,17 +1936,17 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1891
1936
|
const generatedId = (0, import_react18.useId)();
|
|
1892
1937
|
const descriptionId = `${generatedId}-description`;
|
|
1893
1938
|
const resolvedErrorId = errorId ?? `${generatedId}-error`;
|
|
1894
|
-
return /* @__PURE__ */ (0,
|
|
1939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1895
1940
|
"fieldset",
|
|
1896
1941
|
{
|
|
1897
1942
|
className: cx("ow-fieldset", className),
|
|
1898
1943
|
disabled,
|
|
1899
1944
|
"aria-describedby": [description ? descriptionId : "", error ? resolvedErrorId : ""].filter(Boolean).join(" ") || void 0,
|
|
1900
1945
|
children: [
|
|
1901
|
-
/* @__PURE__ */ (0,
|
|
1902
|
-
description ? /* @__PURE__ */ (0,
|
|
1903
|
-
/* @__PURE__ */ (0,
|
|
1904
|
-
error ? /* @__PURE__ */ (0,
|
|
1946
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("legend", { className: "ow-fieldset__legend", children: legend }),
|
|
1947
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: descriptionId, className: "ow-fieldset__description", children: description }) : null,
|
|
1948
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ow-fieldset__content", children }),
|
|
1949
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: resolvedErrorId, role: "alert", className: "ow-field__error", children: error }) : null
|
|
1905
1950
|
]
|
|
1906
1951
|
}
|
|
1907
1952
|
);
|
|
@@ -1909,7 +1954,7 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
|
|
|
1909
1954
|
|
|
1910
1955
|
// src/components/RadioGroup/RadioGroup.tsx
|
|
1911
1956
|
var import_react19 = require("react");
|
|
1912
|
-
var
|
|
1957
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1913
1958
|
var RadioGroupContext = (0, import_react19.createContext)(null);
|
|
1914
1959
|
function RadioGroup({
|
|
1915
1960
|
label,
|
|
@@ -1927,7 +1972,7 @@ function RadioGroup({
|
|
|
1927
1972
|
}) {
|
|
1928
1973
|
const [current, select] = useControllableState(value, defaultValue, onChange);
|
|
1929
1974
|
const generatedName = (0, import_react19.useId)();
|
|
1930
|
-
return /* @__PURE__ */ (0,
|
|
1975
|
+
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
1976
|
Fieldset,
|
|
1932
1977
|
{
|
|
1933
1978
|
legend: label,
|
|
@@ -1948,8 +1993,8 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1948
1993
|
const descriptionId = (0, import_react19.useId)();
|
|
1949
1994
|
if (!group) throw new Error("Radio must be inside <RadioGroup>.");
|
|
1950
1995
|
const isDisabled = disabled || group.disabled;
|
|
1951
|
-
return /* @__PURE__ */ (0,
|
|
1952
|
-
/* @__PURE__ */ (0,
|
|
1996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: cx("ow-check-label", "ow-radio-label", isDisabled && "ow-check-label--disabled", className), children: [
|
|
1997
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ow-radio", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1953
1998
|
"input",
|
|
1954
1999
|
{
|
|
1955
2000
|
type: "radio",
|
|
@@ -1963,18 +2008,18 @@ function Radio({ value, children, description, disabled, className, ...inputProp
|
|
|
1963
2008
|
...inputProps
|
|
1964
2009
|
}
|
|
1965
2010
|
) }),
|
|
1966
|
-
/* @__PURE__ */ (0,
|
|
1967
|
-
/* @__PURE__ */ (0,
|
|
1968
|
-
description ? /* @__PURE__ */ (0,
|
|
2011
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "ow-check-label__text", children: [
|
|
2012
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children }),
|
|
2013
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
|
|
1969
2014
|
] })
|
|
1970
2015
|
] });
|
|
1971
2016
|
}
|
|
1972
2017
|
|
|
1973
2018
|
// src/components/Switch/Switch.tsx
|
|
1974
2019
|
var import_react20 = require("react");
|
|
1975
|
-
var
|
|
2020
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1976
2021
|
var Switch = (0, import_react20.forwardRef)(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
|
|
1977
|
-
return /* @__PURE__ */ (0,
|
|
2022
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1978
2023
|
"button",
|
|
1979
2024
|
{
|
|
1980
2025
|
ref,
|
|
@@ -1986,14 +2031,14 @@ var Switch = (0, import_react20.forwardRef)(function Switch2({ checked, onChange
|
|
|
1986
2031
|
className: cx("ow-switch", checked && "ow-switch--on", className),
|
|
1987
2032
|
onClick: () => onChange(!checked),
|
|
1988
2033
|
...buttonProps,
|
|
1989
|
-
children: /* @__PURE__ */ (0,
|
|
2034
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-switch__knob" })
|
|
1990
2035
|
}
|
|
1991
2036
|
);
|
|
1992
2037
|
});
|
|
1993
2038
|
|
|
1994
2039
|
// src/components/Slider/Slider.tsx
|
|
1995
2040
|
var import_react21 = require("react");
|
|
1996
|
-
var
|
|
2041
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1997
2042
|
function Slider({
|
|
1998
2043
|
value,
|
|
1999
2044
|
defaultValue,
|
|
@@ -2019,7 +2064,7 @@ function Slider({
|
|
|
2019
2064
|
const end = () => onChangeEnd?.(current);
|
|
2020
2065
|
const input = (which) => {
|
|
2021
2066
|
const own = which === "low" ? low : high;
|
|
2022
|
-
return /* @__PURE__ */ (0,
|
|
2067
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2023
2068
|
"input",
|
|
2024
2069
|
{
|
|
2025
2070
|
type: "range",
|
|
@@ -2044,13 +2089,13 @@ function Slider({
|
|
|
2044
2089
|
}
|
|
2045
2090
|
);
|
|
2046
2091
|
};
|
|
2047
|
-
return /* @__PURE__ */ (0,
|
|
2048
|
-
label || showValue ? /* @__PURE__ */ (0,
|
|
2049
|
-
label ? /* @__PURE__ */ (0,
|
|
2050
|
-
showValue ? /* @__PURE__ */ (0,
|
|
2092
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("ow-slider", disabled && "ow-slider--disabled", className), children: [
|
|
2093
|
+
label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ow-slider__header", children: [
|
|
2094
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: labelId, className: "ow-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
|
|
2095
|
+
showValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("output", { className: "ow-slider__value", "aria-hidden": "true", children: display }) : null
|
|
2051
2096
|
] }) : null,
|
|
2052
|
-
/* @__PURE__ */ (0,
|
|
2053
|
-
/* @__PURE__ */ (0,
|
|
2097
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ow-slider__control", style, children: [
|
|
2098
|
+
/* @__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
2099
|
isRange ? input("low") : null,
|
|
2055
2100
|
input("high")
|
|
2056
2101
|
] })
|
|
@@ -2059,7 +2104,7 @@ function Slider({
|
|
|
2059
2104
|
|
|
2060
2105
|
// src/components/FileDropZone/FileDropZone.tsx
|
|
2061
2106
|
var import_react22 = require("react");
|
|
2062
|
-
var
|
|
2107
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2063
2108
|
function matches(file, accept) {
|
|
2064
2109
|
if (!accept) return true;
|
|
2065
2110
|
return accept.split(",").some((rule) => {
|
|
@@ -2103,7 +2148,7 @@ function FileDropZone({
|
|
|
2103
2148
|
}
|
|
2104
2149
|
}
|
|
2105
2150
|
const hasFiles = (event) => event.dataTransfer.types.includes("Files");
|
|
2106
|
-
return /* @__PURE__ */ (0,
|
|
2151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2107
2152
|
"label",
|
|
2108
2153
|
{
|
|
2109
2154
|
className: cx(
|
|
@@ -2136,7 +2181,7 @@ function FileDropZone({
|
|
|
2136
2181
|
take(event.dataTransfer.files);
|
|
2137
2182
|
},
|
|
2138
2183
|
children: [
|
|
2139
|
-
/* @__PURE__ */ (0,
|
|
2184
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2140
2185
|
"input",
|
|
2141
2186
|
{
|
|
2142
2187
|
ref: inputRef,
|
|
@@ -2153,9 +2198,9 @@ function FileDropZone({
|
|
|
2153
2198
|
}
|
|
2154
2199
|
}
|
|
2155
2200
|
),
|
|
2156
|
-
/* @__PURE__ */ (0,
|
|
2157
|
-
/* @__PURE__ */ (0,
|
|
2158
|
-
/* @__PURE__ */ (0,
|
|
2201
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ow-dropzone__icon", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(UploadIcon, { size: 20 }) }),
|
|
2202
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ow-dropzone__label", children: isDragging ? "Drop to add" : label }),
|
|
2203
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: hintId, className: "ow-dropzone__hint", "aria-live": "polite", children: error ?? problem ?? hint })
|
|
2159
2204
|
]
|
|
2160
2205
|
}
|
|
2161
2206
|
);
|
|
@@ -2200,7 +2245,7 @@ function formatDate(iso, locale, options) {
|
|
|
2200
2245
|
}
|
|
2201
2246
|
|
|
2202
2247
|
// src/components/Calendar/Calendar.tsx
|
|
2203
|
-
var
|
|
2248
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2204
2249
|
var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
|
|
2205
2250
|
const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
|
|
2206
2251
|
const today = todayISO();
|
|
@@ -2263,9 +2308,9 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2263
2308
|
const nextMonth = addMonths(first, 1);
|
|
2264
2309
|
const canGoBack = !min || toISO(year, month, 0) >= min;
|
|
2265
2310
|
const canGoForward = !max || nextMonth <= max;
|
|
2266
|
-
return /* @__PURE__ */ (0,
|
|
2267
|
-
/* @__PURE__ */ (0,
|
|
2268
|
-
/* @__PURE__ */ (0,
|
|
2311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx("ow-calendar", className), children: [
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-calendar__header", children: [
|
|
2313
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2269
2314
|
"button",
|
|
2270
2315
|
{
|
|
2271
2316
|
type: "button",
|
|
@@ -2273,10 +2318,10 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2273
2318
|
"aria-label": `Previous month, ${formatDate(prevMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2274
2319
|
disabled: !canGoBack,
|
|
2275
2320
|
onClick: () => setFocused(clampDate(addMonths(focused, -1), min, max)),
|
|
2276
|
-
children: /* @__PURE__ */ (0,
|
|
2321
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronLeftIcon, { size: 16 })
|
|
2277
2322
|
}
|
|
2278
2323
|
),
|
|
2279
|
-
/* @__PURE__ */ (0,
|
|
2324
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ow-calendar__title", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2280
2325
|
"span",
|
|
2281
2326
|
{
|
|
2282
2327
|
className: cx("ow-calendar__title-text", slide.current.direction && `ow-calendar__slide--${slide.current.direction}`),
|
|
@@ -2284,7 +2329,7 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2284
2329
|
},
|
|
2285
2330
|
monthIndex
|
|
2286
2331
|
) }),
|
|
2287
|
-
/* @__PURE__ */ (0,
|
|
2332
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2288
2333
|
"button",
|
|
2289
2334
|
{
|
|
2290
2335
|
type: "button",
|
|
@@ -2292,17 +2337,17 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
|
|
|
2292
2337
|
"aria-label": `Next month, ${formatDate(nextMonth, locale, { month: "long", year: "numeric" })}`,
|
|
2293
2338
|
disabled: !canGoForward,
|
|
2294
2339
|
onClick: () => setFocused(clampDate(addMonths(focused, 1), min, max)),
|
|
2295
|
-
children: /* @__PURE__ */ (0,
|
|
2340
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRightIcon, { size: 16 })
|
|
2296
2341
|
}
|
|
2297
2342
|
)
|
|
2298
2343
|
] }),
|
|
2299
|
-
/* @__PURE__ */ (0,
|
|
2300
|
-
/* @__PURE__ */ (0,
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2344
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { ref: gridRef, role: "grid", className: "ow-calendar__grid", "aria-label": monthLabel, children: [
|
|
2345
|
+
/* @__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)) }) }),
|
|
2346
|
+
/* @__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
2347
|
const inMonth = parseISO(date).month === month;
|
|
2303
2348
|
const isSelected = date === selected;
|
|
2304
2349
|
const disabled = isDisabled(date);
|
|
2305
|
-
return /* @__PURE__ */ (0,
|
|
2350
|
+
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
2351
|
"button",
|
|
2307
2352
|
{
|
|
2308
2353
|
type: "button",
|
|
@@ -2334,7 +2379,7 @@ function clampDate(date, min, max) {
|
|
|
2334
2379
|
|
|
2335
2380
|
// src/components/Calendar/DatePicker.tsx
|
|
2336
2381
|
var import_react24 = require("react");
|
|
2337
|
-
var
|
|
2382
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2338
2383
|
function assignRef5(ref, value) {
|
|
2339
2384
|
if (typeof ref === "function") ref(value);
|
|
2340
2385
|
else if (ref) ref.current = value;
|
|
@@ -2369,8 +2414,8 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2369
2414
|
}, []);
|
|
2370
2415
|
useDismiss(isOpen, [panelRef, triggerRef], close);
|
|
2371
2416
|
const label = date ? formatDate(date, locale, formatOptions) : placeholder;
|
|
2372
|
-
return /* @__PURE__ */ (0,
|
|
2373
|
-
/* @__PURE__ */ (0,
|
|
2417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
2418
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2374
2419
|
"button",
|
|
2375
2420
|
{
|
|
2376
2421
|
ref: (element) => {
|
|
@@ -2402,12 +2447,12 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2402
2447
|
}
|
|
2403
2448
|
},
|
|
2404
2449
|
children: [
|
|
2405
|
-
/* @__PURE__ */ (0,
|
|
2406
|
-
/* @__PURE__ */ (0,
|
|
2450
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, { size: size === "sm" ? 14 : 16, className: "ow-date-picker__icon" }),
|
|
2451
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: `${panelId}-value`, className: cx("ow-select__value", !date && "ow-select__value--placeholder"), children: label })
|
|
2407
2452
|
]
|
|
2408
2453
|
}
|
|
2409
2454
|
),
|
|
2410
|
-
mounted ? /* @__PURE__ */ (0,
|
|
2455
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2411
2456
|
"div",
|
|
2412
2457
|
{
|
|
2413
2458
|
ref: panelRef,
|
|
@@ -2418,7 +2463,7 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2418
2463
|
"aria-label": "Choose a date",
|
|
2419
2464
|
className: "ow-popover ow-floating ow-date-picker__panel",
|
|
2420
2465
|
style,
|
|
2421
|
-
children: /* @__PURE__ */ (0,
|
|
2466
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2422
2467
|
Calendar,
|
|
2423
2468
|
{
|
|
2424
2469
|
...calendarProps,
|
|
@@ -2437,13 +2482,13 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
|
|
|
2437
2482
|
});
|
|
2438
2483
|
|
|
2439
2484
|
// src/components/Alert/Alert.tsx
|
|
2440
|
-
var
|
|
2485
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2441
2486
|
var icons = {
|
|
2442
|
-
info: /* @__PURE__ */ (0,
|
|
2443
|
-
success: /* @__PURE__ */ (0,
|
|
2444
|
-
warning: /* @__PURE__ */ (0,
|
|
2445
|
-
danger: /* @__PURE__ */ (0,
|
|
2446
|
-
neutral: /* @__PURE__ */ (0,
|
|
2487
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InfoIcon, { size: 16 }),
|
|
2488
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CircleCheckIcon, { size: 16 }),
|
|
2489
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TriangleAlertIcon, { size: 16 }),
|
|
2490
|
+
danger: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CircleAlertIcon, { size: 16 }),
|
|
2491
|
+
neutral: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InfoIcon, { size: 16 })
|
|
2447
2492
|
};
|
|
2448
2493
|
function Alert({
|
|
2449
2494
|
variant = "info",
|
|
@@ -2456,37 +2501,37 @@ function Alert({
|
|
|
2456
2501
|
role,
|
|
2457
2502
|
...props
|
|
2458
2503
|
}) {
|
|
2459
|
-
return /* @__PURE__ */ (0,
|
|
2504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2460
2505
|
"div",
|
|
2461
2506
|
{
|
|
2462
2507
|
role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
|
|
2463
2508
|
className: cx("ow-alert", `ow-alert--${variant}`, className),
|
|
2464
2509
|
...props,
|
|
2465
2510
|
children: [
|
|
2466
|
-
icon2 === false ? null : /* @__PURE__ */ (0,
|
|
2467
|
-
/* @__PURE__ */ (0,
|
|
2468
|
-
title ? /* @__PURE__ */ (0,
|
|
2469
|
-
children ? /* @__PURE__ */ (0,
|
|
2470
|
-
actions ? /* @__PURE__ */ (0,
|
|
2511
|
+
icon2 === false ? null : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ow-alert__icon", children: icon2 ?? icons[variant] }),
|
|
2512
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-alert__body", children: [
|
|
2513
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__title", children: title }) : null,
|
|
2514
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__description", children }) : null,
|
|
2515
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__actions", children: actions }) : null
|
|
2471
2516
|
] }),
|
|
2472
|
-
onClose ? /* @__PURE__ */ (0,
|
|
2517
|
+
onClose ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseButton, { size: "sm", label: "Dismiss", className: "ow-alert__close", onClick: onClose }) : null
|
|
2473
2518
|
]
|
|
2474
2519
|
}
|
|
2475
2520
|
);
|
|
2476
2521
|
}
|
|
2477
2522
|
|
|
2478
2523
|
// src/components/Badge/Badge.tsx
|
|
2479
|
-
var
|
|
2524
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2480
2525
|
function Badge({ children, className, icon: icon2, size = "md", variant = "neutral", ...spanProps }) {
|
|
2481
|
-
return /* @__PURE__ */ (0,
|
|
2482
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
2483
|
-
/* @__PURE__ */ (0,
|
|
2526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx("ow-badge", `ow-badge--${size}`, `ow-badge--${variant}`, className), ...spanProps, children: [
|
|
2527
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ow-badge__icon", children: icon2 }) : null,
|
|
2528
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children })
|
|
2484
2529
|
] });
|
|
2485
2530
|
}
|
|
2486
2531
|
|
|
2487
2532
|
// src/components/Progress/Progress.tsx
|
|
2488
2533
|
var import_react25 = require("react");
|
|
2489
|
-
var
|
|
2534
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2490
2535
|
function ProgressBar({
|
|
2491
2536
|
value,
|
|
2492
2537
|
max = 100,
|
|
@@ -2502,12 +2547,12 @@ function ProgressBar({
|
|
|
2502
2547
|
const indeterminate = value === void 0;
|
|
2503
2548
|
const pct = indeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
|
|
2504
2549
|
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,
|
|
2550
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cx("ow-progress", `ow-progress--${size}`, `ow-progress--${tone}`, className), children: [
|
|
2551
|
+
label || showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-progress__header", children: [
|
|
2552
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { id: labelId, className: "ow-progress__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
|
|
2553
|
+
showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ow-progress__value", children: text }) : null
|
|
2509
2554
|
] }) : null,
|
|
2510
|
-
/* @__PURE__ */ (0,
|
|
2555
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2511
2556
|
"div",
|
|
2512
2557
|
{
|
|
2513
2558
|
role: "progressbar",
|
|
@@ -2518,7 +2563,7 @@ function ProgressBar({
|
|
|
2518
2563
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
2519
2564
|
"aria-valuetext": indeterminate ? void 0 : text,
|
|
2520
2565
|
className: cx("ow-progress__track", indeterminate && "ow-progress__track--indeterminate"),
|
|
2521
|
-
children: /* @__PURE__ */ (0,
|
|
2566
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ow-progress__fill", style: indeterminate ? void 0 : { width: `${pct}%` } })
|
|
2522
2567
|
}
|
|
2523
2568
|
)
|
|
2524
2569
|
] });
|
|
@@ -2537,7 +2582,7 @@ function ProgressCircle({
|
|
|
2537
2582
|
const circumference = 2 * Math.PI * radius;
|
|
2538
2583
|
const indeterminate = value === void 0;
|
|
2539
2584
|
const pct = indeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
|
|
2540
|
-
return /* @__PURE__ */ (0,
|
|
2585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2541
2586
|
"span",
|
|
2542
2587
|
{
|
|
2543
2588
|
role: "progressbar",
|
|
@@ -2553,9 +2598,9 @@ function ProgressCircle({
|
|
|
2553
2598
|
),
|
|
2554
2599
|
style: { width: box, height: box },
|
|
2555
2600
|
children: [
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
2557
|
-
/* @__PURE__ */ (0,
|
|
2558
|
-
/* @__PURE__ */ (0,
|
|
2601
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
|
|
2602
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
|
|
2603
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2559
2604
|
"circle",
|
|
2560
2605
|
{
|
|
2561
2606
|
className: "ow-progress-circle__fill",
|
|
@@ -2571,7 +2616,7 @@ function ProgressCircle({
|
|
|
2571
2616
|
}
|
|
2572
2617
|
)
|
|
2573
2618
|
] }),
|
|
2574
|
-
size === "lg" && !indeterminate ? /* @__PURE__ */ (0,
|
|
2619
|
+
size === "lg" && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "ow-progress-circle__value", children: [
|
|
2575
2620
|
Math.round(pct),
|
|
2576
2621
|
"%"
|
|
2577
2622
|
] }) : null
|
|
@@ -2582,9 +2627,9 @@ function ProgressCircle({
|
|
|
2582
2627
|
|
|
2583
2628
|
// src/components/Skeleton/Skeleton.tsx
|
|
2584
2629
|
var import_react26 = require("react");
|
|
2585
|
-
var
|
|
2630
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2586
2631
|
function Skeleton({ width = "100%", height = 14, soft = false, shape = "bar", className }) {
|
|
2587
|
-
return /* @__PURE__ */ (0,
|
|
2632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2588
2633
|
"span",
|
|
2589
2634
|
{
|
|
2590
2635
|
className: cx("ow-skeleton", soft && "ow-skeleton--soft", shape === "block" && "ow-skeleton--block", className),
|
|
@@ -2600,26 +2645,26 @@ function SkeletonRows({ label = "Loading", rows = 4, delayMs = 150 }) {
|
|
|
2600
2645
|
const timer = window.setTimeout(() => setIsVisible(true), delayMs);
|
|
2601
2646
|
return () => window.clearTimeout(timer);
|
|
2602
2647
|
}, [delayMs]);
|
|
2603
|
-
return /* @__PURE__ */ (0,
|
|
2604
|
-
/* @__PURE__ */ (0,
|
|
2605
|
-
/* @__PURE__ */ (0,
|
|
2606
|
-
/* @__PURE__ */ (0,
|
|
2648
|
+
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: [
|
|
2649
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ow-skeleton-rows__text", children: [
|
|
2650
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: `${28 + index * 17 % 22}%`, height: 14 }),
|
|
2651
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: `${46 + index * 23 % 30}%`, height: 12, soft: true })
|
|
2607
2652
|
] }),
|
|
2608
|
-
/* @__PURE__ */ (0,
|
|
2653
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: 96, height: 32, soft: true, shape: "block" })
|
|
2609
2654
|
] }, index)) }) : null });
|
|
2610
2655
|
}
|
|
2611
2656
|
|
|
2612
2657
|
// src/components/Toast/Toast.tsx
|
|
2613
2658
|
var import_react27 = require("react");
|
|
2614
2659
|
var import_sonner = require("sonner");
|
|
2615
|
-
var
|
|
2660
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2616
2661
|
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,
|
|
2662
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleCheckIcon, { size: 16 }),
|
|
2663
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleAlertIcon, { size: 16 }),
|
|
2664
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TriangleAlertIcon, { size: 16 }),
|
|
2665
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, { size: 16 }),
|
|
2666
|
+
loading: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Spinner, { size: "sm", label: "" }),
|
|
2667
|
+
close: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(XIcon, { size: 12 })
|
|
2623
2668
|
};
|
|
2624
2669
|
function Toaster({
|
|
2625
2670
|
position = "bottom-center",
|
|
@@ -2650,7 +2695,7 @@ function Toaster({
|
|
|
2650
2695
|
observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ["open"] });
|
|
2651
2696
|
return () => observer.disconnect();
|
|
2652
2697
|
}, []);
|
|
2653
|
-
return /* @__PURE__ */ (0,
|
|
2698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: layerRef, ...manualPopover, className: "ow-toaster-layer", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2654
2699
|
import_sonner.Toaster,
|
|
2655
2700
|
{
|
|
2656
2701
|
id,
|
|
@@ -2672,7 +2717,7 @@ function Toaster({
|
|
|
2672
2717
|
|
|
2673
2718
|
// src/components/Tooltip/Tooltip.tsx
|
|
2674
2719
|
var import_react28 = require("react");
|
|
2675
|
-
var
|
|
2720
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2676
2721
|
var lastClosedAt = 0;
|
|
2677
2722
|
var warmWindow = 500;
|
|
2678
2723
|
function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
@@ -2703,7 +2748,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
|
2703
2748
|
document.addEventListener("keydown", onKeyDown);
|
|
2704
2749
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
2705
2750
|
}, [open]);
|
|
2706
|
-
return /* @__PURE__ */ (0,
|
|
2751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2707
2752
|
"span",
|
|
2708
2753
|
{
|
|
2709
2754
|
ref: anchorRef,
|
|
@@ -2719,7 +2764,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
|
|
|
2719
2764
|
onBlur: hide,
|
|
2720
2765
|
children: [
|
|
2721
2766
|
children,
|
|
2722
|
-
mounted ? /* @__PURE__ */ (0,
|
|
2767
|
+
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
2768
|
]
|
|
2724
2769
|
}
|
|
2725
2770
|
);
|
|
@@ -2785,7 +2830,7 @@ function useModalDialog(open, onCancel) {
|
|
|
2785
2830
|
}
|
|
2786
2831
|
|
|
2787
2832
|
// src/components/Dialog/Dialog.tsx
|
|
2788
|
-
var
|
|
2833
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2789
2834
|
function Dialog({
|
|
2790
2835
|
open,
|
|
2791
2836
|
onClose,
|
|
@@ -2804,15 +2849,15 @@ function Dialog({
|
|
|
2804
2849
|
if (dismissible) onClose();
|
|
2805
2850
|
});
|
|
2806
2851
|
if (!mounted) return null;
|
|
2807
|
-
const body = /* @__PURE__ */ (0,
|
|
2808
|
-
/* @__PURE__ */ (0,
|
|
2809
|
-
/* @__PURE__ */ (0,
|
|
2810
|
-
description ? /* @__PURE__ */ (0,
|
|
2852
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
2853
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-dialog__header", children: [
|
|
2854
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { id: titleId, className: "ow-dialog__title", children: title }),
|
|
2855
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: descriptionId, className: "ow-dialog__description", children: description }) : null
|
|
2811
2856
|
] }),
|
|
2812
2857
|
children,
|
|
2813
|
-
actions ? /* @__PURE__ */ (0,
|
|
2858
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-dialog__actions", children: actions }) : null
|
|
2814
2859
|
] });
|
|
2815
|
-
return /* @__PURE__ */ (0,
|
|
2860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2816
2861
|
"dialog",
|
|
2817
2862
|
{
|
|
2818
2863
|
ref: dialogRef,
|
|
@@ -2820,7 +2865,7 @@ function Dialog({
|
|
|
2820
2865
|
style: { width: `min(${width}px, calc(100% - 32px))` },
|
|
2821
2866
|
"aria-labelledby": titleId,
|
|
2822
2867
|
"aria-describedby": description ? descriptionId : void 0,
|
|
2823
|
-
children: onSubmit ? /* @__PURE__ */ (0,
|
|
2868
|
+
children: onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2824
2869
|
"form",
|
|
2825
2870
|
{
|
|
2826
2871
|
className: "ow-dialog__body",
|
|
@@ -2830,7 +2875,7 @@ function Dialog({
|
|
|
2830
2875
|
},
|
|
2831
2876
|
children: body
|
|
2832
2877
|
}
|
|
2833
|
-
) : /* @__PURE__ */ (0,
|
|
2878
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-dialog__body", children: body })
|
|
2834
2879
|
}
|
|
2835
2880
|
);
|
|
2836
2881
|
}
|
|
@@ -2861,7 +2906,7 @@ function ConfirmDialog({
|
|
|
2861
2906
|
setIsWorking(false);
|
|
2862
2907
|
}
|
|
2863
2908
|
}
|
|
2864
|
-
return /* @__PURE__ */ (0,
|
|
2909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2865
2910
|
Dialog,
|
|
2866
2911
|
{
|
|
2867
2912
|
open,
|
|
@@ -2869,17 +2914,17 @@ function ConfirmDialog({
|
|
|
2869
2914
|
dismissible: !isWorking,
|
|
2870
2915
|
width: 380,
|
|
2871
2916
|
className: "ow-dialog--confirm",
|
|
2872
|
-
title: /* @__PURE__ */ (0,
|
|
2873
|
-
destructive ? /* @__PURE__ */ (0,
|
|
2917
|
+
title: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
2918
|
+
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
2919
|
title
|
|
2875
2920
|
] }),
|
|
2876
2921
|
description,
|
|
2877
2922
|
onSubmit: () => {
|
|
2878
2923
|
if (!confirmDisabled && !isWorking) void confirm();
|
|
2879
2924
|
},
|
|
2880
|
-
actions: /* @__PURE__ */ (0,
|
|
2881
|
-
/* @__PURE__ */ (0,
|
|
2882
|
-
/* @__PURE__ */ (0,
|
|
2925
|
+
actions: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
|
|
2926
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { type: "button", disabled: isWorking, autoFocus: true, onClick: onClose, children: "Cancel" }),
|
|
2927
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2883
2928
|
Button,
|
|
2884
2929
|
{
|
|
2885
2930
|
type: "submit",
|
|
@@ -2891,7 +2936,7 @@ function ConfirmDialog({
|
|
|
2891
2936
|
] }),
|
|
2892
2937
|
children: [
|
|
2893
2938
|
children,
|
|
2894
|
-
error ? /* @__PURE__ */ (0,
|
|
2939
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { role: "alert", className: "ow-dialog__error", children: error }) : null
|
|
2895
2940
|
]
|
|
2896
2941
|
}
|
|
2897
2942
|
);
|
|
@@ -2899,7 +2944,7 @@ function ConfirmDialog({
|
|
|
2899
2944
|
|
|
2900
2945
|
// src/components/Drawer/Drawer.tsx
|
|
2901
2946
|
var import_react31 = require("react");
|
|
2902
|
-
var
|
|
2947
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2903
2948
|
function Drawer({
|
|
2904
2949
|
open,
|
|
2905
2950
|
onClose,
|
|
@@ -2919,7 +2964,7 @@ function Drawer({
|
|
|
2919
2964
|
});
|
|
2920
2965
|
if (!mounted) return null;
|
|
2921
2966
|
const sizeStyle = side === "bottom" ? { height: `min(${size}px, 90dvh)` } : { width: `min(${size}px, 100vw - 24px)` };
|
|
2922
|
-
return /* @__PURE__ */ (0,
|
|
2967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2923
2968
|
"dialog",
|
|
2924
2969
|
{
|
|
2925
2970
|
ref: dialogRef,
|
|
@@ -2928,15 +2973,15 @@ function Drawer({
|
|
|
2928
2973
|
"aria-labelledby": titleId,
|
|
2929
2974
|
"aria-describedby": description ? descriptionId : void 0,
|
|
2930
2975
|
children: [
|
|
2931
|
-
/* @__PURE__ */ (0,
|
|
2932
|
-
/* @__PURE__ */ (0,
|
|
2933
|
-
/* @__PURE__ */ (0,
|
|
2934
|
-
description ? /* @__PURE__ */ (0,
|
|
2976
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: "ow-drawer__header", children: [
|
|
2977
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ow-drawer__titles", children: [
|
|
2978
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { id: titleId, className: "ow-drawer__title", children: title }),
|
|
2979
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: descriptionId, className: "ow-drawer__description", children: description }) : null
|
|
2935
2980
|
] }),
|
|
2936
|
-
dismissible ? /* @__PURE__ */ (0,
|
|
2981
|
+
dismissible ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseButton, { onClick: onClose }) : null
|
|
2937
2982
|
] }),
|
|
2938
|
-
/* @__PURE__ */ (0,
|
|
2939
|
-
footer ? /* @__PURE__ */ (0,
|
|
2983
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "ow-drawer__body", children }),
|
|
2984
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("footer", { className: "ow-drawer__footer", children: footer }) : null
|
|
2940
2985
|
]
|
|
2941
2986
|
}
|
|
2942
2987
|
);
|
|
@@ -2944,7 +2989,7 @@ function Drawer({
|
|
|
2944
2989
|
|
|
2945
2990
|
// src/components/Popover/Popover.tsx
|
|
2946
2991
|
var import_react32 = require("react");
|
|
2947
|
-
var
|
|
2992
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2948
2993
|
function Popover({
|
|
2949
2994
|
trigger,
|
|
2950
2995
|
children,
|
|
@@ -2996,9 +3041,9 @@ function Popover({
|
|
|
2996
3041
|
if (!event.defaultPrevented) setOpen(!isOpen);
|
|
2997
3042
|
}
|
|
2998
3043
|
}) : trigger;
|
|
2999
|
-
return /* @__PURE__ */ (0,
|
|
3000
|
-
/* @__PURE__ */ (0,
|
|
3001
|
-
mounted ? /* @__PURE__ */ (0,
|
|
3044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
|
|
3045
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ref: anchorRef, className: "ow-popover-anchor", children: triggerElement }),
|
|
3046
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
3002
3047
|
"div",
|
|
3003
3048
|
{
|
|
3004
3049
|
ref: panelRef,
|
|
@@ -3016,7 +3061,7 @@ function Popover({
|
|
|
3016
3061
|
if (next && !panelRef.current?.contains(next) && !anchorRef.current?.contains(next)) setOpen(false);
|
|
3017
3062
|
},
|
|
3018
3063
|
children: [
|
|
3019
|
-
title ? /* @__PURE__ */ (0,
|
|
3064
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: `${id}-title`, className: "ow-popover__title", children: title }) : null,
|
|
3020
3065
|
children
|
|
3021
3066
|
]
|
|
3022
3067
|
}
|
|
@@ -3082,7 +3127,7 @@ function useMenuKeyboard({
|
|
|
3082
3127
|
}
|
|
3083
3128
|
|
|
3084
3129
|
// src/components/Menu/Menu.tsx
|
|
3085
|
-
var
|
|
3130
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3086
3131
|
var MenuContext = (0, import_react34.createContext)(null);
|
|
3087
3132
|
function Menu({ trigger, children, label, align = "start", above = false, width, defaultOpen = false, className }) {
|
|
3088
3133
|
const [open, setOpen] = (0, import_react34.useState)(defaultOpen);
|
|
@@ -3120,9 +3165,9 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3120
3165
|
if (!event.defaultPrevented) setOpen((current) => !current);
|
|
3121
3166
|
}
|
|
3122
3167
|
}) : trigger;
|
|
3123
|
-
return /* @__PURE__ */ (0,
|
|
3168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { ref: rootRef, className: "ow-menu", children: [
|
|
3124
3169
|
triggerElement,
|
|
3125
|
-
mounted ? /* @__PURE__ */ (0,
|
|
3170
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3126
3171
|
MenuContext.Provider,
|
|
3127
3172
|
{
|
|
3128
3173
|
value: {
|
|
@@ -3131,7 +3176,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3131
3176
|
triggerRef.current?.focus();
|
|
3132
3177
|
}
|
|
3133
3178
|
},
|
|
3134
|
-
children: /* @__PURE__ */ (0,
|
|
3179
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3135
3180
|
"div",
|
|
3136
3181
|
{
|
|
3137
3182
|
ref: menuRef,
|
|
@@ -3152,7 +3197,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
|
|
|
3152
3197
|
}
|
|
3153
3198
|
var MenuItem = (0, import_react34.forwardRef)(function MenuItem2({ icon: icon2, onSelect, destructive = false, shortcut, className, children, onClick, ...buttonProps }, ref) {
|
|
3154
3199
|
const menu = (0, import_react34.useContext)(MenuContext);
|
|
3155
|
-
return /* @__PURE__ */ (0,
|
|
3200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
3156
3201
|
"button",
|
|
3157
3202
|
{
|
|
3158
3203
|
ref,
|
|
@@ -3168,18 +3213,18 @@ var MenuItem = (0, import_react34.forwardRef)(function MenuItem2({ icon: icon2,
|
|
|
3168
3213
|
},
|
|
3169
3214
|
...buttonProps,
|
|
3170
3215
|
children: [
|
|
3171
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3172
|
-
/* @__PURE__ */ (0,
|
|
3173
|
-
shortcut ? /* @__PURE__ */ (0,
|
|
3216
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-menu__icon", children: icon2 }) : null,
|
|
3217
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-menu__label", children }),
|
|
3218
|
+
shortcut ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "ow-menu__shortcut", children: shortcut }) : null
|
|
3174
3219
|
]
|
|
3175
3220
|
}
|
|
3176
3221
|
);
|
|
3177
3222
|
});
|
|
3178
3223
|
function MenuLabel({ children }) {
|
|
3179
|
-
return /* @__PURE__ */ (0,
|
|
3224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-menu__group-label", role: "presentation", children });
|
|
3180
3225
|
}
|
|
3181
3226
|
function MenuSeparator() {
|
|
3182
|
-
return /* @__PURE__ */ (0,
|
|
3227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-menu__separator", role: "separator" });
|
|
3183
3228
|
}
|
|
3184
3229
|
|
|
3185
3230
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
@@ -3220,7 +3265,7 @@ function filterCommands(commands, query) {
|
|
|
3220
3265
|
}
|
|
3221
3266
|
|
|
3222
3267
|
// src/components/CommandPalette/CommandPalette.tsx
|
|
3223
|
-
var
|
|
3268
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3224
3269
|
function CommandPalette({ open, onClose, commands, placeholder = "Search commands\u2026" }) {
|
|
3225
3270
|
const { dialogRef, mounted } = useModalDialog(open, onClose);
|
|
3226
3271
|
const [query, setQuery] = (0, import_react35.useState)("");
|
|
@@ -3246,10 +3291,10 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3246
3291
|
if (!results.length) return;
|
|
3247
3292
|
setActiveIndex((index) => (Math.min(index, results.length - 1) + step + results.length) % results.length);
|
|
3248
3293
|
}
|
|
3249
|
-
return /* @__PURE__ */ (0,
|
|
3250
|
-
/* @__PURE__ */ (0,
|
|
3251
|
-
/* @__PURE__ */ (0,
|
|
3252
|
-
/* @__PURE__ */ (0,
|
|
3294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("dialog", { ref: dialogRef, className: "ow-dialog ow-palette", "aria-label": "Command palette", children: [
|
|
3295
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ow-palette__search", children: [
|
|
3296
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SearchIcon, { size: 16, className: "ow-palette__search-icon" }),
|
|
3297
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3253
3298
|
"input",
|
|
3254
3299
|
{
|
|
3255
3300
|
autoFocus: true,
|
|
@@ -3276,14 +3321,14 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3276
3321
|
}
|
|
3277
3322
|
}
|
|
3278
3323
|
),
|
|
3279
|
-
/* @__PURE__ */ (0,
|
|
3324
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("kbd", { className: "ow-palette__esc", children: "esc" })
|
|
3280
3325
|
] }),
|
|
3281
|
-
/* @__PURE__ */ (0,
|
|
3326
|
+
/* @__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
3327
|
const showGroup = !query.trim() && command.group && command.group !== results[index - 1]?.group;
|
|
3283
3328
|
const isActive = command === active;
|
|
3284
|
-
return /* @__PURE__ */ (0,
|
|
3285
|
-
showGroup ? /* @__PURE__ */ (0,
|
|
3286
|
-
/* @__PURE__ */ (0,
|
|
3329
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { role: "presentation", children: [
|
|
3330
|
+
showGroup ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ow-palette__group", children: command.group }) : null,
|
|
3331
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3287
3332
|
"div",
|
|
3288
3333
|
{
|
|
3289
3334
|
id: `${listId}-${command.id}`,
|
|
@@ -3298,16 +3343,16 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3298
3343
|
onMouseMove: () => setActiveIndex(index),
|
|
3299
3344
|
onClick: () => run(command),
|
|
3300
3345
|
children: [
|
|
3301
|
-
/* @__PURE__ */ (0,
|
|
3302
|
-
/* @__PURE__ */ (0,
|
|
3303
|
-
command.disabled && isActive ? /* @__PURE__ */ (0,
|
|
3304
|
-
command.shortcut ? /* @__PURE__ */ (0,
|
|
3305
|
-
isActive && !command.disabled ? /* @__PURE__ */ (0,
|
|
3346
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__icon", "aria-hidden": "true", children: command.icon }),
|
|
3347
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__title", children: command.title }),
|
|
3348
|
+
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,
|
|
3349
|
+
command.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("kbd", { className: "ow-palette__shortcut", children: command.shortcut }) : null,
|
|
3350
|
+
isActive && !command.disabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CornerDownLeftIcon, { size: 13, className: "ow-palette__enter" }) : null
|
|
3306
3351
|
]
|
|
3307
3352
|
}
|
|
3308
3353
|
)
|
|
3309
3354
|
] }, command.id);
|
|
3310
|
-
}) : /* @__PURE__ */ (0,
|
|
3355
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "ow-palette__empty", children: [
|
|
3311
3356
|
"No commands match \u201C",
|
|
3312
3357
|
query,
|
|
3313
3358
|
"\u201D."
|
|
@@ -3317,7 +3362,7 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
|
|
|
3317
3362
|
|
|
3318
3363
|
// src/components/Tabs/Tabs.tsx
|
|
3319
3364
|
var import_react36 = require("react");
|
|
3320
|
-
var
|
|
3365
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3321
3366
|
var TabsContext = (0, import_react36.createContext)(null);
|
|
3322
3367
|
function useTabs(component) {
|
|
3323
3368
|
const context = (0, import_react36.useContext)(TabsContext);
|
|
@@ -3328,7 +3373,7 @@ var idPart = (value) => value.replace(/[^\w-]/g, "_");
|
|
|
3328
3373
|
function Tabs({ value, defaultValue = "", onValueChange, variant = "segmented", className, children, ...props }) {
|
|
3329
3374
|
const [current, select] = useControllableState(value, defaultValue, onValueChange);
|
|
3330
3375
|
const baseId = (0, import_react36.useId)();
|
|
3331
|
-
return /* @__PURE__ */ (0,
|
|
3376
|
+
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
3377
|
}
|
|
3333
3378
|
function TabList({ className, onKeyDown, children, ...props }) {
|
|
3334
3379
|
const { value, select } = useTabs("TabList");
|
|
@@ -3352,15 +3397,15 @@ function TabList({ className, onKeyDown, children, ...props }) {
|
|
|
3352
3397
|
next.focus();
|
|
3353
3398
|
if (next.dataset.value) select(next.dataset.value);
|
|
3354
3399
|
}
|
|
3355
|
-
return /* @__PURE__ */ (0,
|
|
3400
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: listRef, role: "tablist", className: cx("ow-tabs__list", className), onKeyDown: handleKeyDown, ...props, children: [
|
|
3356
3401
|
children,
|
|
3357
|
-
/* @__PURE__ */ (0,
|
|
3402
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
|
|
3358
3403
|
] });
|
|
3359
3404
|
}
|
|
3360
3405
|
function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
3361
3406
|
const { value: current, select, baseId } = useTabs("Tab");
|
|
3362
3407
|
const selected = current === value;
|
|
3363
|
-
return /* @__PURE__ */ (0,
|
|
3408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
3364
3409
|
"button",
|
|
3365
3410
|
{
|
|
3366
3411
|
type: "button",
|
|
@@ -3377,7 +3422,7 @@ function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
|
|
|
3377
3422
|
},
|
|
3378
3423
|
...props,
|
|
3379
3424
|
children: [
|
|
3380
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3425
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-tab__icon", children: icon2 }) : null,
|
|
3381
3426
|
children
|
|
3382
3427
|
]
|
|
3383
3428
|
}
|
|
@@ -3387,7 +3432,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
|
|
|
3387
3432
|
const { value: current, baseId } = useTabs("TabPanel");
|
|
3388
3433
|
const selected = current === value;
|
|
3389
3434
|
if (!selected && !keepMounted) return null;
|
|
3390
|
-
return /* @__PURE__ */ (0,
|
|
3435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3391
3436
|
"div",
|
|
3392
3437
|
{
|
|
3393
3438
|
role: "tabpanel",
|
|
@@ -3404,7 +3449,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
|
|
|
3404
3449
|
|
|
3405
3450
|
// src/components/Accordion/Accordion.tsx
|
|
3406
3451
|
var import_react37 = require("react");
|
|
3407
|
-
var
|
|
3452
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3408
3453
|
function DisclosureView({
|
|
3409
3454
|
open,
|
|
3410
3455
|
onToggle,
|
|
@@ -3424,9 +3469,9 @@ function DisclosureView({
|
|
|
3424
3469
|
(0, import_react37.useEffect)(() => {
|
|
3425
3470
|
if (panelRef.current) panelRef.current.inert = !open;
|
|
3426
3471
|
}, [open]);
|
|
3427
|
-
return /* @__PURE__ */ (0,
|
|
3428
|
-
/* @__PURE__ */ (0,
|
|
3429
|
-
/* @__PURE__ */ (0,
|
|
3472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx(item ? "ow-accordion__item" : "ow-disclosure", className), "data-open": open, children: [
|
|
3473
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ow-disclosure__header", children: [
|
|
3474
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Heading, { className: "ow-disclosure__heading", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3430
3475
|
"button",
|
|
3431
3476
|
{
|
|
3432
3477
|
type: "button",
|
|
@@ -3438,18 +3483,18 @@ function DisclosureView({
|
|
|
3438
3483
|
"data-accordion-trigger": item ? "" : void 0,
|
|
3439
3484
|
onClick: onToggle,
|
|
3440
3485
|
children: [
|
|
3441
|
-
/* @__PURE__ */ (0,
|
|
3442
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3443
|
-
/* @__PURE__ */ (0,
|
|
3444
|
-
/* @__PURE__ */ (0,
|
|
3445
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
3486
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { size: 14, className: "ow-disclosure__chevron" }),
|
|
3487
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__icon", children: icon2 }) : null,
|
|
3488
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "ow-disclosure__titles", children: [
|
|
3489
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__title", children: title }),
|
|
3490
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__subtitle", children: subtitle }) : null
|
|
3446
3491
|
] })
|
|
3447
3492
|
]
|
|
3448
3493
|
}
|
|
3449
3494
|
) }),
|
|
3450
|
-
actions ? /* @__PURE__ */ (0,
|
|
3495
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ow-disclosure__actions", children: actions }) : null
|
|
3451
3496
|
] }),
|
|
3452
|
-
/* @__PURE__ */ (0,
|
|
3497
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3453
3498
|
"div",
|
|
3454
3499
|
{
|
|
3455
3500
|
ref: panelRef,
|
|
@@ -3457,7 +3502,7 @@ function DisclosureView({
|
|
|
3457
3502
|
role: "region",
|
|
3458
3503
|
"aria-labelledby": `${id}-trigger`,
|
|
3459
3504
|
className: "ow-disclosure__panel",
|
|
3460
|
-
children: /* @__PURE__ */ (0,
|
|
3505
|
+
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
3506
|
}
|
|
3462
3507
|
)
|
|
3463
3508
|
] });
|
|
@@ -3472,7 +3517,7 @@ function Disclosure({
|
|
|
3472
3517
|
...props
|
|
3473
3518
|
}) {
|
|
3474
3519
|
const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
|
|
3475
|
-
return /* @__PURE__ */ (0,
|
|
3520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3476
3521
|
DisclosureView,
|
|
3477
3522
|
{
|
|
3478
3523
|
...props,
|
|
@@ -3514,12 +3559,12 @@ function Accordion({
|
|
|
3514
3559
|
event.preventDefault();
|
|
3515
3560
|
triggers[(moves[event.key] + triggers.length) % triggers.length]?.focus();
|
|
3516
3561
|
}
|
|
3517
|
-
return /* @__PURE__ */ (0,
|
|
3562
|
+
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
3563
|
}
|
|
3519
3564
|
function AccordionItem({ value, ...props }) {
|
|
3520
3565
|
const context = (0, import_react37.useContext)(AccordionContext);
|
|
3521
3566
|
if (!context) throw new Error("AccordionItem must be inside <Accordion>.");
|
|
3522
|
-
return /* @__PURE__ */ (0,
|
|
3567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3523
3568
|
DisclosureView,
|
|
3524
3569
|
{
|
|
3525
3570
|
...props,
|
|
@@ -3533,13 +3578,13 @@ function AccordionItem({ value, ...props }) {
|
|
|
3533
3578
|
|
|
3534
3579
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
3535
3580
|
var import_react38 = require("react");
|
|
3536
|
-
var
|
|
3581
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3537
3582
|
function Breadcrumbs({ items: items2, separator = "chevron", label = "Breadcrumb", className }) {
|
|
3538
|
-
return /* @__PURE__ */ (0,
|
|
3583
|
+
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
3584
|
const isLast = index === items2.length - 1;
|
|
3540
|
-
return /* @__PURE__ */ (0,
|
|
3541
|
-
isLast ? /* @__PURE__ */ (0,
|
|
3542
|
-
isLast ? null : /* @__PURE__ */ (0,
|
|
3585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { className: "ow-breadcrumbs__item", children: [
|
|
3586
|
+
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 }),
|
|
3587
|
+
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
3588
|
] }, index);
|
|
3544
3589
|
}) }) });
|
|
3545
3590
|
}
|
|
@@ -3547,7 +3592,7 @@ function linkClassName({ variant = "default" } = {}) {
|
|
|
3547
3592
|
return cx("ow-link", `ow-link--${variant}`);
|
|
3548
3593
|
}
|
|
3549
3594
|
var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default", external = false, className, children, target, rel, ...props }, ref) {
|
|
3550
|
-
return /* @__PURE__ */ (0,
|
|
3595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3551
3596
|
"a",
|
|
3552
3597
|
{
|
|
3553
3598
|
ref,
|
|
@@ -3557,9 +3602,9 @@ var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default",
|
|
|
3557
3602
|
...props,
|
|
3558
3603
|
children: [
|
|
3559
3604
|
children,
|
|
3560
|
-
external ? /* @__PURE__ */ (0,
|
|
3561
|
-
/* @__PURE__ */ (0,
|
|
3562
|
-
/* @__PURE__ */ (0,
|
|
3605
|
+
external ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
3606
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowUpRightIcon, { size: 13, className: "ow-link__external" }),
|
|
3607
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
|
|
3563
3608
|
] }) : null
|
|
3564
3609
|
]
|
|
3565
3610
|
}
|
|
@@ -3567,7 +3612,7 @@ var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default",
|
|
|
3567
3612
|
});
|
|
3568
3613
|
|
|
3569
3614
|
// src/components/Pagination/Pagination.tsx
|
|
3570
|
-
var
|
|
3615
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3571
3616
|
function paginationItems(page, pageCount, siblingCount = 1, boundaryCount = 1) {
|
|
3572
3617
|
const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
|
|
3573
3618
|
const startPages = range(1, Math.min(boundaryCount, pageCount));
|
|
@@ -3600,8 +3645,8 @@ function Pagination({
|
|
|
3600
3645
|
}) {
|
|
3601
3646
|
const items2 = paginationItems(page, pageCount, siblingCount, boundaryCount);
|
|
3602
3647
|
const go = (next) => onPageChange(Math.min(Math.max(1, next), pageCount));
|
|
3603
|
-
return /* @__PURE__ */ (0,
|
|
3604
|
-
/* @__PURE__ */ (0,
|
|
3648
|
+
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: [
|
|
3649
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3605
3650
|
"button",
|
|
3606
3651
|
{
|
|
3607
3652
|
type: "button",
|
|
@@ -3609,11 +3654,11 @@ function Pagination({
|
|
|
3609
3654
|
"aria-label": "Previous page",
|
|
3610
3655
|
disabled: page <= 1,
|
|
3611
3656
|
onClick: () => go(page - 1),
|
|
3612
|
-
children: /* @__PURE__ */ (0,
|
|
3657
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronLeftIcon, { size: 16 })
|
|
3613
3658
|
}
|
|
3614
3659
|
) }),
|
|
3615
3660
|
items2.map(
|
|
3616
|
-
(item) => typeof item === "number" ? /* @__PURE__ */ (0,
|
|
3661
|
+
(item) => typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3617
3662
|
"button",
|
|
3618
3663
|
{
|
|
3619
3664
|
type: "button",
|
|
@@ -3623,9 +3668,9 @@ function Pagination({
|
|
|
3623
3668
|
onClick: () => go(item),
|
|
3624
3669
|
children: item
|
|
3625
3670
|
}
|
|
3626
|
-
) }, item) : /* @__PURE__ */ (0,
|
|
3671
|
+
) }, item) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { className: "ow-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
|
|
3627
3672
|
),
|
|
3628
|
-
/* @__PURE__ */ (0,
|
|
3673
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3629
3674
|
"button",
|
|
3630
3675
|
{
|
|
3631
3676
|
type: "button",
|
|
@@ -3633,7 +3678,7 @@ function Pagination({
|
|
|
3633
3678
|
"aria-label": "Next page",
|
|
3634
3679
|
disabled: page >= pageCount,
|
|
3635
3680
|
onClick: () => go(page + 1),
|
|
3636
|
-
children: /* @__PURE__ */ (0,
|
|
3681
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronRightIcon, { size: 16 })
|
|
3637
3682
|
}
|
|
3638
3683
|
) })
|
|
3639
3684
|
] }) });
|
|
@@ -3641,43 +3686,43 @@ function Pagination({
|
|
|
3641
3686
|
|
|
3642
3687
|
// src/components/Steps/Steps.tsx
|
|
3643
3688
|
var import_react39 = require("react");
|
|
3644
|
-
var
|
|
3689
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3645
3690
|
function Steps({ items: items2, current = 0, orientation = "vertical", title, label = "Steps", className }) {
|
|
3646
3691
|
const statuses = items2.map((item, index) => item.status ?? (index < current ? "done" : index === current ? "current" : "upcoming"));
|
|
3647
3692
|
const doneCount = statuses.filter((status) => status === "done").length;
|
|
3648
3693
|
const headingId = (0, import_react39.useId)();
|
|
3649
|
-
const list = /* @__PURE__ */ (0,
|
|
3694
|
+
const list = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ol", { className: "ow-steps__list", children: items2.map((item, index) => {
|
|
3650
3695
|
const status = statuses[index];
|
|
3651
|
-
return /* @__PURE__ */ (0,
|
|
3696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
3652
3697
|
"li",
|
|
3653
3698
|
{
|
|
3654
3699
|
className: cx("ow-steps__item", `ow-steps__item--${status}`),
|
|
3655
3700
|
"aria-current": status === "current" ? "step" : void 0,
|
|
3656
3701
|
children: [
|
|
3657
|
-
/* @__PURE__ */ (0,
|
|
3658
|
-
/* @__PURE__ */ (0,
|
|
3659
|
-
/* @__PURE__ */ (0,
|
|
3660
|
-
status === "done" ? /* @__PURE__ */ (0,
|
|
3702
|
+
/* @__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 }),
|
|
3703
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__text", children: [
|
|
3704
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__title", children: [
|
|
3705
|
+
status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-visually-hidden", children: "Done: " }) : null,
|
|
3661
3706
|
item.title
|
|
3662
3707
|
] }),
|
|
3663
|
-
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0,
|
|
3708
|
+
item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__description", children: item.description }) : null
|
|
3664
3709
|
] }),
|
|
3665
|
-
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ (0,
|
|
3710
|
+
item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__action", children: item.action }) : null
|
|
3666
3711
|
]
|
|
3667
3712
|
},
|
|
3668
3713
|
index
|
|
3669
3714
|
);
|
|
3670
3715
|
}) });
|
|
3671
|
-
return /* @__PURE__ */ (0,
|
|
3716
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
3672
3717
|
"section",
|
|
3673
3718
|
{
|
|
3674
3719
|
className: cx("ow-steps", `ow-steps--${orientation}`, className),
|
|
3675
3720
|
"aria-labelledby": title && orientation === "vertical" ? headingId : void 0,
|
|
3676
3721
|
"aria-label": title && orientation === "vertical" ? void 0 : label,
|
|
3677
3722
|
children: [
|
|
3678
|
-
title && orientation === "vertical" ? /* @__PURE__ */ (0,
|
|
3679
|
-
/* @__PURE__ */ (0,
|
|
3680
|
-
/* @__PURE__ */ (0,
|
|
3723
|
+
title && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ow-steps__header", children: [
|
|
3724
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { id: headingId, className: "ow-steps__heading", children: title }),
|
|
3725
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__count", children: [
|
|
3681
3726
|
doneCount,
|
|
3682
3727
|
" of ",
|
|
3683
3728
|
items2.length,
|
|
@@ -3692,25 +3737,25 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
|
|
|
3692
3737
|
|
|
3693
3738
|
// src/components/NavList/NavList.tsx
|
|
3694
3739
|
var import_react40 = require("react");
|
|
3695
|
-
var
|
|
3740
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3696
3741
|
function NavList({ label, heading, orientation = "vertical", children, className }) {
|
|
3697
|
-
return /* @__PURE__ */ (0,
|
|
3698
|
-
heading && orientation === "vertical" ? /* @__PURE__ */ (0,
|
|
3742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
|
|
3743
|
+
heading && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__heading", children: heading }) : null,
|
|
3699
3744
|
children
|
|
3700
3745
|
] });
|
|
3701
3746
|
}
|
|
3702
3747
|
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,
|
|
3748
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
3749
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__icon", children: icon2 }) : null,
|
|
3750
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__label", children }),
|
|
3751
|
+
end !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__end", children: end }) : null
|
|
3707
3752
|
] });
|
|
3708
3753
|
const shared = {
|
|
3709
3754
|
"aria-current": active ? "page" : void 0,
|
|
3710
3755
|
className: cx("ow-nav__item", active && "ow-nav__item--active", className)
|
|
3711
3756
|
};
|
|
3712
3757
|
if (href !== void 0) {
|
|
3713
|
-
return /* @__PURE__ */ (0,
|
|
3758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3714
3759
|
"a",
|
|
3715
3760
|
{
|
|
3716
3761
|
ref,
|
|
@@ -3721,12 +3766,12 @@ var NavItem = (0, import_react40.forwardRef)(function NavItem2({ icon: icon2, ac
|
|
|
3721
3766
|
}
|
|
3722
3767
|
);
|
|
3723
3768
|
}
|
|
3724
|
-
return /* @__PURE__ */ (0,
|
|
3769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { ref, type, ...shared, ...buttonProps, children: content });
|
|
3725
3770
|
});
|
|
3726
3771
|
|
|
3727
3772
|
// src/components/Table/Table.tsx
|
|
3728
3773
|
var import_react41 = require("react");
|
|
3729
|
-
var
|
|
3774
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3730
3775
|
function compare(a, b) {
|
|
3731
3776
|
if (typeof a === "number" && typeof b === "number") return a - b;
|
|
3732
3777
|
return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
|
|
@@ -3777,16 +3822,16 @@ function Table({
|
|
|
3777
3822
|
);
|
|
3778
3823
|
}
|
|
3779
3824
|
const selectable = selectionMode === "multiple";
|
|
3780
|
-
return /* @__PURE__ */ (0,
|
|
3825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3781
3826
|
"div",
|
|
3782
3827
|
{
|
|
3783
3828
|
className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
|
|
3784
3829
|
style: maxHeight ? { maxHeight } : void 0,
|
|
3785
3830
|
tabIndex: maxHeight ? 0 : void 0,
|
|
3786
|
-
children: /* @__PURE__ */ (0,
|
|
3787
|
-
caption ? /* @__PURE__ */ (0,
|
|
3788
|
-
/* @__PURE__ */ (0,
|
|
3789
|
-
selectable ? /* @__PURE__ */ (0,
|
|
3831
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [
|
|
3832
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
|
|
3833
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
|
|
3834
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3790
3835
|
Checkbox,
|
|
3791
3836
|
{
|
|
3792
3837
|
size: "sm",
|
|
@@ -3800,27 +3845,27 @@ function Table({
|
|
|
3800
3845
|
) }) : null,
|
|
3801
3846
|
columns.map((column) => {
|
|
3802
3847
|
const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
|
|
3803
|
-
return /* @__PURE__ */ (0,
|
|
3848
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3804
3849
|
"th",
|
|
3805
3850
|
{
|
|
3806
3851
|
scope: "col",
|
|
3807
3852
|
"aria-sort": direction ?? (column.sortable ? "none" : void 0),
|
|
3808
3853
|
className: cx(`ow-table__cell--${column.align ?? "start"}`),
|
|
3809
3854
|
style: column.width !== void 0 ? { width: column.width } : void 0,
|
|
3810
|
-
children: column.sortable ? /* @__PURE__ */ (0,
|
|
3855
|
+
children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
|
|
3811
3856
|
column.header,
|
|
3812
|
-
/* @__PURE__ */ (0,
|
|
3857
|
+
/* @__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
3858
|
] }) : column.header
|
|
3814
3859
|
},
|
|
3815
3860
|
column.key
|
|
3816
3861
|
);
|
|
3817
3862
|
})
|
|
3818
3863
|
] }) }),
|
|
3819
|
-
/* @__PURE__ */ (0,
|
|
3864
|
+
/* @__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
3865
|
const key = keyOf(row);
|
|
3821
3866
|
const isSelected = selected.includes(key);
|
|
3822
|
-
return /* @__PURE__ */ (0,
|
|
3823
|
-
selectable ? /* @__PURE__ */ (0,
|
|
3867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
|
|
3868
|
+
selectable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "ow-table__select", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3824
3869
|
Checkbox,
|
|
3825
3870
|
{
|
|
3826
3871
|
size: "sm",
|
|
@@ -3831,7 +3876,7 @@ function Table({
|
|
|
3831
3876
|
)
|
|
3832
3877
|
}
|
|
3833
3878
|
) }) : null,
|
|
3834
|
-
columns.map((column) => /* @__PURE__ */ (0,
|
|
3879
|
+
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
3880
|
] }, key);
|
|
3836
3881
|
}) })
|
|
3837
3882
|
] })
|
|
@@ -3840,7 +3885,7 @@ function Table({
|
|
|
3840
3885
|
}
|
|
3841
3886
|
|
|
3842
3887
|
// src/components/Stat/Stat.tsx
|
|
3843
|
-
var
|
|
3888
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3844
3889
|
function Sparkline({ values }) {
|
|
3845
3890
|
const max = Math.max(...values);
|
|
3846
3891
|
const min = Math.min(...values);
|
|
@@ -3852,37 +3897,37 @@ function Sparkline({ values }) {
|
|
|
3852
3897
|
});
|
|
3853
3898
|
const line = points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(2)} ${y.toFixed(2)}`).join(" ");
|
|
3854
3899
|
const [lastX, lastY] = points[points.length - 1];
|
|
3855
|
-
return /* @__PURE__ */ (0,
|
|
3856
|
-
/* @__PURE__ */ (0,
|
|
3857
|
-
/* @__PURE__ */ (0,
|
|
3858
|
-
/* @__PURE__ */ (0,
|
|
3900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
|
|
3901
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
|
|
3902
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
|
|
3903
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
|
|
3859
3904
|
] }),
|
|
3860
|
-
/* @__PURE__ */ (0,
|
|
3905
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
|
|
3861
3906
|
] });
|
|
3862
3907
|
}
|
|
3863
3908
|
function Stat({ label, value, icon: icon2, change, changeTone, description, trend, className }) {
|
|
3864
3909
|
const tone = changeTone ?? (change?.startsWith("+") ? "positive" : /^[-−]/.test(change ?? "") ? "negative" : "neutral");
|
|
3865
3910
|
const rising = change ? !/^[-−]/.test(change) : false;
|
|
3866
|
-
return /* @__PURE__ */ (0,
|
|
3867
|
-
/* @__PURE__ */ (0,
|
|
3868
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
3869
|
-
/* @__PURE__ */ (0,
|
|
3911
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx("ow-stat", className), children: [
|
|
3912
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__label", children: [
|
|
3913
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__icon", children: icon2 }) : null,
|
|
3914
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: label })
|
|
3870
3915
|
] }),
|
|
3871
|
-
/* @__PURE__ */ (0,
|
|
3872
|
-
/* @__PURE__ */ (0,
|
|
3873
|
-
change ? /* @__PURE__ */ (0,
|
|
3874
|
-
tone === "neutral" ? null : rising ? /* @__PURE__ */ (0,
|
|
3916
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__row", children: [
|
|
3917
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__value", children: value }),
|
|
3918
|
+
change ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
|
|
3919
|
+
tone === "neutral" ? null : rising ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArrowDownIcon, { size: 12 }),
|
|
3875
3920
|
change
|
|
3876
3921
|
] }) : null
|
|
3877
3922
|
] }),
|
|
3878
|
-
description ? /* @__PURE__ */ (0,
|
|
3879
|
-
trend && trend.length > 1 ? /* @__PURE__ */ (0,
|
|
3923
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "ow-stat__description", children: description }) : null,
|
|
3924
|
+
trend && trend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Sparkline, { values: trend }) : null
|
|
3880
3925
|
] });
|
|
3881
3926
|
}
|
|
3882
3927
|
|
|
3883
3928
|
// src/components/FileTree/FileTree.tsx
|
|
3884
3929
|
var import_react42 = require("react");
|
|
3885
|
-
var
|
|
3930
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3886
3931
|
function flatten(nodes, expanded, parent, level = 1) {
|
|
3887
3932
|
return nodes.flatMap((node) => {
|
|
3888
3933
|
const path = parent ? `${parent}/${node.name}` : node.name;
|
|
@@ -3960,8 +4005,8 @@ function FileTree({
|
|
|
3960
4005
|
const row = rows.find((entry) => entry.path === path);
|
|
3961
4006
|
if (!row) return null;
|
|
3962
4007
|
const isOpen = row.isFolder && expanded.has(path);
|
|
3963
|
-
const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0,
|
|
3964
|
-
return /* @__PURE__ */ (0,
|
|
4008
|
+
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 }));
|
|
4009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3965
4010
|
"li",
|
|
3966
4011
|
{
|
|
3967
4012
|
ref: (element) => {
|
|
@@ -3979,7 +4024,7 @@ function FileTree({
|
|
|
3979
4024
|
if (event.target === event.currentTarget) setFocusPath(path);
|
|
3980
4025
|
},
|
|
3981
4026
|
children: [
|
|
3982
|
-
/* @__PURE__ */ (0,
|
|
4027
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3983
4028
|
"div",
|
|
3984
4029
|
{
|
|
3985
4030
|
className: cx("ow-tree__row", !row.isFolder && current === path && "ow-tree__row--selected"),
|
|
@@ -3989,51 +4034,51 @@ function FileTree({
|
|
|
3989
4034
|
activate(row);
|
|
3990
4035
|
},
|
|
3991
4036
|
children: [
|
|
3992
|
-
row.isFolder ? /* @__PURE__ */ (0,
|
|
3993
|
-
/* @__PURE__ */ (0,
|
|
3994
|
-
/* @__PURE__ */ (0,
|
|
3995
|
-
node.meta ? /* @__PURE__ */ (0,
|
|
4037
|
+
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" }),
|
|
4038
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
|
|
4039
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__name", children: node.name }),
|
|
4040
|
+
node.meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__meta", children: node.meta }) : null
|
|
3996
4041
|
]
|
|
3997
4042
|
}
|
|
3998
4043
|
),
|
|
3999
|
-
isOpen && node.children.length > 0 ? /* @__PURE__ */ (0,
|
|
4044
|
+
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
4045
|
]
|
|
4001
4046
|
},
|
|
4002
4047
|
path
|
|
4003
4048
|
);
|
|
4004
4049
|
});
|
|
4005
4050
|
}
|
|
4006
|
-
return /* @__PURE__ */ (0,
|
|
4051
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
|
|
4007
4052
|
}
|
|
4008
4053
|
|
|
4009
4054
|
// src/components/EmptyState/EmptyState.tsx
|
|
4010
|
-
var
|
|
4055
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
4011
4056
|
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,
|
|
4057
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
|
|
4058
|
+
/* @__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 }) }),
|
|
4059
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "ow-empty__text", children: [
|
|
4060
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "ow-empty__title", children: title }),
|
|
4061
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "ow-empty__description", children: description }) : null
|
|
4017
4062
|
] }),
|
|
4018
|
-
actions ? /* @__PURE__ */ (0,
|
|
4063
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ow-empty__actions", children: actions }) : null
|
|
4019
4064
|
] });
|
|
4020
4065
|
}
|
|
4021
4066
|
|
|
4022
4067
|
// src/components/Tag/Tag.tsx
|
|
4023
|
-
var
|
|
4068
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
4024
4069
|
function Tag({ onRemove, variant = "neutral", size = "md", icon: icon2, removeLabel, className, children, ...props }) {
|
|
4025
4070
|
const name = removeLabel ?? (typeof children === "string" ? children : "tag");
|
|
4026
|
-
return /* @__PURE__ */ (0,
|
|
4027
|
-
icon2 ? /* @__PURE__ */ (0,
|
|
4028
|
-
/* @__PURE__ */ (0,
|
|
4029
|
-
onRemove ? /* @__PURE__ */ (0,
|
|
4071
|
+
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: [
|
|
4072
|
+
icon2 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-tag__icon", children: icon2 }) : null,
|
|
4073
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-tag__label", children }),
|
|
4074
|
+
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
4075
|
] });
|
|
4031
4076
|
}
|
|
4032
4077
|
function TagGroup({ label, className, children, ...props }) {
|
|
4033
|
-
return /* @__PURE__ */ (0,
|
|
4078
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
|
|
4034
4079
|
}
|
|
4035
4080
|
function ColorSwatch({ color, name, value, size = "md", shape = "square", className }) {
|
|
4036
|
-
const swatch = /* @__PURE__ */ (0,
|
|
4081
|
+
const swatch = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
4037
4082
|
"span",
|
|
4038
4083
|
{
|
|
4039
4084
|
className: cx("ow-swatch", `ow-swatch--${size}`, shape === "circle" && "ow-swatch--circle"),
|
|
@@ -4041,19 +4086,19 @@ function ColorSwatch({ color, name, value, size = "md", shape = "square", classN
|
|
|
4041
4086
|
...name && !value ? { role: "img", "aria-label": name } : { "aria-hidden": true }
|
|
4042
4087
|
}
|
|
4043
4088
|
);
|
|
4044
|
-
if (!name && !value) return /* @__PURE__ */ (0,
|
|
4045
|
-
return /* @__PURE__ */ (0,
|
|
4089
|
+
if (!name && !value) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className, children: swatch });
|
|
4090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: cx("ow-swatch-label", className), children: [
|
|
4046
4091
|
swatch,
|
|
4047
|
-
/* @__PURE__ */ (0,
|
|
4048
|
-
name ? /* @__PURE__ */ (0,
|
|
4049
|
-
/* @__PURE__ */ (0,
|
|
4092
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "ow-swatch-label__text", children: [
|
|
4093
|
+
name ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-swatch-label__name", children: name }) : null,
|
|
4094
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-swatch-label__value", children: value })
|
|
4050
4095
|
] })
|
|
4051
4096
|
] });
|
|
4052
4097
|
}
|
|
4053
4098
|
|
|
4054
4099
|
// src/components/Avatar/Avatar.tsx
|
|
4055
4100
|
var import_react43 = require("react");
|
|
4056
|
-
var
|
|
4101
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
4057
4102
|
var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
|
|
4058
4103
|
function avatarSize(size) {
|
|
4059
4104
|
if (typeof size === "number") {
|
|
@@ -4066,33 +4111,33 @@ function Avatar({ name, src, size = "md", label, className }) {
|
|
|
4066
4111
|
const [failedImage, setFailedImage] = (0, import_react43.useState)();
|
|
4067
4112
|
const showImage = src && src !== failedImage;
|
|
4068
4113
|
const sizing = avatarSize(size);
|
|
4069
|
-
return /* @__PURE__ */ (0,
|
|
4114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
4070
4115
|
"span",
|
|
4071
4116
|
{
|
|
4072
4117
|
className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
|
|
4073
4118
|
style: sizing.style,
|
|
4074
4119
|
...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
|
|
4075
|
-
children: showImage ? /* @__PURE__ */ (0,
|
|
4120
|
+
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
4121
|
}
|
|
4077
4122
|
);
|
|
4078
4123
|
}
|
|
4079
4124
|
|
|
4080
4125
|
// src/components/Avatar/AvatarGroup.tsx
|
|
4081
4126
|
var import_react44 = require("react");
|
|
4082
|
-
var
|
|
4127
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
4083
4128
|
function AvatarGroup({ children, max = 4, size = "md", label, className }) {
|
|
4084
4129
|
const avatars = import_react44.Children.toArray(children).filter(import_react44.isValidElement);
|
|
4085
4130
|
const sizing = avatarSize(size);
|
|
4086
4131
|
const shown = avatars.slice(0, max);
|
|
4087
4132
|
const hidden = avatars.length - shown.length;
|
|
4088
|
-
return /* @__PURE__ */ (0,
|
|
4133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
|
|
4089
4134
|
shown.map((avatar) => (0, import_react44.cloneElement)(avatar, { size })),
|
|
4090
|
-
hidden > 0 ? /* @__PURE__ */ (0,
|
|
4091
|
-
/* @__PURE__ */ (0,
|
|
4135
|
+
hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
|
|
4136
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { "aria-hidden": "true", children: [
|
|
4092
4137
|
"+",
|
|
4093
4138
|
hidden
|
|
4094
4139
|
] }),
|
|
4095
|
-
/* @__PURE__ */ (0,
|
|
4140
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "ow-visually-hidden", children: [
|
|
4096
4141
|
"and ",
|
|
4097
4142
|
hidden,
|
|
4098
4143
|
" more"
|
|
@@ -4105,42 +4150,42 @@ function userSize(size) {
|
|
|
4105
4150
|
return size >= 48 ? "ow-user--xl" : size >= 36 ? "ow-user--lg" : size >= 28 ? "ow-user--md" : "ow-user--sm";
|
|
4106
4151
|
}
|
|
4107
4152
|
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,
|
|
4153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cx("ow-user", userSize(size), className), children: [
|
|
4154
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Avatar, { name, src, size }),
|
|
4155
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "ow-user__text", children: [
|
|
4156
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ow-user__name", children: name }),
|
|
4157
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ow-user__description", children: description }) : null
|
|
4113
4158
|
] })
|
|
4114
4159
|
] });
|
|
4115
4160
|
}
|
|
4116
4161
|
|
|
4117
4162
|
// src/components/Kbd/Kbd.tsx
|
|
4118
|
-
var
|
|
4163
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
4119
4164
|
function Kbd({ className, ...props }) {
|
|
4120
|
-
return /* @__PURE__ */ (0,
|
|
4165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("kbd", { className: cx("ow-kbd", className), ...props });
|
|
4121
4166
|
}
|
|
4122
4167
|
function Code({ className, ...props }) {
|
|
4123
|
-
return /* @__PURE__ */ (0,
|
|
4168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("code", { className: cx("ow-code", className), ...props });
|
|
4124
4169
|
}
|
|
4125
4170
|
|
|
4126
4171
|
// src/components/Card/Card.tsx
|
|
4127
|
-
var
|
|
4172
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
4128
4173
|
function Card({ className, padding = "md", ...props }) {
|
|
4129
|
-
return /* @__PURE__ */ (0,
|
|
4174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
|
|
4130
4175
|
}
|
|
4131
4176
|
function SettingsRow({ children, description, label, className }) {
|
|
4132
|
-
return /* @__PURE__ */ (0,
|
|
4133
|
-
/* @__PURE__ */ (0,
|
|
4134
|
-
/* @__PURE__ */ (0,
|
|
4135
|
-
description ? /* @__PURE__ */ (0,
|
|
4177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cx("ow-settings-row", className), children: [
|
|
4178
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "ow-settings-row__text", children: [
|
|
4179
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ow-settings-row__label", children: label }),
|
|
4180
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ow-settings-row__description", children: description }) : null
|
|
4136
4181
|
] }),
|
|
4137
|
-
/* @__PURE__ */ (0,
|
|
4182
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ow-settings-row__control", children })
|
|
4138
4183
|
] });
|
|
4139
4184
|
}
|
|
4140
4185
|
|
|
4141
4186
|
// src/components/Layout/Layout.tsx
|
|
4142
4187
|
var import_react45 = require("react");
|
|
4143
|
-
var
|
|
4188
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
4144
4189
|
var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
|
|
4145
4190
|
var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
|
|
4146
4191
|
function Stack({
|
|
@@ -4156,7 +4201,7 @@ function Stack({
|
|
|
4156
4201
|
...props
|
|
4157
4202
|
}) {
|
|
4158
4203
|
const Element = as;
|
|
4159
|
-
return /* @__PURE__ */ (0,
|
|
4204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4160
4205
|
Element,
|
|
4161
4206
|
{
|
|
4162
4207
|
className: cx("ow-stack", className),
|
|
@@ -4176,9 +4221,9 @@ function Stack({
|
|
|
4176
4221
|
function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
|
|
4177
4222
|
const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
|
|
4178
4223
|
if (label && orientation === "horizontal") {
|
|
4179
|
-
return /* @__PURE__ */ (0,
|
|
4224
|
+
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
4225
|
}
|
|
4181
|
-
return /* @__PURE__ */ (0,
|
|
4226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4182
4227
|
"div",
|
|
4183
4228
|
{
|
|
4184
4229
|
role: "separator",
|
|
@@ -4218,7 +4263,7 @@ function ScrollShadow({
|
|
|
4218
4263
|
observer?.disconnect();
|
|
4219
4264
|
};
|
|
4220
4265
|
}, [orientation]);
|
|
4221
|
-
return /* @__PURE__ */ (0,
|
|
4266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4222
4267
|
"div",
|
|
4223
4268
|
{
|
|
4224
4269
|
ref,
|
|
@@ -4239,14 +4284,14 @@ function ScrollShadow({
|
|
|
4239
4284
|
);
|
|
4240
4285
|
}
|
|
4241
4286
|
function VisuallyHidden({ className, ...props }) {
|
|
4242
|
-
return /* @__PURE__ */ (0,
|
|
4287
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
|
|
4243
4288
|
}
|
|
4244
4289
|
|
|
4245
4290
|
// src/components/Marketing/Marketing.tsx
|
|
4246
4291
|
var import_react46 = require("react");
|
|
4247
|
-
var
|
|
4292
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
4248
4293
|
function Chip({ className, ...props }) {
|
|
4249
|
-
return /* @__PURE__ */ (0,
|
|
4294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: cx("ow-chip", className), ...props });
|
|
4250
4295
|
}
|
|
4251
4296
|
function SectionHeading({
|
|
4252
4297
|
eyebrow,
|
|
@@ -4256,17 +4301,17 @@ function SectionHeading({
|
|
|
4256
4301
|
as: Heading = "h2",
|
|
4257
4302
|
className
|
|
4258
4303
|
}) {
|
|
4259
|
-
return /* @__PURE__ */ (0,
|
|
4260
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
4261
|
-
/* @__PURE__ */ (0,
|
|
4262
|
-
intro ? /* @__PURE__ */ (0,
|
|
4304
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
|
|
4305
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Chip, { children: eyebrow }) : null,
|
|
4306
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
|
|
4307
|
+
intro ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
|
|
4263
4308
|
] });
|
|
4264
4309
|
}
|
|
4265
4310
|
function SiteHeader({ brand, nav, actions, className }) {
|
|
4266
|
-
return /* @__PURE__ */ (0,
|
|
4267
|
-
/* @__PURE__ */ (0,
|
|
4268
|
-
nav ? /* @__PURE__ */ (0,
|
|
4269
|
-
actions ? /* @__PURE__ */ (0,
|
|
4311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("header", { className: cx("ow-site-header", className), children: [
|
|
4312
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-site-header__brand", children: brand }),
|
|
4313
|
+
nav ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
|
|
4314
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
|
|
4270
4315
|
] });
|
|
4271
4316
|
}
|
|
4272
4317
|
function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
|
|
@@ -4279,7 +4324,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4279
4324
|
element.style.setProperty("--ow-pointer-x", `${event.clientX - rect.left}px`);
|
|
4280
4325
|
element.style.setProperty("--ow-pointer-y", `${event.clientY - rect.top}px`);
|
|
4281
4326
|
}
|
|
4282
|
-
return /* @__PURE__ */ (0,
|
|
4327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
4283
4328
|
"div",
|
|
4284
4329
|
{
|
|
4285
4330
|
ref,
|
|
@@ -4287,9 +4332,9 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4287
4332
|
onPointerMove: track,
|
|
4288
4333
|
...props,
|
|
4289
4334
|
children: [
|
|
4290
|
-
/* @__PURE__ */ (0,
|
|
4291
|
-
interactive ? /* @__PURE__ */ (0,
|
|
4292
|
-
/* @__PURE__ */ (0,
|
|
4335
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
|
|
4336
|
+
interactive ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
|
|
4337
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-dot-grid__content", children })
|
|
4293
4338
|
]
|
|
4294
4339
|
}
|
|
4295
4340
|
);
|
|
@@ -4298,7 +4343,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
|
|
|
4298
4343
|
// src/components/ColorPicker/ColorPicker.tsx
|
|
4299
4344
|
var import_react47 = require("react");
|
|
4300
4345
|
var import_react_colorful = require("react-colorful");
|
|
4301
|
-
var
|
|
4346
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
4302
4347
|
var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
|
|
4303
4348
|
var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
|
|
4304
4349
|
var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
|
|
@@ -4333,13 +4378,13 @@ function ColorPicker({
|
|
|
4333
4378
|
} catch {
|
|
4334
4379
|
}
|
|
4335
4380
|
}
|
|
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,
|
|
4381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
|
|
4382
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Picker, { color, onChange: change }),
|
|
4383
|
+
showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-color-picker__row", children: [
|
|
4384
|
+
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,
|
|
4385
|
+
showInput ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
|
|
4386
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
|
|
4387
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4343
4388
|
import_react_colorful.HexColorInput,
|
|
4344
4389
|
{
|
|
4345
4390
|
className: "ow-input-group__input",
|
|
@@ -4351,11 +4396,11 @@ function ColorPicker({
|
|
|
4351
4396
|
}
|
|
4352
4397
|
)
|
|
4353
4398
|
] }) : null,
|
|
4354
|
-
/* @__PURE__ */ (0,
|
|
4399
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
|
|
4355
4400
|
] }) : null,
|
|
4356
|
-
swatches?.length ? /* @__PURE__ */ (0,
|
|
4401
|
+
swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
|
|
4357
4402
|
const swatchValue = swatchColor(swatch);
|
|
4358
|
-
return /* @__PURE__ */ (0,
|
|
4403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4359
4404
|
"button",
|
|
4360
4405
|
{
|
|
4361
4406
|
type: "button",
|
|
@@ -4407,8 +4452,8 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
|
|
|
4407
4452
|
const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
|
|
4408
4453
|
return () => cancelAnimationFrame(frame);
|
|
4409
4454
|
}, [isOpen]);
|
|
4410
|
-
return /* @__PURE__ */ (0,
|
|
4411
|
-
/* @__PURE__ */ (0,
|
|
4455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
4456
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
4412
4457
|
"button",
|
|
4413
4458
|
{
|
|
4414
4459
|
ref: (element) => {
|
|
@@ -4440,13 +4485,13 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
|
|
|
4440
4485
|
}
|
|
4441
4486
|
},
|
|
4442
4487
|
children: [
|
|
4443
|
-
/* @__PURE__ */ (0,
|
|
4444
|
-
/* @__PURE__ */ (0,
|
|
4445
|
-
/* @__PURE__ */ (0,
|
|
4488
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
|
|
4489
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
|
|
4490
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
|
|
4446
4491
|
]
|
|
4447
4492
|
}
|
|
4448
4493
|
),
|
|
4449
|
-
mounted ? /* @__PURE__ */ (0,
|
|
4494
|
+
mounted ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
4450
4495
|
"div",
|
|
4451
4496
|
{
|
|
4452
4497
|
ref: panelRef,
|
|
@@ -4460,7 +4505,7 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
|
|
|
4460
4505
|
onKeyDown: (event) => {
|
|
4461
4506
|
if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
|
|
4462
4507
|
},
|
|
4463
|
-
children: /* @__PURE__ */ (0,
|
|
4508
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
|
|
4464
4509
|
}
|
|
4465
4510
|
) : null
|
|
4466
4511
|
] });
|