@mirror-physics/fractal-ui 0.2.0-next.85 → 0.2.0-next.87
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 +345 -325
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +44 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +270 -250
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -508,13 +508,21 @@ PromptGrid.displayName = "PromptGrid";
|
|
|
508
508
|
|
|
509
509
|
// src/components/Input/Input.tsx
|
|
510
510
|
import * as React3 from "react";
|
|
511
|
-
|
|
511
|
+
|
|
512
|
+
// src/utils/FloatingFieldBorder.tsx
|
|
513
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
514
|
+
function FloatingFieldBorder({ label }) {
|
|
515
|
+
return /* @__PURE__ */ jsx5("fieldset", { className: "fractal-floating-field__border", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("legend", { children: /* @__PURE__ */ jsx5("span", { children: label }) }) });
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
// src/components/Input/Input.tsx
|
|
519
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
512
520
|
var Input = React3.forwardRef(
|
|
513
521
|
({ className, type, controlSize = "lg", fieldLabel, id, placeholder, ...props }, ref) => {
|
|
514
522
|
const generatedId = React3.useId();
|
|
515
523
|
const fieldId = id ?? generatedId;
|
|
516
524
|
const floatingLabel = type === "search" ? void 0 : fieldLabel;
|
|
517
|
-
const input = /* @__PURE__ */
|
|
525
|
+
const input = /* @__PURE__ */ jsx6(
|
|
518
526
|
"input",
|
|
519
527
|
{
|
|
520
528
|
type,
|
|
@@ -536,7 +544,8 @@ var Input = React3.forwardRef(
|
|
|
536
544
|
"data-always-float": ["date", "datetime-local", "time", "month", "week", "color", "file", "range"].includes(type ?? "") || void 0,
|
|
537
545
|
children: [
|
|
538
546
|
input,
|
|
539
|
-
/* @__PURE__ */
|
|
547
|
+
/* @__PURE__ */ jsx6(FloatingFieldBorder, { label: fieldLabel ?? "" }),
|
|
548
|
+
/* @__PURE__ */ jsx6("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
|
|
540
549
|
]
|
|
541
550
|
}
|
|
542
551
|
);
|
|
@@ -547,7 +556,7 @@ Input.displayName = "Input";
|
|
|
547
556
|
// src/components/TableSearch/TableSearch.tsx
|
|
548
557
|
import * as React4 from "react";
|
|
549
558
|
import { MagnifyingGlass, MagnifyingGlassLines } from "@mirror-physics/fractal-icons";
|
|
550
|
-
import { jsx as
|
|
559
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
551
560
|
var TableSearch = React4.forwardRef(
|
|
552
561
|
({
|
|
553
562
|
searchType = "text",
|
|
@@ -567,8 +576,8 @@ var TableSearch = React4.forwardRef(
|
|
|
567
576
|
"data-search-type": searchType,
|
|
568
577
|
"data-control-size": controlSize,
|
|
569
578
|
children: [
|
|
570
|
-
/* @__PURE__ */
|
|
571
|
-
/* @__PURE__ */
|
|
579
|
+
/* @__PURE__ */ jsx7(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
|
|
580
|
+
/* @__PURE__ */ jsx7(
|
|
572
581
|
Input,
|
|
573
582
|
{
|
|
574
583
|
...props,
|
|
@@ -590,7 +599,7 @@ TableSearch.displayName = "TableSearch";
|
|
|
590
599
|
// src/components/NumberInput/NumberInput.tsx
|
|
591
600
|
import * as React5 from "react";
|
|
592
601
|
import { Minus, Plus } from "@mirror-physics/fractal-icons";
|
|
593
|
-
import { jsx as
|
|
602
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
594
603
|
function NumberInput({
|
|
595
604
|
unit,
|
|
596
605
|
controlSize = "lg",
|
|
@@ -618,7 +627,7 @@ function NumberInput({
|
|
|
618
627
|
input.focus();
|
|
619
628
|
};
|
|
620
629
|
return /* @__PURE__ */ jsxs7("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
621
|
-
/* @__PURE__ */
|
|
630
|
+
/* @__PURE__ */ jsx8(
|
|
622
631
|
Input,
|
|
623
632
|
{
|
|
624
633
|
ref: inputRef,
|
|
@@ -633,7 +642,7 @@ function NumberInput({
|
|
|
633
642
|
...props
|
|
634
643
|
}
|
|
635
644
|
),
|
|
636
|
-
unit && /* @__PURE__ */
|
|
645
|
+
unit && /* @__PURE__ */ jsx8(
|
|
637
646
|
"span",
|
|
638
647
|
{
|
|
639
648
|
className: "fractal-number-input-unit",
|
|
@@ -643,7 +652,7 @@ function NumberInput({
|
|
|
643
652
|
}
|
|
644
653
|
),
|
|
645
654
|
/* @__PURE__ */ jsxs7("div", { className: "fractal-number-input-controls", children: [
|
|
646
|
-
/* @__PURE__ */
|
|
655
|
+
/* @__PURE__ */ jsx8(
|
|
647
656
|
"button",
|
|
648
657
|
{
|
|
649
658
|
type: "button",
|
|
@@ -651,10 +660,10 @@ function NumberInput({
|
|
|
651
660
|
"aria-label": `Decrease ${controlLabel}`,
|
|
652
661
|
disabled: decrementDisabled,
|
|
653
662
|
onClick: () => changeByStep(-1),
|
|
654
|
-
children: /* @__PURE__ */
|
|
663
|
+
children: /* @__PURE__ */ jsx8(Minus, { "aria-hidden": "true", size: 16 })
|
|
655
664
|
}
|
|
656
665
|
),
|
|
657
|
-
/* @__PURE__ */
|
|
666
|
+
/* @__PURE__ */ jsx8(
|
|
658
667
|
"button",
|
|
659
668
|
{
|
|
660
669
|
type: "button",
|
|
@@ -662,7 +671,7 @@ function NumberInput({
|
|
|
662
671
|
"aria-label": `Increase ${controlLabel}`,
|
|
663
672
|
disabled: incrementDisabled,
|
|
664
673
|
onClick: () => changeByStep(1),
|
|
665
|
-
children: /* @__PURE__ */
|
|
674
|
+
children: /* @__PURE__ */ jsx8(Plus, { "aria-hidden": "true", size: 16 })
|
|
666
675
|
}
|
|
667
676
|
)
|
|
668
677
|
] })
|
|
@@ -670,7 +679,7 @@ function NumberInput({
|
|
|
670
679
|
}
|
|
671
680
|
|
|
672
681
|
// src/components/Slider/Slider.tsx
|
|
673
|
-
import { jsx as
|
|
682
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
674
683
|
function Slider(props) {
|
|
675
684
|
const {
|
|
676
685
|
min = 0,
|
|
@@ -724,8 +733,8 @@ function Slider(props) {
|
|
|
724
733
|
"data-knobs": knobs,
|
|
725
734
|
children: [
|
|
726
735
|
showValues && /* @__PURE__ */ jsxs8("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
|
|
727
|
-
/* @__PURE__ */
|
|
728
|
-
knobs === 2 && /* @__PURE__ */
|
|
736
|
+
/* @__PURE__ */ jsx9("output", { children: formatValue(firstValue) }),
|
|
737
|
+
knobs === 2 && /* @__PURE__ */ jsx9("output", { children: formatValue(secondValue) })
|
|
729
738
|
] }),
|
|
730
739
|
/* @__PURE__ */ jsxs8(
|
|
731
740
|
"div",
|
|
@@ -736,9 +745,9 @@ function Slider(props) {
|
|
|
736
745
|
"--fractal-slider-selection-end": `${selectionEndPercent}%`
|
|
737
746
|
},
|
|
738
747
|
children: [
|
|
739
|
-
/* @__PURE__ */
|
|
740
|
-
/* @__PURE__ */
|
|
741
|
-
/* @__PURE__ */
|
|
748
|
+
/* @__PURE__ */ jsx9("span", { className: "fractal-slider-track", "aria-hidden": "true" }),
|
|
749
|
+
/* @__PURE__ */ jsx9("span", { className: "fractal-slider-selection", "aria-hidden": "true" }),
|
|
750
|
+
/* @__PURE__ */ jsx9(
|
|
742
751
|
"input",
|
|
743
752
|
{
|
|
744
753
|
"aria-label": knobs === 2 ? props.lowerAriaLabel ?? "Lower value" : props.ariaLabel ?? "Slider value",
|
|
@@ -762,7 +771,7 @@ function Slider(props) {
|
|
|
762
771
|
value: firstValue
|
|
763
772
|
}
|
|
764
773
|
),
|
|
765
|
-
knobs === 2 && /* @__PURE__ */
|
|
774
|
+
knobs === 2 && /* @__PURE__ */ jsx9(
|
|
766
775
|
"input",
|
|
767
776
|
{
|
|
768
777
|
"aria-label": props.upperAriaLabel ?? "Upper value",
|
|
@@ -798,7 +807,7 @@ function clamp(value, minimum, maximum) {
|
|
|
798
807
|
// src/components/PasswordInput/PasswordInput.tsx
|
|
799
808
|
import * as React6 from "react";
|
|
800
809
|
import { Eye, EyeSlash } from "@mirror-physics/fractal-icons";
|
|
801
|
-
import { jsx as
|
|
810
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
802
811
|
var PasswordInput = React6.forwardRef(
|
|
803
812
|
({
|
|
804
813
|
className,
|
|
@@ -817,7 +826,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
817
826
|
"data-control-size": controlSize,
|
|
818
827
|
"data-password-visible": passwordVisible ? "" : void 0,
|
|
819
828
|
children: [
|
|
820
|
-
/* @__PURE__ */
|
|
829
|
+
/* @__PURE__ */ jsx10(
|
|
821
830
|
Input,
|
|
822
831
|
{
|
|
823
832
|
...props,
|
|
@@ -828,7 +837,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
828
837
|
type: passwordVisible ? "text" : "password"
|
|
829
838
|
}
|
|
830
839
|
),
|
|
831
|
-
/* @__PURE__ */
|
|
840
|
+
/* @__PURE__ */ jsx10(
|
|
832
841
|
"button",
|
|
833
842
|
{
|
|
834
843
|
type: "button",
|
|
@@ -838,7 +847,7 @@ var PasswordInput = React6.forwardRef(
|
|
|
838
847
|
disabled,
|
|
839
848
|
title: toggleLabel,
|
|
840
849
|
onClick: () => setPasswordVisible((visible) => !visible),
|
|
841
|
-
children: passwordVisible ? /* @__PURE__ */
|
|
850
|
+
children: passwordVisible ? /* @__PURE__ */ jsx10(EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx10(Eye, { "aria-hidden": "true", size: 18 })
|
|
842
851
|
}
|
|
843
852
|
)
|
|
844
853
|
]
|
|
@@ -850,9 +859,9 @@ PasswordInput.displayName = "PasswordInput";
|
|
|
850
859
|
|
|
851
860
|
// src/components/Label/Label.tsx
|
|
852
861
|
import * as React7 from "react";
|
|
853
|
-
import { jsx as
|
|
862
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
854
863
|
var Label = React7.forwardRef(
|
|
855
|
-
({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */
|
|
864
|
+
({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ jsx11(
|
|
856
865
|
"label",
|
|
857
866
|
{
|
|
858
867
|
ref,
|
|
@@ -867,7 +876,7 @@ Label.displayName = "Label";
|
|
|
867
876
|
// src/components/Alert/Alert.tsx
|
|
868
877
|
import * as React8 from "react";
|
|
869
878
|
import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
|
|
870
|
-
import { jsx as
|
|
879
|
+
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
871
880
|
var defaultIcons = {
|
|
872
881
|
default: CircleInfo,
|
|
873
882
|
info: CircleInfo,
|
|
@@ -886,8 +895,8 @@ var Alert = React8.forwardRef(
|
|
|
886
895
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
887
896
|
...props,
|
|
888
897
|
children: [
|
|
889
|
-
/* @__PURE__ */
|
|
890
|
-
/* @__PURE__ */
|
|
898
|
+
/* @__PURE__ */ jsx12("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) }),
|
|
899
|
+
/* @__PURE__ */ jsx12("div", { className: "fractal-alert-content", children })
|
|
891
900
|
]
|
|
892
901
|
}
|
|
893
902
|
);
|
|
@@ -895,11 +904,11 @@ var Alert = React8.forwardRef(
|
|
|
895
904
|
);
|
|
896
905
|
Alert.displayName = "Alert";
|
|
897
906
|
var AlertTitle = React8.forwardRef(
|
|
898
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
907
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx12("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
899
908
|
);
|
|
900
909
|
AlertTitle.displayName = "AlertTitle";
|
|
901
910
|
var AlertDescription = React8.forwardRef(
|
|
902
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
911
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx12("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
903
912
|
);
|
|
904
913
|
AlertDescription.displayName = "AlertDescription";
|
|
905
914
|
|
|
@@ -907,7 +916,7 @@ AlertDescription.displayName = "AlertDescription";
|
|
|
907
916
|
import * as React9 from "react";
|
|
908
917
|
import { createPortal } from "react-dom";
|
|
909
918
|
import { CircleCheck as CircleCheck2, CircleClose as CircleClose2, CircleInfo as CircleInfo2, Close, Warning as Warning2 } from "@mirror-physics/fractal-icons";
|
|
910
|
-
import { jsx as
|
|
919
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
911
920
|
var defaultIcons2 = {
|
|
912
921
|
default: CircleInfo2,
|
|
913
922
|
info: CircleInfo2,
|
|
@@ -970,17 +979,17 @@ var Toast = React9.forwardRef(function Toast2({
|
|
|
970
979
|
},
|
|
971
980
|
...props,
|
|
972
981
|
children: [
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */
|
|
975
|
-
action && /* @__PURE__ */
|
|
976
|
-
/* @__PURE__ */
|
|
982
|
+
/* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ jsx13(DefaultIcon, { size: 18 }) }),
|
|
983
|
+
/* @__PURE__ */ jsx13("div", { className: "fractal-toast__content", children }),
|
|
984
|
+
action && /* @__PURE__ */ jsx13("div", { className: "fractal-toast__action", children: action }),
|
|
985
|
+
/* @__PURE__ */ jsx13(
|
|
977
986
|
"button",
|
|
978
987
|
{
|
|
979
988
|
"aria-label": dismissLabel,
|
|
980
989
|
className: "fractal-toast__dismiss",
|
|
981
990
|
onClick: onDismiss,
|
|
982
991
|
type: "button",
|
|
983
|
-
children: /* @__PURE__ */
|
|
992
|
+
children: /* @__PURE__ */ jsx13(Close, { "aria-hidden": "true", size: 14 })
|
|
984
993
|
}
|
|
985
994
|
)
|
|
986
995
|
]
|
|
@@ -988,7 +997,7 @@ var Toast = React9.forwardRef(function Toast2({
|
|
|
988
997
|
);
|
|
989
998
|
});
|
|
990
999
|
var ToastViewport = React9.forwardRef(function ToastViewport2({ children, className, portal = true, position = "top-center", ...props }, ref) {
|
|
991
|
-
const viewport = /* @__PURE__ */
|
|
1000
|
+
const viewport = /* @__PURE__ */ jsx13(
|
|
992
1001
|
"div",
|
|
993
1002
|
{
|
|
994
1003
|
ref,
|
|
@@ -1003,7 +1012,7 @@ var ToastViewport = React9.forwardRef(function ToastViewport2({ children, classN
|
|
|
1003
1012
|
});
|
|
1004
1013
|
|
|
1005
1014
|
// src/components/Toggle/Toggle.tsx
|
|
1006
|
-
import { jsx as
|
|
1015
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1007
1016
|
function Toggle({ checked, onChange, label, className }) {
|
|
1008
1017
|
return /* @__PURE__ */ jsxs12(
|
|
1009
1018
|
"button",
|
|
@@ -1014,8 +1023,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
1014
1023
|
className: cn("fractal-toggle", className),
|
|
1015
1024
|
onClick: () => onChange(!checked),
|
|
1016
1025
|
children: [
|
|
1017
|
-
/* @__PURE__ */
|
|
1018
|
-
label && /* @__PURE__ */
|
|
1026
|
+
/* @__PURE__ */ jsx14("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx14("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
1027
|
+
label && /* @__PURE__ */ jsx14("span", { className: "fractal-toggle-label", children: label })
|
|
1019
1028
|
]
|
|
1020
1029
|
}
|
|
1021
1030
|
);
|
|
@@ -1077,7 +1086,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
1077
1086
|
|
|
1078
1087
|
// src/components/UILoader/UILoader.tsx
|
|
1079
1088
|
import { useId as useId2 } from "react";
|
|
1080
|
-
import { jsx as
|
|
1089
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1081
1090
|
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";
|
|
1082
1091
|
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";
|
|
1083
1092
|
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";
|
|
@@ -1086,7 +1095,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1086
1095
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
1087
1096
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
1088
1097
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
1089
|
-
return /* @__PURE__ */
|
|
1098
|
+
return /* @__PURE__ */ jsx15(
|
|
1090
1099
|
"span",
|
|
1091
1100
|
{
|
|
1092
1101
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -1097,32 +1106,32 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1097
1106
|
children: /* @__PURE__ */ jsxs13("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
1098
1107
|
/* @__PURE__ */ jsxs13("defs", { children: [
|
|
1099
1108
|
/* @__PURE__ */ jsxs13("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
1100
|
-
/* @__PURE__ */
|
|
1101
|
-
/* @__PURE__ */
|
|
1109
|
+
/* @__PURE__ */ jsx15("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
1110
|
+
/* @__PURE__ */ jsx15("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
1102
1111
|
] }),
|
|
1103
1112
|
/* @__PURE__ */ jsxs13("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
1104
|
-
/* @__PURE__ */
|
|
1105
|
-
/* @__PURE__ */
|
|
1106
|
-
/* @__PURE__ */
|
|
1113
|
+
/* @__PURE__ */ jsx15("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
1114
|
+
/* @__PURE__ */ jsx15("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
1115
|
+
/* @__PURE__ */ jsx15("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
1107
1116
|
] }),
|
|
1108
1117
|
/* @__PURE__ */ jsxs13("clipPath", { id: clipId, children: [
|
|
1109
|
-
/* @__PURE__ */
|
|
1110
|
-
/* @__PURE__ */
|
|
1111
|
-
/* @__PURE__ */
|
|
1118
|
+
/* @__PURE__ */ jsx15("path", { d: LEFT }),
|
|
1119
|
+
/* @__PURE__ */ jsx15("path", { d: CENTER }),
|
|
1120
|
+
/* @__PURE__ */ jsx15("path", { d: RIGHT })
|
|
1112
1121
|
] })
|
|
1113
1122
|
] }),
|
|
1114
|
-
/* @__PURE__ */
|
|
1115
|
-
/* @__PURE__ */
|
|
1116
|
-
/* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
1123
|
+
/* @__PURE__ */ jsx15("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
1124
|
+
/* @__PURE__ */ jsx15("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
1125
|
+
/* @__PURE__ */ jsx15("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
1126
|
+
/* @__PURE__ */ jsx15("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx15("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx15("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
1118
1127
|
] })
|
|
1119
1128
|
}
|
|
1120
1129
|
);
|
|
1121
1130
|
}
|
|
1122
1131
|
|
|
1123
1132
|
// src/components/Modal/Modal.tsx
|
|
1124
|
-
import { jsx as
|
|
1125
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
1133
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1134
|
+
var CloseIcon = () => /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1126
1135
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
1127
1136
|
const [bodyScrolled, setBodyScrolled] = React10.useState(false);
|
|
1128
1137
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
@@ -1133,7 +1142,7 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1133
1142
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
1134
1143
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
1135
1144
|
return createPortal2(
|
|
1136
|
-
/* @__PURE__ */
|
|
1145
|
+
/* @__PURE__ */ jsx16("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs14(
|
|
1137
1146
|
"div",
|
|
1138
1147
|
{
|
|
1139
1148
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
@@ -1148,12 +1157,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1148
1157
|
scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
|
|
1149
1158
|
),
|
|
1150
1159
|
children: [
|
|
1151
|
-
/* @__PURE__ */
|
|
1152
|
-
!noClose && /* @__PURE__ */
|
|
1160
|
+
/* @__PURE__ */ jsx16("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
1161
|
+
!noClose && /* @__PURE__ */ jsx16("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx16(CloseIcon, {}) })
|
|
1153
1162
|
]
|
|
1154
1163
|
}
|
|
1155
1164
|
),
|
|
1156
|
-
/* @__PURE__ */
|
|
1165
|
+
/* @__PURE__ */ jsx16(
|
|
1157
1166
|
"div",
|
|
1158
1167
|
{
|
|
1159
1168
|
"aria-busy": loading || void 0,
|
|
@@ -1164,10 +1173,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1164
1173
|
scrollable && "fractal-modal-body--scrollable"
|
|
1165
1174
|
),
|
|
1166
1175
|
onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
|
|
1167
|
-
children: loading ? /* @__PURE__ */
|
|
1176
|
+
children: loading ? /* @__PURE__ */ jsx16(UILoader, { label: loadingLabel }) : children
|
|
1168
1177
|
}
|
|
1169
1178
|
),
|
|
1170
|
-
footer && /* @__PURE__ */
|
|
1179
|
+
footer && /* @__PURE__ */ jsx16("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
1171
1180
|
]
|
|
1172
1181
|
}
|
|
1173
1182
|
) }),
|
|
@@ -1179,7 +1188,7 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1179
1188
|
import { useId as useId3, useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
|
|
1180
1189
|
import { createPortal as createPortal3 } from "react-dom";
|
|
1181
1190
|
import { Ellipsis } from "@mirror-physics/fractal-icons";
|
|
1182
|
-
import { jsx as
|
|
1191
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1183
1192
|
function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
1184
1193
|
const id = useId3();
|
|
1185
1194
|
const trigger = useRef5(null);
|
|
@@ -1231,14 +1240,14 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1231
1240
|
}, [disabled, items.length]);
|
|
1232
1241
|
if (items.length === 0) return null;
|
|
1233
1242
|
return /* @__PURE__ */ jsxs15("div", { className: "fractal-table-overflow-trigger", children: [
|
|
1234
|
-
/* @__PURE__ */
|
|
1243
|
+
/* @__PURE__ */ jsx17(
|
|
1235
1244
|
Button,
|
|
1236
1245
|
{
|
|
1237
1246
|
ref: trigger,
|
|
1238
1247
|
buttonType: "ghost",
|
|
1239
1248
|
controlSize: "sm",
|
|
1240
1249
|
hasIconOnly: true,
|
|
1241
|
-
icon: /* @__PURE__ */
|
|
1250
|
+
icon: /* @__PURE__ */ jsx17(Ellipsis, { "aria-hidden": true }),
|
|
1242
1251
|
"aria-label": label,
|
|
1243
1252
|
"aria-haspopup": "menu",
|
|
1244
1253
|
"aria-expanded": open,
|
|
@@ -1257,7 +1266,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1257
1266
|
}
|
|
1258
1267
|
}
|
|
1259
1268
|
),
|
|
1260
|
-
open && createPortal3(/* @__PURE__ */
|
|
1269
|
+
open && createPortal3(/* @__PURE__ */ jsx17(
|
|
1261
1270
|
"div",
|
|
1262
1271
|
{
|
|
1263
1272
|
ref: panel,
|
|
@@ -1297,7 +1306,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1297
1306
|
close();
|
|
1298
1307
|
},
|
|
1299
1308
|
children: [
|
|
1300
|
-
item.icon && /* @__PURE__ */
|
|
1309
|
+
item.icon && /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", children: item.icon }),
|
|
1301
1310
|
item.label
|
|
1302
1311
|
]
|
|
1303
1312
|
},
|
|
@@ -1310,7 +1319,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1310
1319
|
|
|
1311
1320
|
// src/components/TableLayout/TableLayout.tsx
|
|
1312
1321
|
import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState6 } from "react";
|
|
1313
|
-
import { jsx as
|
|
1322
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1314
1323
|
var length = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1315
1324
|
function columnStyle(column) {
|
|
1316
1325
|
return {
|
|
@@ -1346,7 +1355,7 @@ function useOverflow() {
|
|
|
1346
1355
|
}
|
|
1347
1356
|
function TableViewport({ children, maxHeight, label }) {
|
|
1348
1357
|
const { ref, overflow } = useOverflow();
|
|
1349
|
-
return /* @__PURE__ */
|
|
1358
|
+
return /* @__PURE__ */ jsx18("div", { ref, className: "fractal-table-viewport", style: { maxHeight }, tabIndex: overflow ? 0 : void 0, role: overflow ? "region" : void 0, "aria-label": overflow ? `${label}, scrollable table` : void 0, children });
|
|
1350
1359
|
}
|
|
1351
1360
|
function TableCellContent({ children, label }) {
|
|
1352
1361
|
const { ref, overflow } = useOverflow();
|
|
@@ -1373,7 +1382,7 @@ function TableCellContent({ children, label }) {
|
|
|
1373
1382
|
cell.addEventListener("wheel", wheel, { passive: false });
|
|
1374
1383
|
return () => cell.removeEventListener("wheel", wheel);
|
|
1375
1384
|
}, [ref]);
|
|
1376
|
-
return /* @__PURE__ */
|
|
1385
|
+
return /* @__PURE__ */ jsx18(
|
|
1377
1386
|
"div",
|
|
1378
1387
|
{
|
|
1379
1388
|
ref,
|
|
@@ -1392,28 +1401,28 @@ function TableCellContent({ children, label }) {
|
|
|
1392
1401
|
else el.scrollLeft = event.key === "Home" ? 0 : el.scrollWidth * (getComputedStyle(el).direction === "rtl" ? -1 : 1);
|
|
1393
1402
|
} else if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1394
1403
|
},
|
|
1395
|
-
children: /* @__PURE__ */
|
|
1404
|
+
children: /* @__PURE__ */ jsx18("div", { className: "fractal-table-cell-content", children })
|
|
1396
1405
|
}
|
|
1397
1406
|
);
|
|
1398
1407
|
}
|
|
1399
1408
|
|
|
1400
1409
|
// src/components/DataTable/DataTable.tsx
|
|
1401
|
-
import { jsx as
|
|
1410
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1402
1411
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className, overflowMenu, layout = "fill", stickyHeader = false, stickyFirstColumn = false, maxHeight, "aria-label": ariaLabel = "Data table" }) {
|
|
1403
|
-
return /* @__PURE__ */
|
|
1404
|
-
header && /* @__PURE__ */
|
|
1405
|
-
data.length === 0 ? /* @__PURE__ */
|
|
1406
|
-
/* @__PURE__ */
|
|
1407
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1408
|
-
overflowMenu && /* @__PURE__ */
|
|
1412
|
+
return /* @__PURE__ */ jsx19("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ jsxs16("div", { className: "fractal-datatable-surface", children: [
|
|
1413
|
+
header && /* @__PURE__ */ jsx19("div", { className: "fractal-datatable-header", children: header }),
|
|
1414
|
+
data.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx19(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ jsxs16("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
|
|
1415
|
+
/* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs16("tr", { className: "fractal-datatable-thead-row", children: [
|
|
1416
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsx19("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ jsx19(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
|
|
1417
|
+
overflowMenu && /* @__PURE__ */ jsx19("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
|
|
1409
1418
|
] }) }),
|
|
1410
|
-
/* @__PURE__ */
|
|
1419
|
+
/* @__PURE__ */ jsx19("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsxs16(
|
|
1411
1420
|
"tr",
|
|
1412
1421
|
{
|
|
1413
1422
|
className: "fractal-datatable-row",
|
|
1414
1423
|
children: [
|
|
1415
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1416
|
-
overflowMenu && /* @__PURE__ */
|
|
1424
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsx19("td", { className: "fractal-datatable-td", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ jsx19(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }) }, col.key)),
|
|
1425
|
+
overflowMenu && /* @__PURE__ */ jsx19("td", { className: "fractal-datatable-td fractal-table-overflow-cell", "data-pinned-column": "overflow", children: /* @__PURE__ */ jsx19(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) }) })
|
|
1417
1426
|
]
|
|
1418
1427
|
},
|
|
1419
1428
|
rowIndex
|
|
@@ -1427,6 +1436,9 @@ import * as React11 from "react";
|
|
|
1427
1436
|
import { Close as Close2, Check as Check2, MagnifyingGlass as MagnifyingGlass2, ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
|
|
1428
1437
|
|
|
1429
1438
|
// src/components/Dropdown/position.ts
|
|
1439
|
+
function isDropdownTriggerVisible(trigger, bounds) {
|
|
1440
|
+
return trigger.right > bounds.left && trigger.left < bounds.right && trigger.bottom > bounds.top && trigger.top < bounds.bottom;
|
|
1441
|
+
}
|
|
1430
1442
|
function positionDropdown(trigger, panel, bounds, direction, align) {
|
|
1431
1443
|
const gap = 4;
|
|
1432
1444
|
const width = Math.min(panel.width, Math.max(0, bounds.right - bounds.left));
|
|
@@ -1462,7 +1474,7 @@ function positionDropdown(trigger, panel, bounds, direction, align) {
|
|
|
1462
1474
|
}
|
|
1463
1475
|
|
|
1464
1476
|
// src/components/Dropdown/Dropdown.tsx
|
|
1465
|
-
import { Fragment as Fragment2, jsx as
|
|
1477
|
+
import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1466
1478
|
function Dropdown({
|
|
1467
1479
|
items,
|
|
1468
1480
|
selectedValue = "",
|
|
@@ -1567,12 +1579,17 @@ function Dropdown({
|
|
|
1567
1579
|
bounds.bottom = Math.min(bounds.bottom, rect.top + ancestor.clientTop + ancestor.clientHeight);
|
|
1568
1580
|
}
|
|
1569
1581
|
}
|
|
1582
|
+
const triggerRect = trigger.getBoundingClientRect();
|
|
1583
|
+
if (!isDropdownTriggerVisible(triggerRect, bounds)) {
|
|
1584
|
+
focusOnOpen.current = false;
|
|
1585
|
+
setOpen(false);
|
|
1586
|
+
return false;
|
|
1587
|
+
}
|
|
1570
1588
|
const padding = Math.max(0, collisionPadding);
|
|
1571
1589
|
bounds.left += padding;
|
|
1572
1590
|
bounds.right = Math.max(bounds.left, bounds.right - padding);
|
|
1573
1591
|
bounds.top += padding;
|
|
1574
1592
|
bounds.bottom = Math.max(bounds.top, bounds.bottom - padding);
|
|
1575
|
-
const triggerRect = trigger.getBoundingClientRect();
|
|
1576
1593
|
const rootRect = root.getBoundingClientRect();
|
|
1577
1594
|
const availableWidth = bounds.right - bounds.left;
|
|
1578
1595
|
const heightLimit = Math.max(0, maxHeight);
|
|
@@ -1592,8 +1609,9 @@ function Dropdown({
|
|
|
1592
1609
|
panel.style[key] = `${nextStyle[key]}px`;
|
|
1593
1610
|
}
|
|
1594
1611
|
setPanelStyle((previous) => Object.entries(nextStyle).every(([key, value]) => previous[key] === value) ? previous : nextStyle);
|
|
1612
|
+
return true;
|
|
1595
1613
|
};
|
|
1596
|
-
updatePosition();
|
|
1614
|
+
if (!updatePosition()) return;
|
|
1597
1615
|
if (searchable && !panel.contains(document.activeElement)) searchRef.current?.focus({ preventScroll: true });
|
|
1598
1616
|
if (focusOnOpen.current) {
|
|
1599
1617
|
focusOnOpen.current = false;
|
|
@@ -1668,22 +1686,23 @@ function Dropdown({
|
|
|
1668
1686
|
triggerClassName
|
|
1669
1687
|
),
|
|
1670
1688
|
children: [
|
|
1671
|
-
/* @__PURE__ */
|
|
1672
|
-
selected?.icon != null && /* @__PURE__ */
|
|
1673
|
-
selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */
|
|
1689
|
+
/* @__PURE__ */ jsx20("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs17(Fragment2, { children: [
|
|
1690
|
+
selected?.icon != null && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected?.icon }),
|
|
1691
|
+
selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
|
|
1674
1692
|
] }) }),
|
|
1675
|
-
!noChevron && !iconOnly && /* @__PURE__ */
|
|
1693
|
+
!noChevron && !iconOnly && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx20(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
1676
1694
|
]
|
|
1677
1695
|
}
|
|
1678
1696
|
),
|
|
1679
|
-
canClear && /* @__PURE__ */
|
|
1697
|
+
canClear && /* @__PURE__ */ jsx20("button", { type: "button", className: "fractal-dropdown-clear", "aria-label": `Clear ${accessibleLabel}`, onClick: () => {
|
|
1680
1698
|
if (multiple) onSelectionChange?.([]);
|
|
1681
1699
|
else onSelect?.("");
|
|
1682
1700
|
setOpen(false);
|
|
1683
1701
|
setQuery("");
|
|
1684
1702
|
triggerRef.current?.focus();
|
|
1685
|
-
}, children: /* @__PURE__ */
|
|
1686
|
-
fieldLabel ? /* @__PURE__ */
|
|
1703
|
+
}, children: /* @__PURE__ */ jsx20(Close2, { "aria-hidden": "true" }) }),
|
|
1704
|
+
fieldLabel ? /* @__PURE__ */ jsx20(FloatingFieldBorder, { label: fieldLabel }) : null,
|
|
1705
|
+
fieldLabel ? /* @__PURE__ */ jsx20("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
|
|
1687
1706
|
open && /* @__PURE__ */ jsxs17(
|
|
1688
1707
|
"div",
|
|
1689
1708
|
{
|
|
@@ -1704,19 +1723,19 @@ function Dropdown({
|
|
|
1704
1723
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
1705
1724
|
style: panelStyle,
|
|
1706
1725
|
children: [
|
|
1707
|
-
searchable && /* @__PURE__ */
|
|
1708
|
-
/* @__PURE__ */
|
|
1709
|
-
/* @__PURE__ */
|
|
1726
|
+
searchable && /* @__PURE__ */ jsx20("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ jsxs17("div", { className: "fractal-dropdown-search", children: [
|
|
1727
|
+
/* @__PURE__ */ jsx20(MagnifyingGlass2, { "aria-hidden": "true" }),
|
|
1728
|
+
/* @__PURE__ */ jsx20("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
|
|
1710
1729
|
] }) }),
|
|
1711
1730
|
/* @__PURE__ */ jsxs17("div", { ref: optionsRef, className: "fractal-dropdown-options", onScroll: (event) => setOptionsScrolled(event.currentTarget.scrollTop > 0), role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
|
|
1712
|
-
label != null && /* @__PURE__ */
|
|
1731
|
+
label != null && /* @__PURE__ */ jsx20("div", { className: "fractal-dropdown-label", children: label }),
|
|
1713
1732
|
visibleItems.map((item, index) => {
|
|
1714
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */
|
|
1715
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */
|
|
1733
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ jsx20("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1734
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx20("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1716
1735
|
if (item.kind === "header") {
|
|
1717
1736
|
return /* @__PURE__ */ jsxs17(React11.Fragment, { children: [
|
|
1718
1737
|
topDivider,
|
|
1719
|
-
/* @__PURE__ */
|
|
1738
|
+
/* @__PURE__ */ jsx20("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
1720
1739
|
bottomDivider
|
|
1721
1740
|
] }, `header-${index}`);
|
|
1722
1741
|
}
|
|
@@ -1739,17 +1758,17 @@ function Dropdown({
|
|
|
1739
1758
|
},
|
|
1740
1759
|
className: "fractal-dropdown-option",
|
|
1741
1760
|
children: [
|
|
1742
|
-
multiple && /* @__PURE__ */
|
|
1743
|
-
item.icon != null && /* @__PURE__ */
|
|
1744
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */
|
|
1745
|
-
item.trailing != null && /* @__PURE__ */
|
|
1761
|
+
multiple && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ jsx20(Check2, {}) }),
|
|
1762
|
+
item.icon != null && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
1763
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
1764
|
+
item.trailing != null && /* @__PURE__ */ jsx20("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
1746
1765
|
]
|
|
1747
1766
|
}
|
|
1748
1767
|
),
|
|
1749
1768
|
bottomDivider
|
|
1750
1769
|
] }, item.value);
|
|
1751
1770
|
}),
|
|
1752
|
-
!selectableItems.length && /* @__PURE__ */
|
|
1771
|
+
!selectableItems.length && /* @__PURE__ */ jsx20("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
|
|
1753
1772
|
] })
|
|
1754
1773
|
]
|
|
1755
1774
|
}
|
|
@@ -1759,9 +1778,9 @@ function Dropdown({
|
|
|
1759
1778
|
|
|
1760
1779
|
// src/components/Link/Link.tsx
|
|
1761
1780
|
import * as React12 from "react";
|
|
1762
|
-
import { jsx as
|
|
1781
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1763
1782
|
var Link = React12.forwardRef(
|
|
1764
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */
|
|
1783
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
1765
1784
|
"a",
|
|
1766
1785
|
{
|
|
1767
1786
|
ref,
|
|
@@ -1774,9 +1793,9 @@ Link.displayName = "Link";
|
|
|
1774
1793
|
|
|
1775
1794
|
// src/components/Chip/Chip.tsx
|
|
1776
1795
|
import * as React13 from "react";
|
|
1777
|
-
import { jsx as
|
|
1796
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
1778
1797
|
var Chip = React13.forwardRef(
|
|
1779
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */
|
|
1798
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
1780
1799
|
"span",
|
|
1781
1800
|
{
|
|
1782
1801
|
ref,
|
|
@@ -1789,7 +1808,7 @@ Chip.displayName = "Chip";
|
|
|
1789
1808
|
|
|
1790
1809
|
// src/components/Checkbox/Checkbox.tsx
|
|
1791
1810
|
import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
|
|
1792
|
-
import { jsx as
|
|
1811
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1793
1812
|
function Checkbox({
|
|
1794
1813
|
checked,
|
|
1795
1814
|
indeterminate = false,
|
|
@@ -1800,7 +1819,7 @@ function Checkbox({
|
|
|
1800
1819
|
onKeyDown,
|
|
1801
1820
|
...props
|
|
1802
1821
|
}) {
|
|
1803
|
-
return /* @__PURE__ */
|
|
1822
|
+
return /* @__PURE__ */ jsx23(
|
|
1804
1823
|
"button",
|
|
1805
1824
|
{
|
|
1806
1825
|
...props,
|
|
@@ -1823,15 +1842,15 @@ function Checkbox({
|
|
|
1823
1842
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1824
1843
|
},
|
|
1825
1844
|
children: indeterminate ? /* @__PURE__ */ jsxs18("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
1826
|
-
/* @__PURE__ */
|
|
1827
|
-
/* @__PURE__ */
|
|
1828
|
-
] }) : checked ? /* @__PURE__ */
|
|
1845
|
+
/* @__PURE__ */ jsx23(CheckboxIcon, { size: 18 }),
|
|
1846
|
+
/* @__PURE__ */ jsx23(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
1847
|
+
] }) : checked ? /* @__PURE__ */ jsx23(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx23(CheckboxIcon, { "aria-hidden": "true", size: 18 })
|
|
1829
1848
|
}
|
|
1830
1849
|
);
|
|
1831
1850
|
}
|
|
1832
1851
|
|
|
1833
1852
|
// src/components/Radio/Radio.tsx
|
|
1834
|
-
import { jsx as
|
|
1853
|
+
import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1835
1854
|
function Radio({
|
|
1836
1855
|
checked,
|
|
1837
1856
|
className,
|
|
@@ -1842,7 +1861,7 @@ function Radio({
|
|
|
1842
1861
|
...props
|
|
1843
1862
|
}) {
|
|
1844
1863
|
return /* @__PURE__ */ jsxs19("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
|
|
1845
|
-
/* @__PURE__ */
|
|
1864
|
+
/* @__PURE__ */ jsx24(
|
|
1846
1865
|
"input",
|
|
1847
1866
|
{
|
|
1848
1867
|
...props,
|
|
@@ -1853,10 +1872,10 @@ function Radio({
|
|
|
1853
1872
|
type: "radio"
|
|
1854
1873
|
}
|
|
1855
1874
|
),
|
|
1856
|
-
/* @__PURE__ */
|
|
1875
|
+
/* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ jsx24("span", { className: "fractal-radio__dot" }) }),
|
|
1857
1876
|
/* @__PURE__ */ jsxs19("span", { className: "fractal-radio__content", children: [
|
|
1858
|
-
/* @__PURE__ */
|
|
1859
|
-
description && /* @__PURE__ */
|
|
1877
|
+
/* @__PURE__ */ jsx24("span", { className: "fractal-radio__label", children: label }),
|
|
1878
|
+
description && /* @__PURE__ */ jsx24("span", { className: "fractal-radio__description", children: description })
|
|
1860
1879
|
] })
|
|
1861
1880
|
] });
|
|
1862
1881
|
}
|
|
@@ -1864,7 +1883,7 @@ function Radio({
|
|
|
1864
1883
|
// src/components/SortableTable/SortableTable.tsx
|
|
1865
1884
|
import { useMemo as useMemo2, useState as useState8 } from "react";
|
|
1866
1885
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
1867
|
-
import { jsx as
|
|
1886
|
+
import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1868
1887
|
function SortableTable({
|
|
1869
1888
|
columns,
|
|
1870
1889
|
data,
|
|
@@ -1964,17 +1983,17 @@ function SortableTable({
|
|
|
1964
1983
|
onSortChange?.(nextKey, nextDirection);
|
|
1965
1984
|
}
|
|
1966
1985
|
};
|
|
1967
|
-
return /* @__PURE__ */
|
|
1968
|
-
header && /* @__PURE__ */
|
|
1969
|
-
visibleRows.length === 0 ? /* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
1971
|
-
selection && /* @__PURE__ */
|
|
1986
|
+
return /* @__PURE__ */ jsx25("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ jsxs20("div", { className: "fractal-sortable-table-surface", children: [
|
|
1987
|
+
header && /* @__PURE__ */ jsx25("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1988
|
+
visibleRows.length === 0 ? /* @__PURE__ */ jsx25("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsx25(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ jsxs20("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1989
|
+
/* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsxs20("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1990
|
+
selection && /* @__PURE__ */ jsx25(
|
|
1972
1991
|
"th",
|
|
1973
1992
|
{
|
|
1974
1993
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1975
1994
|
"data-pinned-column": "selection",
|
|
1976
1995
|
scope: "col",
|
|
1977
|
-
children: /* @__PURE__ */
|
|
1996
|
+
children: /* @__PURE__ */ jsx25(
|
|
1978
1997
|
Checkbox,
|
|
1979
1998
|
{
|
|
1980
1999
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -2000,26 +2019,26 @@ function SortableTable({
|
|
|
2000
2019
|
columns.map((col, columnIndex) => {
|
|
2001
2020
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
2002
2021
|
if (!col.sortable) {
|
|
2003
|
-
return /* @__PURE__ */
|
|
2022
|
+
return /* @__PURE__ */ jsx25(
|
|
2004
2023
|
"th",
|
|
2005
2024
|
{
|
|
2006
2025
|
className: "fractal-sortable-table-th",
|
|
2007
2026
|
scope: "col",
|
|
2008
2027
|
style: columnStyle(col),
|
|
2009
2028
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2010
|
-
children: /* @__PURE__ */
|
|
2029
|
+
children: /* @__PURE__ */ jsx25(TableCellContent, { label: `${col.header} column`, children: col.header })
|
|
2011
2030
|
},
|
|
2012
2031
|
col.key
|
|
2013
2032
|
);
|
|
2014
2033
|
}
|
|
2015
|
-
return /* @__PURE__ */
|
|
2034
|
+
return /* @__PURE__ */ jsx25(
|
|
2016
2035
|
"th",
|
|
2017
2036
|
{
|
|
2018
2037
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
2019
2038
|
scope: "col",
|
|
2020
2039
|
style: columnStyle(col),
|
|
2021
2040
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2022
|
-
children: /* @__PURE__ */
|
|
2041
|
+
children: /* @__PURE__ */ jsx25(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ jsxs20(
|
|
2023
2042
|
"button",
|
|
2024
2043
|
{
|
|
2025
2044
|
type: "button",
|
|
@@ -2030,8 +2049,8 @@ function SortableTable({
|
|
|
2030
2049
|
onClick: () => handleSortClick(col.key),
|
|
2031
2050
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
2032
2051
|
children: [
|
|
2033
|
-
/* @__PURE__ */
|
|
2034
|
-
/* @__PURE__ */
|
|
2052
|
+
/* @__PURE__ */ jsx25("span", { children: col.header }),
|
|
2053
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx25(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx25(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx25(ArrowsUpDown, { size: 14 }) })
|
|
2035
2054
|
]
|
|
2036
2055
|
}
|
|
2037
2056
|
) })
|
|
@@ -2039,9 +2058,9 @@ function SortableTable({
|
|
|
2039
2058
|
col.key
|
|
2040
2059
|
);
|
|
2041
2060
|
}),
|
|
2042
|
-
overflowMenu && /* @__PURE__ */
|
|
2061
|
+
overflowMenu && /* @__PURE__ */ jsx25("th", { scope: "col", "aria-label": "Row actions", className: "fractal-sortable-table-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
|
|
2043
2062
|
] }) }),
|
|
2044
|
-
/* @__PURE__ */
|
|
2063
|
+
/* @__PURE__ */ jsx25("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
2045
2064
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
2046
2065
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
2047
2066
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -2074,7 +2093,7 @@ function SortableTable({
|
|
|
2074
2093
|
role: interactive ? "button" : void 0,
|
|
2075
2094
|
tabIndex: interactive ? 0 : void 0,
|
|
2076
2095
|
children: [
|
|
2077
|
-
selection && /* @__PURE__ */
|
|
2096
|
+
selection && /* @__PURE__ */ jsx25("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", "data-pinned-column": "selection", children: /* @__PURE__ */ jsx25(
|
|
2078
2097
|
Checkbox,
|
|
2079
2098
|
{
|
|
2080
2099
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -2097,13 +2116,13 @@ function SortableTable({
|
|
|
2097
2116
|
"data-column-align": col.align,
|
|
2098
2117
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2099
2118
|
children: [
|
|
2100
|
-
/* @__PURE__ */
|
|
2101
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
2119
|
+
/* @__PURE__ */ jsx25(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }),
|
|
2120
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx25("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx25("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
2102
2121
|
]
|
|
2103
2122
|
},
|
|
2104
2123
|
col.key
|
|
2105
2124
|
)),
|
|
2106
|
-
overflowMenu && /* @__PURE__ */
|
|
2125
|
+
overflowMenu && /* @__PURE__ */ jsx25(
|
|
2107
2126
|
"td",
|
|
2108
2127
|
{
|
|
2109
2128
|
className: "fractal-sortable-table-td fractal-table-overflow-cell",
|
|
@@ -2111,7 +2130,7 @@ function SortableTable({
|
|
|
2111
2130
|
onClick: (event) => event.stopPropagation(),
|
|
2112
2131
|
onDoubleClick: (event) => event.stopPropagation(),
|
|
2113
2132
|
onKeyDown: (event) => event.stopPropagation(),
|
|
2114
|
-
children: /* @__PURE__ */
|
|
2133
|
+
children: /* @__PURE__ */ jsx25(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: disabled || overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) })
|
|
2115
2134
|
}
|
|
2116
2135
|
)
|
|
2117
2136
|
]
|
|
@@ -2125,7 +2144,7 @@ function SortableTable({
|
|
|
2125
2144
|
|
|
2126
2145
|
// src/components/Tabs/Tabs.tsx
|
|
2127
2146
|
import { useId as useId5, useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState9 } from "react";
|
|
2128
|
-
import { jsx as
|
|
2147
|
+
import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2129
2148
|
function Tabs({
|
|
2130
2149
|
items,
|
|
2131
2150
|
defaultValue,
|
|
@@ -2197,7 +2216,7 @@ function Tabs({
|
|
|
2197
2216
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
2198
2217
|
};
|
|
2199
2218
|
return /* @__PURE__ */ jsxs21("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
2200
|
-
/* @__PURE__ */
|
|
2219
|
+
/* @__PURE__ */ jsx26(
|
|
2201
2220
|
"div",
|
|
2202
2221
|
{
|
|
2203
2222
|
ref: tabListRef,
|
|
@@ -2210,7 +2229,7 @@ function Tabs({
|
|
|
2210
2229
|
const isActive = item.id === activeId;
|
|
2211
2230
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2212
2231
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2213
|
-
return /* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ jsx26(
|
|
2214
2233
|
"button",
|
|
2215
2234
|
{
|
|
2216
2235
|
ref: (el) => {
|
|
@@ -2241,7 +2260,7 @@ function Tabs({
|
|
|
2241
2260
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2242
2261
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2243
2262
|
const isActive = item.id === activeId;
|
|
2244
|
-
return /* @__PURE__ */
|
|
2263
|
+
return /* @__PURE__ */ jsx26(
|
|
2245
2264
|
"div",
|
|
2246
2265
|
{
|
|
2247
2266
|
id: panelId,
|
|
@@ -2259,7 +2278,7 @@ function Tabs({
|
|
|
2259
2278
|
|
|
2260
2279
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
2261
2280
|
import * as React14 from "react";
|
|
2262
|
-
import { jsx as
|
|
2281
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2263
2282
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
2264
2283
|
const switcherRef = React14.useRef(null);
|
|
2265
2284
|
const buttonRefs = React14.useRef([]);
|
|
@@ -2325,10 +2344,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2325
2344
|
"aria-label": ariaLabel,
|
|
2326
2345
|
ref: switcherRef,
|
|
2327
2346
|
children: [
|
|
2328
|
-
/* @__PURE__ */
|
|
2347
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
2329
2348
|
items.map((item, index) => {
|
|
2330
2349
|
const active = item.value === value;
|
|
2331
|
-
return /* @__PURE__ */
|
|
2350
|
+
return /* @__PURE__ */ jsx27(
|
|
2332
2351
|
"button",
|
|
2333
2352
|
{
|
|
2334
2353
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -2362,7 +2381,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2362
2381
|
// src/components/Disclosure/Disclosure.tsx
|
|
2363
2382
|
import { useId as useId6, useState as useState10 } from "react";
|
|
2364
2383
|
import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
2365
|
-
import { jsx as
|
|
2384
|
+
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2366
2385
|
function Disclosure({
|
|
2367
2386
|
title,
|
|
2368
2387
|
meta,
|
|
@@ -2412,13 +2431,13 @@ function Disclosure({
|
|
|
2412
2431
|
disabled,
|
|
2413
2432
|
onClick: toggle,
|
|
2414
2433
|
children: [
|
|
2415
|
-
/* @__PURE__ */
|
|
2416
|
-
/* @__PURE__ */
|
|
2417
|
-
meta && /* @__PURE__ */
|
|
2434
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx28(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx28(ChevronRight3, { size: 16 }) }),
|
|
2435
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-disclosure-title", children: title }),
|
|
2436
|
+
meta && /* @__PURE__ */ jsx28("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2418
2437
|
]
|
|
2419
2438
|
}
|
|
2420
2439
|
),
|
|
2421
|
-
/* @__PURE__ */
|
|
2440
|
+
/* @__PURE__ */ jsx28(
|
|
2422
2441
|
"div",
|
|
2423
2442
|
{
|
|
2424
2443
|
id: panelId,
|
|
@@ -2426,7 +2445,7 @@ function Disclosure({
|
|
|
2426
2445
|
"aria-labelledby": headerId,
|
|
2427
2446
|
className: "fractal-disclosure-panel",
|
|
2428
2447
|
hidden: !isOpen,
|
|
2429
|
-
children: /* @__PURE__ */
|
|
2448
|
+
children: /* @__PURE__ */ jsx28("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2430
2449
|
}
|
|
2431
2450
|
)
|
|
2432
2451
|
]
|
|
@@ -2435,18 +2454,18 @@ function Disclosure({
|
|
|
2435
2454
|
}
|
|
2436
2455
|
|
|
2437
2456
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2438
|
-
import { jsx as
|
|
2457
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
2439
2458
|
var LATTICE_COUNT = 160;
|
|
2440
2459
|
var WAVE_PERIOD = 80;
|
|
2441
2460
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2442
|
-
return /* @__PURE__ */
|
|
2461
|
+
return /* @__PURE__ */ jsx29(
|
|
2443
2462
|
"span",
|
|
2444
2463
|
{
|
|
2445
2464
|
"aria-label": label,
|
|
2446
2465
|
className: cn("fractal-lattice-loader", className),
|
|
2447
2466
|
role: "progressbar",
|
|
2448
2467
|
...props,
|
|
2449
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
2468
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx29(
|
|
2450
2469
|
"span",
|
|
2451
2470
|
{
|
|
2452
2471
|
"aria-hidden": "true",
|
|
@@ -2460,10 +2479,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2460
2479
|
}
|
|
2461
2480
|
|
|
2462
2481
|
// src/components/Ghost/Ghost.tsx
|
|
2463
|
-
import { jsx as
|
|
2482
|
+
import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2464
2483
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2465
2484
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2466
|
-
return /* @__PURE__ */
|
|
2485
|
+
return /* @__PURE__ */ jsx30(
|
|
2467
2486
|
"div",
|
|
2468
2487
|
{
|
|
2469
2488
|
"aria-hidden": "true",
|
|
@@ -2479,15 +2498,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2479
2498
|
);
|
|
2480
2499
|
}
|
|
2481
2500
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2482
|
-
return /* @__PURE__ */
|
|
2501
|
+
return /* @__PURE__ */ jsx30(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2483
2502
|
}
|
|
2484
2503
|
function ButtonGhost({ className, size = "lg", controlSize, iconOnly = false, width, ...props }) {
|
|
2485
|
-
return /* @__PURE__ */
|
|
2504
|
+
return /* @__PURE__ */ jsx30(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2486
2505
|
}
|
|
2487
2506
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2488
2507
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2489
|
-
showHeader && /* @__PURE__ */
|
|
2490
|
-
/* @__PURE__ */
|
|
2508
|
+
showHeader && /* @__PURE__ */ jsx30(GhostLine, { width: "38%" }),
|
|
2509
|
+
/* @__PURE__ */ jsx30("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx30(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
2491
2510
|
] });
|
|
2492
2511
|
}
|
|
2493
2512
|
function DataTableGhost({
|
|
@@ -2501,74 +2520,74 @@ function DataTableGhost({
|
|
|
2501
2520
|
...props
|
|
2502
2521
|
}) {
|
|
2503
2522
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2504
|
-
return /* @__PURE__ */
|
|
2505
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
2506
|
-
/* @__PURE__ */
|
|
2523
|
+
return /* @__PURE__ */ jsx30("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs24("table", { className: "fractal-ghost-table__table", children: [
|
|
2524
|
+
(showHeader || headers) && /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsx30("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx30("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx30(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2525
|
+
/* @__PURE__ */ jsx30("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx30("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx30("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx30(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
2507
2526
|
] }) });
|
|
2508
2527
|
}
|
|
2509
2528
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2510
|
-
return /* @__PURE__ */
|
|
2529
|
+
return /* @__PURE__ */ jsx30(FormFieldGhost, { className, labelWidth, ...props });
|
|
2511
2530
|
}
|
|
2512
2531
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2513
|
-
return /* @__PURE__ */
|
|
2532
|
+
return /* @__PURE__ */ jsx30(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2514
2533
|
}
|
|
2515
2534
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2516
|
-
return /* @__PURE__ */
|
|
2535
|
+
return /* @__PURE__ */ jsx30(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2517
2536
|
}
|
|
2518
2537
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "lg", ...props }) {
|
|
2519
2538
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2520
|
-
/* @__PURE__ */
|
|
2521
|
-
/* @__PURE__ */
|
|
2539
|
+
/* @__PURE__ */ jsx30(LabelGhost, { width: labelWidth }),
|
|
2540
|
+
/* @__PURE__ */ jsx30(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2522
2541
|
] });
|
|
2523
2542
|
}
|
|
2524
2543
|
function AlertGhost({ className, ...props }) {
|
|
2525
2544
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2526
|
-
/* @__PURE__ */
|
|
2527
|
-
/* @__PURE__ */
|
|
2545
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "30%" }),
|
|
2546
|
+
/* @__PURE__ */ jsx30(GhostLine, { size: "sm", width: "78%" })
|
|
2528
2547
|
] });
|
|
2529
2548
|
}
|
|
2530
2549
|
function CheckboxGhost({ className, ...props }) {
|
|
2531
2550
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2532
|
-
/* @__PURE__ */
|
|
2533
|
-
/* @__PURE__ */
|
|
2551
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2552
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "42%" })
|
|
2534
2553
|
] });
|
|
2535
2554
|
}
|
|
2536
2555
|
var ToggleGhost = CheckboxGhost;
|
|
2537
2556
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2538
|
-
return /* @__PURE__ */
|
|
2557
|
+
return /* @__PURE__ */ jsx30(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2539
2558
|
}
|
|
2540
2559
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2541
|
-
return /* @__PURE__ */
|
|
2560
|
+
return /* @__PURE__ */ jsx30(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2542
2561
|
}
|
|
2543
2562
|
var TextButtonGhost = LinkGhost;
|
|
2544
2563
|
function DropdownGhost({ className, controlSize = "lg", ...props }) {
|
|
2545
2564
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2546
|
-
/* @__PURE__ */
|
|
2547
|
-
/* @__PURE__ */
|
|
2565
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "38%" }),
|
|
2566
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2548
2567
|
] });
|
|
2549
2568
|
}
|
|
2550
2569
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2551
|
-
return /* @__PURE__ */
|
|
2570
|
+
return /* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx30(Ghost, {}, index)) });
|
|
2552
2571
|
}
|
|
2553
2572
|
var TabsGhost = ContentSwitcherGhost;
|
|
2554
2573
|
function DisclosureGhost({ className, ...props }) {
|
|
2555
2574
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2556
|
-
/* @__PURE__ */
|
|
2557
|
-
/* @__PURE__ */
|
|
2575
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2576
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "42%" })
|
|
2558
2577
|
] });
|
|
2559
2578
|
}
|
|
2560
2579
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2561
|
-
return /* @__PURE__ */
|
|
2580
|
+
return /* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx30(Ghost, {}, index)) });
|
|
2562
2581
|
}
|
|
2563
2582
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2564
2583
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2565
|
-
/* @__PURE__ */
|
|
2566
|
-
/* @__PURE__ */
|
|
2567
|
-
/* @__PURE__ */
|
|
2584
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2585
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "26%" }),
|
|
2586
|
+
/* @__PURE__ */ jsx30(GhostLine, { size: "sm", width: "46%" })
|
|
2568
2587
|
] });
|
|
2569
2588
|
}
|
|
2570
2589
|
function PromptCardGhost({ className, ...props }) {
|
|
2571
|
-
return /* @__PURE__ */
|
|
2590
|
+
return /* @__PURE__ */ jsx30(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2572
2591
|
}
|
|
2573
2592
|
function ConversationGhost({
|
|
2574
2593
|
className,
|
|
@@ -2584,54 +2603,54 @@ function ConversationGhost({
|
|
|
2584
2603
|
role: "status",
|
|
2585
2604
|
...props,
|
|
2586
2605
|
children: [
|
|
2587
|
-
/* @__PURE__ */
|
|
2588
|
-
/* @__PURE__ */
|
|
2589
|
-
/* @__PURE__ */
|
|
2590
|
-
/* @__PURE__ */
|
|
2606
|
+
/* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2607
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "100%" }),
|
|
2608
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "86%" }),
|
|
2609
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "64%" })
|
|
2591
2610
|
] }) }),
|
|
2592
2611
|
/* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2593
|
-
/* @__PURE__ */
|
|
2594
|
-
/* @__PURE__ */
|
|
2595
|
-
/* @__PURE__ */
|
|
2612
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "92%" }),
|
|
2613
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "78%" }),
|
|
2614
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "58%" })
|
|
2596
2615
|
] })
|
|
2597
2616
|
]
|
|
2598
2617
|
}
|
|
2599
2618
|
);
|
|
2600
2619
|
}
|
|
2601
2620
|
function SortableTableGhost(props) {
|
|
2602
|
-
return /* @__PURE__ */
|
|
2621
|
+
return /* @__PURE__ */ jsx30(DataTableGhost, { ...props });
|
|
2603
2622
|
}
|
|
2604
2623
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2605
2624
|
return /* @__PURE__ */ jsxs24("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2606
|
-
/* @__PURE__ */
|
|
2607
|
-
/* @__PURE__ */
|
|
2608
|
-
/* @__PURE__ */
|
|
2609
|
-
/* @__PURE__ */
|
|
2625
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2626
|
+
/* @__PURE__ */ jsx30("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2627
|
+
/* @__PURE__ */ jsx30(Ghost, {}),
|
|
2628
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2610
2629
|
] }, index)) })
|
|
2611
2630
|
] });
|
|
2612
2631
|
}
|
|
2613
2632
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2614
|
-
return /* @__PURE__ */
|
|
2633
|
+
return /* @__PURE__ */ jsx30(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2615
2634
|
}
|
|
2616
2635
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2617
|
-
return /* @__PURE__ */
|
|
2636
|
+
return /* @__PURE__ */ jsx30(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2618
2637
|
}
|
|
2619
2638
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2620
2639
|
return /* @__PURE__ */ jsxs24("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2621
2640
|
/* @__PURE__ */ jsxs24("div", { className: "fractal-ghost-surface__header", children: [
|
|
2622
|
-
/* @__PURE__ */
|
|
2623
|
-
/* @__PURE__ */
|
|
2641
|
+
/* @__PURE__ */ jsx30(GhostLine, { width: "42%" }),
|
|
2642
|
+
/* @__PURE__ */ jsx30(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2624
2643
|
] }),
|
|
2625
|
-
title && /* @__PURE__ */
|
|
2626
|
-
/* @__PURE__ */
|
|
2644
|
+
title && /* @__PURE__ */ jsx30("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2645
|
+
/* @__PURE__ */ jsx30("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx30(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2627
2646
|
] });
|
|
2628
2647
|
}
|
|
2629
2648
|
|
|
2630
2649
|
// src/components/Sidebar/Sidebar.tsx
|
|
2631
2650
|
import * as React15 from "react";
|
|
2632
|
-
import { Fragment as Fragment3, jsx as
|
|
2651
|
+
import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2633
2652
|
var Sidebar = React15.forwardRef(
|
|
2634
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
2653
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
2635
2654
|
"aside",
|
|
2636
2655
|
{
|
|
2637
2656
|
ref,
|
|
@@ -2644,11 +2663,11 @@ var Sidebar = React15.forwardRef(
|
|
|
2644
2663
|
);
|
|
2645
2664
|
Sidebar.displayName = "Sidebar";
|
|
2646
2665
|
var SidebarHeader = React15.forwardRef(
|
|
2647
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2666
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2648
2667
|
);
|
|
2649
2668
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2650
2669
|
var SidebarBrand = React15.forwardRef(
|
|
2651
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
2670
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx31("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2652
2671
|
);
|
|
2653
2672
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2654
2673
|
function SidebarAccountMenu({
|
|
@@ -2659,7 +2678,7 @@ function SidebarAccountMenu({
|
|
|
2659
2678
|
icon,
|
|
2660
2679
|
className
|
|
2661
2680
|
}) {
|
|
2662
|
-
return /* @__PURE__ */
|
|
2681
|
+
return /* @__PURE__ */ jsx31(
|
|
2663
2682
|
Dropdown,
|
|
2664
2683
|
{
|
|
2665
2684
|
align: "left",
|
|
@@ -2670,8 +2689,8 @@ function SidebarAccountMenu({
|
|
|
2670
2689
|
selectedValue: "",
|
|
2671
2690
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2672
2691
|
triggerContent: /* @__PURE__ */ jsxs25(Fragment3, { children: [
|
|
2673
|
-
icon && /* @__PURE__ */
|
|
2674
|
-
/* @__PURE__ */
|
|
2692
|
+
icon && /* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2693
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2675
2694
|
] }),
|
|
2676
2695
|
triggerLabel,
|
|
2677
2696
|
triggerVariant: "tertiary"
|
|
@@ -2679,11 +2698,11 @@ function SidebarAccountMenu({
|
|
|
2679
2698
|
);
|
|
2680
2699
|
}
|
|
2681
2700
|
var SidebarNav = React15.forwardRef(
|
|
2682
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2701
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2683
2702
|
);
|
|
2684
2703
|
SidebarNav.displayName = "SidebarNav";
|
|
2685
2704
|
var SidebarSection = React15.forwardRef(
|
|
2686
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2705
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2687
2706
|
);
|
|
2688
2707
|
SidebarSection.displayName = "SidebarSection";
|
|
2689
2708
|
var SidebarNavItem = React15.forwardRef(
|
|
@@ -2697,16 +2716,16 @@ var SidebarNavItem = React15.forwardRef(
|
|
|
2697
2716
|
"aria-current": active ? "page" : void 0,
|
|
2698
2717
|
...props,
|
|
2699
2718
|
children: [
|
|
2700
|
-
icon && /* @__PURE__ */
|
|
2701
|
-
/* @__PURE__ */
|
|
2702
|
-
endAdornment && /* @__PURE__ */
|
|
2719
|
+
icon && /* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2720
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2721
|
+
endAdornment && /* @__PURE__ */ jsx31("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2703
2722
|
]
|
|
2704
2723
|
}
|
|
2705
2724
|
)
|
|
2706
2725
|
);
|
|
2707
2726
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2708
2727
|
var SidebarFooter = React15.forwardRef(
|
|
2709
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2728
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2710
2729
|
);
|
|
2711
2730
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2712
2731
|
|
|
@@ -2714,7 +2733,7 @@ SidebarFooter.displayName = "SidebarFooter";
|
|
|
2714
2733
|
import * as React16 from "react";
|
|
2715
2734
|
import { createPortal as createPortal4 } from "react-dom";
|
|
2716
2735
|
import { Close as Close3 } from "@mirror-physics/fractal-icons";
|
|
2717
|
-
import { jsx as
|
|
2736
|
+
import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2718
2737
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2719
2738
|
useEscapeDismiss(80, onClose, open);
|
|
2720
2739
|
const bodyRef = React16.useRef(null);
|
|
@@ -2750,7 +2769,7 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2750
2769
|
}, [open, loading]);
|
|
2751
2770
|
if (!open) return null;
|
|
2752
2771
|
return createPortal4(
|
|
2753
|
-
/* @__PURE__ */
|
|
2772
|
+
/* @__PURE__ */ jsx32("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs26(
|
|
2754
2773
|
"aside",
|
|
2755
2774
|
{
|
|
2756
2775
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2761,13 +2780,13 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2761
2780
|
children: [
|
|
2762
2781
|
/* @__PURE__ */ jsxs26("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
|
|
2763
2782
|
/* @__PURE__ */ jsxs26("div", { className: "fractal-side-panel__heading", children: [
|
|
2764
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
2765
|
-
description && /* @__PURE__ */
|
|
2783
|
+
typeof title === "string" ? /* @__PURE__ */ jsx32("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx32("div", { className: "fractal-side-panel__title", children: title }),
|
|
2784
|
+
description && /* @__PURE__ */ jsx32("p", { className: "fractal-side-panel__description", children: description })
|
|
2766
2785
|
] }),
|
|
2767
|
-
/* @__PURE__ */
|
|
2786
|
+
/* @__PURE__ */ jsx32("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx32(Close3, { size: 18 }) })
|
|
2768
2787
|
] }),
|
|
2769
|
-
/* @__PURE__ */
|
|
2770
|
-
footer && /* @__PURE__ */
|
|
2788
|
+
/* @__PURE__ */ jsx32("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx32(UILoader, { label: loadingLabel }) : children }),
|
|
2789
|
+
footer && /* @__PURE__ */ jsx32("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
|
|
2771
2790
|
]
|
|
2772
2791
|
}
|
|
2773
2792
|
) }),
|
|
@@ -2777,12 +2796,12 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2777
2796
|
|
|
2778
2797
|
// src/components/Textarea/Textarea.tsx
|
|
2779
2798
|
import * as React17 from "react";
|
|
2780
|
-
import { jsx as
|
|
2799
|
+
import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2781
2800
|
var Textarea = React17.forwardRef(
|
|
2782
2801
|
({ className, fieldLabel, textStyle = "source", id, placeholder, ...props }, ref) => {
|
|
2783
2802
|
const generatedId = React17.useId();
|
|
2784
2803
|
const fieldId = id ?? generatedId;
|
|
2785
|
-
const input = /* @__PURE__ */
|
|
2804
|
+
const input = /* @__PURE__ */ jsx33(
|
|
2786
2805
|
"textarea",
|
|
2787
2806
|
{
|
|
2788
2807
|
ref,
|
|
@@ -2795,7 +2814,8 @@ var Textarea = React17.forwardRef(
|
|
|
2795
2814
|
);
|
|
2796
2815
|
return fieldLabel ? /* @__PURE__ */ jsxs27("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
|
|
2797
2816
|
input,
|
|
2798
|
-
/* @__PURE__ */
|
|
2817
|
+
/* @__PURE__ */ jsx33(FloatingFieldBorder, { label: fieldLabel ?? "" }),
|
|
2818
|
+
/* @__PURE__ */ jsx33("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
|
|
2799
2819
|
] }) : input;
|
|
2800
2820
|
}
|
|
2801
2821
|
);
|
|
@@ -2803,7 +2823,7 @@ Textarea.displayName = "Textarea";
|
|
|
2803
2823
|
|
|
2804
2824
|
// src/components/TextButton/TextButton.tsx
|
|
2805
2825
|
import * as React18 from "react";
|
|
2806
|
-
import { jsx as
|
|
2826
|
+
import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2807
2827
|
var TextButton = React18.forwardRef(
|
|
2808
2828
|
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs28(
|
|
2809
2829
|
"button",
|
|
@@ -2813,9 +2833,9 @@ var TextButton = React18.forwardRef(
|
|
|
2813
2833
|
type: "button",
|
|
2814
2834
|
...props,
|
|
2815
2835
|
children: [
|
|
2816
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
2817
|
-
/* @__PURE__ */
|
|
2818
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
2836
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx34("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2837
|
+
/* @__PURE__ */ jsx34("span", { children }),
|
|
2838
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx34("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2819
2839
|
]
|
|
2820
2840
|
}
|
|
2821
2841
|
)
|
|
@@ -2825,7 +2845,7 @@ TextButton.displayName = "TextButton";
|
|
|
2825
2845
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2826
2846
|
import * as React19 from "react";
|
|
2827
2847
|
import { Close as Close4, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
2828
|
-
import { jsx as
|
|
2848
|
+
import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2829
2849
|
function FileDropzone({
|
|
2830
2850
|
files,
|
|
2831
2851
|
onFilesChange,
|
|
@@ -2846,7 +2866,7 @@ function FileDropzone({
|
|
|
2846
2866
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2847
2867
|
};
|
|
2848
2868
|
return /* @__PURE__ */ jsxs29("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2849
|
-
/* @__PURE__ */
|
|
2869
|
+
/* @__PURE__ */ jsx35(
|
|
2850
2870
|
"input",
|
|
2851
2871
|
{
|
|
2852
2872
|
ref: inputRef,
|
|
@@ -2885,18 +2905,18 @@ function FileDropzone({
|
|
|
2885
2905
|
addFiles(event.dataTransfer.files);
|
|
2886
2906
|
},
|
|
2887
2907
|
children: [
|
|
2888
|
-
/* @__PURE__ */
|
|
2908
|
+
/* @__PURE__ */ jsx35(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2889
2909
|
/* @__PURE__ */ jsxs29("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2890
|
-
/* @__PURE__ */
|
|
2891
|
-
description && /* @__PURE__ */
|
|
2910
|
+
/* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2911
|
+
description && /* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2892
2912
|
] })
|
|
2893
2913
|
]
|
|
2894
2914
|
}
|
|
2895
2915
|
),
|
|
2896
|
-
files.length > 0 && /* @__PURE__ */
|
|
2897
|
-
/* @__PURE__ */
|
|
2898
|
-
/* @__PURE__ */
|
|
2899
|
-
/* @__PURE__ */
|
|
2916
|
+
files.length > 0 && /* @__PURE__ */ jsx35("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs29("li", { className: "fractal-file-dropzone__file", children: [
|
|
2917
|
+
/* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2918
|
+
/* @__PURE__ */ jsx35("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2919
|
+
/* @__PURE__ */ jsx35(
|
|
2900
2920
|
"button",
|
|
2901
2921
|
{
|
|
2902
2922
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2904,7 +2924,7 @@ function FileDropzone({
|
|
|
2904
2924
|
"aria-label": `Remove ${file.name}`,
|
|
2905
2925
|
disabled,
|
|
2906
2926
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2907
|
-
children: /* @__PURE__ */
|
|
2927
|
+
children: /* @__PURE__ */ jsx35(Close4, { "aria-hidden": "true", size: 14 })
|
|
2908
2928
|
}
|
|
2909
2929
|
)
|
|
2910
2930
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2918,7 +2938,7 @@ function formatFileSize(bytes) {
|
|
|
2918
2938
|
|
|
2919
2939
|
// src/components/Pagination/Pagination.tsx
|
|
2920
2940
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
2921
|
-
import { jsx as
|
|
2941
|
+
import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2922
2942
|
function Pagination({
|
|
2923
2943
|
page,
|
|
2924
2944
|
pageSize,
|
|
@@ -2935,9 +2955,9 @@ function Pagination({
|
|
|
2935
2955
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2936
2956
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2937
2957
|
return /* @__PURE__ */ jsxs30("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2938
|
-
/* @__PURE__ */
|
|
2958
|
+
/* @__PURE__ */ jsx36("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2939
2959
|
/* @__PURE__ */ jsxs30("div", { className: "fractal-pagination__controls", children: [
|
|
2940
|
-
canChangePageSize && /* @__PURE__ */
|
|
2960
|
+
canChangePageSize && /* @__PURE__ */ jsx36(
|
|
2941
2961
|
Dropdown,
|
|
2942
2962
|
{
|
|
2943
2963
|
align: "right",
|
|
@@ -2954,7 +2974,7 @@ function Pagination({
|
|
|
2954
2974
|
triggerVariant: "tertiary"
|
|
2955
2975
|
}
|
|
2956
2976
|
),
|
|
2957
|
-
/* @__PURE__ */
|
|
2977
|
+
/* @__PURE__ */ jsx36(
|
|
2958
2978
|
"button",
|
|
2959
2979
|
{
|
|
2960
2980
|
className: "fractal-pagination__button",
|
|
@@ -2963,7 +2983,7 @@ function Pagination({
|
|
|
2963
2983
|
title: "Previous page",
|
|
2964
2984
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2965
2985
|
onClick: () => onPageChange(currentPage - 1),
|
|
2966
|
-
children: /* @__PURE__ */
|
|
2986
|
+
children: /* @__PURE__ */ jsx36(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2967
2987
|
}
|
|
2968
2988
|
),
|
|
2969
2989
|
/* @__PURE__ */ jsxs30("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
@@ -2971,7 +2991,7 @@ function Pagination({
|
|
|
2971
2991
|
" of ",
|
|
2972
2992
|
totalPages
|
|
2973
2993
|
] }),
|
|
2974
|
-
/* @__PURE__ */
|
|
2994
|
+
/* @__PURE__ */ jsx36(
|
|
2975
2995
|
"button",
|
|
2976
2996
|
{
|
|
2977
2997
|
className: "fractal-pagination__button",
|
|
@@ -2980,7 +3000,7 @@ function Pagination({
|
|
|
2980
3000
|
title: "Next page",
|
|
2981
3001
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2982
3002
|
onClick: () => onPageChange(currentPage + 1),
|
|
2983
|
-
children: /* @__PURE__ */
|
|
3003
|
+
children: /* @__PURE__ */ jsx36(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2984
3004
|
}
|
|
2985
3005
|
)
|
|
2986
3006
|
] })
|
|
@@ -2989,7 +3009,7 @@ function Pagination({
|
|
|
2989
3009
|
|
|
2990
3010
|
// src/components/Tooltip/Tooltip.tsx
|
|
2991
3011
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
2992
|
-
import { jsx as
|
|
3012
|
+
import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2993
3013
|
function Tooltip({
|
|
2994
3014
|
content,
|
|
2995
3015
|
children,
|
|
@@ -3000,9 +3020,9 @@ function Tooltip({
|
|
|
3000
3020
|
className
|
|
3001
3021
|
}) {
|
|
3002
3022
|
if (disabled || content == null || content === "") return children;
|
|
3003
|
-
return /* @__PURE__ */
|
|
3004
|
-
/* @__PURE__ */
|
|
3005
|
-
/* @__PURE__ */
|
|
3023
|
+
return /* @__PURE__ */ jsx37(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs31(TooltipPrimitive.Root, { children: [
|
|
3024
|
+
/* @__PURE__ */ jsx37(TooltipPrimitive.Trigger, { asChild: true, children }),
|
|
3025
|
+
/* @__PURE__ */ jsx37(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx37(
|
|
3006
3026
|
TooltipPrimitive.Content,
|
|
3007
3027
|
{
|
|
3008
3028
|
side: placement,
|