@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.cjs
CHANGED
|
@@ -71,6 +71,7 @@ __export(index_exports, {
|
|
|
71
71
|
LinkGhost: () => LinkGhost,
|
|
72
72
|
Modal: () => Modal,
|
|
73
73
|
ModalGhost: () => ModalGhost,
|
|
74
|
+
NumberInput: () => NumberInput,
|
|
74
75
|
Pagination: () => Pagination,
|
|
75
76
|
PaginationGhost: () => PaginationGhost,
|
|
76
77
|
PromptCard: () => PromptCard,
|
|
@@ -438,11 +439,91 @@ var Input = React4.forwardRef(
|
|
|
438
439
|
);
|
|
439
440
|
Input.displayName = "Input";
|
|
440
441
|
|
|
441
|
-
// src/components/
|
|
442
|
+
// src/components/NumberInput/NumberInput.tsx
|
|
442
443
|
var React5 = __toESM(require("react"), 1);
|
|
444
|
+
var import_fractal_icons3 = require("@mirror-physics/fractal-icons");
|
|
443
445
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
444
|
-
|
|
445
|
-
|
|
446
|
+
function NumberInput({
|
|
447
|
+
unit,
|
|
448
|
+
className,
|
|
449
|
+
value,
|
|
450
|
+
defaultValue,
|
|
451
|
+
disabled,
|
|
452
|
+
readOnly,
|
|
453
|
+
min,
|
|
454
|
+
max,
|
|
455
|
+
...props
|
|
456
|
+
}) {
|
|
457
|
+
const inputRef = React5.useRef(null);
|
|
458
|
+
const numericValue = Number(value ?? defaultValue);
|
|
459
|
+
const characterCount = Math.max(String(value ?? defaultValue ?? "").length, 1);
|
|
460
|
+
const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : "value";
|
|
461
|
+
const decrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && min !== void 0 && numericValue <= Number(min);
|
|
462
|
+
const incrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && max !== void 0 && numericValue >= Number(max);
|
|
463
|
+
const changeByStep = (direction) => {
|
|
464
|
+
const input = inputRef.current;
|
|
465
|
+
if (!input) return;
|
|
466
|
+
if (direction === -1) input.stepDown();
|
|
467
|
+
else input.stepUp();
|
|
468
|
+
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
469
|
+
input.focus();
|
|
470
|
+
};
|
|
471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
472
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
473
|
+
Input,
|
|
474
|
+
{
|
|
475
|
+
ref: inputRef,
|
|
476
|
+
type: "number",
|
|
477
|
+
value,
|
|
478
|
+
defaultValue,
|
|
479
|
+
disabled,
|
|
480
|
+
readOnly,
|
|
481
|
+
min,
|
|
482
|
+
max,
|
|
483
|
+
...props
|
|
484
|
+
}
|
|
485
|
+
),
|
|
486
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
487
|
+
"span",
|
|
488
|
+
{
|
|
489
|
+
className: "fractal-number-input-unit",
|
|
490
|
+
style: { left: `calc(var(--space-3, 12px) + ${characterCount}ch)` },
|
|
491
|
+
"aria-hidden": "true",
|
|
492
|
+
children: unit
|
|
493
|
+
}
|
|
494
|
+
),
|
|
495
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fractal-number-input-controls", children: [
|
|
496
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
497
|
+
"button",
|
|
498
|
+
{
|
|
499
|
+
type: "button",
|
|
500
|
+
className: "fractal-number-input-step",
|
|
501
|
+
"aria-label": `Decrease ${controlLabel}`,
|
|
502
|
+
disabled: decrementDisabled,
|
|
503
|
+
onClick: () => changeByStep(-1),
|
|
504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fractal_icons3.Minus, { "aria-hidden": "true", size: 16 })
|
|
505
|
+
}
|
|
506
|
+
),
|
|
507
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
508
|
+
"button",
|
|
509
|
+
{
|
|
510
|
+
type: "button",
|
|
511
|
+
className: "fractal-number-input-step",
|
|
512
|
+
"aria-label": `Increase ${controlLabel}`,
|
|
513
|
+
disabled: incrementDisabled,
|
|
514
|
+
onClick: () => changeByStep(1),
|
|
515
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fractal_icons3.Plus, { "aria-hidden": "true", size: 16 })
|
|
516
|
+
}
|
|
517
|
+
)
|
|
518
|
+
] })
|
|
519
|
+
] });
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
// src/components/Label/Label.tsx
|
|
523
|
+
var React6 = __toESM(require("react"), 1);
|
|
524
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
525
|
+
var Label = React6.forwardRef(
|
|
526
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
446
527
|
"label",
|
|
447
528
|
{
|
|
448
529
|
ref,
|
|
@@ -454,20 +535,20 @@ var Label = React5.forwardRef(
|
|
|
454
535
|
Label.displayName = "Label";
|
|
455
536
|
|
|
456
537
|
// src/components/Alert/Alert.tsx
|
|
457
|
-
var
|
|
458
|
-
var
|
|
459
|
-
var
|
|
538
|
+
var React7 = __toESM(require("react"), 1);
|
|
539
|
+
var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
|
|
540
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
460
541
|
var defaultIcons = {
|
|
461
|
-
default:
|
|
462
|
-
info:
|
|
463
|
-
success:
|
|
464
|
-
warning:
|
|
465
|
-
error:
|
|
542
|
+
default: import_fractal_icons4.CircleInfo,
|
|
543
|
+
info: import_fractal_icons4.CircleInfo,
|
|
544
|
+
success: import_fractal_icons4.CircleCheck,
|
|
545
|
+
warning: import_fractal_icons4.Warning,
|
|
546
|
+
error: import_fractal_icons4.CircleClose
|
|
466
547
|
};
|
|
467
|
-
var Alert =
|
|
548
|
+
var Alert = React7.forwardRef(
|
|
468
549
|
({ className, variant = "default", icon, children, ...props }, ref) => {
|
|
469
550
|
const DefaultIcon = defaultIcons[variant];
|
|
470
|
-
return /* @__PURE__ */ (0,
|
|
551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
471
552
|
"div",
|
|
472
553
|
{
|
|
473
554
|
ref,
|
|
@@ -475,27 +556,27 @@ var Alert = React6.forwardRef(
|
|
|
475
556
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
476
557
|
...props,
|
|
477
558
|
children: [
|
|
478
|
-
/* @__PURE__ */ (0,
|
|
479
|
-
/* @__PURE__ */ (0,
|
|
559
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultIcon, { size: 18 }) }),
|
|
560
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fractal-alert-content", children })
|
|
480
561
|
]
|
|
481
562
|
}
|
|
482
563
|
);
|
|
483
564
|
}
|
|
484
565
|
);
|
|
485
566
|
Alert.displayName = "Alert";
|
|
486
|
-
var AlertTitle =
|
|
487
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
567
|
+
var AlertTitle = React7.forwardRef(
|
|
568
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
488
569
|
);
|
|
489
570
|
AlertTitle.displayName = "AlertTitle";
|
|
490
|
-
var AlertDescription =
|
|
491
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
571
|
+
var AlertDescription = React7.forwardRef(
|
|
572
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
492
573
|
);
|
|
493
574
|
AlertDescription.displayName = "AlertDescription";
|
|
494
575
|
|
|
495
576
|
// src/components/Toggle/Toggle.tsx
|
|
496
|
-
var
|
|
577
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
497
578
|
function Toggle({ checked, onChange, label, className }) {
|
|
498
|
-
return /* @__PURE__ */ (0,
|
|
579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
499
580
|
"button",
|
|
500
581
|
{
|
|
501
582
|
type: "button",
|
|
@@ -504,8 +585,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
504
585
|
className: cn("fractal-toggle", className),
|
|
505
586
|
onClick: () => onChange(!checked),
|
|
506
587
|
children: [
|
|
507
|
-
/* @__PURE__ */ (0,
|
|
508
|
-
label && /* @__PURE__ */ (0,
|
|
588
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
589
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fractal-toggle-label", children: label })
|
|
509
590
|
]
|
|
510
591
|
}
|
|
511
592
|
);
|
|
@@ -566,7 +647,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
566
647
|
|
|
567
648
|
// src/components/UILoader/UILoader.tsx
|
|
568
649
|
var import_react2 = require("react");
|
|
569
|
-
var
|
|
650
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
570
651
|
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";
|
|
571
652
|
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";
|
|
572
653
|
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";
|
|
@@ -575,7 +656,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
575
656
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
576
657
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
577
658
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
578
|
-
return /* @__PURE__ */ (0,
|
|
659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
579
660
|
"span",
|
|
580
661
|
{
|
|
581
662
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -583,53 +664,65 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
583
664
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
584
665
|
role: ariaHidden ? void 0 : "status",
|
|
585
666
|
style,
|
|
586
|
-
children: /* @__PURE__ */ (0,
|
|
587
|
-
/* @__PURE__ */ (0,
|
|
588
|
-
/* @__PURE__ */ (0,
|
|
589
|
-
/* @__PURE__ */ (0,
|
|
590
|
-
/* @__PURE__ */ (0,
|
|
667
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
668
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("defs", { children: [
|
|
669
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
670
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
591
672
|
] }),
|
|
592
|
-
/* @__PURE__ */ (0,
|
|
593
|
-
/* @__PURE__ */ (0,
|
|
594
|
-
/* @__PURE__ */ (0,
|
|
595
|
-
/* @__PURE__ */ (0,
|
|
673
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
674
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
675
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
676
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
596
677
|
] }),
|
|
597
|
-
/* @__PURE__ */ (0,
|
|
598
|
-
/* @__PURE__ */ (0,
|
|
599
|
-
/* @__PURE__ */ (0,
|
|
600
|
-
/* @__PURE__ */ (0,
|
|
678
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("clipPath", { id: clipId, children: [
|
|
679
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: LEFT }),
|
|
680
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: CENTER }),
|
|
681
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: RIGHT })
|
|
601
682
|
] })
|
|
602
683
|
] }),
|
|
603
|
-
/* @__PURE__ */ (0,
|
|
604
|
-
/* @__PURE__ */ (0,
|
|
605
|
-
/* @__PURE__ */ (0,
|
|
606
|
-
/* @__PURE__ */ (0,
|
|
684
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
685
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
686
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
687
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
607
688
|
] })
|
|
608
689
|
}
|
|
609
690
|
);
|
|
610
691
|
}
|
|
611
692
|
|
|
612
693
|
// src/components/Modal/Modal.tsx
|
|
613
|
-
var
|
|
614
|
-
var CloseIcon = () => /* @__PURE__ */ (0,
|
|
615
|
-
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", className }) {
|
|
694
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
695
|
+
var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
696
|
+
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
616
697
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
617
698
|
if (!open) return null;
|
|
618
699
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
619
700
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
620
701
|
return (0, import_react_dom.createPortal)(
|
|
621
|
-
/* @__PURE__ */ (0,
|
|
702
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
622
703
|
"div",
|
|
623
704
|
{
|
|
624
|
-
className: cn("fractal-modal-panel", sizeClass, accentClass, className),
|
|
705
|
+
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
625
706
|
onClick: (e) => e.stopPropagation(),
|
|
626
707
|
children: [
|
|
627
|
-
/* @__PURE__ */ (0,
|
|
628
|
-
/* @__PURE__ */ (0,
|
|
629
|
-
!noClose && /* @__PURE__ */ (0,
|
|
708
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "fractal-modal-title-row", children: [
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
710
|
+
!noClose && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon, {}) })
|
|
630
711
|
] }),
|
|
631
|
-
/* @__PURE__ */ (0,
|
|
632
|
-
|
|
712
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
713
|
+
"div",
|
|
714
|
+
{
|
|
715
|
+
"aria-busy": loading || void 0,
|
|
716
|
+
className: cn(
|
|
717
|
+
"fractal-modal-body",
|
|
718
|
+
size === "lg" && "fractal-modal-body--lg",
|
|
719
|
+
loading && "fractal-modal-body--loading",
|
|
720
|
+
scrollable && "fractal-modal-body--scrollable"
|
|
721
|
+
),
|
|
722
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UILoader, { label: loadingLabel }) : children
|
|
723
|
+
}
|
|
724
|
+
),
|
|
725
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
633
726
|
]
|
|
634
727
|
}
|
|
635
728
|
) }),
|
|
@@ -638,17 +731,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
638
731
|
}
|
|
639
732
|
|
|
640
733
|
// src/components/DataTable/DataTable.tsx
|
|
641
|
-
var
|
|
734
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
642
735
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
|
|
643
|
-
return /* @__PURE__ */ (0,
|
|
644
|
-
header && /* @__PURE__ */ (0,
|
|
645
|
-
data.length === 0 ? /* @__PURE__ */ (0,
|
|
646
|
-
/* @__PURE__ */ (0,
|
|
647
|
-
/* @__PURE__ */ (0,
|
|
736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fractal-datatable-surface", children: [
|
|
737
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fractal-datatable-header", children: header }),
|
|
738
|
+
data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "fractal-datatable-table", children: [
|
|
739
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
|
|
740
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
648
741
|
"tr",
|
|
649
742
|
{
|
|
650
743
|
className: "fractal-datatable-row",
|
|
651
|
-
children: columns.map((col) => /* @__PURE__ */ (0,
|
|
744
|
+
children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
|
|
652
745
|
},
|
|
653
746
|
rowIndex
|
|
654
747
|
)) })
|
|
@@ -657,9 +750,9 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
|
|
|
657
750
|
}
|
|
658
751
|
|
|
659
752
|
// src/components/Dropdown/Dropdown.tsx
|
|
660
|
-
var
|
|
661
|
-
var
|
|
662
|
-
var
|
|
753
|
+
var React8 = __toESM(require("react"), 1);
|
|
754
|
+
var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
|
|
755
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
663
756
|
var MARGIN = 4;
|
|
664
757
|
function Dropdown({
|
|
665
758
|
items,
|
|
@@ -680,10 +773,10 @@ function Dropdown({
|
|
|
680
773
|
closeOnSelect = true,
|
|
681
774
|
disabled = false
|
|
682
775
|
}) {
|
|
683
|
-
const [open, setOpen] =
|
|
684
|
-
const triggerRef =
|
|
685
|
-
const panelRef =
|
|
686
|
-
const [panelStyle, setPanelStyle] =
|
|
776
|
+
const [open, setOpen] = React8.useState(false);
|
|
777
|
+
const triggerRef = React8.useRef(null);
|
|
778
|
+
const panelRef = React8.useRef(null);
|
|
779
|
+
const [panelStyle, setPanelStyle] = React8.useState({});
|
|
687
780
|
const visibleItems = items.filter(
|
|
688
781
|
(item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
|
|
689
782
|
);
|
|
@@ -691,8 +784,8 @@ function Dropdown({
|
|
|
691
784
|
const selectableItems = visibleItems.filter((i) => i.kind !== "header");
|
|
692
785
|
const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
|
|
693
786
|
const isUp = direction === "up";
|
|
694
|
-
const ChevronIcon = isUp ?
|
|
695
|
-
|
|
787
|
+
const ChevronIcon = isUp ? import_fractal_icons5.ChevronUp : import_fractal_icons5.ChevronDown;
|
|
788
|
+
React8.useLayoutEffect(() => {
|
|
696
789
|
if (!open || !triggerRef.current || !panelRef.current) return;
|
|
697
790
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
698
791
|
const panelRect = panelRef.current.getBoundingClientRect();
|
|
@@ -726,7 +819,7 @@ function Dropdown({
|
|
|
726
819
|
}
|
|
727
820
|
setPanelStyle({ top, left, right });
|
|
728
821
|
}, [open, isUp, align]);
|
|
729
|
-
|
|
822
|
+
React8.useEffect(() => {
|
|
730
823
|
if (!open) return;
|
|
731
824
|
const handleClickOutside = (e) => {
|
|
732
825
|
const target = e.target;
|
|
@@ -736,8 +829,8 @@ function Dropdown({
|
|
|
736
829
|
document.addEventListener("mousedown", handleClickOutside);
|
|
737
830
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
738
831
|
}, [open]);
|
|
739
|
-
return /* @__PURE__ */ (0,
|
|
740
|
-
/* @__PURE__ */ (0,
|
|
832
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("fractal-dropdown", className), children: [
|
|
833
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
741
834
|
"button",
|
|
742
835
|
{
|
|
743
836
|
ref: triggerRef,
|
|
@@ -755,15 +848,15 @@ function Dropdown({
|
|
|
755
848
|
triggerClassName
|
|
756
849
|
),
|
|
757
850
|
children: [
|
|
758
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */ (0,
|
|
759
|
-
selected.icon != null && /* @__PURE__ */ (0,
|
|
760
|
-
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0,
|
|
851
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
852
|
+
selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
|
|
853
|
+
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
|
|
761
854
|
] }),
|
|
762
|
-
!noChevron && !iconOnly && /* @__PURE__ */ (0,
|
|
855
|
+
!noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
763
856
|
]
|
|
764
857
|
}
|
|
765
858
|
),
|
|
766
|
-
open && /* @__PURE__ */ (0,
|
|
859
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
767
860
|
"div",
|
|
768
861
|
{
|
|
769
862
|
ref: panelRef,
|
|
@@ -772,21 +865,21 @@ function Dropdown({
|
|
|
772
865
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
773
866
|
style: panelStyle,
|
|
774
867
|
children: [
|
|
775
|
-
label != null && /* @__PURE__ */ (0,
|
|
868
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-dropdown-label", children: label }),
|
|
776
869
|
visibleItems.map((item, index) => {
|
|
777
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */ (0,
|
|
778
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0,
|
|
870
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
|
|
871
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
|
|
779
872
|
if (item.kind === "header") {
|
|
780
|
-
return /* @__PURE__ */ (0,
|
|
873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(React8.Fragment, { children: [
|
|
781
874
|
topDivider,
|
|
782
|
-
/* @__PURE__ */ (0,
|
|
875
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
783
876
|
bottomDivider
|
|
784
877
|
] }, `header-${index}`);
|
|
785
878
|
}
|
|
786
879
|
const isSelected = item.value === selectedValue;
|
|
787
|
-
return /* @__PURE__ */ (0,
|
|
880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(React8.Fragment, { children: [
|
|
788
881
|
topDivider,
|
|
789
|
-
/* @__PURE__ */ (0,
|
|
882
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
790
883
|
"button",
|
|
791
884
|
{
|
|
792
885
|
type: "button",
|
|
@@ -798,9 +891,9 @@ function Dropdown({
|
|
|
798
891
|
},
|
|
799
892
|
className: "fractal-dropdown-option",
|
|
800
893
|
children: [
|
|
801
|
-
item.icon != null && /* @__PURE__ */ (0,
|
|
802
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0,
|
|
803
|
-
item.trailing != null && /* @__PURE__ */ (0,
|
|
894
|
+
item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
895
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
896
|
+
item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
804
897
|
]
|
|
805
898
|
}
|
|
806
899
|
),
|
|
@@ -814,10 +907,10 @@ function Dropdown({
|
|
|
814
907
|
}
|
|
815
908
|
|
|
816
909
|
// src/components/Link/Link.tsx
|
|
817
|
-
var
|
|
818
|
-
var
|
|
819
|
-
var Link =
|
|
820
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0,
|
|
910
|
+
var React9 = __toESM(require("react"), 1);
|
|
911
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
912
|
+
var Link = React9.forwardRef(
|
|
913
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
821
914
|
"a",
|
|
822
915
|
{
|
|
823
916
|
ref,
|
|
@@ -829,10 +922,10 @@ var Link = React8.forwardRef(
|
|
|
829
922
|
Link.displayName = "Link";
|
|
830
923
|
|
|
831
924
|
// src/components/Chip/Chip.tsx
|
|
832
|
-
var
|
|
833
|
-
var
|
|
834
|
-
var Chip =
|
|
835
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0,
|
|
925
|
+
var React10 = __toESM(require("react"), 1);
|
|
926
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
927
|
+
var Chip = React10.forwardRef(
|
|
928
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
836
929
|
"span",
|
|
837
930
|
{
|
|
838
931
|
ref,
|
|
@@ -844,10 +937,10 @@ var Chip = React9.forwardRef(
|
|
|
844
937
|
Chip.displayName = "Chip";
|
|
845
938
|
|
|
846
939
|
// src/components/Checkbox/Checkbox.tsx
|
|
847
|
-
var
|
|
848
|
-
var
|
|
940
|
+
var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
|
|
941
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
849
942
|
function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }) {
|
|
850
|
-
return /* @__PURE__ */ (0,
|
|
943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
851
944
|
"button",
|
|
852
945
|
{
|
|
853
946
|
...props,
|
|
@@ -864,15 +957,15 @@ function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKe
|
|
|
864
957
|
onKeyDown?.(event);
|
|
865
958
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
866
959
|
},
|
|
867
|
-
children: checked ? /* @__PURE__ */ (0,
|
|
960
|
+
children: checked ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_fractal_icons6.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_fractal_icons6.Checkbox, { "aria-hidden": "true", size: 18 })
|
|
868
961
|
}
|
|
869
962
|
);
|
|
870
963
|
}
|
|
871
964
|
|
|
872
965
|
// src/components/SortableTable/SortableTable.tsx
|
|
873
966
|
var import_react3 = require("react");
|
|
874
|
-
var
|
|
875
|
-
var
|
|
967
|
+
var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
|
|
968
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
876
969
|
function SortableTable({
|
|
877
970
|
columns,
|
|
878
971
|
data,
|
|
@@ -948,13 +1041,13 @@ function SortableTable({
|
|
|
948
1041
|
onSortChange?.(nextKey, nextDirection);
|
|
949
1042
|
}
|
|
950
1043
|
};
|
|
951
|
-
return /* @__PURE__ */ (0,
|
|
952
|
-
header && /* @__PURE__ */ (0,
|
|
953
|
-
sorted.length === 0 ? /* @__PURE__ */ (0,
|
|
954
|
-
/* @__PURE__ */ (0,
|
|
1044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
|
|
1045
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1046
|
+
sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("table", { className: "fractal-sortable-table-table", children: [
|
|
1047
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
|
|
955
1048
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
956
1049
|
if (!col.sortable) {
|
|
957
|
-
return /* @__PURE__ */ (0,
|
|
1050
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
958
1051
|
"th",
|
|
959
1052
|
{
|
|
960
1053
|
className: "fractal-sortable-table-th",
|
|
@@ -964,12 +1057,12 @@ function SortableTable({
|
|
|
964
1057
|
col.key
|
|
965
1058
|
);
|
|
966
1059
|
}
|
|
967
|
-
return /* @__PURE__ */ (0,
|
|
1060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
968
1061
|
"th",
|
|
969
1062
|
{
|
|
970
1063
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
971
1064
|
style: { width: col.width },
|
|
972
|
-
children: /* @__PURE__ */ (0,
|
|
1065
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
973
1066
|
"button",
|
|
974
1067
|
{
|
|
975
1068
|
type: "button",
|
|
@@ -980,8 +1073,8 @@ function SortableTable({
|
|
|
980
1073
|
onClick: () => handleSortClick(col.key),
|
|
981
1074
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
982
1075
|
children: [
|
|
983
|
-
/* @__PURE__ */ (0,
|
|
984
|
-
/* @__PURE__ */ (0,
|
|
1076
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: col.header }),
|
|
1077
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.ArrowsUpDown, { size: 14 }) })
|
|
985
1078
|
]
|
|
986
1079
|
}
|
|
987
1080
|
)
|
|
@@ -989,13 +1082,13 @@ function SortableTable({
|
|
|
989
1082
|
col.key
|
|
990
1083
|
);
|
|
991
1084
|
}) }) }),
|
|
992
|
-
/* @__PURE__ */ (0,
|
|
1085
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { children: sorted.map((row, rowIndex) => {
|
|
993
1086
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
994
1087
|
const action = rowAction ? {
|
|
995
1088
|
label: rowAction.label(row, rowIndex),
|
|
996
1089
|
icon: rowAction.icon(row, rowIndex)
|
|
997
1090
|
} : null;
|
|
998
|
-
return /* @__PURE__ */ (0,
|
|
1091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
999
1092
|
"tr",
|
|
1000
1093
|
{
|
|
1001
1094
|
className: cn(
|
|
@@ -1013,7 +1106,7 @@ function SortableTable({
|
|
|
1013
1106
|
"aria-label": action?.label,
|
|
1014
1107
|
role: onRowClick ? "button" : void 0,
|
|
1015
1108
|
tabIndex: onRowClick ? 0 : void 0,
|
|
1016
|
-
children: columns.map((col, columnIndex) => /* @__PURE__ */ (0,
|
|
1109
|
+
children: columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1017
1110
|
"td",
|
|
1018
1111
|
{
|
|
1019
1112
|
className: cn(
|
|
@@ -1023,7 +1116,7 @@ function SortableTable({
|
|
|
1023
1116
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1024
1117
|
children: [
|
|
1025
1118
|
col.render(row, rowIndex),
|
|
1026
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0,
|
|
1119
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1027
1120
|
]
|
|
1028
1121
|
},
|
|
1029
1122
|
col.key
|
|
@@ -1038,7 +1131,7 @@ function SortableTable({
|
|
|
1038
1131
|
|
|
1039
1132
|
// src/components/Tabs/Tabs.tsx
|
|
1040
1133
|
var import_react4 = require("react");
|
|
1041
|
-
var
|
|
1134
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1042
1135
|
function Tabs({
|
|
1043
1136
|
items,
|
|
1044
1137
|
defaultValue,
|
|
@@ -1109,8 +1202,8 @@ function Tabs({
|
|
|
1109
1202
|
selectTab(nextId2);
|
|
1110
1203
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1111
1204
|
};
|
|
1112
|
-
return /* @__PURE__ */ (0,
|
|
1113
|
-
/* @__PURE__ */ (0,
|
|
1205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1206
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1114
1207
|
"div",
|
|
1115
1208
|
{
|
|
1116
1209
|
ref: tabListRef,
|
|
@@ -1123,7 +1216,7 @@ function Tabs({
|
|
|
1123
1216
|
const isActive = item.id === activeId;
|
|
1124
1217
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1125
1218
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1126
|
-
return /* @__PURE__ */ (0,
|
|
1219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1127
1220
|
"button",
|
|
1128
1221
|
{
|
|
1129
1222
|
ref: (el) => {
|
|
@@ -1154,7 +1247,7 @@ function Tabs({
|
|
|
1154
1247
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1155
1248
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1156
1249
|
const isActive = item.id === activeId;
|
|
1157
|
-
return /* @__PURE__ */ (0,
|
|
1250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1158
1251
|
"div",
|
|
1159
1252
|
{
|
|
1160
1253
|
id: panelId,
|
|
@@ -1171,14 +1264,14 @@ function Tabs({
|
|
|
1171
1264
|
}
|
|
1172
1265
|
|
|
1173
1266
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1174
|
-
var
|
|
1175
|
-
var
|
|
1267
|
+
var React11 = __toESM(require("react"), 1);
|
|
1268
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1176
1269
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1177
|
-
const switcherRef =
|
|
1178
|
-
const buttonRefs =
|
|
1179
|
-
const indicatorMotionReadyRef =
|
|
1270
|
+
const switcherRef = React11.useRef(null);
|
|
1271
|
+
const buttonRefs = React11.useRef([]);
|
|
1272
|
+
const indicatorMotionReadyRef = React11.useRef(false);
|
|
1180
1273
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1181
|
-
|
|
1274
|
+
React11.useLayoutEffect(() => {
|
|
1182
1275
|
const switcher = switcherRef.current;
|
|
1183
1276
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1184
1277
|
let motionFrame = 0;
|
|
@@ -1230,7 +1323,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1230
1323
|
onValueChange(items[nextIndex].value);
|
|
1231
1324
|
}
|
|
1232
1325
|
};
|
|
1233
|
-
return /* @__PURE__ */ (0,
|
|
1326
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1234
1327
|
"div",
|
|
1235
1328
|
{
|
|
1236
1329
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1238,10 +1331,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1238
1331
|
"aria-label": ariaLabel,
|
|
1239
1332
|
ref: switcherRef,
|
|
1240
1333
|
children: [
|
|
1241
|
-
/* @__PURE__ */ (0,
|
|
1334
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1242
1335
|
items.map((item, index) => {
|
|
1243
1336
|
const active = item.value === value;
|
|
1244
|
-
return /* @__PURE__ */ (0,
|
|
1337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1245
1338
|
"button",
|
|
1246
1339
|
{
|
|
1247
1340
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1274,8 +1367,8 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1274
1367
|
|
|
1275
1368
|
// src/components/Disclosure/Disclosure.tsx
|
|
1276
1369
|
var import_react5 = require("react");
|
|
1277
|
-
var
|
|
1278
|
-
var
|
|
1370
|
+
var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
|
|
1371
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1279
1372
|
function Disclosure({
|
|
1280
1373
|
title,
|
|
1281
1374
|
meta,
|
|
@@ -1303,7 +1396,7 @@ function Disclosure({
|
|
|
1303
1396
|
onOpenChange?.(next);
|
|
1304
1397
|
}
|
|
1305
1398
|
};
|
|
1306
|
-
return /* @__PURE__ */ (0,
|
|
1399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1307
1400
|
"div",
|
|
1308
1401
|
{
|
|
1309
1402
|
className: cn(
|
|
@@ -1314,7 +1407,7 @@ function Disclosure({
|
|
|
1314
1407
|
className
|
|
1315
1408
|
),
|
|
1316
1409
|
children: [
|
|
1317
|
-
/* @__PURE__ */ (0,
|
|
1410
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1318
1411
|
"button",
|
|
1319
1412
|
{
|
|
1320
1413
|
type: "button",
|
|
@@ -1325,13 +1418,13 @@ function Disclosure({
|
|
|
1325
1418
|
disabled,
|
|
1326
1419
|
onClick: toggle,
|
|
1327
1420
|
children: [
|
|
1328
|
-
/* @__PURE__ */ (0,
|
|
1329
|
-
/* @__PURE__ */ (0,
|
|
1330
|
-
meta && /* @__PURE__ */ (0,
|
|
1421
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons8.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons8.ChevronRight, { size: 16 }) }),
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-disclosure-title", children: title }),
|
|
1423
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
|
|
1331
1424
|
]
|
|
1332
1425
|
}
|
|
1333
1426
|
),
|
|
1334
|
-
/* @__PURE__ */ (0,
|
|
1427
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1335
1428
|
"div",
|
|
1336
1429
|
{
|
|
1337
1430
|
id: panelId,
|
|
@@ -1339,7 +1432,7 @@ function Disclosure({
|
|
|
1339
1432
|
"aria-labelledby": headerId,
|
|
1340
1433
|
className: "fractal-disclosure-panel",
|
|
1341
1434
|
hidden: !isOpen,
|
|
1342
|
-
children: /* @__PURE__ */ (0,
|
|
1435
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
|
|
1343
1436
|
}
|
|
1344
1437
|
)
|
|
1345
1438
|
]
|
|
@@ -1348,18 +1441,18 @@ function Disclosure({
|
|
|
1348
1441
|
}
|
|
1349
1442
|
|
|
1350
1443
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
1351
|
-
var
|
|
1444
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1352
1445
|
var LATTICE_COUNT = 160;
|
|
1353
1446
|
var WAVE_PERIOD = 80;
|
|
1354
1447
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
1355
|
-
return /* @__PURE__ */ (0,
|
|
1448
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1356
1449
|
"span",
|
|
1357
1450
|
{
|
|
1358
1451
|
"aria-label": label,
|
|
1359
1452
|
className: cn("fractal-lattice-loader", className),
|
|
1360
1453
|
role: "progressbar",
|
|
1361
1454
|
...props,
|
|
1362
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0,
|
|
1455
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1363
1456
|
"span",
|
|
1364
1457
|
{
|
|
1365
1458
|
"aria-hidden": "true",
|
|
@@ -1373,10 +1466,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
1373
1466
|
}
|
|
1374
1467
|
|
|
1375
1468
|
// src/components/Ghost/Ghost.tsx
|
|
1376
|
-
var
|
|
1469
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1377
1470
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1378
1471
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
1379
|
-
return /* @__PURE__ */ (0,
|
|
1472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1380
1473
|
"div",
|
|
1381
1474
|
{
|
|
1382
1475
|
"aria-hidden": "true",
|
|
@@ -1392,15 +1485,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
1392
1485
|
);
|
|
1393
1486
|
}
|
|
1394
1487
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
1395
|
-
return /* @__PURE__ */ (0,
|
|
1488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
1396
1489
|
}
|
|
1397
1490
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
1398
|
-
return /* @__PURE__ */ (0,
|
|
1491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
1399
1492
|
}
|
|
1400
1493
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
1401
|
-
return /* @__PURE__ */ (0,
|
|
1402
|
-
showHeader && /* @__PURE__ */ (0,
|
|
1403
|
-
/* @__PURE__ */ (0,
|
|
1494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
1495
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: "38%" }),
|
|
1496
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
1404
1497
|
] });
|
|
1405
1498
|
}
|
|
1406
1499
|
function DataTableGhost({
|
|
@@ -1414,109 +1507,109 @@ function DataTableGhost({
|
|
|
1414
1507
|
...props
|
|
1415
1508
|
}) {
|
|
1416
1509
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
1417
|
-
return /* @__PURE__ */ (0,
|
|
1418
|
-
(showHeader || headers) && /* @__PURE__ */ (0,
|
|
1419
|
-
/* @__PURE__ */ (0,
|
|
1510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "fractal-ghost-table__table", children: [
|
|
1511
|
+
(showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
1512
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
1420
1513
|
] }) });
|
|
1421
1514
|
}
|
|
1422
1515
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
1423
|
-
return /* @__PURE__ */ (0,
|
|
1516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FormFieldGhost, { className, labelWidth, ...props });
|
|
1424
1517
|
}
|
|
1425
1518
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
1426
|
-
return /* @__PURE__ */ (0,
|
|
1519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
1427
1520
|
}
|
|
1428
1521
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
1429
|
-
return /* @__PURE__ */ (0,
|
|
1522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
1430
1523
|
}
|
|
1431
1524
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
1432
|
-
return /* @__PURE__ */ (0,
|
|
1433
|
-
/* @__PURE__ */ (0,
|
|
1434
|
-
/* @__PURE__ */ (0,
|
|
1525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
1526
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LabelGhost, { width: labelWidth }),
|
|
1527
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
1435
1528
|
] });
|
|
1436
1529
|
}
|
|
1437
1530
|
function AlertGhost({ className, ...props }) {
|
|
1438
|
-
return /* @__PURE__ */ (0,
|
|
1439
|
-
/* @__PURE__ */ (0,
|
|
1440
|
-
/* @__PURE__ */ (0,
|
|
1531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
1532
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: "30%" }),
|
|
1533
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { size: "sm", width: "78%" })
|
|
1441
1534
|
] });
|
|
1442
1535
|
}
|
|
1443
1536
|
function CheckboxGhost({ className, ...props }) {
|
|
1444
|
-
return /* @__PURE__ */ (0,
|
|
1445
|
-
/* @__PURE__ */ (0,
|
|
1446
|
-
/* @__PURE__ */ (0,
|
|
1537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
1539
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: "42%" })
|
|
1447
1540
|
] });
|
|
1448
1541
|
}
|
|
1449
1542
|
var ToggleGhost = CheckboxGhost;
|
|
1450
1543
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
1451
|
-
return /* @__PURE__ */ (0,
|
|
1544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
1452
1545
|
}
|
|
1453
1546
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
1454
|
-
return /* @__PURE__ */ (0,
|
|
1547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
1455
1548
|
}
|
|
1456
1549
|
var TextButtonGhost = LinkGhost;
|
|
1457
1550
|
function DropdownGhost({ className, ...props }) {
|
|
1458
|
-
return /* @__PURE__ */ (0,
|
|
1459
|
-
/* @__PURE__ */ (0,
|
|
1460
|
-
/* @__PURE__ */ (0,
|
|
1551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
1552
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: "38%" }),
|
|
1553
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
1461
1554
|
] });
|
|
1462
1555
|
}
|
|
1463
1556
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
1464
|
-
return /* @__PURE__ */ (0,
|
|
1557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, {}, index)) });
|
|
1465
1558
|
}
|
|
1466
1559
|
var TabsGhost = ContentSwitcherGhost;
|
|
1467
1560
|
function DisclosureGhost({ className, ...props }) {
|
|
1468
|
-
return /* @__PURE__ */ (0,
|
|
1469
|
-
/* @__PURE__ */ (0,
|
|
1470
|
-
/* @__PURE__ */ (0,
|
|
1561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
1562
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
1563
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: "42%" })
|
|
1471
1564
|
] });
|
|
1472
1565
|
}
|
|
1473
1566
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
1474
|
-
return /* @__PURE__ */ (0,
|
|
1567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, {}, index)) });
|
|
1475
1568
|
}
|
|
1476
1569
|
function FileDropzoneGhost({ className, ...props }) {
|
|
1477
|
-
return /* @__PURE__ */ (0,
|
|
1478
|
-
/* @__PURE__ */ (0,
|
|
1479
|
-
/* @__PURE__ */ (0,
|
|
1480
|
-
/* @__PURE__ */ (0,
|
|
1570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
1571
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
1572
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: "26%" }),
|
|
1573
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { size: "sm", width: "46%" })
|
|
1481
1574
|
] });
|
|
1482
1575
|
}
|
|
1483
1576
|
function PromptCardGhost({ className, ...props }) {
|
|
1484
|
-
return /* @__PURE__ */ (0,
|
|
1577
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
1485
1578
|
}
|
|
1486
1579
|
function SortableTableGhost(props) {
|
|
1487
|
-
return /* @__PURE__ */ (0,
|
|
1580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DataTableGhost, { ...props });
|
|
1488
1581
|
}
|
|
1489
1582
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
1490
|
-
return /* @__PURE__ */ (0,
|
|
1491
|
-
/* @__PURE__ */ (0,
|
|
1492
|
-
/* @__PURE__ */ (0,
|
|
1493
|
-
/* @__PURE__ */ (0,
|
|
1494
|
-
/* @__PURE__ */ (0,
|
|
1583
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
1584
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
1585
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
1586
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, {}),
|
|
1587
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
1495
1588
|
] }, index)) })
|
|
1496
1589
|
] });
|
|
1497
1590
|
}
|
|
1498
1591
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
1499
|
-
return /* @__PURE__ */ (0,
|
|
1592
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
1500
1593
|
}
|
|
1501
1594
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
1502
|
-
return /* @__PURE__ */ (0,
|
|
1595
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
1503
1596
|
}
|
|
1504
1597
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
1505
|
-
return /* @__PURE__ */ (0,
|
|
1506
|
-
/* @__PURE__ */ (0,
|
|
1507
|
-
/* @__PURE__ */ (0,
|
|
1508
|
-
/* @__PURE__ */ (0,
|
|
1598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
1599
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
|
|
1600
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: "42%" }),
|
|
1601
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
|
|
1509
1602
|
] }),
|
|
1510
|
-
title && /* @__PURE__ */ (0,
|
|
1511
|
-
/* @__PURE__ */ (0,
|
|
1603
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
1604
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
1512
1605
|
] });
|
|
1513
1606
|
}
|
|
1514
1607
|
|
|
1515
1608
|
// src/components/Sidebar/Sidebar.tsx
|
|
1516
|
-
var
|
|
1517
|
-
var
|
|
1518
|
-
var Sidebar =
|
|
1519
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1609
|
+
var React12 = __toESM(require("react"), 1);
|
|
1610
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1611
|
+
var Sidebar = React12.forwardRef(
|
|
1612
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1520
1613
|
"aside",
|
|
1521
1614
|
{
|
|
1522
1615
|
ref,
|
|
@@ -1528,12 +1621,12 @@ var Sidebar = React11.forwardRef(
|
|
|
1528
1621
|
)
|
|
1529
1622
|
);
|
|
1530
1623
|
Sidebar.displayName = "Sidebar";
|
|
1531
|
-
var SidebarHeader =
|
|
1532
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1624
|
+
var SidebarHeader = React12.forwardRef(
|
|
1625
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
1533
1626
|
);
|
|
1534
1627
|
SidebarHeader.displayName = "SidebarHeader";
|
|
1535
|
-
var SidebarBrand =
|
|
1536
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0,
|
|
1628
|
+
var SidebarBrand = React12.forwardRef(
|
|
1629
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
1537
1630
|
);
|
|
1538
1631
|
SidebarBrand.displayName = "SidebarBrand";
|
|
1539
1632
|
function SidebarAccountMenu({
|
|
@@ -1544,7 +1637,7 @@ function SidebarAccountMenu({
|
|
|
1544
1637
|
icon,
|
|
1545
1638
|
className
|
|
1546
1639
|
}) {
|
|
1547
|
-
return /* @__PURE__ */ (0,
|
|
1640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1548
1641
|
Dropdown,
|
|
1549
1642
|
{
|
|
1550
1643
|
align: "left",
|
|
@@ -1554,25 +1647,25 @@ function SidebarAccountMenu({
|
|
|
1554
1647
|
panelClassName: "fractal-sidebar__account-panel",
|
|
1555
1648
|
selectedValue: "",
|
|
1556
1649
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
1557
|
-
triggerContent: /* @__PURE__ */ (0,
|
|
1558
|
-
icon && /* @__PURE__ */ (0,
|
|
1559
|
-
/* @__PURE__ */ (0,
|
|
1650
|
+
triggerContent: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
1651
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
1652
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
|
|
1560
1653
|
] }),
|
|
1561
1654
|
triggerLabel,
|
|
1562
1655
|
triggerVariant: "tertiary"
|
|
1563
1656
|
}
|
|
1564
1657
|
);
|
|
1565
1658
|
}
|
|
1566
|
-
var SidebarNav =
|
|
1567
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1659
|
+
var SidebarNav = React12.forwardRef(
|
|
1660
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
1568
1661
|
);
|
|
1569
1662
|
SidebarNav.displayName = "SidebarNav";
|
|
1570
|
-
var SidebarSection =
|
|
1571
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1663
|
+
var SidebarSection = React12.forwardRef(
|
|
1664
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
1572
1665
|
);
|
|
1573
1666
|
SidebarSection.displayName = "SidebarSection";
|
|
1574
|
-
var SidebarNavItem =
|
|
1575
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1667
|
+
var SidebarNavItem = React12.forwardRef(
|
|
1668
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1576
1669
|
"button",
|
|
1577
1670
|
{
|
|
1578
1671
|
ref,
|
|
@@ -1582,28 +1675,28 @@ var SidebarNavItem = React11.forwardRef(
|
|
|
1582
1675
|
"aria-current": active ? "page" : void 0,
|
|
1583
1676
|
...props,
|
|
1584
1677
|
children: [
|
|
1585
|
-
icon && /* @__PURE__ */ (0,
|
|
1586
|
-
/* @__PURE__ */ (0,
|
|
1587
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
1678
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
1679
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
1680
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
1588
1681
|
]
|
|
1589
1682
|
}
|
|
1590
1683
|
)
|
|
1591
1684
|
);
|
|
1592
1685
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
1593
|
-
var SidebarFooter =
|
|
1594
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1686
|
+
var SidebarFooter = React12.forwardRef(
|
|
1687
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
1595
1688
|
);
|
|
1596
1689
|
SidebarFooter.displayName = "SidebarFooter";
|
|
1597
1690
|
|
|
1598
1691
|
// src/components/SidePanel/SidePanel.tsx
|
|
1599
1692
|
var import_react_dom2 = require("react-dom");
|
|
1600
|
-
var
|
|
1601
|
-
var
|
|
1693
|
+
var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
|
|
1694
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1602
1695
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
1603
1696
|
useEscapeDismiss(80, onClose, open);
|
|
1604
1697
|
if (!open) return null;
|
|
1605
1698
|
return (0, import_react_dom2.createPortal)(
|
|
1606
|
-
/* @__PURE__ */ (0,
|
|
1699
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1607
1700
|
"aside",
|
|
1608
1701
|
{
|
|
1609
1702
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -1612,15 +1705,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1612
1705
|
role: "dialog",
|
|
1613
1706
|
onMouseDown: (event) => event.stopPropagation(),
|
|
1614
1707
|
children: [
|
|
1615
|
-
/* @__PURE__ */ (0,
|
|
1616
|
-
/* @__PURE__ */ (0,
|
|
1617
|
-
typeof title === "string" ? /* @__PURE__ */ (0,
|
|
1618
|
-
description && /* @__PURE__ */ (0,
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("header", { className: "fractal-side-panel__header", children: [
|
|
1709
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fractal-side-panel__heading", children: [
|
|
1710
|
+
typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fractal-side-panel__title", children: title }),
|
|
1711
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "fractal-side-panel__description", children: description })
|
|
1619
1712
|
] }),
|
|
1620
|
-
/* @__PURE__ */ (0,
|
|
1713
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons9.Close, { size: 18 }) })
|
|
1621
1714
|
] }),
|
|
1622
|
-
/* @__PURE__ */ (0,
|
|
1623
|
-
footer && /* @__PURE__ */ (0,
|
|
1715
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UILoader, { label: loadingLabel }) : children }),
|
|
1716
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
1624
1717
|
]
|
|
1625
1718
|
}
|
|
1626
1719
|
) }),
|
|
@@ -1629,18 +1722,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1629
1722
|
}
|
|
1630
1723
|
|
|
1631
1724
|
// src/components/Textarea/Textarea.tsx
|
|
1632
|
-
var
|
|
1633
|
-
var
|
|
1634
|
-
var Textarea =
|
|
1635
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1725
|
+
var React13 = __toESM(require("react"), 1);
|
|
1726
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1727
|
+
var Textarea = React13.forwardRef(
|
|
1728
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
1636
1729
|
);
|
|
1637
1730
|
Textarea.displayName = "Textarea";
|
|
1638
1731
|
|
|
1639
1732
|
// src/components/TextButton/TextButton.tsx
|
|
1640
|
-
var
|
|
1641
|
-
var
|
|
1642
|
-
var TextButton =
|
|
1643
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1733
|
+
var React14 = __toESM(require("react"), 1);
|
|
1734
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1735
|
+
var TextButton = React14.forwardRef(
|
|
1736
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1644
1737
|
"button",
|
|
1645
1738
|
{
|
|
1646
1739
|
ref,
|
|
@@ -1648,9 +1741,9 @@ var TextButton = React13.forwardRef(
|
|
|
1648
1741
|
type: "button",
|
|
1649
1742
|
...props,
|
|
1650
1743
|
children: [
|
|
1651
|
-
icon && iconPosition === "start" && /* @__PURE__ */ (0,
|
|
1652
|
-
/* @__PURE__ */ (0,
|
|
1653
|
-
icon && iconPosition === "end" && /* @__PURE__ */ (0,
|
|
1744
|
+
icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
1745
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children }),
|
|
1746
|
+
icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
1654
1747
|
]
|
|
1655
1748
|
}
|
|
1656
1749
|
)
|
|
@@ -1658,9 +1751,9 @@ var TextButton = React13.forwardRef(
|
|
|
1658
1751
|
TextButton.displayName = "TextButton";
|
|
1659
1752
|
|
|
1660
1753
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
1661
|
-
var
|
|
1662
|
-
var
|
|
1663
|
-
var
|
|
1754
|
+
var React15 = __toESM(require("react"), 1);
|
|
1755
|
+
var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
|
|
1756
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1664
1757
|
function FileDropzone({
|
|
1665
1758
|
files,
|
|
1666
1759
|
onFilesChange,
|
|
@@ -1671,17 +1764,17 @@ function FileDropzone({
|
|
|
1671
1764
|
description = "Files stay attached to this record.",
|
|
1672
1765
|
className
|
|
1673
1766
|
}) {
|
|
1674
|
-
const inputId =
|
|
1675
|
-
const inputRef =
|
|
1676
|
-
const [isDragging, setIsDragging] =
|
|
1767
|
+
const inputId = React15.useId();
|
|
1768
|
+
const inputRef = React15.useRef(null);
|
|
1769
|
+
const [isDragging, setIsDragging] = React15.useState(false);
|
|
1677
1770
|
const addFiles = (nextFiles) => {
|
|
1678
1771
|
if (disabled) return;
|
|
1679
1772
|
const additions = Array.from(nextFiles);
|
|
1680
1773
|
if (additions.length === 0) return;
|
|
1681
1774
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
1682
1775
|
};
|
|
1683
|
-
return /* @__PURE__ */ (0,
|
|
1684
|
-
/* @__PURE__ */ (0,
|
|
1776
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
1777
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1685
1778
|
"input",
|
|
1686
1779
|
{
|
|
1687
1780
|
ref: inputRef,
|
|
@@ -1697,7 +1790,7 @@ function FileDropzone({
|
|
|
1697
1790
|
}
|
|
1698
1791
|
}
|
|
1699
1792
|
),
|
|
1700
|
-
/* @__PURE__ */ (0,
|
|
1793
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1701
1794
|
"button",
|
|
1702
1795
|
{
|
|
1703
1796
|
className: "fractal-file-dropzone__target",
|
|
@@ -1720,18 +1813,18 @@ function FileDropzone({
|
|
|
1720
1813
|
addFiles(event.dataTransfer.files);
|
|
1721
1814
|
},
|
|
1722
1815
|
children: [
|
|
1723
|
-
/* @__PURE__ */ (0,
|
|
1724
|
-
/* @__PURE__ */ (0,
|
|
1725
|
-
/* @__PURE__ */ (0,
|
|
1726
|
-
description && /* @__PURE__ */ (0,
|
|
1816
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_fractal_icons10.FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
1817
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
|
|
1818
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
1819
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
|
|
1727
1820
|
] })
|
|
1728
1821
|
]
|
|
1729
1822
|
}
|
|
1730
1823
|
),
|
|
1731
|
-
files.length > 0 && /* @__PURE__ */ (0,
|
|
1732
|
-
/* @__PURE__ */ (0,
|
|
1733
|
-
/* @__PURE__ */ (0,
|
|
1734
|
-
/* @__PURE__ */ (0,
|
|
1824
|
+
files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
|
|
1825
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
1826
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
1827
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1735
1828
|
"button",
|
|
1736
1829
|
{
|
|
1737
1830
|
className: "fractal-file-dropzone__remove",
|
|
@@ -1739,7 +1832,7 @@ function FileDropzone({
|
|
|
1739
1832
|
"aria-label": `Remove ${file.name}`,
|
|
1740
1833
|
disabled,
|
|
1741
1834
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
1742
|
-
children: /* @__PURE__ */ (0,
|
|
1835
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_fractal_icons10.Close, { "aria-hidden": "true", size: 14 })
|
|
1743
1836
|
}
|
|
1744
1837
|
)
|
|
1745
1838
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -1752,8 +1845,8 @@ function formatFileSize(bytes) {
|
|
|
1752
1845
|
}
|
|
1753
1846
|
|
|
1754
1847
|
// src/components/Pagination/Pagination.tsx
|
|
1755
|
-
var
|
|
1756
|
-
var
|
|
1848
|
+
var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
|
|
1849
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1757
1850
|
function Pagination({
|
|
1758
1851
|
page,
|
|
1759
1852
|
pageSize,
|
|
@@ -1769,10 +1862,10 @@ function Pagination({
|
|
|
1769
1862
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
1770
1863
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
1771
1864
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
1772
|
-
return /* @__PURE__ */ (0,
|
|
1773
|
-
/* @__PURE__ */ (0,
|
|
1774
|
-
/* @__PURE__ */ (0,
|
|
1775
|
-
canChangePageSize && /* @__PURE__ */ (0,
|
|
1865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
1866
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
1867
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-pagination__controls", children: [
|
|
1868
|
+
canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1776
1869
|
Dropdown,
|
|
1777
1870
|
{
|
|
1778
1871
|
align: "right",
|
|
@@ -1789,7 +1882,7 @@ function Pagination({
|
|
|
1789
1882
|
triggerVariant: "tertiary"
|
|
1790
1883
|
}
|
|
1791
1884
|
),
|
|
1792
|
-
/* @__PURE__ */ (0,
|
|
1885
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1793
1886
|
"button",
|
|
1794
1887
|
{
|
|
1795
1888
|
className: "fractal-pagination__button",
|
|
@@ -1798,15 +1891,15 @@ function Pagination({
|
|
|
1798
1891
|
title: "Previous page",
|
|
1799
1892
|
disabled: currentPage === 1 || totalItems === 0,
|
|
1800
1893
|
onClick: () => onPageChange(currentPage - 1),
|
|
1801
|
-
children: /* @__PURE__ */ (0,
|
|
1894
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons11.ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
1802
1895
|
}
|
|
1803
1896
|
),
|
|
1804
|
-
/* @__PURE__ */ (0,
|
|
1897
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
1805
1898
|
currentPage,
|
|
1806
1899
|
" of ",
|
|
1807
1900
|
totalPages
|
|
1808
1901
|
] }),
|
|
1809
|
-
/* @__PURE__ */ (0,
|
|
1902
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1810
1903
|
"button",
|
|
1811
1904
|
{
|
|
1812
1905
|
className: "fractal-pagination__button",
|
|
@@ -1815,7 +1908,7 @@ function Pagination({
|
|
|
1815
1908
|
title: "Next page",
|
|
1816
1909
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
1817
1910
|
onClick: () => onPageChange(currentPage + 1),
|
|
1818
|
-
children: /* @__PURE__ */ (0,
|
|
1911
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons11.ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
1819
1912
|
}
|
|
1820
1913
|
)
|
|
1821
1914
|
] })
|
|
@@ -1864,6 +1957,7 @@ function Pagination({
|
|
|
1864
1957
|
LinkGhost,
|
|
1865
1958
|
Modal,
|
|
1866
1959
|
ModalGhost,
|
|
1960
|
+
NumberInput,
|
|
1867
1961
|
Pagination,
|
|
1868
1962
|
PaginationGhost,
|
|
1869
1963
|
PromptCard,
|