@mirror-physics/fractal-ui 0.2.0-next.40 → 0.2.0-next.42
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/dist/index.cjs +357 -263
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +85 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +9 -2
- package/dist/index.d.ts +9 -2
- package/dist/index.js +348 -255
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -333,11 +333,91 @@ var Input = React4.forwardRef(
|
|
|
333
333
|
);
|
|
334
334
|
Input.displayName = "Input";
|
|
335
335
|
|
|
336
|
-
// src/components/
|
|
336
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
337
337
|
import * as React5 from "react";
|
|
338
|
-
import {
|
|
339
|
-
|
|
340
|
-
|
|
338
|
+
import { Minus, Plus } from "@mirror-physics/fractal-icons";
|
|
339
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
340
|
+
function NumberInput({
|
|
341
|
+
unit,
|
|
342
|
+
className,
|
|
343
|
+
value,
|
|
344
|
+
defaultValue,
|
|
345
|
+
disabled,
|
|
346
|
+
readOnly,
|
|
347
|
+
min,
|
|
348
|
+
max,
|
|
349
|
+
...props
|
|
350
|
+
}) {
|
|
351
|
+
const inputRef = React5.useRef(null);
|
|
352
|
+
const numericValue = Number(value ?? defaultValue);
|
|
353
|
+
const characterCount = Math.max(String(value ?? defaultValue ?? "").length, 1);
|
|
354
|
+
const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : "value";
|
|
355
|
+
const decrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && min !== void 0 && numericValue <= Number(min);
|
|
356
|
+
const incrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && max !== void 0 && numericValue >= Number(max);
|
|
357
|
+
const changeByStep = (direction) => {
|
|
358
|
+
const input = inputRef.current;
|
|
359
|
+
if (!input) return;
|
|
360
|
+
if (direction === -1) input.stepDown();
|
|
361
|
+
else input.stepUp();
|
|
362
|
+
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
363
|
+
input.focus();
|
|
364
|
+
};
|
|
365
|
+
return /* @__PURE__ */ jsxs5("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
366
|
+
/* @__PURE__ */ jsx5(
|
|
367
|
+
Input,
|
|
368
|
+
{
|
|
369
|
+
ref: inputRef,
|
|
370
|
+
type: "number",
|
|
371
|
+
value,
|
|
372
|
+
defaultValue,
|
|
373
|
+
disabled,
|
|
374
|
+
readOnly,
|
|
375
|
+
min,
|
|
376
|
+
max,
|
|
377
|
+
...props
|
|
378
|
+
}
|
|
379
|
+
),
|
|
380
|
+
unit && /* @__PURE__ */ jsx5(
|
|
381
|
+
"span",
|
|
382
|
+
{
|
|
383
|
+
className: "fractal-number-input-unit",
|
|
384
|
+
style: { left: `calc(var(--space-3, 12px) + ${characterCount}ch)` },
|
|
385
|
+
"aria-hidden": "true",
|
|
386
|
+
children: unit
|
|
387
|
+
}
|
|
388
|
+
),
|
|
389
|
+
/* @__PURE__ */ jsxs5("div", { className: "fractal-number-input-controls", children: [
|
|
390
|
+
/* @__PURE__ */ jsx5(
|
|
391
|
+
"button",
|
|
392
|
+
{
|
|
393
|
+
type: "button",
|
|
394
|
+
className: "fractal-number-input-step",
|
|
395
|
+
"aria-label": `Decrease ${controlLabel}`,
|
|
396
|
+
disabled: decrementDisabled,
|
|
397
|
+
onClick: () => changeByStep(-1),
|
|
398
|
+
children: /* @__PURE__ */ jsx5(Minus, { "aria-hidden": "true", size: 16 })
|
|
399
|
+
}
|
|
400
|
+
),
|
|
401
|
+
/* @__PURE__ */ jsx5(
|
|
402
|
+
"button",
|
|
403
|
+
{
|
|
404
|
+
type: "button",
|
|
405
|
+
className: "fractal-number-input-step",
|
|
406
|
+
"aria-label": `Increase ${controlLabel}`,
|
|
407
|
+
disabled: incrementDisabled,
|
|
408
|
+
onClick: () => changeByStep(1),
|
|
409
|
+
children: /* @__PURE__ */ jsx5(Plus, { "aria-hidden": "true", size: 16 })
|
|
410
|
+
}
|
|
411
|
+
)
|
|
412
|
+
] })
|
|
413
|
+
] });
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
// src/components/Label/Label.tsx
|
|
417
|
+
import * as React6 from "react";
|
|
418
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
419
|
+
var Label = React6.forwardRef(
|
|
420
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
|
|
341
421
|
"label",
|
|
342
422
|
{
|
|
343
423
|
ref,
|
|
@@ -349,9 +429,9 @@ var Label = React5.forwardRef(
|
|
|
349
429
|
Label.displayName = "Label";
|
|
350
430
|
|
|
351
431
|
// src/components/Alert/Alert.tsx
|
|
352
|
-
import * as
|
|
432
|
+
import * as React7 from "react";
|
|
353
433
|
import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
|
|
354
|
-
import { jsx as
|
|
434
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
355
435
|
var defaultIcons = {
|
|
356
436
|
default: CircleInfo,
|
|
357
437
|
info: CircleInfo,
|
|
@@ -359,10 +439,10 @@ var defaultIcons = {
|
|
|
359
439
|
warning: Warning,
|
|
360
440
|
error: CircleClose
|
|
361
441
|
};
|
|
362
|
-
var Alert =
|
|
442
|
+
var Alert = React7.forwardRef(
|
|
363
443
|
({ className, variant = "default", icon, children, ...props }, ref) => {
|
|
364
444
|
const DefaultIcon = defaultIcons[variant];
|
|
365
|
-
return /* @__PURE__ */
|
|
445
|
+
return /* @__PURE__ */ jsxs6(
|
|
366
446
|
"div",
|
|
367
447
|
{
|
|
368
448
|
ref,
|
|
@@ -370,27 +450,27 @@ var Alert = React6.forwardRef(
|
|
|
370
450
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
371
451
|
...props,
|
|
372
452
|
children: [
|
|
373
|
-
/* @__PURE__ */
|
|
374
|
-
/* @__PURE__ */
|
|
453
|
+
/* @__PURE__ */ jsx7("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx7(DefaultIcon, { size: 18 }) }),
|
|
454
|
+
/* @__PURE__ */ jsx7("div", { className: "fractal-alert-content", children })
|
|
375
455
|
]
|
|
376
456
|
}
|
|
377
457
|
);
|
|
378
458
|
}
|
|
379
459
|
);
|
|
380
460
|
Alert.displayName = "Alert";
|
|
381
|
-
var AlertTitle =
|
|
382
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
461
|
+
var AlertTitle = React7.forwardRef(
|
|
462
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx7("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
383
463
|
);
|
|
384
464
|
AlertTitle.displayName = "AlertTitle";
|
|
385
|
-
var AlertDescription =
|
|
386
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
465
|
+
var AlertDescription = React7.forwardRef(
|
|
466
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx7("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
387
467
|
);
|
|
388
468
|
AlertDescription.displayName = "AlertDescription";
|
|
389
469
|
|
|
390
470
|
// src/components/Toggle/Toggle.tsx
|
|
391
|
-
import { jsx as
|
|
471
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
392
472
|
function Toggle({ checked, onChange, label, className }) {
|
|
393
|
-
return /* @__PURE__ */
|
|
473
|
+
return /* @__PURE__ */ jsxs7(
|
|
394
474
|
"button",
|
|
395
475
|
{
|
|
396
476
|
type: "button",
|
|
@@ -399,8 +479,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
399
479
|
className: cn("fractal-toggle", className),
|
|
400
480
|
onClick: () => onChange(!checked),
|
|
401
481
|
children: [
|
|
402
|
-
/* @__PURE__ */
|
|
403
|
-
label && /* @__PURE__ */
|
|
482
|
+
/* @__PURE__ */ jsx8("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx8("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
483
|
+
label && /* @__PURE__ */ jsx8("span", { className: "fractal-toggle-label", children: label })
|
|
404
484
|
]
|
|
405
485
|
}
|
|
406
486
|
);
|
|
@@ -410,7 +490,7 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
410
490
|
import { createPortal } from "react-dom";
|
|
411
491
|
|
|
412
492
|
// src/hooks/useEscapeDismiss.ts
|
|
413
|
-
import { useEffect, useRef } from "react";
|
|
493
|
+
import { useEffect, useRef as useRef2 } from "react";
|
|
414
494
|
var nextId = 0;
|
|
415
495
|
var stack = [];
|
|
416
496
|
function insertSorted(entry) {
|
|
@@ -443,7 +523,7 @@ function ensureGlobalListener() {
|
|
|
443
523
|
);
|
|
444
524
|
}
|
|
445
525
|
function useEscapeDismiss(priority, handler, enabled = true) {
|
|
446
|
-
const handlerRef =
|
|
526
|
+
const handlerRef = useRef2(handler);
|
|
447
527
|
handlerRef.current = handler;
|
|
448
528
|
useEffect(() => {
|
|
449
529
|
if (!enabled) return;
|
|
@@ -461,7 +541,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
461
541
|
|
|
462
542
|
// src/components/UILoader/UILoader.tsx
|
|
463
543
|
import { useId } from "react";
|
|
464
|
-
import { jsx as
|
|
544
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
465
545
|
var LEFT = "M0 53C0 51 1.6 49.5 3.6 49.5h16.5c1 0 1.9.4 2.5 1L42.1 69.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H23.1c-1 0-1.9-.4-2.5-1L1.1 71.7C.4 71 0 70.1 0 69.2V53Z";
|
|
466
546
|
var CENTER = "M0 3.5C0 1.6 1.6 0 3.6 0h16.5c1 0 1.9.4 2.5 1L92.5 69.6c.7.7 1 1.6 1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H73.4c-1 0-1.9-.4-2.5-1L1.1 22.2C.4 21.6 0 20.7 0 19.7V3.5Z";
|
|
467
547
|
var RIGHT = "M50.4 3.5C50.4 1.6 52 0 54 0h16.5c1 0 1.9.4 2.5 1l69.8 68.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5h-16.5c-1 0-1.9-.4-2.5-1L51.4 22.2c-.7-.6-1-1.5-1-2.5V3.5Z";
|
|
@@ -470,7 +550,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
470
550
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
471
551
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
472
552
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
473
|
-
return /* @__PURE__ */
|
|
553
|
+
return /* @__PURE__ */ jsx9(
|
|
474
554
|
"span",
|
|
475
555
|
{
|
|
476
556
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -478,53 +558,65 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
478
558
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
479
559
|
role: ariaHidden ? void 0 : "status",
|
|
480
560
|
style,
|
|
481
|
-
children: /* @__PURE__ */
|
|
482
|
-
/* @__PURE__ */
|
|
483
|
-
/* @__PURE__ */
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
/* @__PURE__ */
|
|
561
|
+
children: /* @__PURE__ */ jsxs8("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
562
|
+
/* @__PURE__ */ jsxs8("defs", { children: [
|
|
563
|
+
/* @__PURE__ */ jsxs8("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
564
|
+
/* @__PURE__ */ jsx9("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
565
|
+
/* @__PURE__ */ jsx9("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
486
566
|
] }),
|
|
487
|
-
/* @__PURE__ */
|
|
488
|
-
/* @__PURE__ */
|
|
489
|
-
/* @__PURE__ */
|
|
490
|
-
/* @__PURE__ */
|
|
567
|
+
/* @__PURE__ */ jsxs8("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
568
|
+
/* @__PURE__ */ jsx9("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
569
|
+
/* @__PURE__ */ jsx9("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
570
|
+
/* @__PURE__ */ jsx9("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
491
571
|
] }),
|
|
492
|
-
/* @__PURE__ */
|
|
493
|
-
/* @__PURE__ */
|
|
494
|
-
/* @__PURE__ */
|
|
495
|
-
/* @__PURE__ */
|
|
572
|
+
/* @__PURE__ */ jsxs8("clipPath", { id: clipId, children: [
|
|
573
|
+
/* @__PURE__ */ jsx9("path", { d: LEFT }),
|
|
574
|
+
/* @__PURE__ */ jsx9("path", { d: CENTER }),
|
|
575
|
+
/* @__PURE__ */ jsx9("path", { d: RIGHT })
|
|
496
576
|
] })
|
|
497
577
|
] }),
|
|
498
|
-
/* @__PURE__ */
|
|
499
|
-
/* @__PURE__ */
|
|
500
|
-
/* @__PURE__ */
|
|
501
|
-
/* @__PURE__ */
|
|
578
|
+
/* @__PURE__ */ jsx9("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
579
|
+
/* @__PURE__ */ jsx9("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
580
|
+
/* @__PURE__ */ jsx9("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
581
|
+
/* @__PURE__ */ jsx9("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx9("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx9("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
502
582
|
] })
|
|
503
583
|
}
|
|
504
584
|
);
|
|
505
585
|
}
|
|
506
586
|
|
|
507
587
|
// src/components/Modal/Modal.tsx
|
|
508
|
-
import { jsx as
|
|
509
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
510
|
-
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", className }) {
|
|
588
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
589
|
+
var CloseIcon = () => /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
590
|
+
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
511
591
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
512
592
|
if (!open) return null;
|
|
513
593
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
514
594
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
515
595
|
return createPortal(
|
|
516
|
-
/* @__PURE__ */
|
|
596
|
+
/* @__PURE__ */ jsx10("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs9(
|
|
517
597
|
"div",
|
|
518
598
|
{
|
|
519
|
-
className: cn("fractal-modal-panel", sizeClass, accentClass, className),
|
|
599
|
+
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
520
600
|
onClick: (e) => e.stopPropagation(),
|
|
521
601
|
children: [
|
|
522
|
-
/* @__PURE__ */
|
|
523
|
-
/* @__PURE__ */
|
|
524
|
-
!noClose && /* @__PURE__ */
|
|
602
|
+
/* @__PURE__ */ jsxs9("div", { className: "fractal-modal-title-row", children: [
|
|
603
|
+
/* @__PURE__ */ jsx10("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
604
|
+
!noClose && /* @__PURE__ */ jsx10("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx10(CloseIcon, {}) })
|
|
525
605
|
] }),
|
|
526
|
-
/* @__PURE__ */
|
|
527
|
-
|
|
606
|
+
/* @__PURE__ */ jsx10(
|
|
607
|
+
"div",
|
|
608
|
+
{
|
|
609
|
+
"aria-busy": loading || void 0,
|
|
610
|
+
className: cn(
|
|
611
|
+
"fractal-modal-body",
|
|
612
|
+
size === "lg" && "fractal-modal-body--lg",
|
|
613
|
+
loading && "fractal-modal-body--loading",
|
|
614
|
+
scrollable && "fractal-modal-body--scrollable"
|
|
615
|
+
),
|
|
616
|
+
children: loading ? /* @__PURE__ */ jsx10(UILoader, { label: loadingLabel }) : children
|
|
617
|
+
}
|
|
618
|
+
),
|
|
619
|
+
footer && /* @__PURE__ */ jsx10("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
528
620
|
]
|
|
529
621
|
}
|
|
530
622
|
) }),
|
|
@@ -533,17 +625,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
533
625
|
}
|
|
534
626
|
|
|
535
627
|
// src/components/DataTable/DataTable.tsx
|
|
536
|
-
import { jsx as
|
|
628
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
537
629
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
|
|
538
|
-
return /* @__PURE__ */
|
|
539
|
-
header && /* @__PURE__ */
|
|
540
|
-
data.length === 0 ? /* @__PURE__ */
|
|
541
|
-
/* @__PURE__ */
|
|
542
|
-
/* @__PURE__ */
|
|
630
|
+
return /* @__PURE__ */ jsx11("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs10("div", { className: "fractal-datatable-surface", children: [
|
|
631
|
+
header && /* @__PURE__ */ jsx11("div", { className: "fractal-datatable-header", children: header }),
|
|
632
|
+
data.length === 0 ? /* @__PURE__ */ jsx11("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs10("table", { className: "fractal-datatable-table", children: [
|
|
633
|
+
/* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsx11("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx11("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
|
|
634
|
+
/* @__PURE__ */ jsx11("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx11(
|
|
543
635
|
"tr",
|
|
544
636
|
{
|
|
545
637
|
className: "fractal-datatable-row",
|
|
546
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
638
|
+
children: columns.map((col) => /* @__PURE__ */ jsx11("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
|
|
547
639
|
},
|
|
548
640
|
rowIndex
|
|
549
641
|
)) })
|
|
@@ -552,9 +644,9 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
|
|
|
552
644
|
}
|
|
553
645
|
|
|
554
646
|
// src/components/Dropdown/Dropdown.tsx
|
|
555
|
-
import * as
|
|
647
|
+
import * as React8 from "react";
|
|
556
648
|
import { ChevronDown, ChevronUp } from "@mirror-physics/fractal-icons";
|
|
557
|
-
import { Fragment as Fragment2, jsx as
|
|
649
|
+
import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
558
650
|
var MARGIN = 4;
|
|
559
651
|
function Dropdown({
|
|
560
652
|
items,
|
|
@@ -575,10 +667,10 @@ function Dropdown({
|
|
|
575
667
|
closeOnSelect = true,
|
|
576
668
|
disabled = false
|
|
577
669
|
}) {
|
|
578
|
-
const [open, setOpen] =
|
|
579
|
-
const triggerRef =
|
|
580
|
-
const panelRef =
|
|
581
|
-
const [panelStyle, setPanelStyle] =
|
|
670
|
+
const [open, setOpen] = React8.useState(false);
|
|
671
|
+
const triggerRef = React8.useRef(null);
|
|
672
|
+
const panelRef = React8.useRef(null);
|
|
673
|
+
const [panelStyle, setPanelStyle] = React8.useState({});
|
|
582
674
|
const visibleItems = items.filter(
|
|
583
675
|
(item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
|
|
584
676
|
);
|
|
@@ -587,7 +679,7 @@ function Dropdown({
|
|
|
587
679
|
const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
|
|
588
680
|
const isUp = direction === "up";
|
|
589
681
|
const ChevronIcon = isUp ? ChevronUp : ChevronDown;
|
|
590
|
-
|
|
682
|
+
React8.useLayoutEffect(() => {
|
|
591
683
|
if (!open || !triggerRef.current || !panelRef.current) return;
|
|
592
684
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
593
685
|
const panelRect = panelRef.current.getBoundingClientRect();
|
|
@@ -621,7 +713,7 @@ function Dropdown({
|
|
|
621
713
|
}
|
|
622
714
|
setPanelStyle({ top, left, right });
|
|
623
715
|
}, [open, isUp, align]);
|
|
624
|
-
|
|
716
|
+
React8.useEffect(() => {
|
|
625
717
|
if (!open) return;
|
|
626
718
|
const handleClickOutside = (e) => {
|
|
627
719
|
const target = e.target;
|
|
@@ -631,8 +723,8 @@ function Dropdown({
|
|
|
631
723
|
document.addEventListener("mousedown", handleClickOutside);
|
|
632
724
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
633
725
|
}, [open]);
|
|
634
|
-
return /* @__PURE__ */
|
|
635
|
-
/* @__PURE__ */
|
|
726
|
+
return /* @__PURE__ */ jsxs11("div", { className: cn("fractal-dropdown", className), children: [
|
|
727
|
+
/* @__PURE__ */ jsxs11(
|
|
636
728
|
"button",
|
|
637
729
|
{
|
|
638
730
|
ref: triggerRef,
|
|
@@ -650,15 +742,15 @@ function Dropdown({
|
|
|
650
742
|
triggerClassName
|
|
651
743
|
),
|
|
652
744
|
children: [
|
|
653
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */
|
|
654
|
-
selected.icon != null && /* @__PURE__ */
|
|
655
|
-
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */
|
|
745
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs11(Fragment2, { children: [
|
|
746
|
+
selected.icon != null && /* @__PURE__ */ jsx12("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
|
|
747
|
+
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx12("span", { className: "fractal-dropdown-selected-text", children: selected.description })
|
|
656
748
|
] }),
|
|
657
|
-
!noChevron && !iconOnly && /* @__PURE__ */
|
|
749
|
+
!noChevron && !iconOnly && /* @__PURE__ */ jsx12("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx12(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
658
750
|
]
|
|
659
751
|
}
|
|
660
752
|
),
|
|
661
|
-
open && /* @__PURE__ */
|
|
753
|
+
open && /* @__PURE__ */ jsxs11(
|
|
662
754
|
"div",
|
|
663
755
|
{
|
|
664
756
|
ref: panelRef,
|
|
@@ -667,21 +759,21 @@ function Dropdown({
|
|
|
667
759
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
668
760
|
style: panelStyle,
|
|
669
761
|
children: [
|
|
670
|
-
label != null && /* @__PURE__ */
|
|
762
|
+
label != null && /* @__PURE__ */ jsx12("div", { className: "fractal-dropdown-label", children: label }),
|
|
671
763
|
visibleItems.map((item, index) => {
|
|
672
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */
|
|
673
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */
|
|
764
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ jsx12("div", { className: "fractal-dropdown-separator" }) : null;
|
|
765
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx12("div", { className: "fractal-dropdown-separator" }) : null;
|
|
674
766
|
if (item.kind === "header") {
|
|
675
|
-
return /* @__PURE__ */
|
|
767
|
+
return /* @__PURE__ */ jsxs11(React8.Fragment, { children: [
|
|
676
768
|
topDivider,
|
|
677
|
-
/* @__PURE__ */
|
|
769
|
+
/* @__PURE__ */ jsx12("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
678
770
|
bottomDivider
|
|
679
771
|
] }, `header-${index}`);
|
|
680
772
|
}
|
|
681
773
|
const isSelected = item.value === selectedValue;
|
|
682
|
-
return /* @__PURE__ */
|
|
774
|
+
return /* @__PURE__ */ jsxs11(React8.Fragment, { children: [
|
|
683
775
|
topDivider,
|
|
684
|
-
/* @__PURE__ */
|
|
776
|
+
/* @__PURE__ */ jsxs11(
|
|
685
777
|
"button",
|
|
686
778
|
{
|
|
687
779
|
type: "button",
|
|
@@ -693,9 +785,9 @@ function Dropdown({
|
|
|
693
785
|
},
|
|
694
786
|
className: "fractal-dropdown-option",
|
|
695
787
|
children: [
|
|
696
|
-
item.icon != null && /* @__PURE__ */
|
|
697
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */
|
|
698
|
-
item.trailing != null && /* @__PURE__ */
|
|
788
|
+
item.icon != null && /* @__PURE__ */ jsx12("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
789
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx12("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
790
|
+
item.trailing != null && /* @__PURE__ */ jsx12("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
699
791
|
]
|
|
700
792
|
}
|
|
701
793
|
),
|
|
@@ -709,10 +801,10 @@ function Dropdown({
|
|
|
709
801
|
}
|
|
710
802
|
|
|
711
803
|
// src/components/Link/Link.tsx
|
|
712
|
-
import * as
|
|
713
|
-
import { jsx as
|
|
714
|
-
var Link =
|
|
715
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */
|
|
804
|
+
import * as React9 from "react";
|
|
805
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
806
|
+
var Link = React9.forwardRef(
|
|
807
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx13(
|
|
716
808
|
"a",
|
|
717
809
|
{
|
|
718
810
|
ref,
|
|
@@ -724,10 +816,10 @@ var Link = React8.forwardRef(
|
|
|
724
816
|
Link.displayName = "Link";
|
|
725
817
|
|
|
726
818
|
// src/components/Chip/Chip.tsx
|
|
727
|
-
import * as
|
|
728
|
-
import { jsx as
|
|
729
|
-
var Chip =
|
|
730
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */
|
|
819
|
+
import * as React10 from "react";
|
|
820
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
821
|
+
var Chip = React10.forwardRef(
|
|
822
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx14(
|
|
731
823
|
"span",
|
|
732
824
|
{
|
|
733
825
|
ref,
|
|
@@ -740,9 +832,9 @@ Chip.displayName = "Chip";
|
|
|
740
832
|
|
|
741
833
|
// src/components/Checkbox/Checkbox.tsx
|
|
742
834
|
import { Checkbox as CheckboxIcon, CheckboxChecked } from "@mirror-physics/fractal-icons";
|
|
743
|
-
import { jsx as
|
|
835
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
744
836
|
function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }) {
|
|
745
|
-
return /* @__PURE__ */
|
|
837
|
+
return /* @__PURE__ */ jsx15(
|
|
746
838
|
"button",
|
|
747
839
|
{
|
|
748
840
|
...props,
|
|
@@ -759,7 +851,7 @@ function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKe
|
|
|
759
851
|
onKeyDown?.(event);
|
|
760
852
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
761
853
|
},
|
|
762
|
-
children: checked ? /* @__PURE__ */
|
|
854
|
+
children: checked ? /* @__PURE__ */ jsx15(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx15(CheckboxIcon, { "aria-hidden": "true", size: 18 })
|
|
763
855
|
}
|
|
764
856
|
);
|
|
765
857
|
}
|
|
@@ -767,7 +859,7 @@ function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKe
|
|
|
767
859
|
// src/components/SortableTable/SortableTable.tsx
|
|
768
860
|
import { useMemo, useState as useState3 } from "react";
|
|
769
861
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
770
|
-
import { jsx as
|
|
862
|
+
import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
771
863
|
function SortableTable({
|
|
772
864
|
columns,
|
|
773
865
|
data,
|
|
@@ -843,13 +935,13 @@ function SortableTable({
|
|
|
843
935
|
onSortChange?.(nextKey, nextDirection);
|
|
844
936
|
}
|
|
845
937
|
};
|
|
846
|
-
return /* @__PURE__ */
|
|
847
|
-
header && /* @__PURE__ */
|
|
848
|
-
sorted.length === 0 ? /* @__PURE__ */
|
|
849
|
-
/* @__PURE__ */
|
|
938
|
+
return /* @__PURE__ */ jsx16("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs12("div", { className: "fractal-sortable-table-surface", children: [
|
|
939
|
+
header && /* @__PURE__ */ jsx16("div", { className: "fractal-sortable-table-header", children: header }),
|
|
940
|
+
sorted.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs12("table", { className: "fractal-sortable-table-table", children: [
|
|
941
|
+
/* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsx16("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
|
|
850
942
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
851
943
|
if (!col.sortable) {
|
|
852
|
-
return /* @__PURE__ */
|
|
944
|
+
return /* @__PURE__ */ jsx16(
|
|
853
945
|
"th",
|
|
854
946
|
{
|
|
855
947
|
className: "fractal-sortable-table-th",
|
|
@@ -859,12 +951,12 @@ function SortableTable({
|
|
|
859
951
|
col.key
|
|
860
952
|
);
|
|
861
953
|
}
|
|
862
|
-
return /* @__PURE__ */
|
|
954
|
+
return /* @__PURE__ */ jsx16(
|
|
863
955
|
"th",
|
|
864
956
|
{
|
|
865
957
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
866
958
|
style: { width: col.width },
|
|
867
|
-
children: /* @__PURE__ */
|
|
959
|
+
children: /* @__PURE__ */ jsxs12(
|
|
868
960
|
"button",
|
|
869
961
|
{
|
|
870
962
|
type: "button",
|
|
@@ -875,8 +967,8 @@ function SortableTable({
|
|
|
875
967
|
onClick: () => handleSortClick(col.key),
|
|
876
968
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
877
969
|
children: [
|
|
878
|
-
/* @__PURE__ */
|
|
879
|
-
/* @__PURE__ */
|
|
970
|
+
/* @__PURE__ */ jsx16("span", { children: col.header }),
|
|
971
|
+
/* @__PURE__ */ jsx16("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx16(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx16(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx16(ArrowsUpDown, { size: 14 }) })
|
|
880
972
|
]
|
|
881
973
|
}
|
|
882
974
|
)
|
|
@@ -884,13 +976,13 @@ function SortableTable({
|
|
|
884
976
|
col.key
|
|
885
977
|
);
|
|
886
978
|
}) }) }),
|
|
887
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ jsx16("tbody", { children: sorted.map((row, rowIndex) => {
|
|
888
980
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
889
981
|
const action = rowAction ? {
|
|
890
982
|
label: rowAction.label(row, rowIndex),
|
|
891
983
|
icon: rowAction.icon(row, rowIndex)
|
|
892
984
|
} : null;
|
|
893
|
-
return /* @__PURE__ */
|
|
985
|
+
return /* @__PURE__ */ jsx16(
|
|
894
986
|
"tr",
|
|
895
987
|
{
|
|
896
988
|
className: cn(
|
|
@@ -908,7 +1000,7 @@ function SortableTable({
|
|
|
908
1000
|
"aria-label": action?.label,
|
|
909
1001
|
role: onRowClick ? "button" : void 0,
|
|
910
1002
|
tabIndex: onRowClick ? 0 : void 0,
|
|
911
|
-
children: columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1003
|
+
children: columns.map((col, columnIndex) => /* @__PURE__ */ jsxs12(
|
|
912
1004
|
"td",
|
|
913
1005
|
{
|
|
914
1006
|
className: cn(
|
|
@@ -918,7 +1010,7 @@ function SortableTable({
|
|
|
918
1010
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
919
1011
|
children: [
|
|
920
1012
|
col.render(row, rowIndex),
|
|
921
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
1013
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx16("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
922
1014
|
]
|
|
923
1015
|
},
|
|
924
1016
|
col.key
|
|
@@ -932,8 +1024,8 @@ function SortableTable({
|
|
|
932
1024
|
}
|
|
933
1025
|
|
|
934
1026
|
// src/components/Tabs/Tabs.tsx
|
|
935
|
-
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as
|
|
936
|
-
import { jsx as
|
|
1027
|
+
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState4 } from "react";
|
|
1028
|
+
import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
937
1029
|
function Tabs({
|
|
938
1030
|
items,
|
|
939
1031
|
defaultValue,
|
|
@@ -950,8 +1042,8 @@ function Tabs({
|
|
|
950
1042
|
);
|
|
951
1043
|
const isControlled = controlledValue !== void 0;
|
|
952
1044
|
const activeId = isControlled ? controlledValue : internalValue;
|
|
953
|
-
const tabListRef =
|
|
954
|
-
const tabRefs =
|
|
1045
|
+
const tabListRef = useRef4(null);
|
|
1046
|
+
const tabRefs = useRef4({});
|
|
955
1047
|
const [indicator, setIndicator] = useState4(null);
|
|
956
1048
|
useLayoutEffect2(() => {
|
|
957
1049
|
const updateIndicator = () => {
|
|
@@ -1004,8 +1096,8 @@ function Tabs({
|
|
|
1004
1096
|
selectTab(nextId2);
|
|
1005
1097
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1006
1098
|
};
|
|
1007
|
-
return /* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
1099
|
+
return /* @__PURE__ */ jsxs13("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1100
|
+
/* @__PURE__ */ jsx17(
|
|
1009
1101
|
"div",
|
|
1010
1102
|
{
|
|
1011
1103
|
ref: tabListRef,
|
|
@@ -1018,7 +1110,7 @@ function Tabs({
|
|
|
1018
1110
|
const isActive = item.id === activeId;
|
|
1019
1111
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1020
1112
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1021
|
-
return /* @__PURE__ */
|
|
1113
|
+
return /* @__PURE__ */ jsx17(
|
|
1022
1114
|
"button",
|
|
1023
1115
|
{
|
|
1024
1116
|
ref: (el) => {
|
|
@@ -1049,7 +1141,7 @@ function Tabs({
|
|
|
1049
1141
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1050
1142
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1051
1143
|
const isActive = item.id === activeId;
|
|
1052
|
-
return /* @__PURE__ */
|
|
1144
|
+
return /* @__PURE__ */ jsx17(
|
|
1053
1145
|
"div",
|
|
1054
1146
|
{
|
|
1055
1147
|
id: panelId,
|
|
@@ -1066,14 +1158,14 @@ function Tabs({
|
|
|
1066
1158
|
}
|
|
1067
1159
|
|
|
1068
1160
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1069
|
-
import * as
|
|
1070
|
-
import { jsx as
|
|
1161
|
+
import * as React11 from "react";
|
|
1162
|
+
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1071
1163
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1072
|
-
const switcherRef =
|
|
1073
|
-
const buttonRefs =
|
|
1074
|
-
const indicatorMotionReadyRef =
|
|
1164
|
+
const switcherRef = React11.useRef(null);
|
|
1165
|
+
const buttonRefs = React11.useRef([]);
|
|
1166
|
+
const indicatorMotionReadyRef = React11.useRef(false);
|
|
1075
1167
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1076
|
-
|
|
1168
|
+
React11.useLayoutEffect(() => {
|
|
1077
1169
|
const switcher = switcherRef.current;
|
|
1078
1170
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1079
1171
|
let motionFrame = 0;
|
|
@@ -1125,7 +1217,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1125
1217
|
onValueChange(items[nextIndex].value);
|
|
1126
1218
|
}
|
|
1127
1219
|
};
|
|
1128
|
-
return /* @__PURE__ */
|
|
1220
|
+
return /* @__PURE__ */ jsxs14(
|
|
1129
1221
|
"div",
|
|
1130
1222
|
{
|
|
1131
1223
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1133,10 +1225,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1133
1225
|
"aria-label": ariaLabel,
|
|
1134
1226
|
ref: switcherRef,
|
|
1135
1227
|
children: [
|
|
1136
|
-
/* @__PURE__ */
|
|
1228
|
+
/* @__PURE__ */ jsx18("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1137
1229
|
items.map((item, index) => {
|
|
1138
1230
|
const active = item.value === value;
|
|
1139
|
-
return /* @__PURE__ */
|
|
1231
|
+
return /* @__PURE__ */ jsx18(
|
|
1140
1232
|
"button",
|
|
1141
1233
|
{
|
|
1142
1234
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1170,7 +1262,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1170
1262
|
// src/components/Disclosure/Disclosure.tsx
|
|
1171
1263
|
import { useId as useId3, useState as useState5 } from "react";
|
|
1172
1264
|
import { ChevronRight as ChevronRight2, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
1173
|
-
import { jsx as
|
|
1265
|
+
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1174
1266
|
function Disclosure({
|
|
1175
1267
|
title,
|
|
1176
1268
|
meta,
|
|
@@ -1198,7 +1290,7 @@ function Disclosure({
|
|
|
1198
1290
|
onOpenChange?.(next);
|
|
1199
1291
|
}
|
|
1200
1292
|
};
|
|
1201
|
-
return /* @__PURE__ */
|
|
1293
|
+
return /* @__PURE__ */ jsxs15(
|
|
1202
1294
|
"div",
|
|
1203
1295
|
{
|
|
1204
1296
|
className: cn(
|
|
@@ -1209,7 +1301,7 @@ function Disclosure({
|
|
|
1209
1301
|
className
|
|
1210
1302
|
),
|
|
1211
1303
|
children: [
|
|
1212
|
-
/* @__PURE__ */
|
|
1304
|
+
/* @__PURE__ */ jsxs15(
|
|
1213
1305
|
"button",
|
|
1214
1306
|
{
|
|
1215
1307
|
type: "button",
|
|
@@ -1220,13 +1312,13 @@ function Disclosure({
|
|
|
1220
1312
|
disabled,
|
|
1221
1313
|
onClick: toggle,
|
|
1222
1314
|
children: [
|
|
1223
|
-
/* @__PURE__ */
|
|
1224
|
-
/* @__PURE__ */
|
|
1225
|
-
meta && /* @__PURE__ */
|
|
1315
|
+
/* @__PURE__ */ jsx19("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx19(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx19(ChevronRight2, { size: 16 }) }),
|
|
1316
|
+
/* @__PURE__ */ jsx19("span", { className: "fractal-disclosure-title", children: title }),
|
|
1317
|
+
meta && /* @__PURE__ */ jsx19("span", { className: "fractal-disclosure-meta", children: meta })
|
|
1226
1318
|
]
|
|
1227
1319
|
}
|
|
1228
1320
|
),
|
|
1229
|
-
/* @__PURE__ */
|
|
1321
|
+
/* @__PURE__ */ jsx19(
|
|
1230
1322
|
"div",
|
|
1231
1323
|
{
|
|
1232
1324
|
id: panelId,
|
|
@@ -1234,7 +1326,7 @@ function Disclosure({
|
|
|
1234
1326
|
"aria-labelledby": headerId,
|
|
1235
1327
|
className: "fractal-disclosure-panel",
|
|
1236
1328
|
hidden: !isOpen,
|
|
1237
|
-
children: /* @__PURE__ */
|
|
1329
|
+
children: /* @__PURE__ */ jsx19("div", { className: "fractal-disclosure-panel-inner", children })
|
|
1238
1330
|
}
|
|
1239
1331
|
)
|
|
1240
1332
|
]
|
|
@@ -1243,18 +1335,18 @@ function Disclosure({
|
|
|
1243
1335
|
}
|
|
1244
1336
|
|
|
1245
1337
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
1246
|
-
import { jsx as
|
|
1338
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1247
1339
|
var LATTICE_COUNT = 160;
|
|
1248
1340
|
var WAVE_PERIOD = 80;
|
|
1249
1341
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
1250
|
-
return /* @__PURE__ */
|
|
1342
|
+
return /* @__PURE__ */ jsx20(
|
|
1251
1343
|
"span",
|
|
1252
1344
|
{
|
|
1253
1345
|
"aria-label": label,
|
|
1254
1346
|
className: cn("fractal-lattice-loader", className),
|
|
1255
1347
|
role: "progressbar",
|
|
1256
1348
|
...props,
|
|
1257
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
1349
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx20(
|
|
1258
1350
|
"span",
|
|
1259
1351
|
{
|
|
1260
1352
|
"aria-hidden": "true",
|
|
@@ -1268,10 +1360,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
1268
1360
|
}
|
|
1269
1361
|
|
|
1270
1362
|
// src/components/Ghost/Ghost.tsx
|
|
1271
|
-
import { jsx as
|
|
1363
|
+
import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1272
1364
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1273
1365
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
1274
|
-
return /* @__PURE__ */
|
|
1366
|
+
return /* @__PURE__ */ jsx21(
|
|
1275
1367
|
"div",
|
|
1276
1368
|
{
|
|
1277
1369
|
"aria-hidden": "true",
|
|
@@ -1287,15 +1379,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
1287
1379
|
);
|
|
1288
1380
|
}
|
|
1289
1381
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
1290
|
-
return /* @__PURE__ */
|
|
1382
|
+
return /* @__PURE__ */ jsx21(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
1291
1383
|
}
|
|
1292
1384
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
1293
|
-
return /* @__PURE__ */
|
|
1385
|
+
return /* @__PURE__ */ jsx21(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
1294
1386
|
}
|
|
1295
1387
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
1296
|
-
return /* @__PURE__ */
|
|
1297
|
-
showHeader && /* @__PURE__ */
|
|
1298
|
-
/* @__PURE__ */
|
|
1388
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
1389
|
+
showHeader && /* @__PURE__ */ jsx21(GhostLine, { width: "38%" }),
|
|
1390
|
+
/* @__PURE__ */ jsx21("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx21(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
1299
1391
|
] });
|
|
1300
1392
|
}
|
|
1301
1393
|
function DataTableGhost({
|
|
@@ -1309,109 +1401,109 @@ function DataTableGhost({
|
|
|
1309
1401
|
...props
|
|
1310
1402
|
}) {
|
|
1311
1403
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
1312
|
-
return /* @__PURE__ */
|
|
1313
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
1314
|
-
/* @__PURE__ */
|
|
1404
|
+
return /* @__PURE__ */ jsx21("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs16("table", { className: "fractal-ghost-table__table", children: [
|
|
1405
|
+
(showHeader || headers) && /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsx21("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx21("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx21(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
1406
|
+
/* @__PURE__ */ jsx21("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx21("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx21("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx21(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
1315
1407
|
] }) });
|
|
1316
1408
|
}
|
|
1317
1409
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
1318
|
-
return /* @__PURE__ */
|
|
1410
|
+
return /* @__PURE__ */ jsx21(FormFieldGhost, { className, labelWidth, ...props });
|
|
1319
1411
|
}
|
|
1320
1412
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
1321
|
-
return /* @__PURE__ */
|
|
1413
|
+
return /* @__PURE__ */ jsx21(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
1322
1414
|
}
|
|
1323
1415
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
1324
|
-
return /* @__PURE__ */
|
|
1416
|
+
return /* @__PURE__ */ jsx21(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
1325
1417
|
}
|
|
1326
1418
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
1327
|
-
return /* @__PURE__ */
|
|
1328
|
-
/* @__PURE__ */
|
|
1329
|
-
/* @__PURE__ */
|
|
1419
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
1420
|
+
/* @__PURE__ */ jsx21(LabelGhost, { width: labelWidth }),
|
|
1421
|
+
/* @__PURE__ */ jsx21(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
1330
1422
|
] });
|
|
1331
1423
|
}
|
|
1332
1424
|
function AlertGhost({ className, ...props }) {
|
|
1333
|
-
return /* @__PURE__ */
|
|
1334
|
-
/* @__PURE__ */
|
|
1335
|
-
/* @__PURE__ */
|
|
1425
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
1426
|
+
/* @__PURE__ */ jsx21(GhostLine, { width: "30%" }),
|
|
1427
|
+
/* @__PURE__ */ jsx21(GhostLine, { size: "sm", width: "78%" })
|
|
1336
1428
|
] });
|
|
1337
1429
|
}
|
|
1338
1430
|
function CheckboxGhost({ className, ...props }) {
|
|
1339
|
-
return /* @__PURE__ */
|
|
1340
|
-
/* @__PURE__ */
|
|
1341
|
-
/* @__PURE__ */
|
|
1431
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
1432
|
+
/* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
1433
|
+
/* @__PURE__ */ jsx21(GhostLine, { width: "42%" })
|
|
1342
1434
|
] });
|
|
1343
1435
|
}
|
|
1344
1436
|
var ToggleGhost = CheckboxGhost;
|
|
1345
1437
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
1346
|
-
return /* @__PURE__ */
|
|
1438
|
+
return /* @__PURE__ */ jsx21(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
1347
1439
|
}
|
|
1348
1440
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
1349
|
-
return /* @__PURE__ */
|
|
1441
|
+
return /* @__PURE__ */ jsx21(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
1350
1442
|
}
|
|
1351
1443
|
var TextButtonGhost = LinkGhost;
|
|
1352
1444
|
function DropdownGhost({ className, ...props }) {
|
|
1353
|
-
return /* @__PURE__ */
|
|
1354
|
-
/* @__PURE__ */
|
|
1355
|
-
/* @__PURE__ */
|
|
1445
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
1446
|
+
/* @__PURE__ */ jsx21(GhostLine, { width: "38%" }),
|
|
1447
|
+
/* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
1356
1448
|
] });
|
|
1357
1449
|
}
|
|
1358
1450
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1451
|
+
return /* @__PURE__ */ jsx21("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx21(Ghost, {}, index)) });
|
|
1360
1452
|
}
|
|
1361
1453
|
var TabsGhost = ContentSwitcherGhost;
|
|
1362
1454
|
function DisclosureGhost({ className, ...props }) {
|
|
1363
|
-
return /* @__PURE__ */
|
|
1364
|
-
/* @__PURE__ */
|
|
1365
|
-
/* @__PURE__ */
|
|
1455
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
1456
|
+
/* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
1457
|
+
/* @__PURE__ */ jsx21(GhostLine, { width: "42%" })
|
|
1366
1458
|
] });
|
|
1367
1459
|
}
|
|
1368
1460
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
1369
|
-
return /* @__PURE__ */
|
|
1461
|
+
return /* @__PURE__ */ jsx21("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx21(Ghost, {}, index)) });
|
|
1370
1462
|
}
|
|
1371
1463
|
function FileDropzoneGhost({ className, ...props }) {
|
|
1372
|
-
return /* @__PURE__ */
|
|
1373
|
-
/* @__PURE__ */
|
|
1374
|
-
/* @__PURE__ */
|
|
1375
|
-
/* @__PURE__ */
|
|
1464
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
1465
|
+
/* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
1466
|
+
/* @__PURE__ */ jsx21(GhostLine, { width: "26%" }),
|
|
1467
|
+
/* @__PURE__ */ jsx21(GhostLine, { size: "sm", width: "46%" })
|
|
1376
1468
|
] });
|
|
1377
1469
|
}
|
|
1378
1470
|
function PromptCardGhost({ className, ...props }) {
|
|
1379
|
-
return /* @__PURE__ */
|
|
1471
|
+
return /* @__PURE__ */ jsx21(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
1380
1472
|
}
|
|
1381
1473
|
function SortableTableGhost(props) {
|
|
1382
|
-
return /* @__PURE__ */
|
|
1474
|
+
return /* @__PURE__ */ jsx21(DataTableGhost, { ...props });
|
|
1383
1475
|
}
|
|
1384
1476
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
1385
|
-
return /* @__PURE__ */
|
|
1386
|
-
/* @__PURE__ */
|
|
1387
|
-
/* @__PURE__ */
|
|
1388
|
-
/* @__PURE__ */
|
|
1389
|
-
/* @__PURE__ */
|
|
1477
|
+
return /* @__PURE__ */ jsxs16("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
1478
|
+
/* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
1479
|
+
/* @__PURE__ */ jsx21("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs16("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
1480
|
+
/* @__PURE__ */ jsx21(Ghost, {}),
|
|
1481
|
+
/* @__PURE__ */ jsx21(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
1390
1482
|
] }, index)) })
|
|
1391
1483
|
] });
|
|
1392
1484
|
}
|
|
1393
1485
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
1394
|
-
return /* @__PURE__ */
|
|
1486
|
+
return /* @__PURE__ */ jsx21(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
1395
1487
|
}
|
|
1396
1488
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
1397
|
-
return /* @__PURE__ */
|
|
1489
|
+
return /* @__PURE__ */ jsx21(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
1398
1490
|
}
|
|
1399
1491
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
1400
|
-
return /* @__PURE__ */
|
|
1401
|
-
/* @__PURE__ */
|
|
1402
|
-
/* @__PURE__ */
|
|
1403
|
-
/* @__PURE__ */
|
|
1492
|
+
return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
1493
|
+
/* @__PURE__ */ jsxs16("div", { className: "fractal-ghost-surface__header", children: [
|
|
1494
|
+
/* @__PURE__ */ jsx21(GhostLine, { width: "42%" }),
|
|
1495
|
+
/* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-surface__close" })
|
|
1404
1496
|
] }),
|
|
1405
|
-
title && /* @__PURE__ */
|
|
1406
|
-
/* @__PURE__ */
|
|
1497
|
+
title && /* @__PURE__ */ jsx21("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
1498
|
+
/* @__PURE__ */ jsx21("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx21(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
1407
1499
|
] });
|
|
1408
1500
|
}
|
|
1409
1501
|
|
|
1410
1502
|
// src/components/Sidebar/Sidebar.tsx
|
|
1411
|
-
import * as
|
|
1412
|
-
import { Fragment as Fragment3, jsx as
|
|
1413
|
-
var Sidebar =
|
|
1414
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
1503
|
+
import * as React12 from "react";
|
|
1504
|
+
import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1505
|
+
var Sidebar = React12.forwardRef(
|
|
1506
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
1415
1507
|
"aside",
|
|
1416
1508
|
{
|
|
1417
1509
|
ref,
|
|
@@ -1423,12 +1515,12 @@ var Sidebar = React11.forwardRef(
|
|
|
1423
1515
|
)
|
|
1424
1516
|
);
|
|
1425
1517
|
Sidebar.displayName = "Sidebar";
|
|
1426
|
-
var SidebarHeader =
|
|
1427
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1518
|
+
var SidebarHeader = React12.forwardRef(
|
|
1519
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx22("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
1428
1520
|
);
|
|
1429
1521
|
SidebarHeader.displayName = "SidebarHeader";
|
|
1430
|
-
var SidebarBrand =
|
|
1431
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
1522
|
+
var SidebarBrand = React12.forwardRef(
|
|
1523
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx22("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
1432
1524
|
);
|
|
1433
1525
|
SidebarBrand.displayName = "SidebarBrand";
|
|
1434
1526
|
function SidebarAccountMenu({
|
|
@@ -1439,7 +1531,7 @@ function SidebarAccountMenu({
|
|
|
1439
1531
|
icon,
|
|
1440
1532
|
className
|
|
1441
1533
|
}) {
|
|
1442
|
-
return /* @__PURE__ */
|
|
1534
|
+
return /* @__PURE__ */ jsx22(
|
|
1443
1535
|
Dropdown,
|
|
1444
1536
|
{
|
|
1445
1537
|
align: "left",
|
|
@@ -1449,25 +1541,25 @@ function SidebarAccountMenu({
|
|
|
1449
1541
|
panelClassName: "fractal-sidebar__account-panel",
|
|
1450
1542
|
selectedValue: "",
|
|
1451
1543
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
1452
|
-
triggerContent: /* @__PURE__ */
|
|
1453
|
-
icon && /* @__PURE__ */
|
|
1454
|
-
/* @__PURE__ */
|
|
1544
|
+
triggerContent: /* @__PURE__ */ jsxs17(Fragment3, { children: [
|
|
1545
|
+
icon && /* @__PURE__ */ jsx22("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
1546
|
+
/* @__PURE__ */ jsx22("span", { className: "fractal-sidebar__account-name", children: name })
|
|
1455
1547
|
] }),
|
|
1456
1548
|
triggerLabel,
|
|
1457
1549
|
triggerVariant: "tertiary"
|
|
1458
1550
|
}
|
|
1459
1551
|
);
|
|
1460
1552
|
}
|
|
1461
|
-
var SidebarNav =
|
|
1462
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1553
|
+
var SidebarNav = React12.forwardRef(
|
|
1554
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx22("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
1463
1555
|
);
|
|
1464
1556
|
SidebarNav.displayName = "SidebarNav";
|
|
1465
|
-
var SidebarSection =
|
|
1466
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1557
|
+
var SidebarSection = React12.forwardRef(
|
|
1558
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx22("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
1467
1559
|
);
|
|
1468
1560
|
SidebarSection.displayName = "SidebarSection";
|
|
1469
|
-
var SidebarNavItem =
|
|
1470
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */
|
|
1561
|
+
var SidebarNavItem = React12.forwardRef(
|
|
1562
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs17(
|
|
1471
1563
|
"button",
|
|
1472
1564
|
{
|
|
1473
1565
|
ref,
|
|
@@ -1477,28 +1569,28 @@ var SidebarNavItem = React11.forwardRef(
|
|
|
1477
1569
|
"aria-current": active ? "page" : void 0,
|
|
1478
1570
|
...props,
|
|
1479
1571
|
children: [
|
|
1480
|
-
icon && /* @__PURE__ */
|
|
1481
|
-
/* @__PURE__ */
|
|
1482
|
-
endAdornment && /* @__PURE__ */
|
|
1572
|
+
icon && /* @__PURE__ */ jsx22("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
1573
|
+
/* @__PURE__ */ jsx22("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
1574
|
+
endAdornment && /* @__PURE__ */ jsx22("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
1483
1575
|
]
|
|
1484
1576
|
}
|
|
1485
1577
|
)
|
|
1486
1578
|
);
|
|
1487
1579
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
1488
|
-
var SidebarFooter =
|
|
1489
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1580
|
+
var SidebarFooter = React12.forwardRef(
|
|
1581
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx22("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
1490
1582
|
);
|
|
1491
1583
|
SidebarFooter.displayName = "SidebarFooter";
|
|
1492
1584
|
|
|
1493
1585
|
// src/components/SidePanel/SidePanel.tsx
|
|
1494
1586
|
import { createPortal as createPortal2 } from "react-dom";
|
|
1495
1587
|
import { Close } from "@mirror-physics/fractal-icons";
|
|
1496
|
-
import { jsx as
|
|
1588
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1497
1589
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
1498
1590
|
useEscapeDismiss(80, onClose, open);
|
|
1499
1591
|
if (!open) return null;
|
|
1500
1592
|
return createPortal2(
|
|
1501
|
-
/* @__PURE__ */
|
|
1593
|
+
/* @__PURE__ */ jsx23("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs18(
|
|
1502
1594
|
"aside",
|
|
1503
1595
|
{
|
|
1504
1596
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -1507,15 +1599,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1507
1599
|
role: "dialog",
|
|
1508
1600
|
onMouseDown: (event) => event.stopPropagation(),
|
|
1509
1601
|
children: [
|
|
1510
|
-
/* @__PURE__ */
|
|
1511
|
-
/* @__PURE__ */
|
|
1512
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
1513
|
-
description && /* @__PURE__ */
|
|
1602
|
+
/* @__PURE__ */ jsxs18("header", { className: "fractal-side-panel__header", children: [
|
|
1603
|
+
/* @__PURE__ */ jsxs18("div", { className: "fractal-side-panel__heading", children: [
|
|
1604
|
+
typeof title === "string" ? /* @__PURE__ */ jsx23("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx23("div", { className: "fractal-side-panel__title", children: title }),
|
|
1605
|
+
description && /* @__PURE__ */ jsx23("p", { className: "fractal-side-panel__description", children: description })
|
|
1514
1606
|
] }),
|
|
1515
|
-
/* @__PURE__ */
|
|
1607
|
+
/* @__PURE__ */ jsx23("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx23(Close, { size: 18 }) })
|
|
1516
1608
|
] }),
|
|
1517
|
-
/* @__PURE__ */
|
|
1518
|
-
footer && /* @__PURE__ */
|
|
1609
|
+
/* @__PURE__ */ jsx23("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx23(UILoader, { label: loadingLabel }) : children }),
|
|
1610
|
+
footer && /* @__PURE__ */ jsx23("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
1519
1611
|
]
|
|
1520
1612
|
}
|
|
1521
1613
|
) }),
|
|
@@ -1524,18 +1616,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1524
1616
|
}
|
|
1525
1617
|
|
|
1526
1618
|
// src/components/Textarea/Textarea.tsx
|
|
1527
|
-
import * as
|
|
1528
|
-
import { jsx as
|
|
1529
|
-
var Textarea =
|
|
1530
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1619
|
+
import * as React13 from "react";
|
|
1620
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1621
|
+
var Textarea = React13.forwardRef(
|
|
1622
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx24("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
1531
1623
|
);
|
|
1532
1624
|
Textarea.displayName = "Textarea";
|
|
1533
1625
|
|
|
1534
1626
|
// src/components/TextButton/TextButton.tsx
|
|
1535
|
-
import * as
|
|
1536
|
-
import { jsx as
|
|
1537
|
-
var TextButton =
|
|
1538
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */
|
|
1627
|
+
import * as React14 from "react";
|
|
1628
|
+
import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1629
|
+
var TextButton = React14.forwardRef(
|
|
1630
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs19(
|
|
1539
1631
|
"button",
|
|
1540
1632
|
{
|
|
1541
1633
|
ref,
|
|
@@ -1543,9 +1635,9 @@ var TextButton = React13.forwardRef(
|
|
|
1543
1635
|
type: "button",
|
|
1544
1636
|
...props,
|
|
1545
1637
|
children: [
|
|
1546
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
1547
|
-
/* @__PURE__ */
|
|
1548
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
1638
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx25("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
1639
|
+
/* @__PURE__ */ jsx25("span", { children }),
|
|
1640
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx25("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
1549
1641
|
]
|
|
1550
1642
|
}
|
|
1551
1643
|
)
|
|
@@ -1553,9 +1645,9 @@ var TextButton = React13.forwardRef(
|
|
|
1553
1645
|
TextButton.displayName = "TextButton";
|
|
1554
1646
|
|
|
1555
1647
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
1556
|
-
import * as
|
|
1648
|
+
import * as React15 from "react";
|
|
1557
1649
|
import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
1558
|
-
import { jsx as
|
|
1650
|
+
import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1559
1651
|
function FileDropzone({
|
|
1560
1652
|
files,
|
|
1561
1653
|
onFilesChange,
|
|
@@ -1566,17 +1658,17 @@ function FileDropzone({
|
|
|
1566
1658
|
description = "Files stay attached to this record.",
|
|
1567
1659
|
className
|
|
1568
1660
|
}) {
|
|
1569
|
-
const inputId =
|
|
1570
|
-
const inputRef =
|
|
1571
|
-
const [isDragging, setIsDragging] =
|
|
1661
|
+
const inputId = React15.useId();
|
|
1662
|
+
const inputRef = React15.useRef(null);
|
|
1663
|
+
const [isDragging, setIsDragging] = React15.useState(false);
|
|
1572
1664
|
const addFiles = (nextFiles) => {
|
|
1573
1665
|
if (disabled) return;
|
|
1574
1666
|
const additions = Array.from(nextFiles);
|
|
1575
1667
|
if (additions.length === 0) return;
|
|
1576
1668
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
1577
1669
|
};
|
|
1578
|
-
return /* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1670
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
1671
|
+
/* @__PURE__ */ jsx26(
|
|
1580
1672
|
"input",
|
|
1581
1673
|
{
|
|
1582
1674
|
ref: inputRef,
|
|
@@ -1592,7 +1684,7 @@ function FileDropzone({
|
|
|
1592
1684
|
}
|
|
1593
1685
|
}
|
|
1594
1686
|
),
|
|
1595
|
-
/* @__PURE__ */
|
|
1687
|
+
/* @__PURE__ */ jsxs20(
|
|
1596
1688
|
"button",
|
|
1597
1689
|
{
|
|
1598
1690
|
className: "fractal-file-dropzone__target",
|
|
@@ -1615,18 +1707,18 @@ function FileDropzone({
|
|
|
1615
1707
|
addFiles(event.dataTransfer.files);
|
|
1616
1708
|
},
|
|
1617
1709
|
children: [
|
|
1618
|
-
/* @__PURE__ */
|
|
1619
|
-
/* @__PURE__ */
|
|
1620
|
-
/* @__PURE__ */
|
|
1621
|
-
description && /* @__PURE__ */
|
|
1710
|
+
/* @__PURE__ */ jsx26(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
1711
|
+
/* @__PURE__ */ jsxs20("span", { className: "fractal-file-dropzone__copy", children: [
|
|
1712
|
+
/* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
1713
|
+
description && /* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__description", children: description })
|
|
1622
1714
|
] })
|
|
1623
1715
|
]
|
|
1624
1716
|
}
|
|
1625
1717
|
),
|
|
1626
|
-
files.length > 0 && /* @__PURE__ */
|
|
1627
|
-
/* @__PURE__ */
|
|
1628
|
-
/* @__PURE__ */
|
|
1629
|
-
/* @__PURE__ */
|
|
1718
|
+
files.length > 0 && /* @__PURE__ */ jsx26("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs20("li", { className: "fractal-file-dropzone__file", children: [
|
|
1719
|
+
/* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
1720
|
+
/* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
1721
|
+
/* @__PURE__ */ jsx26(
|
|
1630
1722
|
"button",
|
|
1631
1723
|
{
|
|
1632
1724
|
className: "fractal-file-dropzone__remove",
|
|
@@ -1634,7 +1726,7 @@ function FileDropzone({
|
|
|
1634
1726
|
"aria-label": `Remove ${file.name}`,
|
|
1635
1727
|
disabled,
|
|
1636
1728
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
1637
|
-
children: /* @__PURE__ */
|
|
1729
|
+
children: /* @__PURE__ */ jsx26(Close2, { "aria-hidden": "true", size: 14 })
|
|
1638
1730
|
}
|
|
1639
1731
|
)
|
|
1640
1732
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -1648,7 +1740,7 @@ function formatFileSize(bytes) {
|
|
|
1648
1740
|
|
|
1649
1741
|
// src/components/Pagination/Pagination.tsx
|
|
1650
1742
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
1651
|
-
import { jsx as
|
|
1743
|
+
import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1652
1744
|
function Pagination({
|
|
1653
1745
|
page,
|
|
1654
1746
|
pageSize,
|
|
@@ -1664,10 +1756,10 @@ function Pagination({
|
|
|
1664
1756
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
1665
1757
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
1666
1758
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
1667
|
-
return /* @__PURE__ */
|
|
1668
|
-
/* @__PURE__ */
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
canChangePageSize && /* @__PURE__ */
|
|
1759
|
+
return /* @__PURE__ */ jsxs21("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
1760
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
1761
|
+
/* @__PURE__ */ jsxs21("div", { className: "fractal-pagination__controls", children: [
|
|
1762
|
+
canChangePageSize && /* @__PURE__ */ jsx27(
|
|
1671
1763
|
Dropdown,
|
|
1672
1764
|
{
|
|
1673
1765
|
align: "right",
|
|
@@ -1684,7 +1776,7 @@ function Pagination({
|
|
|
1684
1776
|
triggerVariant: "tertiary"
|
|
1685
1777
|
}
|
|
1686
1778
|
),
|
|
1687
|
-
/* @__PURE__ */
|
|
1779
|
+
/* @__PURE__ */ jsx27(
|
|
1688
1780
|
"button",
|
|
1689
1781
|
{
|
|
1690
1782
|
className: "fractal-pagination__button",
|
|
@@ -1693,15 +1785,15 @@ function Pagination({
|
|
|
1693
1785
|
title: "Previous page",
|
|
1694
1786
|
disabled: currentPage === 1 || totalItems === 0,
|
|
1695
1787
|
onClick: () => onPageChange(currentPage - 1),
|
|
1696
|
-
children: /* @__PURE__ */
|
|
1788
|
+
children: /* @__PURE__ */ jsx27(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
1697
1789
|
}
|
|
1698
1790
|
),
|
|
1699
|
-
/* @__PURE__ */
|
|
1791
|
+
/* @__PURE__ */ jsxs21("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
1700
1792
|
currentPage,
|
|
1701
1793
|
" of ",
|
|
1702
1794
|
totalPages
|
|
1703
1795
|
] }),
|
|
1704
|
-
/* @__PURE__ */
|
|
1796
|
+
/* @__PURE__ */ jsx27(
|
|
1705
1797
|
"button",
|
|
1706
1798
|
{
|
|
1707
1799
|
className: "fractal-pagination__button",
|
|
@@ -1710,7 +1802,7 @@ function Pagination({
|
|
|
1710
1802
|
title: "Next page",
|
|
1711
1803
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
1712
1804
|
onClick: () => onPageChange(currentPage + 1),
|
|
1713
|
-
children: /* @__PURE__ */
|
|
1805
|
+
children: /* @__PURE__ */ jsx27(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
1714
1806
|
}
|
|
1715
1807
|
)
|
|
1716
1808
|
] })
|
|
@@ -1758,6 +1850,7 @@ export {
|
|
|
1758
1850
|
LinkGhost,
|
|
1759
1851
|
Modal,
|
|
1760
1852
|
ModalGhost,
|
|
1853
|
+
NumberInput,
|
|
1761
1854
|
Pagination,
|
|
1762
1855
|
PaginationGhost,
|
|
1763
1856
|
PromptCard,
|