@mirror-physics/fractal-ui 0.2.0-next.42 → 0.2.0-next.44
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 +335 -266
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +53 -0
- 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 +330 -262
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -74,6 +74,7 @@ __export(index_exports, {
|
|
|
74
74
|
NumberInput: () => NumberInput,
|
|
75
75
|
Pagination: () => Pagination,
|
|
76
76
|
PaginationGhost: () => PaginationGhost,
|
|
77
|
+
PasswordInput: () => PasswordInput,
|
|
77
78
|
PromptCard: () => PromptCard,
|
|
78
79
|
PromptCardGhost: () => PromptCardGhost,
|
|
79
80
|
PromptGrid: () => PromptGrid,
|
|
@@ -519,11 +520,61 @@ function NumberInput({
|
|
|
519
520
|
] });
|
|
520
521
|
}
|
|
521
522
|
|
|
522
|
-
// src/components/
|
|
523
|
+
// src/components/PasswordInput/PasswordInput.tsx
|
|
523
524
|
var React6 = __toESM(require("react"), 1);
|
|
525
|
+
var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
|
|
524
526
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
525
|
-
var
|
|
526
|
-
({
|
|
527
|
+
var PasswordInput = React6.forwardRef(
|
|
528
|
+
({
|
|
529
|
+
className,
|
|
530
|
+
disabled,
|
|
531
|
+
showPasswordLabel = "Show password",
|
|
532
|
+
hidePasswordLabel = "Hide password",
|
|
533
|
+
...props
|
|
534
|
+
}, ref) => {
|
|
535
|
+
const [passwordVisible, setPasswordVisible] = React6.useState(false);
|
|
536
|
+
const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
|
|
537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
538
|
+
"div",
|
|
539
|
+
{
|
|
540
|
+
className: cn("fractal-password-input", className),
|
|
541
|
+
"data-password-visible": passwordVisible ? "" : void 0,
|
|
542
|
+
children: [
|
|
543
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
544
|
+
Input,
|
|
545
|
+
{
|
|
546
|
+
...props,
|
|
547
|
+
ref,
|
|
548
|
+
className: "fractal-password-input-field",
|
|
549
|
+
disabled,
|
|
550
|
+
type: passwordVisible ? "text" : "password"
|
|
551
|
+
}
|
|
552
|
+
),
|
|
553
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
554
|
+
"button",
|
|
555
|
+
{
|
|
556
|
+
type: "button",
|
|
557
|
+
className: "fractal-password-input-toggle",
|
|
558
|
+
"aria-label": toggleLabel,
|
|
559
|
+
"aria-pressed": passwordVisible,
|
|
560
|
+
disabled,
|
|
561
|
+
title: toggleLabel,
|
|
562
|
+
onClick: () => setPasswordVisible((visible) => !visible),
|
|
563
|
+
children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fractal_icons4.EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fractal_icons4.Eye, { "aria-hidden": "true", size: 18 })
|
|
564
|
+
}
|
|
565
|
+
)
|
|
566
|
+
]
|
|
567
|
+
}
|
|
568
|
+
);
|
|
569
|
+
}
|
|
570
|
+
);
|
|
571
|
+
PasswordInput.displayName = "PasswordInput";
|
|
572
|
+
|
|
573
|
+
// src/components/Label/Label.tsx
|
|
574
|
+
var React7 = __toESM(require("react"), 1);
|
|
575
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
576
|
+
var Label = React7.forwardRef(
|
|
577
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
527
578
|
"label",
|
|
528
579
|
{
|
|
529
580
|
ref,
|
|
@@ -535,20 +586,20 @@ var Label = React6.forwardRef(
|
|
|
535
586
|
Label.displayName = "Label";
|
|
536
587
|
|
|
537
588
|
// src/components/Alert/Alert.tsx
|
|
538
|
-
var
|
|
539
|
-
var
|
|
540
|
-
var
|
|
589
|
+
var React8 = __toESM(require("react"), 1);
|
|
590
|
+
var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
|
|
591
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
541
592
|
var defaultIcons = {
|
|
542
|
-
default:
|
|
543
|
-
info:
|
|
544
|
-
success:
|
|
545
|
-
warning:
|
|
546
|
-
error:
|
|
593
|
+
default: import_fractal_icons5.CircleInfo,
|
|
594
|
+
info: import_fractal_icons5.CircleInfo,
|
|
595
|
+
success: import_fractal_icons5.CircleCheck,
|
|
596
|
+
warning: import_fractal_icons5.Warning,
|
|
597
|
+
error: import_fractal_icons5.CircleClose
|
|
547
598
|
};
|
|
548
|
-
var Alert =
|
|
599
|
+
var Alert = React8.forwardRef(
|
|
549
600
|
({ className, variant = "default", icon, children, ...props }, ref) => {
|
|
550
601
|
const DefaultIcon = defaultIcons[variant];
|
|
551
|
-
return /* @__PURE__ */ (0,
|
|
602
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
552
603
|
"div",
|
|
553
604
|
{
|
|
554
605
|
ref,
|
|
@@ -556,27 +607,27 @@ var Alert = React7.forwardRef(
|
|
|
556
607
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
557
608
|
...props,
|
|
558
609
|
children: [
|
|
559
|
-
/* @__PURE__ */ (0,
|
|
560
|
-
/* @__PURE__ */ (0,
|
|
610
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultIcon, { size: 18 }) }),
|
|
611
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fractal-alert-content", children })
|
|
561
612
|
]
|
|
562
613
|
}
|
|
563
614
|
);
|
|
564
615
|
}
|
|
565
616
|
);
|
|
566
617
|
Alert.displayName = "Alert";
|
|
567
|
-
var AlertTitle =
|
|
568
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
618
|
+
var AlertTitle = React8.forwardRef(
|
|
619
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
569
620
|
);
|
|
570
621
|
AlertTitle.displayName = "AlertTitle";
|
|
571
|
-
var AlertDescription =
|
|
572
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
622
|
+
var AlertDescription = React8.forwardRef(
|
|
623
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
573
624
|
);
|
|
574
625
|
AlertDescription.displayName = "AlertDescription";
|
|
575
626
|
|
|
576
627
|
// src/components/Toggle/Toggle.tsx
|
|
577
|
-
var
|
|
628
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
578
629
|
function Toggle({ checked, onChange, label, className }) {
|
|
579
|
-
return /* @__PURE__ */ (0,
|
|
630
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
580
631
|
"button",
|
|
581
632
|
{
|
|
582
633
|
type: "button",
|
|
@@ -585,8 +636,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
585
636
|
className: cn("fractal-toggle", className),
|
|
586
637
|
onClick: () => onChange(!checked),
|
|
587
638
|
children: [
|
|
588
|
-
/* @__PURE__ */ (0,
|
|
589
|
-
label && /* @__PURE__ */ (0,
|
|
639
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
640
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-toggle-label", children: label })
|
|
590
641
|
]
|
|
591
642
|
}
|
|
592
643
|
);
|
|
@@ -647,7 +698,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
647
698
|
|
|
648
699
|
// src/components/UILoader/UILoader.tsx
|
|
649
700
|
var import_react2 = require("react");
|
|
650
|
-
var
|
|
701
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
651
702
|
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";
|
|
652
703
|
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";
|
|
653
704
|
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";
|
|
@@ -656,7 +707,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
656
707
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
657
708
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
658
709
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
659
|
-
return /* @__PURE__ */ (0,
|
|
710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
660
711
|
"span",
|
|
661
712
|
{
|
|
662
713
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -664,52 +715,52 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
664
715
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
665
716
|
role: ariaHidden ? void 0 : "status",
|
|
666
717
|
style,
|
|
667
|
-
children: /* @__PURE__ */ (0,
|
|
668
|
-
/* @__PURE__ */ (0,
|
|
669
|
-
/* @__PURE__ */ (0,
|
|
670
|
-
/* @__PURE__ */ (0,
|
|
671
|
-
/* @__PURE__ */ (0,
|
|
718
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
719
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("defs", { children: [
|
|
720
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
721
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
722
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
672
723
|
] }),
|
|
673
|
-
/* @__PURE__ */ (0,
|
|
674
|
-
/* @__PURE__ */ (0,
|
|
675
|
-
/* @__PURE__ */ (0,
|
|
676
|
-
/* @__PURE__ */ (0,
|
|
724
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
725
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
726
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
727
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
677
728
|
] }),
|
|
678
|
-
/* @__PURE__ */ (0,
|
|
679
|
-
/* @__PURE__ */ (0,
|
|
680
|
-
/* @__PURE__ */ (0,
|
|
681
|
-
/* @__PURE__ */ (0,
|
|
729
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("clipPath", { id: clipId, children: [
|
|
730
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: LEFT }),
|
|
731
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: CENTER }),
|
|
732
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: RIGHT })
|
|
682
733
|
] })
|
|
683
734
|
] }),
|
|
684
|
-
/* @__PURE__ */ (0,
|
|
685
|
-
/* @__PURE__ */ (0,
|
|
686
|
-
/* @__PURE__ */ (0,
|
|
687
|
-
/* @__PURE__ */ (0,
|
|
735
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
736
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
737
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
738
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
688
739
|
] })
|
|
689
740
|
}
|
|
690
741
|
);
|
|
691
742
|
}
|
|
692
743
|
|
|
693
744
|
// src/components/Modal/Modal.tsx
|
|
694
|
-
var
|
|
695
|
-
var CloseIcon = () => /* @__PURE__ */ (0,
|
|
745
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
746
|
+
var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
696
747
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
697
748
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
698
749
|
if (!open) return null;
|
|
699
750
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
700
751
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
701
752
|
return (0, import_react_dom.createPortal)(
|
|
702
|
-
/* @__PURE__ */ (0,
|
|
753
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
703
754
|
"div",
|
|
704
755
|
{
|
|
705
756
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
706
757
|
onClick: (e) => e.stopPropagation(),
|
|
707
758
|
children: [
|
|
708
|
-
/* @__PURE__ */ (0,
|
|
709
|
-
/* @__PURE__ */ (0,
|
|
710
|
-
!noClose && /* @__PURE__ */ (0,
|
|
759
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fractal-modal-title-row", children: [
|
|
760
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
761
|
+
!noClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, {}) })
|
|
711
762
|
] }),
|
|
712
|
-
/* @__PURE__ */ (0,
|
|
763
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
713
764
|
"div",
|
|
714
765
|
{
|
|
715
766
|
"aria-busy": loading || void 0,
|
|
@@ -719,10 +770,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
719
770
|
loading && "fractal-modal-body--loading",
|
|
720
771
|
scrollable && "fractal-modal-body--scrollable"
|
|
721
772
|
),
|
|
722
|
-
children: loading ? /* @__PURE__ */ (0,
|
|
773
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UILoader, { label: loadingLabel }) : children
|
|
723
774
|
}
|
|
724
775
|
),
|
|
725
|
-
footer && /* @__PURE__ */ (0,
|
|
776
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
726
777
|
]
|
|
727
778
|
}
|
|
728
779
|
) }),
|
|
@@ -731,17 +782,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
731
782
|
}
|
|
732
783
|
|
|
733
784
|
// src/components/DataTable/DataTable.tsx
|
|
734
|
-
var
|
|
785
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
735
786
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
|
|
736
|
-
return /* @__PURE__ */ (0,
|
|
737
|
-
header && /* @__PURE__ */ (0,
|
|
738
|
-
data.length === 0 ? /* @__PURE__ */ (0,
|
|
739
|
-
/* @__PURE__ */ (0,
|
|
740
|
-
/* @__PURE__ */ (0,
|
|
787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fractal-datatable-surface", children: [
|
|
788
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-datatable-header", children: header }),
|
|
789
|
+
data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "fractal-datatable-table", children: [
|
|
790
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
|
|
791
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
741
792
|
"tr",
|
|
742
793
|
{
|
|
743
794
|
className: "fractal-datatable-row",
|
|
744
|
-
children: columns.map((col) => /* @__PURE__ */ (0,
|
|
795
|
+
children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
|
|
745
796
|
},
|
|
746
797
|
rowIndex
|
|
747
798
|
)) })
|
|
@@ -750,9 +801,9 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
|
|
|
750
801
|
}
|
|
751
802
|
|
|
752
803
|
// src/components/Dropdown/Dropdown.tsx
|
|
753
|
-
var
|
|
754
|
-
var
|
|
755
|
-
var
|
|
804
|
+
var React9 = __toESM(require("react"), 1);
|
|
805
|
+
var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
|
|
806
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
756
807
|
var MARGIN = 4;
|
|
757
808
|
function Dropdown({
|
|
758
809
|
items,
|
|
@@ -773,10 +824,10 @@ function Dropdown({
|
|
|
773
824
|
closeOnSelect = true,
|
|
774
825
|
disabled = false
|
|
775
826
|
}) {
|
|
776
|
-
const [open, setOpen] =
|
|
777
|
-
const triggerRef =
|
|
778
|
-
const panelRef =
|
|
779
|
-
const [panelStyle, setPanelStyle] =
|
|
827
|
+
const [open, setOpen] = React9.useState(false);
|
|
828
|
+
const triggerRef = React9.useRef(null);
|
|
829
|
+
const panelRef = React9.useRef(null);
|
|
830
|
+
const [panelStyle, setPanelStyle] = React9.useState({});
|
|
780
831
|
const visibleItems = items.filter(
|
|
781
832
|
(item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
|
|
782
833
|
);
|
|
@@ -784,8 +835,8 @@ function Dropdown({
|
|
|
784
835
|
const selectableItems = visibleItems.filter((i) => i.kind !== "header");
|
|
785
836
|
const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
|
|
786
837
|
const isUp = direction === "up";
|
|
787
|
-
const ChevronIcon = isUp ?
|
|
788
|
-
|
|
838
|
+
const ChevronIcon = isUp ? import_fractal_icons6.ChevronUp : import_fractal_icons6.ChevronDown;
|
|
839
|
+
React9.useLayoutEffect(() => {
|
|
789
840
|
if (!open || !triggerRef.current || !panelRef.current) return;
|
|
790
841
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
791
842
|
const panelRect = panelRef.current.getBoundingClientRect();
|
|
@@ -819,7 +870,7 @@ function Dropdown({
|
|
|
819
870
|
}
|
|
820
871
|
setPanelStyle({ top, left, right });
|
|
821
872
|
}, [open, isUp, align]);
|
|
822
|
-
|
|
873
|
+
React9.useEffect(() => {
|
|
823
874
|
if (!open) return;
|
|
824
875
|
const handleClickOutside = (e) => {
|
|
825
876
|
const target = e.target;
|
|
@@ -829,8 +880,8 @@ function Dropdown({
|
|
|
829
880
|
document.addEventListener("mousedown", handleClickOutside);
|
|
830
881
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
831
882
|
}, [open]);
|
|
832
|
-
return /* @__PURE__ */ (0,
|
|
833
|
-
/* @__PURE__ */ (0,
|
|
883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("fractal-dropdown", className), children: [
|
|
884
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
834
885
|
"button",
|
|
835
886
|
{
|
|
836
887
|
ref: triggerRef,
|
|
@@ -848,15 +899,15 @@ function Dropdown({
|
|
|
848
899
|
triggerClassName
|
|
849
900
|
),
|
|
850
901
|
children: [
|
|
851
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */ (0,
|
|
852
|
-
selected.icon != null && /* @__PURE__ */ (0,
|
|
853
|
-
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0,
|
|
902
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
903
|
+
selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
|
|
904
|
+
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
|
|
854
905
|
] }),
|
|
855
|
-
!noChevron && !iconOnly && /* @__PURE__ */ (0,
|
|
906
|
+
!noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
856
907
|
]
|
|
857
908
|
}
|
|
858
909
|
),
|
|
859
|
-
open && /* @__PURE__ */ (0,
|
|
910
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
860
911
|
"div",
|
|
861
912
|
{
|
|
862
913
|
ref: panelRef,
|
|
@@ -865,21 +916,21 @@ function Dropdown({
|
|
|
865
916
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
866
917
|
style: panelStyle,
|
|
867
918
|
children: [
|
|
868
|
-
label != null && /* @__PURE__ */ (0,
|
|
919
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-dropdown-label", children: label }),
|
|
869
920
|
visibleItems.map((item, index) => {
|
|
870
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */ (0,
|
|
871
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0,
|
|
921
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
|
|
922
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
|
|
872
923
|
if (item.kind === "header") {
|
|
873
|
-
return /* @__PURE__ */ (0,
|
|
924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(React9.Fragment, { children: [
|
|
874
925
|
topDivider,
|
|
875
|
-
/* @__PURE__ */ (0,
|
|
926
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
876
927
|
bottomDivider
|
|
877
928
|
] }, `header-${index}`);
|
|
878
929
|
}
|
|
879
930
|
const isSelected = item.value === selectedValue;
|
|
880
|
-
return /* @__PURE__ */ (0,
|
|
931
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(React9.Fragment, { children: [
|
|
881
932
|
topDivider,
|
|
882
|
-
/* @__PURE__ */ (0,
|
|
933
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
883
934
|
"button",
|
|
884
935
|
{
|
|
885
936
|
type: "button",
|
|
@@ -891,9 +942,9 @@ function Dropdown({
|
|
|
891
942
|
},
|
|
892
943
|
className: "fractal-dropdown-option",
|
|
893
944
|
children: [
|
|
894
|
-
item.icon != null && /* @__PURE__ */ (0,
|
|
895
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0,
|
|
896
|
-
item.trailing != null && /* @__PURE__ */ (0,
|
|
945
|
+
item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
946
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
947
|
+
item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
897
948
|
]
|
|
898
949
|
}
|
|
899
950
|
),
|
|
@@ -907,10 +958,10 @@ function Dropdown({
|
|
|
907
958
|
}
|
|
908
959
|
|
|
909
960
|
// src/components/Link/Link.tsx
|
|
910
|
-
var
|
|
911
|
-
var
|
|
912
|
-
var Link =
|
|
913
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0,
|
|
961
|
+
var React10 = __toESM(require("react"), 1);
|
|
962
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
963
|
+
var Link = React10.forwardRef(
|
|
964
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
914
965
|
"a",
|
|
915
966
|
{
|
|
916
967
|
ref,
|
|
@@ -922,10 +973,10 @@ var Link = React9.forwardRef(
|
|
|
922
973
|
Link.displayName = "Link";
|
|
923
974
|
|
|
924
975
|
// src/components/Chip/Chip.tsx
|
|
925
|
-
var
|
|
926
|
-
var
|
|
927
|
-
var Chip =
|
|
928
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0,
|
|
976
|
+
var React11 = __toESM(require("react"), 1);
|
|
977
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
978
|
+
var Chip = React11.forwardRef(
|
|
979
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
929
980
|
"span",
|
|
930
981
|
{
|
|
931
982
|
ref,
|
|
@@ -937,35 +988,52 @@ var Chip = React10.forwardRef(
|
|
|
937
988
|
Chip.displayName = "Chip";
|
|
938
989
|
|
|
939
990
|
// src/components/Checkbox/Checkbox.tsx
|
|
940
|
-
var
|
|
941
|
-
var
|
|
942
|
-
function Checkbox({
|
|
943
|
-
|
|
991
|
+
var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
|
|
992
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
993
|
+
function Checkbox({
|
|
994
|
+
checked,
|
|
995
|
+
indeterminate = false,
|
|
996
|
+
onCheckedChange,
|
|
997
|
+
className,
|
|
998
|
+
disabled,
|
|
999
|
+
onClick,
|
|
1000
|
+
onKeyDown,
|
|
1001
|
+
...props
|
|
1002
|
+
}) {
|
|
1003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
944
1004
|
"button",
|
|
945
1005
|
{
|
|
946
1006
|
...props,
|
|
947
|
-
className: cn(
|
|
1007
|
+
className: cn(
|
|
1008
|
+
"fractal-checkbox",
|
|
1009
|
+
(checked || indeterminate) && "fractal-checkbox--checked",
|
|
1010
|
+
indeterminate && "fractal-checkbox--indeterminate",
|
|
1011
|
+
className
|
|
1012
|
+
),
|
|
948
1013
|
type: "button",
|
|
949
1014
|
role: "checkbox",
|
|
950
|
-
"aria-checked": checked,
|
|
1015
|
+
"aria-checked": indeterminate ? "mixed" : checked,
|
|
951
1016
|
disabled,
|
|
952
1017
|
onClick: (event) => {
|
|
953
1018
|
onClick?.(event);
|
|
954
|
-
if (!event.defaultPrevented) onCheckedChange(!checked);
|
|
1019
|
+
if (!event.defaultPrevented) onCheckedChange(indeterminate || !checked);
|
|
955
1020
|
},
|
|
956
1021
|
onKeyDown: (event) => {
|
|
957
1022
|
onKeyDown?.(event);
|
|
958
1023
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
959
1024
|
},
|
|
960
|
-
children:
|
|
1025
|
+
children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
1026
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.Checkbox, { size: 18 }),
|
|
1027
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
1028
|
+
] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.Checkbox, { "aria-hidden": "true", size: 18 })
|
|
961
1029
|
}
|
|
962
1030
|
);
|
|
963
1031
|
}
|
|
964
1032
|
|
|
965
1033
|
// src/components/SortableTable/SortableTable.tsx
|
|
966
1034
|
var import_react3 = require("react");
|
|
967
|
-
var
|
|
968
|
-
var
|
|
1035
|
+
var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
|
|
1036
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
969
1037
|
function SortableTable({
|
|
970
1038
|
columns,
|
|
971
1039
|
data,
|
|
@@ -1041,13 +1109,13 @@ function SortableTable({
|
|
|
1041
1109
|
onSortChange?.(nextKey, nextDirection);
|
|
1042
1110
|
}
|
|
1043
1111
|
};
|
|
1044
|
-
return /* @__PURE__ */ (0,
|
|
1045
|
-
header && /* @__PURE__ */ (0,
|
|
1046
|
-
sorted.length === 0 ? /* @__PURE__ */ (0,
|
|
1047
|
-
/* @__PURE__ */ (0,
|
|
1112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
|
|
1113
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1114
|
+
sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { className: "fractal-sortable-table-table", children: [
|
|
1115
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
|
|
1048
1116
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1049
1117
|
if (!col.sortable) {
|
|
1050
|
-
return /* @__PURE__ */ (0,
|
|
1118
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1051
1119
|
"th",
|
|
1052
1120
|
{
|
|
1053
1121
|
className: "fractal-sortable-table-th",
|
|
@@ -1057,12 +1125,12 @@ function SortableTable({
|
|
|
1057
1125
|
col.key
|
|
1058
1126
|
);
|
|
1059
1127
|
}
|
|
1060
|
-
return /* @__PURE__ */ (0,
|
|
1128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1061
1129
|
"th",
|
|
1062
1130
|
{
|
|
1063
1131
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1064
1132
|
style: { width: col.width },
|
|
1065
|
-
children: /* @__PURE__ */ (0,
|
|
1133
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1066
1134
|
"button",
|
|
1067
1135
|
{
|
|
1068
1136
|
type: "button",
|
|
@@ -1073,8 +1141,8 @@ function SortableTable({
|
|
|
1073
1141
|
onClick: () => handleSortClick(col.key),
|
|
1074
1142
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1075
1143
|
children: [
|
|
1076
|
-
/* @__PURE__ */ (0,
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1144
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: col.header }),
|
|
1145
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.ArrowsUpDown, { size: 14 }) })
|
|
1078
1146
|
]
|
|
1079
1147
|
}
|
|
1080
1148
|
)
|
|
@@ -1082,13 +1150,13 @@ function SortableTable({
|
|
|
1082
1150
|
col.key
|
|
1083
1151
|
);
|
|
1084
1152
|
}) }) }),
|
|
1085
|
-
/* @__PURE__ */ (0,
|
|
1153
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { children: sorted.map((row, rowIndex) => {
|
|
1086
1154
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1087
1155
|
const action = rowAction ? {
|
|
1088
1156
|
label: rowAction.label(row, rowIndex),
|
|
1089
1157
|
icon: rowAction.icon(row, rowIndex)
|
|
1090
1158
|
} : null;
|
|
1091
|
-
return /* @__PURE__ */ (0,
|
|
1159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1092
1160
|
"tr",
|
|
1093
1161
|
{
|
|
1094
1162
|
className: cn(
|
|
@@ -1106,7 +1174,7 @@ function SortableTable({
|
|
|
1106
1174
|
"aria-label": action?.label,
|
|
1107
1175
|
role: onRowClick ? "button" : void 0,
|
|
1108
1176
|
tabIndex: onRowClick ? 0 : void 0,
|
|
1109
|
-
children: columns.map((col, columnIndex) => /* @__PURE__ */ (0,
|
|
1177
|
+
children: columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1110
1178
|
"td",
|
|
1111
1179
|
{
|
|
1112
1180
|
className: cn(
|
|
@@ -1116,7 +1184,7 @@ function SortableTable({
|
|
|
1116
1184
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1117
1185
|
children: [
|
|
1118
1186
|
col.render(row, rowIndex),
|
|
1119
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0,
|
|
1187
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1120
1188
|
]
|
|
1121
1189
|
},
|
|
1122
1190
|
col.key
|
|
@@ -1131,7 +1199,7 @@ function SortableTable({
|
|
|
1131
1199
|
|
|
1132
1200
|
// src/components/Tabs/Tabs.tsx
|
|
1133
1201
|
var import_react4 = require("react");
|
|
1134
|
-
var
|
|
1202
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1135
1203
|
function Tabs({
|
|
1136
1204
|
items,
|
|
1137
1205
|
defaultValue,
|
|
@@ -1202,8 +1270,8 @@ function Tabs({
|
|
|
1202
1270
|
selectTab(nextId2);
|
|
1203
1271
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1204
1272
|
};
|
|
1205
|
-
return /* @__PURE__ */ (0,
|
|
1206
|
-
/* @__PURE__ */ (0,
|
|
1273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1207
1275
|
"div",
|
|
1208
1276
|
{
|
|
1209
1277
|
ref: tabListRef,
|
|
@@ -1216,7 +1284,7 @@ function Tabs({
|
|
|
1216
1284
|
const isActive = item.id === activeId;
|
|
1217
1285
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1218
1286
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1219
|
-
return /* @__PURE__ */ (0,
|
|
1287
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1220
1288
|
"button",
|
|
1221
1289
|
{
|
|
1222
1290
|
ref: (el) => {
|
|
@@ -1247,7 +1315,7 @@ function Tabs({
|
|
|
1247
1315
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1248
1316
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1249
1317
|
const isActive = item.id === activeId;
|
|
1250
|
-
return /* @__PURE__ */ (0,
|
|
1318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1251
1319
|
"div",
|
|
1252
1320
|
{
|
|
1253
1321
|
id: panelId,
|
|
@@ -1264,14 +1332,14 @@ function Tabs({
|
|
|
1264
1332
|
}
|
|
1265
1333
|
|
|
1266
1334
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1267
|
-
var
|
|
1268
|
-
var
|
|
1335
|
+
var React12 = __toESM(require("react"), 1);
|
|
1336
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1269
1337
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1270
|
-
const switcherRef =
|
|
1271
|
-
const buttonRefs =
|
|
1272
|
-
const indicatorMotionReadyRef =
|
|
1338
|
+
const switcherRef = React12.useRef(null);
|
|
1339
|
+
const buttonRefs = React12.useRef([]);
|
|
1340
|
+
const indicatorMotionReadyRef = React12.useRef(false);
|
|
1273
1341
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1274
|
-
|
|
1342
|
+
React12.useLayoutEffect(() => {
|
|
1275
1343
|
const switcher = switcherRef.current;
|
|
1276
1344
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1277
1345
|
let motionFrame = 0;
|
|
@@ -1323,7 +1391,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1323
1391
|
onValueChange(items[nextIndex].value);
|
|
1324
1392
|
}
|
|
1325
1393
|
};
|
|
1326
|
-
return /* @__PURE__ */ (0,
|
|
1394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1327
1395
|
"div",
|
|
1328
1396
|
{
|
|
1329
1397
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1331,10 +1399,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1331
1399
|
"aria-label": ariaLabel,
|
|
1332
1400
|
ref: switcherRef,
|
|
1333
1401
|
children: [
|
|
1334
|
-
/* @__PURE__ */ (0,
|
|
1402
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1335
1403
|
items.map((item, index) => {
|
|
1336
1404
|
const active = item.value === value;
|
|
1337
|
-
return /* @__PURE__ */ (0,
|
|
1405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1338
1406
|
"button",
|
|
1339
1407
|
{
|
|
1340
1408
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1367,8 +1435,8 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1367
1435
|
|
|
1368
1436
|
// src/components/Disclosure/Disclosure.tsx
|
|
1369
1437
|
var import_react5 = require("react");
|
|
1370
|
-
var
|
|
1371
|
-
var
|
|
1438
|
+
var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
|
|
1439
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1372
1440
|
function Disclosure({
|
|
1373
1441
|
title,
|
|
1374
1442
|
meta,
|
|
@@ -1396,7 +1464,7 @@ function Disclosure({
|
|
|
1396
1464
|
onOpenChange?.(next);
|
|
1397
1465
|
}
|
|
1398
1466
|
};
|
|
1399
|
-
return /* @__PURE__ */ (0,
|
|
1467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1400
1468
|
"div",
|
|
1401
1469
|
{
|
|
1402
1470
|
className: cn(
|
|
@@ -1407,7 +1475,7 @@ function Disclosure({
|
|
|
1407
1475
|
className
|
|
1408
1476
|
),
|
|
1409
1477
|
children: [
|
|
1410
|
-
/* @__PURE__ */ (0,
|
|
1478
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1411
1479
|
"button",
|
|
1412
1480
|
{
|
|
1413
1481
|
type: "button",
|
|
@@ -1418,13 +1486,13 @@ function Disclosure({
|
|
|
1418
1486
|
disabled,
|
|
1419
1487
|
onClick: toggle,
|
|
1420
1488
|
children: [
|
|
1421
|
-
/* @__PURE__ */ (0,
|
|
1422
|
-
/* @__PURE__ */ (0,
|
|
1423
|
-
meta && /* @__PURE__ */ (0,
|
|
1489
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons9.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons9.ChevronRight, { size: 16 }) }),
|
|
1490
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-disclosure-title", children: title }),
|
|
1491
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
|
|
1424
1492
|
]
|
|
1425
1493
|
}
|
|
1426
1494
|
),
|
|
1427
|
-
/* @__PURE__ */ (0,
|
|
1495
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1428
1496
|
"div",
|
|
1429
1497
|
{
|
|
1430
1498
|
id: panelId,
|
|
@@ -1432,7 +1500,7 @@ function Disclosure({
|
|
|
1432
1500
|
"aria-labelledby": headerId,
|
|
1433
1501
|
className: "fractal-disclosure-panel",
|
|
1434
1502
|
hidden: !isOpen,
|
|
1435
|
-
children: /* @__PURE__ */ (0,
|
|
1503
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
|
|
1436
1504
|
}
|
|
1437
1505
|
)
|
|
1438
1506
|
]
|
|
@@ -1441,18 +1509,18 @@ function Disclosure({
|
|
|
1441
1509
|
}
|
|
1442
1510
|
|
|
1443
1511
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
1444
|
-
var
|
|
1512
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1445
1513
|
var LATTICE_COUNT = 160;
|
|
1446
1514
|
var WAVE_PERIOD = 80;
|
|
1447
1515
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
1448
|
-
return /* @__PURE__ */ (0,
|
|
1516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1449
1517
|
"span",
|
|
1450
1518
|
{
|
|
1451
1519
|
"aria-label": label,
|
|
1452
1520
|
className: cn("fractal-lattice-loader", className),
|
|
1453
1521
|
role: "progressbar",
|
|
1454
1522
|
...props,
|
|
1455
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0,
|
|
1523
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1456
1524
|
"span",
|
|
1457
1525
|
{
|
|
1458
1526
|
"aria-hidden": "true",
|
|
@@ -1466,10 +1534,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
1466
1534
|
}
|
|
1467
1535
|
|
|
1468
1536
|
// src/components/Ghost/Ghost.tsx
|
|
1469
|
-
var
|
|
1537
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1470
1538
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1471
1539
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
1472
|
-
return /* @__PURE__ */ (0,
|
|
1540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1473
1541
|
"div",
|
|
1474
1542
|
{
|
|
1475
1543
|
"aria-hidden": "true",
|
|
@@ -1485,15 +1553,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
1485
1553
|
);
|
|
1486
1554
|
}
|
|
1487
1555
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
1488
|
-
return /* @__PURE__ */ (0,
|
|
1556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
1489
1557
|
}
|
|
1490
1558
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
1491
|
-
return /* @__PURE__ */ (0,
|
|
1559
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
1492
1560
|
}
|
|
1493
1561
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
1494
|
-
return /* @__PURE__ */ (0,
|
|
1495
|
-
showHeader && /* @__PURE__ */ (0,
|
|
1496
|
-
/* @__PURE__ */ (0,
|
|
1562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
1563
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "38%" }),
|
|
1564
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
1497
1565
|
] });
|
|
1498
1566
|
}
|
|
1499
1567
|
function DataTableGhost({
|
|
@@ -1507,109 +1575,109 @@ function DataTableGhost({
|
|
|
1507
1575
|
...props
|
|
1508
1576
|
}) {
|
|
1509
1577
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
1510
|
-
return /* @__PURE__ */ (0,
|
|
1511
|
-
(showHeader || headers) && /* @__PURE__ */ (0,
|
|
1512
|
-
/* @__PURE__ */ (0,
|
|
1578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsxs)("table", { className: "fractal-ghost-table__table", children: [
|
|
1579
|
+
(showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
1580
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
1513
1581
|
] }) });
|
|
1514
1582
|
}
|
|
1515
1583
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
1516
|
-
return /* @__PURE__ */ (0,
|
|
1584
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormFieldGhost, { className, labelWidth, ...props });
|
|
1517
1585
|
}
|
|
1518
1586
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
1519
|
-
return /* @__PURE__ */ (0,
|
|
1587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
1520
1588
|
}
|
|
1521
1589
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
1522
|
-
return /* @__PURE__ */ (0,
|
|
1590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
1523
1591
|
}
|
|
1524
1592
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
1525
|
-
return /* @__PURE__ */ (0,
|
|
1526
|
-
/* @__PURE__ */ (0,
|
|
1527
|
-
/* @__PURE__ */ (0,
|
|
1593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
1594
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabelGhost, { width: labelWidth }),
|
|
1595
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
1528
1596
|
] });
|
|
1529
1597
|
}
|
|
1530
1598
|
function AlertGhost({ className, ...props }) {
|
|
1531
|
-
return /* @__PURE__ */ (0,
|
|
1532
|
-
/* @__PURE__ */ (0,
|
|
1533
|
-
/* @__PURE__ */ (0,
|
|
1599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
1600
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "30%" }),
|
|
1601
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { size: "sm", width: "78%" })
|
|
1534
1602
|
] });
|
|
1535
1603
|
}
|
|
1536
1604
|
function CheckboxGhost({ className, ...props }) {
|
|
1537
|
-
return /* @__PURE__ */ (0,
|
|
1538
|
-
/* @__PURE__ */ (0,
|
|
1539
|
-
/* @__PURE__ */ (0,
|
|
1605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
1606
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
1607
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "42%" })
|
|
1540
1608
|
] });
|
|
1541
1609
|
}
|
|
1542
1610
|
var ToggleGhost = CheckboxGhost;
|
|
1543
1611
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
1544
|
-
return /* @__PURE__ */ (0,
|
|
1612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
1545
1613
|
}
|
|
1546
1614
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
1547
|
-
return /* @__PURE__ */ (0,
|
|
1615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
1548
1616
|
}
|
|
1549
1617
|
var TextButtonGhost = LinkGhost;
|
|
1550
1618
|
function DropdownGhost({ className, ...props }) {
|
|
1551
|
-
return /* @__PURE__ */ (0,
|
|
1552
|
-
/* @__PURE__ */ (0,
|
|
1553
|
-
/* @__PURE__ */ (0,
|
|
1619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
1620
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "38%" }),
|
|
1621
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
1554
1622
|
] });
|
|
1555
1623
|
}
|
|
1556
1624
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
1557
|
-
return /* @__PURE__ */ (0,
|
|
1625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, {}, index)) });
|
|
1558
1626
|
}
|
|
1559
1627
|
var TabsGhost = ContentSwitcherGhost;
|
|
1560
1628
|
function DisclosureGhost({ className, ...props }) {
|
|
1561
|
-
return /* @__PURE__ */ (0,
|
|
1562
|
-
/* @__PURE__ */ (0,
|
|
1563
|
-
/* @__PURE__ */ (0,
|
|
1629
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
1630
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
1631
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "42%" })
|
|
1564
1632
|
] });
|
|
1565
1633
|
}
|
|
1566
1634
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
1567
|
-
return /* @__PURE__ */ (0,
|
|
1635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, {}, index)) });
|
|
1568
1636
|
}
|
|
1569
1637
|
function FileDropzoneGhost({ className, ...props }) {
|
|
1570
|
-
return /* @__PURE__ */ (0,
|
|
1571
|
-
/* @__PURE__ */ (0,
|
|
1572
|
-
/* @__PURE__ */ (0,
|
|
1573
|
-
/* @__PURE__ */ (0,
|
|
1638
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
1639
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
1640
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "26%" }),
|
|
1641
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { size: "sm", width: "46%" })
|
|
1574
1642
|
] });
|
|
1575
1643
|
}
|
|
1576
1644
|
function PromptCardGhost({ className, ...props }) {
|
|
1577
|
-
return /* @__PURE__ */ (0,
|
|
1645
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
1578
1646
|
}
|
|
1579
1647
|
function SortableTableGhost(props) {
|
|
1580
|
-
return /* @__PURE__ */ (0,
|
|
1648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DataTableGhost, { ...props });
|
|
1581
1649
|
}
|
|
1582
1650
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
1583
|
-
return /* @__PURE__ */ (0,
|
|
1584
|
-
/* @__PURE__ */ (0,
|
|
1585
|
-
/* @__PURE__ */ (0,
|
|
1586
|
-
/* @__PURE__ */ (0,
|
|
1587
|
-
/* @__PURE__ */ (0,
|
|
1651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
1652
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
1653
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
1654
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, {}),
|
|
1655
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
1588
1656
|
] }, index)) })
|
|
1589
1657
|
] });
|
|
1590
1658
|
}
|
|
1591
1659
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
1592
|
-
return /* @__PURE__ */ (0,
|
|
1660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
1593
1661
|
}
|
|
1594
1662
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
1595
|
-
return /* @__PURE__ */ (0,
|
|
1663
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
1596
1664
|
}
|
|
1597
1665
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
1598
|
-
return /* @__PURE__ */ (0,
|
|
1599
|
-
/* @__PURE__ */ (0,
|
|
1600
|
-
/* @__PURE__ */ (0,
|
|
1601
|
-
/* @__PURE__ */ (0,
|
|
1666
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
1667
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
|
|
1668
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "42%" }),
|
|
1669
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
|
|
1602
1670
|
] }),
|
|
1603
|
-
title && /* @__PURE__ */ (0,
|
|
1604
|
-
/* @__PURE__ */ (0,
|
|
1671
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
1672
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
1605
1673
|
] });
|
|
1606
1674
|
}
|
|
1607
1675
|
|
|
1608
1676
|
// src/components/Sidebar/Sidebar.tsx
|
|
1609
|
-
var
|
|
1610
|
-
var
|
|
1611
|
-
var Sidebar =
|
|
1612
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1677
|
+
var React13 = __toESM(require("react"), 1);
|
|
1678
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1679
|
+
var Sidebar = React13.forwardRef(
|
|
1680
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1613
1681
|
"aside",
|
|
1614
1682
|
{
|
|
1615
1683
|
ref,
|
|
@@ -1621,12 +1689,12 @@ var Sidebar = React12.forwardRef(
|
|
|
1621
1689
|
)
|
|
1622
1690
|
);
|
|
1623
1691
|
Sidebar.displayName = "Sidebar";
|
|
1624
|
-
var SidebarHeader =
|
|
1625
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1692
|
+
var SidebarHeader = React13.forwardRef(
|
|
1693
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
1626
1694
|
);
|
|
1627
1695
|
SidebarHeader.displayName = "SidebarHeader";
|
|
1628
|
-
var SidebarBrand =
|
|
1629
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0,
|
|
1696
|
+
var SidebarBrand = React13.forwardRef(
|
|
1697
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
1630
1698
|
);
|
|
1631
1699
|
SidebarBrand.displayName = "SidebarBrand";
|
|
1632
1700
|
function SidebarAccountMenu({
|
|
@@ -1637,7 +1705,7 @@ function SidebarAccountMenu({
|
|
|
1637
1705
|
icon,
|
|
1638
1706
|
className
|
|
1639
1707
|
}) {
|
|
1640
|
-
return /* @__PURE__ */ (0,
|
|
1708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1641
1709
|
Dropdown,
|
|
1642
1710
|
{
|
|
1643
1711
|
align: "left",
|
|
@@ -1647,25 +1715,25 @@ function SidebarAccountMenu({
|
|
|
1647
1715
|
panelClassName: "fractal-sidebar__account-panel",
|
|
1648
1716
|
selectedValue: "",
|
|
1649
1717
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
1650
|
-
triggerContent: /* @__PURE__ */ (0,
|
|
1651
|
-
icon && /* @__PURE__ */ (0,
|
|
1652
|
-
/* @__PURE__ */ (0,
|
|
1718
|
+
triggerContent: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
1719
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
1720
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
|
|
1653
1721
|
] }),
|
|
1654
1722
|
triggerLabel,
|
|
1655
1723
|
triggerVariant: "tertiary"
|
|
1656
1724
|
}
|
|
1657
1725
|
);
|
|
1658
1726
|
}
|
|
1659
|
-
var SidebarNav =
|
|
1660
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1727
|
+
var SidebarNav = React13.forwardRef(
|
|
1728
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
1661
1729
|
);
|
|
1662
1730
|
SidebarNav.displayName = "SidebarNav";
|
|
1663
|
-
var SidebarSection =
|
|
1664
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1731
|
+
var SidebarSection = React13.forwardRef(
|
|
1732
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
1665
1733
|
);
|
|
1666
1734
|
SidebarSection.displayName = "SidebarSection";
|
|
1667
|
-
var SidebarNavItem =
|
|
1668
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1735
|
+
var SidebarNavItem = React13.forwardRef(
|
|
1736
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1669
1737
|
"button",
|
|
1670
1738
|
{
|
|
1671
1739
|
ref,
|
|
@@ -1675,28 +1743,28 @@ var SidebarNavItem = React12.forwardRef(
|
|
|
1675
1743
|
"aria-current": active ? "page" : void 0,
|
|
1676
1744
|
...props,
|
|
1677
1745
|
children: [
|
|
1678
|
-
icon && /* @__PURE__ */ (0,
|
|
1679
|
-
/* @__PURE__ */ (0,
|
|
1680
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
1746
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
1747
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
1748
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
1681
1749
|
]
|
|
1682
1750
|
}
|
|
1683
1751
|
)
|
|
1684
1752
|
);
|
|
1685
1753
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
1686
|
-
var SidebarFooter =
|
|
1687
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1754
|
+
var SidebarFooter = React13.forwardRef(
|
|
1755
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
1688
1756
|
);
|
|
1689
1757
|
SidebarFooter.displayName = "SidebarFooter";
|
|
1690
1758
|
|
|
1691
1759
|
// src/components/SidePanel/SidePanel.tsx
|
|
1692
1760
|
var import_react_dom2 = require("react-dom");
|
|
1693
|
-
var
|
|
1694
|
-
var
|
|
1761
|
+
var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
|
|
1762
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1695
1763
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
1696
1764
|
useEscapeDismiss(80, onClose, open);
|
|
1697
1765
|
if (!open) return null;
|
|
1698
1766
|
return (0, import_react_dom2.createPortal)(
|
|
1699
|
-
/* @__PURE__ */ (0,
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1700
1768
|
"aside",
|
|
1701
1769
|
{
|
|
1702
1770
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -1705,15 +1773,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1705
1773
|
role: "dialog",
|
|
1706
1774
|
onMouseDown: (event) => event.stopPropagation(),
|
|
1707
1775
|
children: [
|
|
1708
|
-
/* @__PURE__ */ (0,
|
|
1709
|
-
/* @__PURE__ */ (0,
|
|
1710
|
-
typeof title === "string" ? /* @__PURE__ */ (0,
|
|
1711
|
-
description && /* @__PURE__ */ (0,
|
|
1776
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "fractal-side-panel__header", children: [
|
|
1777
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fractal-side-panel__heading", children: [
|
|
1778
|
+
typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-side-panel__title", children: title }),
|
|
1779
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fractal-side-panel__description", children: description })
|
|
1712
1780
|
] }),
|
|
1713
|
-
/* @__PURE__ */ (0,
|
|
1781
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons10.Close, { size: 18 }) })
|
|
1714
1782
|
] }),
|
|
1715
|
-
/* @__PURE__ */ (0,
|
|
1716
|
-
footer && /* @__PURE__ */ (0,
|
|
1783
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)(UILoader, { label: loadingLabel }) : children }),
|
|
1784
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
1717
1785
|
]
|
|
1718
1786
|
}
|
|
1719
1787
|
) }),
|
|
@@ -1722,18 +1790,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
1722
1790
|
}
|
|
1723
1791
|
|
|
1724
1792
|
// src/components/Textarea/Textarea.tsx
|
|
1725
|
-
var
|
|
1726
|
-
var
|
|
1727
|
-
var Textarea =
|
|
1728
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1793
|
+
var React14 = __toESM(require("react"), 1);
|
|
1794
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1795
|
+
var Textarea = React14.forwardRef(
|
|
1796
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
1729
1797
|
);
|
|
1730
1798
|
Textarea.displayName = "Textarea";
|
|
1731
1799
|
|
|
1732
1800
|
// src/components/TextButton/TextButton.tsx
|
|
1733
|
-
var
|
|
1734
|
-
var
|
|
1735
|
-
var TextButton =
|
|
1736
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1801
|
+
var React15 = __toESM(require("react"), 1);
|
|
1802
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1803
|
+
var TextButton = React15.forwardRef(
|
|
1804
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1737
1805
|
"button",
|
|
1738
1806
|
{
|
|
1739
1807
|
ref,
|
|
@@ -1741,9 +1809,9 @@ var TextButton = React14.forwardRef(
|
|
|
1741
1809
|
type: "button",
|
|
1742
1810
|
...props,
|
|
1743
1811
|
children: [
|
|
1744
|
-
icon && iconPosition === "start" && /* @__PURE__ */ (0,
|
|
1745
|
-
/* @__PURE__ */ (0,
|
|
1746
|
-
icon && iconPosition === "end" && /* @__PURE__ */ (0,
|
|
1812
|
+
icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
1813
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children }),
|
|
1814
|
+
icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
1747
1815
|
]
|
|
1748
1816
|
}
|
|
1749
1817
|
)
|
|
@@ -1751,9 +1819,9 @@ var TextButton = React14.forwardRef(
|
|
|
1751
1819
|
TextButton.displayName = "TextButton";
|
|
1752
1820
|
|
|
1753
1821
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
1754
|
-
var
|
|
1755
|
-
var
|
|
1756
|
-
var
|
|
1822
|
+
var React16 = __toESM(require("react"), 1);
|
|
1823
|
+
var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
|
|
1824
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1757
1825
|
function FileDropzone({
|
|
1758
1826
|
files,
|
|
1759
1827
|
onFilesChange,
|
|
@@ -1764,17 +1832,17 @@ function FileDropzone({
|
|
|
1764
1832
|
description = "Files stay attached to this record.",
|
|
1765
1833
|
className
|
|
1766
1834
|
}) {
|
|
1767
|
-
const inputId =
|
|
1768
|
-
const inputRef =
|
|
1769
|
-
const [isDragging, setIsDragging] =
|
|
1835
|
+
const inputId = React16.useId();
|
|
1836
|
+
const inputRef = React16.useRef(null);
|
|
1837
|
+
const [isDragging, setIsDragging] = React16.useState(false);
|
|
1770
1838
|
const addFiles = (nextFiles) => {
|
|
1771
1839
|
if (disabled) return;
|
|
1772
1840
|
const additions = Array.from(nextFiles);
|
|
1773
1841
|
if (additions.length === 0) return;
|
|
1774
1842
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
1775
1843
|
};
|
|
1776
|
-
return /* @__PURE__ */ (0,
|
|
1777
|
-
/* @__PURE__ */ (0,
|
|
1844
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
1845
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1778
1846
|
"input",
|
|
1779
1847
|
{
|
|
1780
1848
|
ref: inputRef,
|
|
@@ -1790,7 +1858,7 @@ function FileDropzone({
|
|
|
1790
1858
|
}
|
|
1791
1859
|
}
|
|
1792
1860
|
),
|
|
1793
|
-
/* @__PURE__ */ (0,
|
|
1861
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1794
1862
|
"button",
|
|
1795
1863
|
{
|
|
1796
1864
|
className: "fractal-file-dropzone__target",
|
|
@@ -1813,18 +1881,18 @@ function FileDropzone({
|
|
|
1813
1881
|
addFiles(event.dataTransfer.files);
|
|
1814
1882
|
},
|
|
1815
1883
|
children: [
|
|
1816
|
-
/* @__PURE__ */ (0,
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1818
|
-
/* @__PURE__ */ (0,
|
|
1819
|
-
description && /* @__PURE__ */ (0,
|
|
1884
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons11.FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
1885
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
|
|
1886
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
1887
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
|
|
1820
1888
|
] })
|
|
1821
1889
|
]
|
|
1822
1890
|
}
|
|
1823
1891
|
),
|
|
1824
|
-
files.length > 0 && /* @__PURE__ */ (0,
|
|
1825
|
-
/* @__PURE__ */ (0,
|
|
1826
|
-
/* @__PURE__ */ (0,
|
|
1827
|
-
/* @__PURE__ */ (0,
|
|
1892
|
+
files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
|
|
1893
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
1894
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
1895
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1828
1896
|
"button",
|
|
1829
1897
|
{
|
|
1830
1898
|
className: "fractal-file-dropzone__remove",
|
|
@@ -1832,7 +1900,7 @@ function FileDropzone({
|
|
|
1832
1900
|
"aria-label": `Remove ${file.name}`,
|
|
1833
1901
|
disabled,
|
|
1834
1902
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
1835
|
-
children: /* @__PURE__ */ (0,
|
|
1903
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons11.Close, { "aria-hidden": "true", size: 14 })
|
|
1836
1904
|
}
|
|
1837
1905
|
)
|
|
1838
1906
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -1845,8 +1913,8 @@ function formatFileSize(bytes) {
|
|
|
1845
1913
|
}
|
|
1846
1914
|
|
|
1847
1915
|
// src/components/Pagination/Pagination.tsx
|
|
1848
|
-
var
|
|
1849
|
-
var
|
|
1916
|
+
var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
|
|
1917
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1850
1918
|
function Pagination({
|
|
1851
1919
|
page,
|
|
1852
1920
|
pageSize,
|
|
@@ -1862,10 +1930,10 @@ function Pagination({
|
|
|
1862
1930
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
1863
1931
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
1864
1932
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
1865
|
-
return /* @__PURE__ */ (0,
|
|
1866
|
-
/* @__PURE__ */ (0,
|
|
1867
|
-
/* @__PURE__ */ (0,
|
|
1868
|
-
canChangePageSize && /* @__PURE__ */ (0,
|
|
1933
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
1934
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
1935
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fractal-pagination__controls", children: [
|
|
1936
|
+
canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1869
1937
|
Dropdown,
|
|
1870
1938
|
{
|
|
1871
1939
|
align: "right",
|
|
@@ -1882,7 +1950,7 @@ function Pagination({
|
|
|
1882
1950
|
triggerVariant: "tertiary"
|
|
1883
1951
|
}
|
|
1884
1952
|
),
|
|
1885
|
-
/* @__PURE__ */ (0,
|
|
1953
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1886
1954
|
"button",
|
|
1887
1955
|
{
|
|
1888
1956
|
className: "fractal-pagination__button",
|
|
@@ -1891,15 +1959,15 @@ function Pagination({
|
|
|
1891
1959
|
title: "Previous page",
|
|
1892
1960
|
disabled: currentPage === 1 || totalItems === 0,
|
|
1893
1961
|
onClick: () => onPageChange(currentPage - 1),
|
|
1894
|
-
children: /* @__PURE__ */ (0,
|
|
1962
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons12.ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
1895
1963
|
}
|
|
1896
1964
|
),
|
|
1897
|
-
/* @__PURE__ */ (0,
|
|
1965
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
1898
1966
|
currentPage,
|
|
1899
1967
|
" of ",
|
|
1900
1968
|
totalPages
|
|
1901
1969
|
] }),
|
|
1902
|
-
/* @__PURE__ */ (0,
|
|
1970
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1903
1971
|
"button",
|
|
1904
1972
|
{
|
|
1905
1973
|
className: "fractal-pagination__button",
|
|
@@ -1908,7 +1976,7 @@ function Pagination({
|
|
|
1908
1976
|
title: "Next page",
|
|
1909
1977
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
1910
1978
|
onClick: () => onPageChange(currentPage + 1),
|
|
1911
|
-
children: /* @__PURE__ */ (0,
|
|
1979
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons12.ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
1912
1980
|
}
|
|
1913
1981
|
)
|
|
1914
1982
|
] })
|
|
@@ -1960,6 +2028,7 @@ function Pagination({
|
|
|
1960
2028
|
NumberInput,
|
|
1961
2029
|
Pagination,
|
|
1962
2030
|
PaginationGhost,
|
|
2031
|
+
PasswordInput,
|
|
1963
2032
|
PromptCard,
|
|
1964
2033
|
PromptCardGhost,
|
|
1965
2034
|
PromptGrid,
|