@mirror-physics/fractal-ui 0.2.0-next.71 → 0.2.0-next.73
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 +359 -231
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +105 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +26 -1
- package/dist/index.d.ts +26 -1
- package/dist/index.js +358 -231
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -803,10 +803,136 @@ function NumberInput({
|
|
|
803
803
|
] });
|
|
804
804
|
}
|
|
805
805
|
|
|
806
|
+
// src/components/Slider/Slider.tsx
|
|
807
|
+
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
808
|
+
function Slider(props) {
|
|
809
|
+
const {
|
|
810
|
+
min = 0,
|
|
811
|
+
max = 100,
|
|
812
|
+
step = 1,
|
|
813
|
+
disabled = false,
|
|
814
|
+
className,
|
|
815
|
+
showValues = true,
|
|
816
|
+
formatValue = (value) => value,
|
|
817
|
+
knobs = 1
|
|
818
|
+
} = props;
|
|
819
|
+
const span = Math.max(max - min, 1);
|
|
820
|
+
const rawValues = knobs === 2 ? props.value : [props.value];
|
|
821
|
+
const firstValue = clamp(rawValues[0], min, max);
|
|
822
|
+
const secondValue = knobs === 2 ? clamp(rawValues[1], firstValue, max) : firstValue;
|
|
823
|
+
const selectionStart = knobs === 2 ? firstValue : min;
|
|
824
|
+
const selectionEnd = secondValue;
|
|
825
|
+
const selectionStartPercent = (selectionStart - min) / span * 100;
|
|
826
|
+
const selectionEndPercent = (selectionEnd - min) / span * 100;
|
|
827
|
+
const changeSingleValue = (value) => {
|
|
828
|
+
;
|
|
829
|
+
props.onValueChange(clamp(value, min, max));
|
|
830
|
+
};
|
|
831
|
+
const changeRangeValue = (nextLower, nextUpper) => {
|
|
832
|
+
;
|
|
833
|
+
props.onValueChange([
|
|
834
|
+
clamp(nextLower, min, nextUpper),
|
|
835
|
+
clamp(nextUpper, nextLower, max)
|
|
836
|
+
]);
|
|
837
|
+
};
|
|
838
|
+
const getKeyboardValue = (event, value) => {
|
|
839
|
+
const pageStep = step * 10;
|
|
840
|
+
const adjustments = {
|
|
841
|
+
ArrowDown: -step,
|
|
842
|
+
ArrowLeft: -step,
|
|
843
|
+
ArrowRight: step,
|
|
844
|
+
ArrowUp: step,
|
|
845
|
+
PageDown: -pageStep,
|
|
846
|
+
PageUp: pageStep
|
|
847
|
+
};
|
|
848
|
+
if (event.key === "Home") return min;
|
|
849
|
+
if (event.key === "End") return max;
|
|
850
|
+
if (!(event.key in adjustments)) return null;
|
|
851
|
+
return value + adjustments[event.key];
|
|
852
|
+
};
|
|
853
|
+
return /* @__PURE__ */ jsxs8(
|
|
854
|
+
"div",
|
|
855
|
+
{
|
|
856
|
+
className: cn("fractal-slider", disabled && "fractal-slider--disabled", className),
|
|
857
|
+
"data-disabled": disabled || void 0,
|
|
858
|
+
"data-knobs": knobs,
|
|
859
|
+
children: [
|
|
860
|
+
showValues && /* @__PURE__ */ jsxs8("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
|
|
861
|
+
/* @__PURE__ */ jsx8("output", { children: formatValue(firstValue) }),
|
|
862
|
+
knobs === 2 && /* @__PURE__ */ jsx8("output", { children: formatValue(secondValue) })
|
|
863
|
+
] }),
|
|
864
|
+
/* @__PURE__ */ jsxs8(
|
|
865
|
+
"div",
|
|
866
|
+
{
|
|
867
|
+
className: "fractal-slider-control",
|
|
868
|
+
style: {
|
|
869
|
+
"--fractal-slider-selection-start": `${selectionStartPercent}%`,
|
|
870
|
+
"--fractal-slider-selection-end": `${selectionEndPercent}%`
|
|
871
|
+
},
|
|
872
|
+
children: [
|
|
873
|
+
/* @__PURE__ */ jsx8("span", { className: "fractal-slider-track", "aria-hidden": "true" }),
|
|
874
|
+
/* @__PURE__ */ jsx8("span", { className: "fractal-slider-selection", "aria-hidden": "true" }),
|
|
875
|
+
/* @__PURE__ */ jsx8(
|
|
876
|
+
"input",
|
|
877
|
+
{
|
|
878
|
+
"aria-label": knobs === 2 ? props.lowerAriaLabel ?? "Lower value" : props.ariaLabel ?? "Slider value",
|
|
879
|
+
disabled,
|
|
880
|
+
max,
|
|
881
|
+
min,
|
|
882
|
+
onChange: (event) => {
|
|
883
|
+
const nextValue = event.currentTarget.valueAsNumber;
|
|
884
|
+
if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
|
|
885
|
+
else changeSingleValue(nextValue);
|
|
886
|
+
},
|
|
887
|
+
onKeyDown: (event) => {
|
|
888
|
+
const nextValue = getKeyboardValue(event, firstValue);
|
|
889
|
+
if (nextValue === null) return;
|
|
890
|
+
event.preventDefault();
|
|
891
|
+
if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
|
|
892
|
+
else changeSingleValue(nextValue);
|
|
893
|
+
},
|
|
894
|
+
step,
|
|
895
|
+
type: "range",
|
|
896
|
+
value: firstValue
|
|
897
|
+
}
|
|
898
|
+
),
|
|
899
|
+
knobs === 2 && /* @__PURE__ */ jsx8(
|
|
900
|
+
"input",
|
|
901
|
+
{
|
|
902
|
+
"aria-label": props.upperAriaLabel ?? "Upper value",
|
|
903
|
+
disabled,
|
|
904
|
+
max,
|
|
905
|
+
min,
|
|
906
|
+
onChange: (event) => {
|
|
907
|
+
const nextValue = event.currentTarget.valueAsNumber;
|
|
908
|
+
changeRangeValue(firstValue, Math.max(nextValue, firstValue));
|
|
909
|
+
},
|
|
910
|
+
onKeyDown: (event) => {
|
|
911
|
+
const nextValue = getKeyboardValue(event, secondValue);
|
|
912
|
+
if (nextValue === null) return;
|
|
913
|
+
event.preventDefault();
|
|
914
|
+
changeRangeValue(firstValue, Math.max(nextValue, firstValue));
|
|
915
|
+
},
|
|
916
|
+
step,
|
|
917
|
+
type: "range",
|
|
918
|
+
value: secondValue
|
|
919
|
+
}
|
|
920
|
+
)
|
|
921
|
+
]
|
|
922
|
+
}
|
|
923
|
+
)
|
|
924
|
+
]
|
|
925
|
+
}
|
|
926
|
+
);
|
|
927
|
+
}
|
|
928
|
+
function clamp(value, minimum, maximum) {
|
|
929
|
+
return Math.min(maximum, Math.max(minimum, value));
|
|
930
|
+
}
|
|
931
|
+
|
|
806
932
|
// src/components/PasswordInput/PasswordInput.tsx
|
|
807
933
|
import * as React7 from "react";
|
|
808
934
|
import { Eye, EyeSlash } from "@mirror-physics/fractal-icons";
|
|
809
|
-
import { jsx as
|
|
935
|
+
import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
810
936
|
var PasswordInput = React7.forwardRef(
|
|
811
937
|
({
|
|
812
938
|
className,
|
|
@@ -817,13 +943,13 @@ var PasswordInput = React7.forwardRef(
|
|
|
817
943
|
}, ref) => {
|
|
818
944
|
const [passwordVisible, setPasswordVisible] = React7.useState(false);
|
|
819
945
|
const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
|
|
820
|
-
return /* @__PURE__ */
|
|
946
|
+
return /* @__PURE__ */ jsxs9(
|
|
821
947
|
"div",
|
|
822
948
|
{
|
|
823
949
|
className: cn("fractal-password-input", className),
|
|
824
950
|
"data-password-visible": passwordVisible ? "" : void 0,
|
|
825
951
|
children: [
|
|
826
|
-
/* @__PURE__ */
|
|
952
|
+
/* @__PURE__ */ jsx9(
|
|
827
953
|
Input,
|
|
828
954
|
{
|
|
829
955
|
...props,
|
|
@@ -833,7 +959,7 @@ var PasswordInput = React7.forwardRef(
|
|
|
833
959
|
type: passwordVisible ? "text" : "password"
|
|
834
960
|
}
|
|
835
961
|
),
|
|
836
|
-
/* @__PURE__ */
|
|
962
|
+
/* @__PURE__ */ jsx9(
|
|
837
963
|
"button",
|
|
838
964
|
{
|
|
839
965
|
type: "button",
|
|
@@ -843,7 +969,7 @@ var PasswordInput = React7.forwardRef(
|
|
|
843
969
|
disabled,
|
|
844
970
|
title: toggleLabel,
|
|
845
971
|
onClick: () => setPasswordVisible((visible) => !visible),
|
|
846
|
-
children: passwordVisible ? /* @__PURE__ */
|
|
972
|
+
children: passwordVisible ? /* @__PURE__ */ jsx9(EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx9(Eye, { "aria-hidden": "true", size: 18 })
|
|
847
973
|
}
|
|
848
974
|
)
|
|
849
975
|
]
|
|
@@ -855,9 +981,9 @@ PasswordInput.displayName = "PasswordInput";
|
|
|
855
981
|
|
|
856
982
|
// src/components/Label/Label.tsx
|
|
857
983
|
import * as React8 from "react";
|
|
858
|
-
import { jsx as
|
|
984
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
859
985
|
var Label = React8.forwardRef(
|
|
860
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
986
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
|
|
861
987
|
"label",
|
|
862
988
|
{
|
|
863
989
|
ref,
|
|
@@ -871,7 +997,7 @@ Label.displayName = "Label";
|
|
|
871
997
|
// src/components/Alert/Alert.tsx
|
|
872
998
|
import * as React9 from "react";
|
|
873
999
|
import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
|
|
874
|
-
import { jsx as
|
|
1000
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
875
1001
|
var defaultIcons = {
|
|
876
1002
|
default: CircleInfo,
|
|
877
1003
|
info: CircleInfo,
|
|
@@ -882,7 +1008,7 @@ var defaultIcons = {
|
|
|
882
1008
|
var Alert = React9.forwardRef(
|
|
883
1009
|
({ className, variant = "default", icon, children, ...props }, ref) => {
|
|
884
1010
|
const DefaultIcon = defaultIcons[variant];
|
|
885
|
-
return /* @__PURE__ */
|
|
1011
|
+
return /* @__PURE__ */ jsxs10(
|
|
886
1012
|
"div",
|
|
887
1013
|
{
|
|
888
1014
|
ref,
|
|
@@ -890,8 +1016,8 @@ var Alert = React9.forwardRef(
|
|
|
890
1016
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
891
1017
|
...props,
|
|
892
1018
|
children: [
|
|
893
|
-
/* @__PURE__ */
|
|
894
|
-
/* @__PURE__ */
|
|
1019
|
+
/* @__PURE__ */ jsx11("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx11(DefaultIcon, { size: 18 }) }),
|
|
1020
|
+
/* @__PURE__ */ jsx11("div", { className: "fractal-alert-content", children })
|
|
895
1021
|
]
|
|
896
1022
|
}
|
|
897
1023
|
);
|
|
@@ -899,18 +1025,18 @@ var Alert = React9.forwardRef(
|
|
|
899
1025
|
);
|
|
900
1026
|
Alert.displayName = "Alert";
|
|
901
1027
|
var AlertTitle = React9.forwardRef(
|
|
902
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1028
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx11("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
903
1029
|
);
|
|
904
1030
|
AlertTitle.displayName = "AlertTitle";
|
|
905
1031
|
var AlertDescription = React9.forwardRef(
|
|
906
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
1032
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx11("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
907
1033
|
);
|
|
908
1034
|
AlertDescription.displayName = "AlertDescription";
|
|
909
1035
|
|
|
910
1036
|
// src/components/Toggle/Toggle.tsx
|
|
911
|
-
import { jsx as
|
|
1037
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
912
1038
|
function Toggle({ checked, onChange, label, className }) {
|
|
913
|
-
return /* @__PURE__ */
|
|
1039
|
+
return /* @__PURE__ */ jsxs11(
|
|
914
1040
|
"button",
|
|
915
1041
|
{
|
|
916
1042
|
type: "button",
|
|
@@ -919,8 +1045,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
919
1045
|
className: cn("fractal-toggle", className),
|
|
920
1046
|
onClick: () => onChange(!checked),
|
|
921
1047
|
children: [
|
|
922
|
-
/* @__PURE__ */
|
|
923
|
-
label && /* @__PURE__ */
|
|
1048
|
+
/* @__PURE__ */ jsx12("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx12("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
1049
|
+
label && /* @__PURE__ */ jsx12("span", { className: "fractal-toggle-label", children: label })
|
|
924
1050
|
]
|
|
925
1051
|
}
|
|
926
1052
|
);
|
|
@@ -982,7 +1108,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
982
1108
|
|
|
983
1109
|
// src/components/UILoader/UILoader.tsx
|
|
984
1110
|
import { useId } from "react";
|
|
985
|
-
import { jsx as
|
|
1111
|
+
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
986
1112
|
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";
|
|
987
1113
|
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";
|
|
988
1114
|
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";
|
|
@@ -991,7 +1117,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
991
1117
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
992
1118
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
993
1119
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
994
|
-
return /* @__PURE__ */
|
|
1120
|
+
return /* @__PURE__ */ jsx13(
|
|
995
1121
|
"span",
|
|
996
1122
|
{
|
|
997
1123
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -999,35 +1125,35 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
999
1125
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
1000
1126
|
role: ariaHidden ? void 0 : "status",
|
|
1001
1127
|
style,
|
|
1002
|
-
children: /* @__PURE__ */
|
|
1003
|
-
/* @__PURE__ */
|
|
1004
|
-
/* @__PURE__ */
|
|
1005
|
-
/* @__PURE__ */
|
|
1006
|
-
/* @__PURE__ */
|
|
1128
|
+
children: /* @__PURE__ */ jsxs12("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
1129
|
+
/* @__PURE__ */ jsxs12("defs", { children: [
|
|
1130
|
+
/* @__PURE__ */ jsxs12("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
1131
|
+
/* @__PURE__ */ jsx13("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
1132
|
+
/* @__PURE__ */ jsx13("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
1007
1133
|
] }),
|
|
1008
|
-
/* @__PURE__ */
|
|
1009
|
-
/* @__PURE__ */
|
|
1010
|
-
/* @__PURE__ */
|
|
1011
|
-
/* @__PURE__ */
|
|
1134
|
+
/* @__PURE__ */ jsxs12("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
1135
|
+
/* @__PURE__ */ jsx13("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
1136
|
+
/* @__PURE__ */ jsx13("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
1137
|
+
/* @__PURE__ */ jsx13("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
1012
1138
|
] }),
|
|
1013
|
-
/* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1015
|
-
/* @__PURE__ */
|
|
1016
|
-
/* @__PURE__ */
|
|
1139
|
+
/* @__PURE__ */ jsxs12("clipPath", { id: clipId, children: [
|
|
1140
|
+
/* @__PURE__ */ jsx13("path", { d: LEFT }),
|
|
1141
|
+
/* @__PURE__ */ jsx13("path", { d: CENTER }),
|
|
1142
|
+
/* @__PURE__ */ jsx13("path", { d: RIGHT })
|
|
1017
1143
|
] })
|
|
1018
1144
|
] }),
|
|
1019
|
-
/* @__PURE__ */
|
|
1020
|
-
/* @__PURE__ */
|
|
1021
|
-
/* @__PURE__ */
|
|
1022
|
-
/* @__PURE__ */
|
|
1145
|
+
/* @__PURE__ */ jsx13("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
1146
|
+
/* @__PURE__ */ jsx13("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
1147
|
+
/* @__PURE__ */ jsx13("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
1148
|
+
/* @__PURE__ */ jsx13("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx13("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx13("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
1023
1149
|
] })
|
|
1024
1150
|
}
|
|
1025
1151
|
);
|
|
1026
1152
|
}
|
|
1027
1153
|
|
|
1028
1154
|
// src/components/Modal/Modal.tsx
|
|
1029
|
-
import { jsx as
|
|
1030
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
1155
|
+
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1156
|
+
var CloseIcon = () => /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx14("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1031
1157
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
1032
1158
|
const [bodyScrolled, setBodyScrolled] = React10.useState(false);
|
|
1033
1159
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
@@ -1038,13 +1164,13 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1038
1164
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
1039
1165
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
1040
1166
|
return createPortal(
|
|
1041
|
-
/* @__PURE__ */
|
|
1167
|
+
/* @__PURE__ */ jsx14("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs13(
|
|
1042
1168
|
"div",
|
|
1043
1169
|
{
|
|
1044
1170
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
1045
1171
|
onClick: (e) => e.stopPropagation(),
|
|
1046
1172
|
children: [
|
|
1047
|
-
/* @__PURE__ */
|
|
1173
|
+
/* @__PURE__ */ jsxs13(
|
|
1048
1174
|
"div",
|
|
1049
1175
|
{
|
|
1050
1176
|
className: cn(
|
|
@@ -1053,12 +1179,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1053
1179
|
scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
|
|
1054
1180
|
),
|
|
1055
1181
|
children: [
|
|
1056
|
-
/* @__PURE__ */
|
|
1057
|
-
!noClose && /* @__PURE__ */
|
|
1182
|
+
/* @__PURE__ */ jsx14("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
1183
|
+
!noClose && /* @__PURE__ */ jsx14("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx14(CloseIcon, {}) })
|
|
1058
1184
|
]
|
|
1059
1185
|
}
|
|
1060
1186
|
),
|
|
1061
|
-
/* @__PURE__ */
|
|
1187
|
+
/* @__PURE__ */ jsx14(
|
|
1062
1188
|
"div",
|
|
1063
1189
|
{
|
|
1064
1190
|
"aria-busy": loading || void 0,
|
|
@@ -1069,10 +1195,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1069
1195
|
scrollable && "fractal-modal-body--scrollable"
|
|
1070
1196
|
),
|
|
1071
1197
|
onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
|
|
1072
|
-
children: loading ? /* @__PURE__ */
|
|
1198
|
+
children: loading ? /* @__PURE__ */ jsx14(UILoader, { label: loadingLabel }) : children
|
|
1073
1199
|
}
|
|
1074
1200
|
),
|
|
1075
|
-
footer && /* @__PURE__ */
|
|
1201
|
+
footer && /* @__PURE__ */ jsx14("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
1076
1202
|
]
|
|
1077
1203
|
}
|
|
1078
1204
|
) }),
|
|
@@ -1081,17 +1207,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1081
1207
|
}
|
|
1082
1208
|
|
|
1083
1209
|
// src/components/DataTable/DataTable.tsx
|
|
1084
|
-
import { jsx as
|
|
1210
|
+
import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1085
1211
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
|
|
1086
|
-
return /* @__PURE__ */
|
|
1087
|
-
header && /* @__PURE__ */
|
|
1088
|
-
data.length === 0 ? /* @__PURE__ */
|
|
1089
|
-
/* @__PURE__ */
|
|
1090
|
-
/* @__PURE__ */
|
|
1212
|
+
return /* @__PURE__ */ jsx15("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs14("div", { className: "fractal-datatable-surface", children: [
|
|
1213
|
+
header && /* @__PURE__ */ jsx15("div", { className: "fractal-datatable-header", children: header }),
|
|
1214
|
+
data.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs14("table", { className: "fractal-datatable-table", children: [
|
|
1215
|
+
/* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx15("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
|
|
1216
|
+
/* @__PURE__ */ jsx15("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx15(
|
|
1091
1217
|
"tr",
|
|
1092
1218
|
{
|
|
1093
1219
|
className: "fractal-datatable-row",
|
|
1094
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
1220
|
+
children: columns.map((col) => /* @__PURE__ */ jsx15("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
|
|
1095
1221
|
},
|
|
1096
1222
|
rowIndex
|
|
1097
1223
|
)) })
|
|
@@ -1102,7 +1228,7 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
|
|
|
1102
1228
|
// src/components/Dropdown/Dropdown.tsx
|
|
1103
1229
|
import * as React11 from "react";
|
|
1104
1230
|
import { ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
|
|
1105
|
-
import { Fragment as Fragment2, jsx as
|
|
1231
|
+
import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1106
1232
|
var MARGIN = 4;
|
|
1107
1233
|
function Dropdown({
|
|
1108
1234
|
items,
|
|
@@ -1198,8 +1324,8 @@ function Dropdown({
|
|
|
1198
1324
|
document.addEventListener("mousedown", handleClickOutside);
|
|
1199
1325
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1200
1326
|
}, [open]);
|
|
1201
|
-
return /* @__PURE__ */
|
|
1202
|
-
/* @__PURE__ */
|
|
1327
|
+
return /* @__PURE__ */ jsxs15("div", { className: cn("fractal-dropdown", className), children: [
|
|
1328
|
+
/* @__PURE__ */ jsxs15(
|
|
1203
1329
|
"button",
|
|
1204
1330
|
{
|
|
1205
1331
|
ref: triggerRef,
|
|
@@ -1218,15 +1344,15 @@ function Dropdown({
|
|
|
1218
1344
|
triggerClassName
|
|
1219
1345
|
),
|
|
1220
1346
|
children: [
|
|
1221
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */
|
|
1222
|
-
selected.icon != null && /* @__PURE__ */
|
|
1223
|
-
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */
|
|
1347
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs15(Fragment2, { children: [
|
|
1348
|
+
selected.icon != null && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
|
|
1349
|
+
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-selected-text", children: selected.description })
|
|
1224
1350
|
] }),
|
|
1225
|
-
!noChevron && !iconOnly && /* @__PURE__ */
|
|
1351
|
+
!noChevron && !iconOnly && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx16(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
1226
1352
|
]
|
|
1227
1353
|
}
|
|
1228
1354
|
),
|
|
1229
|
-
open && /* @__PURE__ */
|
|
1355
|
+
open && /* @__PURE__ */ jsxs15(
|
|
1230
1356
|
"div",
|
|
1231
1357
|
{
|
|
1232
1358
|
ref: panelRef,
|
|
@@ -1235,21 +1361,21 @@ function Dropdown({
|
|
|
1235
1361
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
1236
1362
|
style: panelStyle,
|
|
1237
1363
|
children: [
|
|
1238
|
-
label != null && /* @__PURE__ */
|
|
1364
|
+
label != null && /* @__PURE__ */ jsx16("div", { className: "fractal-dropdown-label", children: label }),
|
|
1239
1365
|
visibleItems.map((item, index) => {
|
|
1240
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */
|
|
1241
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */
|
|
1366
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ jsx16("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1367
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx16("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1242
1368
|
if (item.kind === "header") {
|
|
1243
|
-
return /* @__PURE__ */
|
|
1369
|
+
return /* @__PURE__ */ jsxs15(React11.Fragment, { children: [
|
|
1244
1370
|
topDivider,
|
|
1245
|
-
/* @__PURE__ */
|
|
1371
|
+
/* @__PURE__ */ jsx16("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
1246
1372
|
bottomDivider
|
|
1247
1373
|
] }, `header-${index}`);
|
|
1248
1374
|
}
|
|
1249
1375
|
const isSelected = item.value === selectedValue;
|
|
1250
|
-
return /* @__PURE__ */
|
|
1376
|
+
return /* @__PURE__ */ jsxs15(React11.Fragment, { children: [
|
|
1251
1377
|
topDivider,
|
|
1252
|
-
/* @__PURE__ */
|
|
1378
|
+
/* @__PURE__ */ jsxs15(
|
|
1253
1379
|
"button",
|
|
1254
1380
|
{
|
|
1255
1381
|
type: "button",
|
|
@@ -1261,9 +1387,9 @@ function Dropdown({
|
|
|
1261
1387
|
},
|
|
1262
1388
|
className: "fractal-dropdown-option",
|
|
1263
1389
|
children: [
|
|
1264
|
-
item.icon != null && /* @__PURE__ */
|
|
1265
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */
|
|
1266
|
-
item.trailing != null && /* @__PURE__ */
|
|
1390
|
+
item.icon != null && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
1391
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
1392
|
+
item.trailing != null && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
1267
1393
|
]
|
|
1268
1394
|
}
|
|
1269
1395
|
),
|
|
@@ -1278,9 +1404,9 @@ function Dropdown({
|
|
|
1278
1404
|
|
|
1279
1405
|
// src/components/Link/Link.tsx
|
|
1280
1406
|
import * as React12 from "react";
|
|
1281
|
-
import { jsx as
|
|
1407
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
1282
1408
|
var Link = React12.forwardRef(
|
|
1283
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */
|
|
1409
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx17(
|
|
1284
1410
|
"a",
|
|
1285
1411
|
{
|
|
1286
1412
|
ref,
|
|
@@ -1293,9 +1419,9 @@ Link.displayName = "Link";
|
|
|
1293
1419
|
|
|
1294
1420
|
// src/components/Chip/Chip.tsx
|
|
1295
1421
|
import * as React13 from "react";
|
|
1296
|
-
import { jsx as
|
|
1422
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1297
1423
|
var Chip = React13.forwardRef(
|
|
1298
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */
|
|
1424
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx18(
|
|
1299
1425
|
"span",
|
|
1300
1426
|
{
|
|
1301
1427
|
ref,
|
|
@@ -1308,7 +1434,7 @@ Chip.displayName = "Chip";
|
|
|
1308
1434
|
|
|
1309
1435
|
// src/components/Checkbox/Checkbox.tsx
|
|
1310
1436
|
import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
|
|
1311
|
-
import { jsx as
|
|
1437
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1312
1438
|
function Checkbox({
|
|
1313
1439
|
checked,
|
|
1314
1440
|
indeterminate = false,
|
|
@@ -1319,7 +1445,7 @@ function Checkbox({
|
|
|
1319
1445
|
onKeyDown,
|
|
1320
1446
|
...props
|
|
1321
1447
|
}) {
|
|
1322
|
-
return /* @__PURE__ */
|
|
1448
|
+
return /* @__PURE__ */ jsx19(
|
|
1323
1449
|
"button",
|
|
1324
1450
|
{
|
|
1325
1451
|
...props,
|
|
@@ -1341,10 +1467,10 @@ function Checkbox({
|
|
|
1341
1467
|
onKeyDown?.(event);
|
|
1342
1468
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1343
1469
|
},
|
|
1344
|
-
children: indeterminate ? /* @__PURE__ */
|
|
1345
|
-
/* @__PURE__ */
|
|
1346
|
-
/* @__PURE__ */
|
|
1347
|
-
] }) : checked ? /* @__PURE__ */
|
|
1470
|
+
children: indeterminate ? /* @__PURE__ */ jsxs16("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
1471
|
+
/* @__PURE__ */ jsx19(CheckboxIcon, { size: 18 }),
|
|
1472
|
+
/* @__PURE__ */ jsx19(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
1473
|
+
] }) : checked ? /* @__PURE__ */ jsx19(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx19(CheckboxIcon, { "aria-hidden": "true", size: 18 })
|
|
1348
1474
|
}
|
|
1349
1475
|
);
|
|
1350
1476
|
}
|
|
@@ -1352,7 +1478,7 @@ function Checkbox({
|
|
|
1352
1478
|
// src/components/SortableTable/SortableTable.tsx
|
|
1353
1479
|
import { useMemo as useMemo2, useState as useState6 } from "react";
|
|
1354
1480
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
1355
|
-
import { jsx as
|
|
1481
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1356
1482
|
function SortableTable({
|
|
1357
1483
|
columns,
|
|
1358
1484
|
data,
|
|
@@ -1447,16 +1573,16 @@ function SortableTable({
|
|
|
1447
1573
|
onSortChange?.(nextKey, nextDirection);
|
|
1448
1574
|
}
|
|
1449
1575
|
};
|
|
1450
|
-
return /* @__PURE__ */
|
|
1451
|
-
header && /* @__PURE__ */
|
|
1452
|
-
visibleRows.length === 0 ? /* @__PURE__ */
|
|
1453
|
-
/* @__PURE__ */
|
|
1454
|
-
selection && /* @__PURE__ */
|
|
1576
|
+
return /* @__PURE__ */ jsx20("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs17("div", { className: "fractal-sortable-table-surface", children: [
|
|
1577
|
+
header && /* @__PURE__ */ jsx20("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1578
|
+
visibleRows.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs17("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1579
|
+
/* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs17("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1580
|
+
selection && /* @__PURE__ */ jsx20(
|
|
1455
1581
|
"th",
|
|
1456
1582
|
{
|
|
1457
1583
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1458
1584
|
scope: "col",
|
|
1459
|
-
children: /* @__PURE__ */
|
|
1585
|
+
children: /* @__PURE__ */ jsx20(
|
|
1460
1586
|
Checkbox,
|
|
1461
1587
|
{
|
|
1462
1588
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -1482,7 +1608,7 @@ function SortableTable({
|
|
|
1482
1608
|
columns.map((col) => {
|
|
1483
1609
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1484
1610
|
if (!col.sortable) {
|
|
1485
|
-
return /* @__PURE__ */
|
|
1611
|
+
return /* @__PURE__ */ jsx20(
|
|
1486
1612
|
"th",
|
|
1487
1613
|
{
|
|
1488
1614
|
className: "fractal-sortable-table-th",
|
|
@@ -1493,13 +1619,13 @@ function SortableTable({
|
|
|
1493
1619
|
col.key
|
|
1494
1620
|
);
|
|
1495
1621
|
}
|
|
1496
|
-
return /* @__PURE__ */
|
|
1622
|
+
return /* @__PURE__ */ jsx20(
|
|
1497
1623
|
"th",
|
|
1498
1624
|
{
|
|
1499
1625
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1500
1626
|
scope: "col",
|
|
1501
1627
|
style: { width: col.width },
|
|
1502
|
-
children: /* @__PURE__ */
|
|
1628
|
+
children: /* @__PURE__ */ jsxs17(
|
|
1503
1629
|
"button",
|
|
1504
1630
|
{
|
|
1505
1631
|
type: "button",
|
|
@@ -1510,8 +1636,8 @@ function SortableTable({
|
|
|
1510
1636
|
onClick: () => handleSortClick(col.key),
|
|
1511
1637
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1512
1638
|
children: [
|
|
1513
|
-
/* @__PURE__ */
|
|
1514
|
-
/* @__PURE__ */
|
|
1639
|
+
/* @__PURE__ */ jsx20("span", { children: col.header }),
|
|
1640
|
+
/* @__PURE__ */ jsx20("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx20(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx20(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx20(ArrowsUpDown, { size: 14 }) })
|
|
1515
1641
|
]
|
|
1516
1642
|
}
|
|
1517
1643
|
)
|
|
@@ -1520,7 +1646,7 @@ function SortableTable({
|
|
|
1520
1646
|
);
|
|
1521
1647
|
})
|
|
1522
1648
|
] }) }),
|
|
1523
|
-
/* @__PURE__ */
|
|
1649
|
+
/* @__PURE__ */ jsx20("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1524
1650
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1525
1651
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
1526
1652
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -1529,7 +1655,7 @@ function SortableTable({
|
|
|
1529
1655
|
label: rowAction.label(row, rowIndex),
|
|
1530
1656
|
icon: rowAction.icon(row, rowIndex)
|
|
1531
1657
|
} : null;
|
|
1532
|
-
return /* @__PURE__ */
|
|
1658
|
+
return /* @__PURE__ */ jsxs17(
|
|
1533
1659
|
"tr",
|
|
1534
1660
|
{
|
|
1535
1661
|
className: cn(
|
|
@@ -1553,7 +1679,7 @@ function SortableTable({
|
|
|
1553
1679
|
role: interactive ? "button" : void 0,
|
|
1554
1680
|
tabIndex: interactive ? 0 : void 0,
|
|
1555
1681
|
children: [
|
|
1556
|
-
selection && /* @__PURE__ */
|
|
1682
|
+
selection && /* @__PURE__ */ jsx20("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx20(
|
|
1557
1683
|
Checkbox,
|
|
1558
1684
|
{
|
|
1559
1685
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -1565,7 +1691,7 @@ function SortableTable({
|
|
|
1565
1691
|
}
|
|
1566
1692
|
}
|
|
1567
1693
|
) }),
|
|
1568
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1694
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsxs17(
|
|
1569
1695
|
"td",
|
|
1570
1696
|
{
|
|
1571
1697
|
className: cn(
|
|
@@ -1575,7 +1701,7 @@ function SortableTable({
|
|
|
1575
1701
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1576
1702
|
children: [
|
|
1577
1703
|
col.render(row, rowIndex),
|
|
1578
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
1704
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx20("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1579
1705
|
]
|
|
1580
1706
|
},
|
|
1581
1707
|
col.key
|
|
@@ -1591,7 +1717,7 @@ function SortableTable({
|
|
|
1591
1717
|
|
|
1592
1718
|
// src/components/Tabs/Tabs.tsx
|
|
1593
1719
|
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState7 } from "react";
|
|
1594
|
-
import { jsx as
|
|
1720
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1595
1721
|
function Tabs({
|
|
1596
1722
|
items,
|
|
1597
1723
|
defaultValue,
|
|
@@ -1662,8 +1788,8 @@ function Tabs({
|
|
|
1662
1788
|
selectTab(nextId2);
|
|
1663
1789
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1664
1790
|
};
|
|
1665
|
-
return /* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1791
|
+
return /* @__PURE__ */ jsxs18("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1792
|
+
/* @__PURE__ */ jsx21(
|
|
1667
1793
|
"div",
|
|
1668
1794
|
{
|
|
1669
1795
|
ref: tabListRef,
|
|
@@ -1676,7 +1802,7 @@ function Tabs({
|
|
|
1676
1802
|
const isActive = item.id === activeId;
|
|
1677
1803
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1678
1804
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1679
|
-
return /* @__PURE__ */
|
|
1805
|
+
return /* @__PURE__ */ jsx21(
|
|
1680
1806
|
"button",
|
|
1681
1807
|
{
|
|
1682
1808
|
ref: (el) => {
|
|
@@ -1707,7 +1833,7 @@ function Tabs({
|
|
|
1707
1833
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1708
1834
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1709
1835
|
const isActive = item.id === activeId;
|
|
1710
|
-
return /* @__PURE__ */
|
|
1836
|
+
return /* @__PURE__ */ jsx21(
|
|
1711
1837
|
"div",
|
|
1712
1838
|
{
|
|
1713
1839
|
id: panelId,
|
|
@@ -1725,7 +1851,7 @@ function Tabs({
|
|
|
1725
1851
|
|
|
1726
1852
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1727
1853
|
import * as React14 from "react";
|
|
1728
|
-
import { jsx as
|
|
1854
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1729
1855
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1730
1856
|
const switcherRef = React14.useRef(null);
|
|
1731
1857
|
const buttonRefs = React14.useRef([]);
|
|
@@ -1783,7 +1909,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1783
1909
|
onValueChange(items[nextIndex].value);
|
|
1784
1910
|
}
|
|
1785
1911
|
};
|
|
1786
|
-
return /* @__PURE__ */
|
|
1912
|
+
return /* @__PURE__ */ jsxs19(
|
|
1787
1913
|
"div",
|
|
1788
1914
|
{
|
|
1789
1915
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1791,10 +1917,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1791
1917
|
"aria-label": ariaLabel,
|
|
1792
1918
|
ref: switcherRef,
|
|
1793
1919
|
children: [
|
|
1794
|
-
/* @__PURE__ */
|
|
1920
|
+
/* @__PURE__ */ jsx22("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1795
1921
|
items.map((item, index) => {
|
|
1796
1922
|
const active = item.value === value;
|
|
1797
|
-
return /* @__PURE__ */
|
|
1923
|
+
return /* @__PURE__ */ jsx22(
|
|
1798
1924
|
"button",
|
|
1799
1925
|
{
|
|
1800
1926
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1828,7 +1954,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1828
1954
|
// src/components/Disclosure/Disclosure.tsx
|
|
1829
1955
|
import { useId as useId3, useState as useState8 } from "react";
|
|
1830
1956
|
import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
1831
|
-
import { jsx as
|
|
1957
|
+
import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1832
1958
|
function Disclosure({
|
|
1833
1959
|
title,
|
|
1834
1960
|
meta,
|
|
@@ -1856,7 +1982,7 @@ function Disclosure({
|
|
|
1856
1982
|
onOpenChange?.(next);
|
|
1857
1983
|
}
|
|
1858
1984
|
};
|
|
1859
|
-
return /* @__PURE__ */
|
|
1985
|
+
return /* @__PURE__ */ jsxs20(
|
|
1860
1986
|
"div",
|
|
1861
1987
|
{
|
|
1862
1988
|
className: cn(
|
|
@@ -1867,7 +1993,7 @@ function Disclosure({
|
|
|
1867
1993
|
className
|
|
1868
1994
|
),
|
|
1869
1995
|
children: [
|
|
1870
|
-
/* @__PURE__ */
|
|
1996
|
+
/* @__PURE__ */ jsxs20(
|
|
1871
1997
|
"button",
|
|
1872
1998
|
{
|
|
1873
1999
|
type: "button",
|
|
@@ -1878,13 +2004,13 @@ function Disclosure({
|
|
|
1878
2004
|
disabled,
|
|
1879
2005
|
onClick: toggle,
|
|
1880
2006
|
children: [
|
|
1881
|
-
/* @__PURE__ */
|
|
1882
|
-
/* @__PURE__ */
|
|
1883
|
-
meta && /* @__PURE__ */
|
|
2007
|
+
/* @__PURE__ */ jsx23("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx23(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx23(ChevronRight3, { size: 16 }) }),
|
|
2008
|
+
/* @__PURE__ */ jsx23("span", { className: "fractal-disclosure-title", children: title }),
|
|
2009
|
+
meta && /* @__PURE__ */ jsx23("span", { className: "fractal-disclosure-meta", children: meta })
|
|
1884
2010
|
]
|
|
1885
2011
|
}
|
|
1886
2012
|
),
|
|
1887
|
-
/* @__PURE__ */
|
|
2013
|
+
/* @__PURE__ */ jsx23(
|
|
1888
2014
|
"div",
|
|
1889
2015
|
{
|
|
1890
2016
|
id: panelId,
|
|
@@ -1892,7 +2018,7 @@ function Disclosure({
|
|
|
1892
2018
|
"aria-labelledby": headerId,
|
|
1893
2019
|
className: "fractal-disclosure-panel",
|
|
1894
2020
|
hidden: !isOpen,
|
|
1895
|
-
children: /* @__PURE__ */
|
|
2021
|
+
children: /* @__PURE__ */ jsx23("div", { className: "fractal-disclosure-panel-inner", children })
|
|
1896
2022
|
}
|
|
1897
2023
|
)
|
|
1898
2024
|
]
|
|
@@ -1901,18 +2027,18 @@ function Disclosure({
|
|
|
1901
2027
|
}
|
|
1902
2028
|
|
|
1903
2029
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
1904
|
-
import { jsx as
|
|
2030
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1905
2031
|
var LATTICE_COUNT = 160;
|
|
1906
2032
|
var WAVE_PERIOD = 80;
|
|
1907
2033
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
1908
|
-
return /* @__PURE__ */
|
|
2034
|
+
return /* @__PURE__ */ jsx24(
|
|
1909
2035
|
"span",
|
|
1910
2036
|
{
|
|
1911
2037
|
"aria-label": label,
|
|
1912
2038
|
className: cn("fractal-lattice-loader", className),
|
|
1913
2039
|
role: "progressbar",
|
|
1914
2040
|
...props,
|
|
1915
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
2041
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx24(
|
|
1916
2042
|
"span",
|
|
1917
2043
|
{
|
|
1918
2044
|
"aria-hidden": "true",
|
|
@@ -1926,10 +2052,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
1926
2052
|
}
|
|
1927
2053
|
|
|
1928
2054
|
// src/components/Ghost/Ghost.tsx
|
|
1929
|
-
import { jsx as
|
|
2055
|
+
import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1930
2056
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1931
2057
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
1932
|
-
return /* @__PURE__ */
|
|
2058
|
+
return /* @__PURE__ */ jsx25(
|
|
1933
2059
|
"div",
|
|
1934
2060
|
{
|
|
1935
2061
|
"aria-hidden": "true",
|
|
@@ -1945,15 +2071,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
1945
2071
|
);
|
|
1946
2072
|
}
|
|
1947
2073
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
1948
|
-
return /* @__PURE__ */
|
|
2074
|
+
return /* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
1949
2075
|
}
|
|
1950
2076
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
1951
|
-
return /* @__PURE__ */
|
|
2077
|
+
return /* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
1952
2078
|
}
|
|
1953
2079
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
1954
|
-
return /* @__PURE__ */
|
|
1955
|
-
showHeader && /* @__PURE__ */
|
|
1956
|
-
/* @__PURE__ */
|
|
2080
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2081
|
+
showHeader && /* @__PURE__ */ jsx25(GhostLine, { width: "38%" }),
|
|
2082
|
+
/* @__PURE__ */ jsx25("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx25(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
1957
2083
|
] });
|
|
1958
2084
|
}
|
|
1959
2085
|
function DataTableGhost({
|
|
@@ -1967,81 +2093,81 @@ function DataTableGhost({
|
|
|
1967
2093
|
...props
|
|
1968
2094
|
}) {
|
|
1969
2095
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
1970
|
-
return /* @__PURE__ */
|
|
1971
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
1972
|
-
/* @__PURE__ */
|
|
2096
|
+
return /* @__PURE__ */ jsx25("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs21("table", { className: "fractal-ghost-table__table", children: [
|
|
2097
|
+
(showHeader || headers) && /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsx25("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx25("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx25(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2098
|
+
/* @__PURE__ */ jsx25("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx25("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx25("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx25(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
1973
2099
|
] }) });
|
|
1974
2100
|
}
|
|
1975
2101
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
1976
|
-
return /* @__PURE__ */
|
|
2102
|
+
return /* @__PURE__ */ jsx25(FormFieldGhost, { className, labelWidth, ...props });
|
|
1977
2103
|
}
|
|
1978
2104
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
1979
|
-
return /* @__PURE__ */
|
|
2105
|
+
return /* @__PURE__ */ jsx25(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
1980
2106
|
}
|
|
1981
2107
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
1982
|
-
return /* @__PURE__ */
|
|
2108
|
+
return /* @__PURE__ */ jsx25(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
1983
2109
|
}
|
|
1984
2110
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
1985
|
-
return /* @__PURE__ */
|
|
1986
|
-
/* @__PURE__ */
|
|
1987
|
-
/* @__PURE__ */
|
|
2111
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2112
|
+
/* @__PURE__ */ jsx25(LabelGhost, { width: labelWidth }),
|
|
2113
|
+
/* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
1988
2114
|
] });
|
|
1989
2115
|
}
|
|
1990
2116
|
function AlertGhost({ className, ...props }) {
|
|
1991
|
-
return /* @__PURE__ */
|
|
1992
|
-
/* @__PURE__ */
|
|
1993
|
-
/* @__PURE__ */
|
|
2117
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2118
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "30%" }),
|
|
2119
|
+
/* @__PURE__ */ jsx25(GhostLine, { size: "sm", width: "78%" })
|
|
1994
2120
|
] });
|
|
1995
2121
|
}
|
|
1996
2122
|
function CheckboxGhost({ className, ...props }) {
|
|
1997
|
-
return /* @__PURE__ */
|
|
1998
|
-
/* @__PURE__ */
|
|
1999
|
-
/* @__PURE__ */
|
|
2123
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2124
|
+
/* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2125
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "42%" })
|
|
2000
2126
|
] });
|
|
2001
2127
|
}
|
|
2002
2128
|
var ToggleGhost = CheckboxGhost;
|
|
2003
2129
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2004
|
-
return /* @__PURE__ */
|
|
2130
|
+
return /* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2005
2131
|
}
|
|
2006
2132
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2007
|
-
return /* @__PURE__ */
|
|
2133
|
+
return /* @__PURE__ */ jsx25(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2008
2134
|
}
|
|
2009
2135
|
var TextButtonGhost = LinkGhost;
|
|
2010
2136
|
function DropdownGhost({ className, ...props }) {
|
|
2011
|
-
return /* @__PURE__ */
|
|
2012
|
-
/* @__PURE__ */
|
|
2013
|
-
/* @__PURE__ */
|
|
2137
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2138
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "38%" }),
|
|
2139
|
+
/* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2014
2140
|
] });
|
|
2015
2141
|
}
|
|
2016
2142
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2017
|
-
return /* @__PURE__ */
|
|
2143
|
+
return /* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx25(Ghost, {}, index)) });
|
|
2018
2144
|
}
|
|
2019
2145
|
var TabsGhost = ContentSwitcherGhost;
|
|
2020
2146
|
function DisclosureGhost({ className, ...props }) {
|
|
2021
|
-
return /* @__PURE__ */
|
|
2022
|
-
/* @__PURE__ */
|
|
2023
|
-
/* @__PURE__ */
|
|
2147
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2148
|
+
/* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2149
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "42%" })
|
|
2024
2150
|
] });
|
|
2025
2151
|
}
|
|
2026
2152
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2027
|
-
return /* @__PURE__ */
|
|
2153
|
+
return /* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx25(Ghost, {}, index)) });
|
|
2028
2154
|
}
|
|
2029
2155
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2030
|
-
return /* @__PURE__ */
|
|
2031
|
-
/* @__PURE__ */
|
|
2032
|
-
/* @__PURE__ */
|
|
2033
|
-
/* @__PURE__ */
|
|
2156
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2157
|
+
/* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2158
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "26%" }),
|
|
2159
|
+
/* @__PURE__ */ jsx25(GhostLine, { size: "sm", width: "46%" })
|
|
2034
2160
|
] });
|
|
2035
2161
|
}
|
|
2036
2162
|
function PromptCardGhost({ className, ...props }) {
|
|
2037
|
-
return /* @__PURE__ */
|
|
2163
|
+
return /* @__PURE__ */ jsx25(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2038
2164
|
}
|
|
2039
2165
|
function ConversationGhost({
|
|
2040
2166
|
className,
|
|
2041
2167
|
"aria-label": ariaLabel = "Loading conversation",
|
|
2042
2168
|
...props
|
|
2043
2169
|
}) {
|
|
2044
|
-
return /* @__PURE__ */
|
|
2170
|
+
return /* @__PURE__ */ jsxs21(
|
|
2045
2171
|
"div",
|
|
2046
2172
|
{
|
|
2047
2173
|
"aria-busy": "true",
|
|
@@ -2050,54 +2176,54 @@ function ConversationGhost({
|
|
|
2050
2176
|
role: "status",
|
|
2051
2177
|
...props,
|
|
2052
2178
|
children: [
|
|
2053
|
-
/* @__PURE__ */
|
|
2054
|
-
/* @__PURE__ */
|
|
2055
|
-
/* @__PURE__ */
|
|
2056
|
-
/* @__PURE__ */
|
|
2179
|
+
/* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs21("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2180
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "100%" }),
|
|
2181
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "86%" }),
|
|
2182
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "64%" })
|
|
2057
2183
|
] }) }),
|
|
2058
|
-
/* @__PURE__ */
|
|
2059
|
-
/* @__PURE__ */
|
|
2060
|
-
/* @__PURE__ */
|
|
2061
|
-
/* @__PURE__ */
|
|
2184
|
+
/* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2185
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "92%" }),
|
|
2186
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "78%" }),
|
|
2187
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "58%" })
|
|
2062
2188
|
] })
|
|
2063
2189
|
]
|
|
2064
2190
|
}
|
|
2065
2191
|
);
|
|
2066
2192
|
}
|
|
2067
2193
|
function SortableTableGhost(props) {
|
|
2068
|
-
return /* @__PURE__ */
|
|
2194
|
+
return /* @__PURE__ */ jsx25(DataTableGhost, { ...props });
|
|
2069
2195
|
}
|
|
2070
2196
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2071
|
-
return /* @__PURE__ */
|
|
2072
|
-
/* @__PURE__ */
|
|
2073
|
-
/* @__PURE__ */
|
|
2074
|
-
/* @__PURE__ */
|
|
2075
|
-
/* @__PURE__ */
|
|
2197
|
+
return /* @__PURE__ */ jsxs21("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2198
|
+
/* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2199
|
+
/* @__PURE__ */ jsx25("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs21("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2200
|
+
/* @__PURE__ */ jsx25(Ghost, {}),
|
|
2201
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2076
2202
|
] }, index)) })
|
|
2077
2203
|
] });
|
|
2078
2204
|
}
|
|
2079
2205
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2080
|
-
return /* @__PURE__ */
|
|
2206
|
+
return /* @__PURE__ */ jsx25(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2081
2207
|
}
|
|
2082
2208
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2083
|
-
return /* @__PURE__ */
|
|
2209
|
+
return /* @__PURE__ */ jsx25(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2084
2210
|
}
|
|
2085
2211
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2086
|
-
return /* @__PURE__ */
|
|
2087
|
-
/* @__PURE__ */
|
|
2088
|
-
/* @__PURE__ */
|
|
2089
|
-
/* @__PURE__ */
|
|
2212
|
+
return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2213
|
+
/* @__PURE__ */ jsxs21("div", { className: "fractal-ghost-surface__header", children: [
|
|
2214
|
+
/* @__PURE__ */ jsx25(GhostLine, { width: "42%" }),
|
|
2215
|
+
/* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2090
2216
|
] }),
|
|
2091
|
-
title && /* @__PURE__ */
|
|
2092
|
-
/* @__PURE__ */
|
|
2217
|
+
title && /* @__PURE__ */ jsx25("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2218
|
+
/* @__PURE__ */ jsx25("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx25(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2093
2219
|
] });
|
|
2094
2220
|
}
|
|
2095
2221
|
|
|
2096
2222
|
// src/components/Sidebar/Sidebar.tsx
|
|
2097
2223
|
import * as React15 from "react";
|
|
2098
|
-
import { Fragment as Fragment3, jsx as
|
|
2224
|
+
import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2099
2225
|
var Sidebar = React15.forwardRef(
|
|
2100
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
2226
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx26(
|
|
2101
2227
|
"aside",
|
|
2102
2228
|
{
|
|
2103
2229
|
ref,
|
|
@@ -2110,11 +2236,11 @@ var Sidebar = React15.forwardRef(
|
|
|
2110
2236
|
);
|
|
2111
2237
|
Sidebar.displayName = "Sidebar";
|
|
2112
2238
|
var SidebarHeader = React15.forwardRef(
|
|
2113
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2239
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2114
2240
|
);
|
|
2115
2241
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2116
2242
|
var SidebarBrand = React15.forwardRef(
|
|
2117
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
2243
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx26("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2118
2244
|
);
|
|
2119
2245
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2120
2246
|
function SidebarAccountMenu({
|
|
@@ -2125,7 +2251,7 @@ function SidebarAccountMenu({
|
|
|
2125
2251
|
icon,
|
|
2126
2252
|
className
|
|
2127
2253
|
}) {
|
|
2128
|
-
return /* @__PURE__ */
|
|
2254
|
+
return /* @__PURE__ */ jsx26(
|
|
2129
2255
|
Dropdown,
|
|
2130
2256
|
{
|
|
2131
2257
|
align: "left",
|
|
@@ -2135,9 +2261,9 @@ function SidebarAccountMenu({
|
|
|
2135
2261
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2136
2262
|
selectedValue: "",
|
|
2137
2263
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2138
|
-
triggerContent: /* @__PURE__ */
|
|
2139
|
-
icon && /* @__PURE__ */
|
|
2140
|
-
/* @__PURE__ */
|
|
2264
|
+
triggerContent: /* @__PURE__ */ jsxs22(Fragment3, { children: [
|
|
2265
|
+
icon && /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2266
|
+
/* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2141
2267
|
] }),
|
|
2142
2268
|
triggerLabel,
|
|
2143
2269
|
triggerVariant: "tertiary"
|
|
@@ -2145,15 +2271,15 @@ function SidebarAccountMenu({
|
|
|
2145
2271
|
);
|
|
2146
2272
|
}
|
|
2147
2273
|
var SidebarNav = React15.forwardRef(
|
|
2148
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2274
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx26("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2149
2275
|
);
|
|
2150
2276
|
SidebarNav.displayName = "SidebarNav";
|
|
2151
2277
|
var SidebarSection = React15.forwardRef(
|
|
2152
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2278
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2153
2279
|
);
|
|
2154
2280
|
SidebarSection.displayName = "SidebarSection";
|
|
2155
2281
|
var SidebarNavItem = React15.forwardRef(
|
|
2156
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */
|
|
2282
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs22(
|
|
2157
2283
|
"button",
|
|
2158
2284
|
{
|
|
2159
2285
|
ref,
|
|
@@ -2163,28 +2289,28 @@ var SidebarNavItem = React15.forwardRef(
|
|
|
2163
2289
|
"aria-current": active ? "page" : void 0,
|
|
2164
2290
|
...props,
|
|
2165
2291
|
children: [
|
|
2166
|
-
icon && /* @__PURE__ */
|
|
2167
|
-
/* @__PURE__ */
|
|
2168
|
-
endAdornment && /* @__PURE__ */
|
|
2292
|
+
icon && /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2293
|
+
/* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2294
|
+
endAdornment && /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2169
2295
|
]
|
|
2170
2296
|
}
|
|
2171
2297
|
)
|
|
2172
2298
|
);
|
|
2173
2299
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2174
2300
|
var SidebarFooter = React15.forwardRef(
|
|
2175
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2301
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2176
2302
|
);
|
|
2177
2303
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2178
2304
|
|
|
2179
2305
|
// src/components/SidePanel/SidePanel.tsx
|
|
2180
2306
|
import { createPortal as createPortal2 } from "react-dom";
|
|
2181
2307
|
import { Close } from "@mirror-physics/fractal-icons";
|
|
2182
|
-
import { jsx as
|
|
2308
|
+
import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2183
2309
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2184
2310
|
useEscapeDismiss(80, onClose, open);
|
|
2185
2311
|
if (!open) return null;
|
|
2186
2312
|
return createPortal2(
|
|
2187
|
-
/* @__PURE__ */
|
|
2313
|
+
/* @__PURE__ */ jsx27("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs23(
|
|
2188
2314
|
"aside",
|
|
2189
2315
|
{
|
|
2190
2316
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2193,15 +2319,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2193
2319
|
role: "dialog",
|
|
2194
2320
|
onMouseDown: (event) => event.stopPropagation(),
|
|
2195
2321
|
children: [
|
|
2196
|
-
/* @__PURE__ */
|
|
2197
|
-
/* @__PURE__ */
|
|
2198
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
2199
|
-
description && /* @__PURE__ */
|
|
2322
|
+
/* @__PURE__ */ jsxs23("header", { className: "fractal-side-panel__header", children: [
|
|
2323
|
+
/* @__PURE__ */ jsxs23("div", { className: "fractal-side-panel__heading", children: [
|
|
2324
|
+
typeof title === "string" ? /* @__PURE__ */ jsx27("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx27("div", { className: "fractal-side-panel__title", children: title }),
|
|
2325
|
+
description && /* @__PURE__ */ jsx27("p", { className: "fractal-side-panel__description", children: description })
|
|
2200
2326
|
] }),
|
|
2201
|
-
/* @__PURE__ */
|
|
2327
|
+
/* @__PURE__ */ jsx27("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx27(Close, { size: 18 }) })
|
|
2202
2328
|
] }),
|
|
2203
|
-
/* @__PURE__ */
|
|
2204
|
-
footer && /* @__PURE__ */
|
|
2329
|
+
/* @__PURE__ */ jsx27("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx27(UILoader, { label: loadingLabel }) : children }),
|
|
2330
|
+
footer && /* @__PURE__ */ jsx27("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
2205
2331
|
]
|
|
2206
2332
|
}
|
|
2207
2333
|
) }),
|
|
@@ -2211,17 +2337,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2211
2337
|
|
|
2212
2338
|
// src/components/Textarea/Textarea.tsx
|
|
2213
2339
|
import * as React16 from "react";
|
|
2214
|
-
import { jsx as
|
|
2340
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
2215
2341
|
var Textarea = React16.forwardRef(
|
|
2216
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2342
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
2217
2343
|
);
|
|
2218
2344
|
Textarea.displayName = "Textarea";
|
|
2219
2345
|
|
|
2220
2346
|
// src/components/TextButton/TextButton.tsx
|
|
2221
2347
|
import * as React17 from "react";
|
|
2222
|
-
import { jsx as
|
|
2348
|
+
import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2223
2349
|
var TextButton = React17.forwardRef(
|
|
2224
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */
|
|
2350
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs24(
|
|
2225
2351
|
"button",
|
|
2226
2352
|
{
|
|
2227
2353
|
ref,
|
|
@@ -2229,9 +2355,9 @@ var TextButton = React17.forwardRef(
|
|
|
2229
2355
|
type: "button",
|
|
2230
2356
|
...props,
|
|
2231
2357
|
children: [
|
|
2232
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
2233
|
-
/* @__PURE__ */
|
|
2234
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
2358
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx29("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2359
|
+
/* @__PURE__ */ jsx29("span", { children }),
|
|
2360
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx29("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2235
2361
|
]
|
|
2236
2362
|
}
|
|
2237
2363
|
)
|
|
@@ -2241,7 +2367,7 @@ TextButton.displayName = "TextButton";
|
|
|
2241
2367
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2242
2368
|
import * as React18 from "react";
|
|
2243
2369
|
import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
2244
|
-
import { jsx as
|
|
2370
|
+
import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2245
2371
|
function FileDropzone({
|
|
2246
2372
|
files,
|
|
2247
2373
|
onFilesChange,
|
|
@@ -2261,8 +2387,8 @@ function FileDropzone({
|
|
|
2261
2387
|
if (additions.length === 0) return;
|
|
2262
2388
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2263
2389
|
};
|
|
2264
|
-
return /* @__PURE__ */
|
|
2265
|
-
/* @__PURE__ */
|
|
2390
|
+
return /* @__PURE__ */ jsxs25("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2391
|
+
/* @__PURE__ */ jsx30(
|
|
2266
2392
|
"input",
|
|
2267
2393
|
{
|
|
2268
2394
|
ref: inputRef,
|
|
@@ -2278,7 +2404,7 @@ function FileDropzone({
|
|
|
2278
2404
|
}
|
|
2279
2405
|
}
|
|
2280
2406
|
),
|
|
2281
|
-
/* @__PURE__ */
|
|
2407
|
+
/* @__PURE__ */ jsxs25(
|
|
2282
2408
|
"button",
|
|
2283
2409
|
{
|
|
2284
2410
|
className: "fractal-file-dropzone__target",
|
|
@@ -2301,18 +2427,18 @@ function FileDropzone({
|
|
|
2301
2427
|
addFiles(event.dataTransfer.files);
|
|
2302
2428
|
},
|
|
2303
2429
|
children: [
|
|
2304
|
-
/* @__PURE__ */
|
|
2305
|
-
/* @__PURE__ */
|
|
2306
|
-
/* @__PURE__ */
|
|
2307
|
-
description && /* @__PURE__ */
|
|
2430
|
+
/* @__PURE__ */ jsx30(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2431
|
+
/* @__PURE__ */ jsxs25("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2432
|
+
/* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2433
|
+
description && /* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2308
2434
|
] })
|
|
2309
2435
|
]
|
|
2310
2436
|
}
|
|
2311
2437
|
),
|
|
2312
|
-
files.length > 0 && /* @__PURE__ */
|
|
2313
|
-
/* @__PURE__ */
|
|
2314
|
-
/* @__PURE__ */
|
|
2315
|
-
/* @__PURE__ */
|
|
2438
|
+
files.length > 0 && /* @__PURE__ */ jsx30("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs25("li", { className: "fractal-file-dropzone__file", children: [
|
|
2439
|
+
/* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2440
|
+
/* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2441
|
+
/* @__PURE__ */ jsx30(
|
|
2316
2442
|
"button",
|
|
2317
2443
|
{
|
|
2318
2444
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2320,7 +2446,7 @@ function FileDropzone({
|
|
|
2320
2446
|
"aria-label": `Remove ${file.name}`,
|
|
2321
2447
|
disabled,
|
|
2322
2448
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2323
|
-
children: /* @__PURE__ */
|
|
2449
|
+
children: /* @__PURE__ */ jsx30(Close2, { "aria-hidden": "true", size: 14 })
|
|
2324
2450
|
}
|
|
2325
2451
|
)
|
|
2326
2452
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2334,7 +2460,7 @@ function formatFileSize(bytes) {
|
|
|
2334
2460
|
|
|
2335
2461
|
// src/components/Pagination/Pagination.tsx
|
|
2336
2462
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
2337
|
-
import { jsx as
|
|
2463
|
+
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2338
2464
|
function Pagination({
|
|
2339
2465
|
page,
|
|
2340
2466
|
pageSize,
|
|
@@ -2350,10 +2476,10 @@ function Pagination({
|
|
|
2350
2476
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
2351
2477
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2352
2478
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2353
|
-
return /* @__PURE__ */
|
|
2354
|
-
/* @__PURE__ */
|
|
2355
|
-
/* @__PURE__ */
|
|
2356
|
-
canChangePageSize && /* @__PURE__ */
|
|
2479
|
+
return /* @__PURE__ */ jsxs26("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2480
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2481
|
+
/* @__PURE__ */ jsxs26("div", { className: "fractal-pagination__controls", children: [
|
|
2482
|
+
canChangePageSize && /* @__PURE__ */ jsx31(
|
|
2357
2483
|
Dropdown,
|
|
2358
2484
|
{
|
|
2359
2485
|
align: "right",
|
|
@@ -2370,7 +2496,7 @@ function Pagination({
|
|
|
2370
2496
|
triggerVariant: "tertiary"
|
|
2371
2497
|
}
|
|
2372
2498
|
),
|
|
2373
|
-
/* @__PURE__ */
|
|
2499
|
+
/* @__PURE__ */ jsx31(
|
|
2374
2500
|
"button",
|
|
2375
2501
|
{
|
|
2376
2502
|
className: "fractal-pagination__button",
|
|
@@ -2379,15 +2505,15 @@ function Pagination({
|
|
|
2379
2505
|
title: "Previous page",
|
|
2380
2506
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2381
2507
|
onClick: () => onPageChange(currentPage - 1),
|
|
2382
|
-
children: /* @__PURE__ */
|
|
2508
|
+
children: /* @__PURE__ */ jsx31(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2383
2509
|
}
|
|
2384
2510
|
),
|
|
2385
|
-
/* @__PURE__ */
|
|
2511
|
+
/* @__PURE__ */ jsxs26("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
2386
2512
|
currentPage,
|
|
2387
2513
|
" of ",
|
|
2388
2514
|
totalPages
|
|
2389
2515
|
] }),
|
|
2390
|
-
/* @__PURE__ */
|
|
2516
|
+
/* @__PURE__ */ jsx31(
|
|
2391
2517
|
"button",
|
|
2392
2518
|
{
|
|
2393
2519
|
className: "fractal-pagination__button",
|
|
@@ -2396,7 +2522,7 @@ function Pagination({
|
|
|
2396
2522
|
title: "Next page",
|
|
2397
2523
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2398
2524
|
onClick: () => onPageChange(currentPage + 1),
|
|
2399
|
-
children: /* @__PURE__ */
|
|
2525
|
+
children: /* @__PURE__ */ jsx31(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2400
2526
|
}
|
|
2401
2527
|
)
|
|
2402
2528
|
] })
|
|
@@ -2464,6 +2590,7 @@ export {
|
|
|
2464
2590
|
SidebarNav,
|
|
2465
2591
|
SidebarNavItem,
|
|
2466
2592
|
SidebarSection,
|
|
2593
|
+
Slider,
|
|
2467
2594
|
SortableTable,
|
|
2468
2595
|
SortableTableGhost,
|
|
2469
2596
|
TableSearch,
|