@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.cjs
CHANGED
|
@@ -765,13 +765,21 @@ PromptGrid.displayName = "PromptGrid";
|
|
|
765
765
|
|
|
766
766
|
// src/components/Input/Input.tsx
|
|
767
767
|
var React4 = __toESM(require("react"), 1);
|
|
768
|
+
|
|
769
|
+
// src/utils/FloatingFieldBorder.tsx
|
|
768
770
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
771
|
+
function FloatingFieldBorder({ label }) {
|
|
772
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { className: "fractal-floating-field__border", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label }) }) });
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
// src/components/Input/Input.tsx
|
|
776
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
769
777
|
var Input = React4.forwardRef(
|
|
770
778
|
({ className, type, controlSize = "lg", fieldLabel, id, placeholder, ...props }, ref) => {
|
|
771
779
|
const generatedId = React4.useId();
|
|
772
780
|
const fieldId = id ?? generatedId;
|
|
773
781
|
const floatingLabel = type === "search" ? void 0 : fieldLabel;
|
|
774
|
-
const input = /* @__PURE__ */ (0,
|
|
782
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
775
783
|
"input",
|
|
776
784
|
{
|
|
777
785
|
type,
|
|
@@ -785,7 +793,7 @@ var Input = React4.forwardRef(
|
|
|
785
793
|
}
|
|
786
794
|
);
|
|
787
795
|
if (!floatingLabel) return input;
|
|
788
|
-
return /* @__PURE__ */ (0,
|
|
796
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
789
797
|
"div",
|
|
790
798
|
{
|
|
791
799
|
className: "fractal-floating-field",
|
|
@@ -793,7 +801,8 @@ var Input = React4.forwardRef(
|
|
|
793
801
|
"data-always-float": ["date", "datetime-local", "time", "month", "week", "color", "file", "range"].includes(type ?? "") || void 0,
|
|
794
802
|
children: [
|
|
795
803
|
input,
|
|
796
|
-
/* @__PURE__ */ (0,
|
|
804
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingFieldBorder, { label: fieldLabel ?? "" }),
|
|
805
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
|
|
797
806
|
]
|
|
798
807
|
}
|
|
799
808
|
);
|
|
@@ -804,7 +813,7 @@ Input.displayName = "Input";
|
|
|
804
813
|
// src/components/TableSearch/TableSearch.tsx
|
|
805
814
|
var React5 = __toESM(require("react"), 1);
|
|
806
815
|
var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
|
|
807
|
-
var
|
|
816
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
808
817
|
var TableSearch = React5.forwardRef(
|
|
809
818
|
({
|
|
810
819
|
searchType = "text",
|
|
@@ -817,15 +826,15 @@ var TableSearch = React5.forwardRef(
|
|
|
817
826
|
}, ref) => {
|
|
818
827
|
const isGlob = searchType === "glob";
|
|
819
828
|
const SearchIcon = isGlob ? import_fractal_icons4.MagnifyingGlassLines : import_fractal_icons4.MagnifyingGlass;
|
|
820
|
-
return /* @__PURE__ */ (0,
|
|
829
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
821
830
|
"div",
|
|
822
831
|
{
|
|
823
832
|
className: cn("fractal-table-search", className),
|
|
824
833
|
"data-search-type": searchType,
|
|
825
834
|
"data-control-size": controlSize,
|
|
826
835
|
children: [
|
|
827
|
-
/* @__PURE__ */ (0,
|
|
828
|
-
/* @__PURE__ */ (0,
|
|
836
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
829
838
|
Input,
|
|
830
839
|
{
|
|
831
840
|
...props,
|
|
@@ -847,7 +856,7 @@ TableSearch.displayName = "TableSearch";
|
|
|
847
856
|
// src/components/NumberInput/NumberInput.tsx
|
|
848
857
|
var React6 = __toESM(require("react"), 1);
|
|
849
858
|
var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
|
|
850
|
-
var
|
|
859
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
851
860
|
function NumberInput({
|
|
852
861
|
unit,
|
|
853
862
|
controlSize = "lg",
|
|
@@ -874,8 +883,8 @@ function NumberInput({
|
|
|
874
883
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
875
884
|
input.focus();
|
|
876
885
|
};
|
|
877
|
-
return /* @__PURE__ */ (0,
|
|
878
|
-
/* @__PURE__ */ (0,
|
|
886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
887
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
879
888
|
Input,
|
|
880
889
|
{
|
|
881
890
|
ref: inputRef,
|
|
@@ -890,7 +899,7 @@ function NumberInput({
|
|
|
890
899
|
...props
|
|
891
900
|
}
|
|
892
901
|
),
|
|
893
|
-
unit && /* @__PURE__ */ (0,
|
|
902
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
894
903
|
"span",
|
|
895
904
|
{
|
|
896
905
|
className: "fractal-number-input-unit",
|
|
@@ -899,8 +908,8 @@ function NumberInput({
|
|
|
899
908
|
children: unit
|
|
900
909
|
}
|
|
901
910
|
),
|
|
902
|
-
/* @__PURE__ */ (0,
|
|
903
|
-
/* @__PURE__ */ (0,
|
|
911
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fractal-number-input-controls", children: [
|
|
912
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
904
913
|
"button",
|
|
905
914
|
{
|
|
906
915
|
type: "button",
|
|
@@ -908,10 +917,10 @@ function NumberInput({
|
|
|
908
917
|
"aria-label": `Decrease ${controlLabel}`,
|
|
909
918
|
disabled: decrementDisabled,
|
|
910
919
|
onClick: () => changeByStep(-1),
|
|
911
|
-
children: /* @__PURE__ */ (0,
|
|
920
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fractal_icons5.Minus, { "aria-hidden": "true", size: 16 })
|
|
912
921
|
}
|
|
913
922
|
),
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
923
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
915
924
|
"button",
|
|
916
925
|
{
|
|
917
926
|
type: "button",
|
|
@@ -919,7 +928,7 @@ function NumberInput({
|
|
|
919
928
|
"aria-label": `Increase ${controlLabel}`,
|
|
920
929
|
disabled: incrementDisabled,
|
|
921
930
|
onClick: () => changeByStep(1),
|
|
922
|
-
children: /* @__PURE__ */ (0,
|
|
931
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fractal_icons5.Plus, { "aria-hidden": "true", size: 16 })
|
|
923
932
|
}
|
|
924
933
|
)
|
|
925
934
|
] })
|
|
@@ -927,7 +936,7 @@ function NumberInput({
|
|
|
927
936
|
}
|
|
928
937
|
|
|
929
938
|
// src/components/Slider/Slider.tsx
|
|
930
|
-
var
|
|
939
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
931
940
|
function Slider(props) {
|
|
932
941
|
const {
|
|
933
942
|
min = 0,
|
|
@@ -973,18 +982,18 @@ function Slider(props) {
|
|
|
973
982
|
if (!(event.key in adjustments)) return null;
|
|
974
983
|
return value + adjustments[event.key];
|
|
975
984
|
};
|
|
976
|
-
return /* @__PURE__ */ (0,
|
|
985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
977
986
|
"div",
|
|
978
987
|
{
|
|
979
988
|
className: cn("fractal-slider", disabled && "fractal-slider--disabled", className),
|
|
980
989
|
"data-disabled": disabled || void 0,
|
|
981
990
|
"data-knobs": knobs,
|
|
982
991
|
children: [
|
|
983
|
-
showValues && /* @__PURE__ */ (0,
|
|
984
|
-
/* @__PURE__ */ (0,
|
|
985
|
-
knobs === 2 && /* @__PURE__ */ (0,
|
|
992
|
+
showValues && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("output", { children: formatValue(firstValue) }),
|
|
994
|
+
knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("output", { children: formatValue(secondValue) })
|
|
986
995
|
] }),
|
|
987
|
-
/* @__PURE__ */ (0,
|
|
996
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
988
997
|
"div",
|
|
989
998
|
{
|
|
990
999
|
className: "fractal-slider-control",
|
|
@@ -993,9 +1002,9 @@ function Slider(props) {
|
|
|
993
1002
|
"--fractal-slider-selection-end": `${selectionEndPercent}%`
|
|
994
1003
|
},
|
|
995
1004
|
children: [
|
|
996
|
-
/* @__PURE__ */ (0,
|
|
997
|
-
/* @__PURE__ */ (0,
|
|
998
|
-
/* @__PURE__ */ (0,
|
|
1005
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-slider-track", "aria-hidden": "true" }),
|
|
1006
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-slider-selection", "aria-hidden": "true" }),
|
|
1007
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
999
1008
|
"input",
|
|
1000
1009
|
{
|
|
1001
1010
|
"aria-label": knobs === 2 ? props.lowerAriaLabel ?? "Lower value" : props.ariaLabel ?? "Slider value",
|
|
@@ -1019,7 +1028,7 @@ function Slider(props) {
|
|
|
1019
1028
|
value: firstValue
|
|
1020
1029
|
}
|
|
1021
1030
|
),
|
|
1022
|
-
knobs === 2 && /* @__PURE__ */ (0,
|
|
1031
|
+
knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1023
1032
|
"input",
|
|
1024
1033
|
{
|
|
1025
1034
|
"aria-label": props.upperAriaLabel ?? "Upper value",
|
|
@@ -1055,7 +1064,7 @@ function clamp(value, minimum, maximum) {
|
|
|
1055
1064
|
// src/components/PasswordInput/PasswordInput.tsx
|
|
1056
1065
|
var React7 = __toESM(require("react"), 1);
|
|
1057
1066
|
var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
|
|
1058
|
-
var
|
|
1067
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1059
1068
|
var PasswordInput = React7.forwardRef(
|
|
1060
1069
|
({
|
|
1061
1070
|
className,
|
|
@@ -1067,14 +1076,14 @@ var PasswordInput = React7.forwardRef(
|
|
|
1067
1076
|
}, ref) => {
|
|
1068
1077
|
const [passwordVisible, setPasswordVisible] = React7.useState(false);
|
|
1069
1078
|
const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
|
|
1070
|
-
return /* @__PURE__ */ (0,
|
|
1079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1071
1080
|
"div",
|
|
1072
1081
|
{
|
|
1073
1082
|
className: cn("fractal-password-input", className),
|
|
1074
1083
|
"data-control-size": controlSize,
|
|
1075
1084
|
"data-password-visible": passwordVisible ? "" : void 0,
|
|
1076
1085
|
children: [
|
|
1077
|
-
/* @__PURE__ */ (0,
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1078
1087
|
Input,
|
|
1079
1088
|
{
|
|
1080
1089
|
...props,
|
|
@@ -1085,7 +1094,7 @@ var PasswordInput = React7.forwardRef(
|
|
|
1085
1094
|
type: passwordVisible ? "text" : "password"
|
|
1086
1095
|
}
|
|
1087
1096
|
),
|
|
1088
|
-
/* @__PURE__ */ (0,
|
|
1097
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1089
1098
|
"button",
|
|
1090
1099
|
{
|
|
1091
1100
|
type: "button",
|
|
@@ -1095,7 +1104,7 @@ var PasswordInput = React7.forwardRef(
|
|
|
1095
1104
|
disabled,
|
|
1096
1105
|
title: toggleLabel,
|
|
1097
1106
|
onClick: () => setPasswordVisible((visible) => !visible),
|
|
1098
|
-
children: passwordVisible ? /* @__PURE__ */ (0,
|
|
1107
|
+
children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_fractal_icons6.EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_fractal_icons6.Eye, { "aria-hidden": "true", size: 18 })
|
|
1099
1108
|
}
|
|
1100
1109
|
)
|
|
1101
1110
|
]
|
|
@@ -1107,9 +1116,9 @@ PasswordInput.displayName = "PasswordInput";
|
|
|
1107
1116
|
|
|
1108
1117
|
// src/components/Label/Label.tsx
|
|
1109
1118
|
var React8 = __toESM(require("react"), 1);
|
|
1110
|
-
var
|
|
1119
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1111
1120
|
var Label = React8.forwardRef(
|
|
1112
|
-
({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ (0,
|
|
1121
|
+
({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1113
1122
|
"label",
|
|
1114
1123
|
{
|
|
1115
1124
|
ref,
|
|
@@ -1124,7 +1133,7 @@ Label.displayName = "Label";
|
|
|
1124
1133
|
// src/components/Alert/Alert.tsx
|
|
1125
1134
|
var React9 = __toESM(require("react"), 1);
|
|
1126
1135
|
var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
|
|
1127
|
-
var
|
|
1136
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1128
1137
|
var defaultIcons = {
|
|
1129
1138
|
default: import_fractal_icons7.CircleInfo,
|
|
1130
1139
|
info: import_fractal_icons7.CircleInfo,
|
|
@@ -1135,7 +1144,7 @@ var defaultIcons = {
|
|
|
1135
1144
|
var Alert = React9.forwardRef(
|
|
1136
1145
|
({ className, variant = "default", icon, children, ...props }, ref) => {
|
|
1137
1146
|
const DefaultIcon = defaultIcons[variant];
|
|
1138
|
-
return /* @__PURE__ */ (0,
|
|
1147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
1139
1148
|
"div",
|
|
1140
1149
|
{
|
|
1141
1150
|
ref,
|
|
@@ -1143,8 +1152,8 @@ var Alert = React9.forwardRef(
|
|
|
1143
1152
|
className: cn("fractal-alert", `fractal-alert--${variant}`, className),
|
|
1144
1153
|
...props,
|
|
1145
1154
|
children: [
|
|
1146
|
-
/* @__PURE__ */ (0,
|
|
1147
|
-
/* @__PURE__ */ (0,
|
|
1155
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DefaultIcon, { size: 18 }) }),
|
|
1156
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-alert-content", children })
|
|
1148
1157
|
]
|
|
1149
1158
|
}
|
|
1150
1159
|
);
|
|
@@ -1152,11 +1161,11 @@ var Alert = React9.forwardRef(
|
|
|
1152
1161
|
);
|
|
1153
1162
|
Alert.displayName = "Alert";
|
|
1154
1163
|
var AlertTitle = React9.forwardRef(
|
|
1155
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1164
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
|
|
1156
1165
|
);
|
|
1157
1166
|
AlertTitle.displayName = "AlertTitle";
|
|
1158
1167
|
var AlertDescription = React9.forwardRef(
|
|
1159
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1168
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
|
|
1160
1169
|
);
|
|
1161
1170
|
AlertDescription.displayName = "AlertDescription";
|
|
1162
1171
|
|
|
@@ -1164,7 +1173,7 @@ AlertDescription.displayName = "AlertDescription";
|
|
|
1164
1173
|
var React10 = __toESM(require("react"), 1);
|
|
1165
1174
|
var import_react_dom = require("react-dom");
|
|
1166
1175
|
var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
|
|
1167
|
-
var
|
|
1176
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1168
1177
|
var defaultIcons2 = {
|
|
1169
1178
|
default: import_fractal_icons8.CircleInfo,
|
|
1170
1179
|
info: import_fractal_icons8.CircleInfo,
|
|
@@ -1201,7 +1210,7 @@ var Toast = React10.forwardRef(function Toast2({
|
|
|
1201
1210
|
return () => window.clearTimeout(timeout);
|
|
1202
1211
|
}, [paused, resolvedDuration]);
|
|
1203
1212
|
const announcementRole = role ?? (variant === "error" ? "alert" : "status");
|
|
1204
|
-
return /* @__PURE__ */ (0,
|
|
1213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1205
1214
|
"div",
|
|
1206
1215
|
{
|
|
1207
1216
|
ref,
|
|
@@ -1227,17 +1236,17 @@ var Toast = React10.forwardRef(function Toast2({
|
|
|
1227
1236
|
},
|
|
1228
1237
|
...props,
|
|
1229
1238
|
children: [
|
|
1230
|
-
/* @__PURE__ */ (0,
|
|
1231
|
-
/* @__PURE__ */ (0,
|
|
1232
|
-
action && /* @__PURE__ */ (0,
|
|
1233
|
-
/* @__PURE__ */ (0,
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DefaultIcon, { size: 18 }) }),
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-toast__content", children }),
|
|
1241
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-toast__action", children: action }),
|
|
1242
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1234
1243
|
"button",
|
|
1235
1244
|
{
|
|
1236
1245
|
"aria-label": dismissLabel,
|
|
1237
1246
|
className: "fractal-toast__dismiss",
|
|
1238
1247
|
onClick: onDismiss,
|
|
1239
1248
|
type: "button",
|
|
1240
|
-
children: /* @__PURE__ */ (0,
|
|
1249
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fractal_icons8.Close, { "aria-hidden": "true", size: 14 })
|
|
1241
1250
|
}
|
|
1242
1251
|
)
|
|
1243
1252
|
]
|
|
@@ -1245,7 +1254,7 @@ var Toast = React10.forwardRef(function Toast2({
|
|
|
1245
1254
|
);
|
|
1246
1255
|
});
|
|
1247
1256
|
var ToastViewport = React10.forwardRef(function ToastViewport2({ children, className, portal = true, position = "top-center", ...props }, ref) {
|
|
1248
|
-
const viewport = /* @__PURE__ */ (0,
|
|
1257
|
+
const viewport = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1249
1258
|
"div",
|
|
1250
1259
|
{
|
|
1251
1260
|
ref,
|
|
@@ -1260,9 +1269,9 @@ var ToastViewport = React10.forwardRef(function ToastViewport2({ children, class
|
|
|
1260
1269
|
});
|
|
1261
1270
|
|
|
1262
1271
|
// src/components/Toggle/Toggle.tsx
|
|
1263
|
-
var
|
|
1272
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1264
1273
|
function Toggle({ checked, onChange, label, className }) {
|
|
1265
|
-
return /* @__PURE__ */ (0,
|
|
1274
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1266
1275
|
"button",
|
|
1267
1276
|
{
|
|
1268
1277
|
type: "button",
|
|
@@ -1271,8 +1280,8 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
1271
1280
|
className: cn("fractal-toggle", className),
|
|
1272
1281
|
onClick: () => onChange(!checked),
|
|
1273
1282
|
children: [
|
|
1274
|
-
/* @__PURE__ */ (0,
|
|
1275
|
-
label && /* @__PURE__ */ (0,
|
|
1283
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
1284
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-toggle-label", children: label })
|
|
1276
1285
|
]
|
|
1277
1286
|
}
|
|
1278
1287
|
);
|
|
@@ -1334,7 +1343,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
1334
1343
|
|
|
1335
1344
|
// src/components/UILoader/UILoader.tsx
|
|
1336
1345
|
var import_react3 = require("react");
|
|
1337
|
-
var
|
|
1346
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1338
1347
|
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";
|
|
1339
1348
|
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";
|
|
1340
1349
|
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";
|
|
@@ -1343,7 +1352,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1343
1352
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
1344
1353
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
1345
1354
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
1346
|
-
return /* @__PURE__ */ (0,
|
|
1355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1347
1356
|
"span",
|
|
1348
1357
|
{
|
|
1349
1358
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -1351,35 +1360,35 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1351
1360
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
1352
1361
|
role: ariaHidden ? void 0 : "status",
|
|
1353
1362
|
style,
|
|
1354
|
-
children: /* @__PURE__ */ (0,
|
|
1355
|
-
/* @__PURE__ */ (0,
|
|
1356
|
-
/* @__PURE__ */ (0,
|
|
1357
|
-
/* @__PURE__ */ (0,
|
|
1358
|
-
/* @__PURE__ */ (0,
|
|
1363
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
1364
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("defs", { children: [
|
|
1365
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
1366
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
1367
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
1359
1368
|
] }),
|
|
1360
|
-
/* @__PURE__ */ (0,
|
|
1361
|
-
/* @__PURE__ */ (0,
|
|
1362
|
-
/* @__PURE__ */ (0,
|
|
1363
|
-
/* @__PURE__ */ (0,
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
1371
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
1372
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
1364
1373
|
] }),
|
|
1365
|
-
/* @__PURE__ */ (0,
|
|
1366
|
-
/* @__PURE__ */ (0,
|
|
1367
|
-
/* @__PURE__ */ (0,
|
|
1368
|
-
/* @__PURE__ */ (0,
|
|
1374
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("clipPath", { id: clipId, children: [
|
|
1375
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: LEFT }),
|
|
1376
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: CENTER }),
|
|
1377
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: RIGHT })
|
|
1369
1378
|
] })
|
|
1370
1379
|
] }),
|
|
1371
|
-
/* @__PURE__ */ (0,
|
|
1372
|
-
/* @__PURE__ */ (0,
|
|
1373
|
-
/* @__PURE__ */ (0,
|
|
1374
|
-
/* @__PURE__ */ (0,
|
|
1380
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
1381
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
1382
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
1383
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
1375
1384
|
] })
|
|
1376
1385
|
}
|
|
1377
1386
|
);
|
|
1378
1387
|
}
|
|
1379
1388
|
|
|
1380
1389
|
// src/components/Modal/Modal.tsx
|
|
1381
|
-
var
|
|
1382
|
-
var CloseIcon = () => /* @__PURE__ */ (0,
|
|
1390
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1391
|
+
var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1383
1392
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
1384
1393
|
const [bodyScrolled, setBodyScrolled] = React11.useState(false);
|
|
1385
1394
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
@@ -1390,13 +1399,13 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1390
1399
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
1391
1400
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
1392
1401
|
return (0, import_react_dom2.createPortal)(
|
|
1393
|
-
/* @__PURE__ */ (0,
|
|
1402
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1394
1403
|
"div",
|
|
1395
1404
|
{
|
|
1396
1405
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
1397
1406
|
onClick: (e) => e.stopPropagation(),
|
|
1398
1407
|
children: [
|
|
1399
|
-
/* @__PURE__ */ (0,
|
|
1408
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1400
1409
|
"div",
|
|
1401
1410
|
{
|
|
1402
1411
|
className: cn(
|
|
@@ -1405,12 +1414,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1405
1414
|
scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
|
|
1406
1415
|
),
|
|
1407
1416
|
children: [
|
|
1408
|
-
/* @__PURE__ */ (0,
|
|
1409
|
-
!noClose && /* @__PURE__ */ (0,
|
|
1417
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
1418
|
+
!noClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon, {}) })
|
|
1410
1419
|
]
|
|
1411
1420
|
}
|
|
1412
1421
|
),
|
|
1413
|
-
/* @__PURE__ */ (0,
|
|
1422
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1414
1423
|
"div",
|
|
1415
1424
|
{
|
|
1416
1425
|
"aria-busy": loading || void 0,
|
|
@@ -1421,10 +1430,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1421
1430
|
scrollable && "fractal-modal-body--scrollable"
|
|
1422
1431
|
),
|
|
1423
1432
|
onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
|
|
1424
|
-
children: loading ? /* @__PURE__ */ (0,
|
|
1433
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UILoader, { label: loadingLabel }) : children
|
|
1425
1434
|
}
|
|
1426
1435
|
),
|
|
1427
|
-
footer && /* @__PURE__ */ (0,
|
|
1436
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
1428
1437
|
]
|
|
1429
1438
|
}
|
|
1430
1439
|
) }),
|
|
@@ -1436,7 +1445,7 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1436
1445
|
var import_react4 = require("react");
|
|
1437
1446
|
var import_react_dom3 = require("react-dom");
|
|
1438
1447
|
var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
|
|
1439
|
-
var
|
|
1448
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1440
1449
|
function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
1441
1450
|
const id = (0, import_react4.useId)();
|
|
1442
1451
|
const trigger = (0, import_react4.useRef)(null);
|
|
@@ -1487,15 +1496,15 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1487
1496
|
if (disabled || items.length === 0) setOpen(false);
|
|
1488
1497
|
}, [disabled, items.length]);
|
|
1489
1498
|
if (items.length === 0) return null;
|
|
1490
|
-
return /* @__PURE__ */ (0,
|
|
1491
|
-
/* @__PURE__ */ (0,
|
|
1499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fractal-table-overflow-trigger", children: [
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1492
1501
|
Button,
|
|
1493
1502
|
{
|
|
1494
1503
|
ref: trigger,
|
|
1495
1504
|
buttonType: "ghost",
|
|
1496
1505
|
controlSize: "sm",
|
|
1497
1506
|
hasIconOnly: true,
|
|
1498
|
-
icon: /* @__PURE__ */ (0,
|
|
1507
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons9.Ellipsis, { "aria-hidden": true }),
|
|
1499
1508
|
"aria-label": label,
|
|
1500
1509
|
"aria-haspopup": "menu",
|
|
1501
1510
|
"aria-expanded": open,
|
|
@@ -1514,7 +1523,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1514
1523
|
}
|
|
1515
1524
|
}
|
|
1516
1525
|
),
|
|
1517
|
-
open && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0,
|
|
1526
|
+
open && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1518
1527
|
"div",
|
|
1519
1528
|
{
|
|
1520
1529
|
ref: panel,
|
|
@@ -1542,7 +1551,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1542
1551
|
ordered.find((button) => button.textContent?.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()))?.focus();
|
|
1543
1552
|
}
|
|
1544
1553
|
},
|
|
1545
|
-
children: items.map((item) => /* @__PURE__ */ (0,
|
|
1554
|
+
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1546
1555
|
"button",
|
|
1547
1556
|
{
|
|
1548
1557
|
type: "button",
|
|
@@ -1554,7 +1563,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1554
1563
|
close();
|
|
1555
1564
|
},
|
|
1556
1565
|
children: [
|
|
1557
|
-
item.icon && /* @__PURE__ */ (0,
|
|
1566
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: item.icon }),
|
|
1558
1567
|
item.label
|
|
1559
1568
|
]
|
|
1560
1569
|
},
|
|
@@ -1567,7 +1576,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
|
|
|
1567
1576
|
|
|
1568
1577
|
// src/components/TableLayout/TableLayout.tsx
|
|
1569
1578
|
var import_react5 = require("react");
|
|
1570
|
-
var
|
|
1579
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1571
1580
|
var length = (value) => typeof value === "number" ? `${value}px` : value;
|
|
1572
1581
|
function columnStyle(column) {
|
|
1573
1582
|
return {
|
|
@@ -1603,7 +1612,7 @@ function useOverflow() {
|
|
|
1603
1612
|
}
|
|
1604
1613
|
function TableViewport({ children, maxHeight, label }) {
|
|
1605
1614
|
const { ref, overflow } = useOverflow();
|
|
1606
|
-
return /* @__PURE__ */ (0,
|
|
1615
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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 });
|
|
1607
1616
|
}
|
|
1608
1617
|
function TableCellContent({ children, label }) {
|
|
1609
1618
|
const { ref, overflow } = useOverflow();
|
|
@@ -1630,7 +1639,7 @@ function TableCellContent({ children, label }) {
|
|
|
1630
1639
|
cell.addEventListener("wheel", wheel, { passive: false });
|
|
1631
1640
|
return () => cell.removeEventListener("wheel", wheel);
|
|
1632
1641
|
}, [ref]);
|
|
1633
|
-
return /* @__PURE__ */ (0,
|
|
1642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1634
1643
|
"div",
|
|
1635
1644
|
{
|
|
1636
1645
|
ref,
|
|
@@ -1649,28 +1658,28 @@ function TableCellContent({ children, label }) {
|
|
|
1649
1658
|
else el.scrollLeft = event.key === "Home" ? 0 : el.scrollWidth * (getComputedStyle(el).direction === "rtl" ? -1 : 1);
|
|
1650
1659
|
} else if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1651
1660
|
},
|
|
1652
|
-
children: /* @__PURE__ */ (0,
|
|
1661
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-table-cell-content", children })
|
|
1653
1662
|
}
|
|
1654
1663
|
);
|
|
1655
1664
|
}
|
|
1656
1665
|
|
|
1657
1666
|
// src/components/DataTable/DataTable.tsx
|
|
1658
|
-
var
|
|
1667
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1659
1668
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className, overflowMenu, layout = "fill", stickyHeader = false, stickyFirstColumn = false, maxHeight, "aria-label": ariaLabel = "Data table" }) {
|
|
1660
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
-
header && /* @__PURE__ */ (0,
|
|
1662
|
-
data.length === 0 ? /* @__PURE__ */ (0,
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1664
|
-
columns.map((col, columnIndex) => /* @__PURE__ */ (0,
|
|
1665
|
-
overflowMenu && /* @__PURE__ */ (0,
|
|
1669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-datatable-surface", children: [
|
|
1670
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-datatable-header", children: header }),
|
|
1671
|
+
data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
|
|
1672
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("tr", { className: "fractal-datatable-thead-row", children: [
|
|
1673
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
|
|
1674
|
+
overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
|
|
1666
1675
|
] }) }),
|
|
1667
|
-
/* @__PURE__ */ (0,
|
|
1676
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1668
1677
|
"tr",
|
|
1669
1678
|
{
|
|
1670
1679
|
className: "fractal-datatable-row",
|
|
1671
1680
|
children: [
|
|
1672
|
-
columns.map((col, columnIndex) => /* @__PURE__ */ (0,
|
|
1673
|
-
overflowMenu && /* @__PURE__ */ (0,
|
|
1681
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: "fractal-datatable-td", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }) }, col.key)),
|
|
1682
|
+
overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: "fractal-datatable-td fractal-table-overflow-cell", "data-pinned-column": "overflow", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(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) }) })
|
|
1674
1683
|
]
|
|
1675
1684
|
},
|
|
1676
1685
|
rowIndex
|
|
@@ -1684,6 +1693,9 @@ var React12 = __toESM(require("react"), 1);
|
|
|
1684
1693
|
var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
|
|
1685
1694
|
|
|
1686
1695
|
// src/components/Dropdown/position.ts
|
|
1696
|
+
function isDropdownTriggerVisible(trigger, bounds) {
|
|
1697
|
+
return trigger.right > bounds.left && trigger.left < bounds.right && trigger.bottom > bounds.top && trigger.top < bounds.bottom;
|
|
1698
|
+
}
|
|
1687
1699
|
function positionDropdown(trigger, panel, bounds, direction, align) {
|
|
1688
1700
|
const gap = 4;
|
|
1689
1701
|
const width = Math.min(panel.width, Math.max(0, bounds.right - bounds.left));
|
|
@@ -1719,7 +1731,7 @@ function positionDropdown(trigger, panel, bounds, direction, align) {
|
|
|
1719
1731
|
}
|
|
1720
1732
|
|
|
1721
1733
|
// src/components/Dropdown/Dropdown.tsx
|
|
1722
|
-
var
|
|
1734
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1723
1735
|
function Dropdown({
|
|
1724
1736
|
items,
|
|
1725
1737
|
selectedValue = "",
|
|
@@ -1824,12 +1836,17 @@ function Dropdown({
|
|
|
1824
1836
|
bounds.bottom = Math.min(bounds.bottom, rect.top + ancestor.clientTop + ancestor.clientHeight);
|
|
1825
1837
|
}
|
|
1826
1838
|
}
|
|
1839
|
+
const triggerRect = trigger.getBoundingClientRect();
|
|
1840
|
+
if (!isDropdownTriggerVisible(triggerRect, bounds)) {
|
|
1841
|
+
focusOnOpen.current = false;
|
|
1842
|
+
setOpen(false);
|
|
1843
|
+
return false;
|
|
1844
|
+
}
|
|
1827
1845
|
const padding = Math.max(0, collisionPadding);
|
|
1828
1846
|
bounds.left += padding;
|
|
1829
1847
|
bounds.right = Math.max(bounds.left, bounds.right - padding);
|
|
1830
1848
|
bounds.top += padding;
|
|
1831
1849
|
bounds.bottom = Math.max(bounds.top, bounds.bottom - padding);
|
|
1832
|
-
const triggerRect = trigger.getBoundingClientRect();
|
|
1833
1850
|
const rootRect = root.getBoundingClientRect();
|
|
1834
1851
|
const availableWidth = bounds.right - bounds.left;
|
|
1835
1852
|
const heightLimit = Math.max(0, maxHeight);
|
|
@@ -1849,8 +1866,9 @@ function Dropdown({
|
|
|
1849
1866
|
panel.style[key] = `${nextStyle[key]}px`;
|
|
1850
1867
|
}
|
|
1851
1868
|
setPanelStyle((previous) => Object.entries(nextStyle).every(([key, value]) => previous[key] === value) ? previous : nextStyle);
|
|
1869
|
+
return true;
|
|
1852
1870
|
};
|
|
1853
|
-
updatePosition();
|
|
1871
|
+
if (!updatePosition()) return;
|
|
1854
1872
|
if (searchable && !panel.contains(document.activeElement)) searchRef.current?.focus({ preventScroll: true });
|
|
1855
1873
|
if (focusOnOpen.current) {
|
|
1856
1874
|
focusOnOpen.current = false;
|
|
@@ -1888,8 +1906,8 @@ function Dropdown({
|
|
|
1888
1906
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1889
1907
|
}, [open]);
|
|
1890
1908
|
if (renderableItems.length === 0) return null;
|
|
1891
|
-
return /* @__PURE__ */ (0,
|
|
1892
|
-
/* @__PURE__ */ (0,
|
|
1909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, "data-clearable": canClear || void 0, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
|
|
1910
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1893
1911
|
"button",
|
|
1894
1912
|
{
|
|
1895
1913
|
ref: triggerRef,
|
|
@@ -1925,23 +1943,24 @@ function Dropdown({
|
|
|
1925
1943
|
triggerClassName
|
|
1926
1944
|
),
|
|
1927
1945
|
children: [
|
|
1928
|
-
/* @__PURE__ */ (0,
|
|
1929
|
-
selected?.icon != null && /* @__PURE__ */ (0,
|
|
1930
|
-
selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ (0,
|
|
1946
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
1947
|
+
selected?.icon != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected?.icon }),
|
|
1948
|
+
selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
|
|
1931
1949
|
] }) }),
|
|
1932
|
-
!noChevron && !iconOnly && /* @__PURE__ */ (0,
|
|
1950
|
+
!noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
1933
1951
|
]
|
|
1934
1952
|
}
|
|
1935
1953
|
),
|
|
1936
|
-
canClear && /* @__PURE__ */ (0,
|
|
1954
|
+
canClear && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "fractal-dropdown-clear", "aria-label": `Clear ${accessibleLabel}`, onClick: () => {
|
|
1937
1955
|
if (multiple) onSelectionChange?.([]);
|
|
1938
1956
|
else onSelect?.("");
|
|
1939
1957
|
setOpen(false);
|
|
1940
1958
|
setQuery("");
|
|
1941
1959
|
triggerRef.current?.focus();
|
|
1942
|
-
}, children: /* @__PURE__ */ (0,
|
|
1943
|
-
fieldLabel ? /* @__PURE__ */ (0,
|
|
1944
|
-
|
|
1960
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.Close, { "aria-hidden": "true" }) }),
|
|
1961
|
+
fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FloatingFieldBorder, { label: fieldLabel }) : null,
|
|
1962
|
+
fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
|
|
1963
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1945
1964
|
"div",
|
|
1946
1965
|
{
|
|
1947
1966
|
ref: panelRef,
|
|
@@ -1961,26 +1980,26 @@ function Dropdown({
|
|
|
1961
1980
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
1962
1981
|
style: panelStyle,
|
|
1963
1982
|
children: [
|
|
1964
|
-
searchable && /* @__PURE__ */ (0,
|
|
1965
|
-
/* @__PURE__ */ (0,
|
|
1966
|
-
/* @__PURE__ */ (0,
|
|
1983
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fractal-dropdown-search", children: [
|
|
1984
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.MagnifyingGlass, { "aria-hidden": "true" }),
|
|
1985
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
|
|
1967
1986
|
] }) }),
|
|
1968
|
-
/* @__PURE__ */ (0,
|
|
1969
|
-
label != null && /* @__PURE__ */ (0,
|
|
1987
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("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: [
|
|
1988
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-dropdown-label", children: label }),
|
|
1970
1989
|
visibleItems.map((item, index) => {
|
|
1971
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */ (0,
|
|
1972
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0,
|
|
1990
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1991
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1973
1992
|
if (item.kind === "header") {
|
|
1974
|
-
return /* @__PURE__ */ (0,
|
|
1993
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(React12.Fragment, { children: [
|
|
1975
1994
|
topDivider,
|
|
1976
|
-
/* @__PURE__ */ (0,
|
|
1995
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
1977
1996
|
bottomDivider
|
|
1978
1997
|
] }, `header-${index}`);
|
|
1979
1998
|
}
|
|
1980
1999
|
const isSelected = multiple ? selectedValues.includes(item.value) : item.value === selectedValue;
|
|
1981
|
-
return /* @__PURE__ */ (0,
|
|
2000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(React12.Fragment, { children: [
|
|
1982
2001
|
topDivider,
|
|
1983
|
-
/* @__PURE__ */ (0,
|
|
2002
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1984
2003
|
"button",
|
|
1985
2004
|
{
|
|
1986
2005
|
type: "button",
|
|
@@ -1996,17 +2015,17 @@ function Dropdown({
|
|
|
1996
2015
|
},
|
|
1997
2016
|
className: "fractal-dropdown-option",
|
|
1998
2017
|
children: [
|
|
1999
|
-
multiple && /* @__PURE__ */ (0,
|
|
2000
|
-
item.icon != null && /* @__PURE__ */ (0,
|
|
2001
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0,
|
|
2002
|
-
item.trailing != null && /* @__PURE__ */ (0,
|
|
2018
|
+
multiple && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.Check, {}) }),
|
|
2019
|
+
item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
2020
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
2021
|
+
item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
2003
2022
|
]
|
|
2004
2023
|
}
|
|
2005
2024
|
),
|
|
2006
2025
|
bottomDivider
|
|
2007
2026
|
] }, item.value);
|
|
2008
2027
|
}),
|
|
2009
|
-
!selectableItems.length && /* @__PURE__ */ (0,
|
|
2028
|
+
!selectableItems.length && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
|
|
2010
2029
|
] })
|
|
2011
2030
|
]
|
|
2012
2031
|
}
|
|
@@ -2016,9 +2035,9 @@ function Dropdown({
|
|
|
2016
2035
|
|
|
2017
2036
|
// src/components/Link/Link.tsx
|
|
2018
2037
|
var React13 = __toESM(require("react"), 1);
|
|
2019
|
-
var
|
|
2038
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2020
2039
|
var Link = React13.forwardRef(
|
|
2021
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2040
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2022
2041
|
"a",
|
|
2023
2042
|
{
|
|
2024
2043
|
ref,
|
|
@@ -2031,9 +2050,9 @@ Link.displayName = "Link";
|
|
|
2031
2050
|
|
|
2032
2051
|
// src/components/Chip/Chip.tsx
|
|
2033
2052
|
var React14 = __toESM(require("react"), 1);
|
|
2034
|
-
var
|
|
2053
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2035
2054
|
var Chip = React14.forwardRef(
|
|
2036
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2055
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2037
2056
|
"span",
|
|
2038
2057
|
{
|
|
2039
2058
|
ref,
|
|
@@ -2046,7 +2065,7 @@ Chip.displayName = "Chip";
|
|
|
2046
2065
|
|
|
2047
2066
|
// src/components/Checkbox/Checkbox.tsx
|
|
2048
2067
|
var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
|
|
2049
|
-
var
|
|
2068
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2050
2069
|
function Checkbox({
|
|
2051
2070
|
checked,
|
|
2052
2071
|
indeterminate = false,
|
|
@@ -2057,7 +2076,7 @@ function Checkbox({
|
|
|
2057
2076
|
onKeyDown,
|
|
2058
2077
|
...props
|
|
2059
2078
|
}) {
|
|
2060
|
-
return /* @__PURE__ */ (0,
|
|
2079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2061
2080
|
"button",
|
|
2062
2081
|
{
|
|
2063
2082
|
...props,
|
|
@@ -2079,16 +2098,16 @@ function Checkbox({
|
|
|
2079
2098
|
onKeyDown?.(event);
|
|
2080
2099
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
2081
2100
|
},
|
|
2082
|
-
children: indeterminate ? /* @__PURE__ */ (0,
|
|
2083
|
-
/* @__PURE__ */ (0,
|
|
2084
|
-
/* @__PURE__ */ (0,
|
|
2085
|
-
] }) : checked ? /* @__PURE__ */ (0,
|
|
2101
|
+
children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
2102
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.Checkbox, { size: 18 }),
|
|
2103
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
2104
|
+
] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.Checkbox, { "aria-hidden": "true", size: 18 })
|
|
2086
2105
|
}
|
|
2087
2106
|
);
|
|
2088
2107
|
}
|
|
2089
2108
|
|
|
2090
2109
|
// src/components/Radio/Radio.tsx
|
|
2091
|
-
var
|
|
2110
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2092
2111
|
function Radio({
|
|
2093
2112
|
checked,
|
|
2094
2113
|
className,
|
|
@@ -2098,8 +2117,8 @@ function Radio({
|
|
|
2098
2117
|
onCheckedChange,
|
|
2099
2118
|
...props
|
|
2100
2119
|
}) {
|
|
2101
|
-
return /* @__PURE__ */ (0,
|
|
2102
|
-
/* @__PURE__ */ (0,
|
|
2120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
|
|
2121
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2103
2122
|
"input",
|
|
2104
2123
|
{
|
|
2105
2124
|
...props,
|
|
@@ -2110,10 +2129,10 @@ function Radio({
|
|
|
2110
2129
|
type: "radio"
|
|
2111
2130
|
}
|
|
2112
2131
|
),
|
|
2113
|
-
/* @__PURE__ */ (0,
|
|
2114
|
-
/* @__PURE__ */ (0,
|
|
2115
|
-
/* @__PURE__ */ (0,
|
|
2116
|
-
description && /* @__PURE__ */ (0,
|
|
2132
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-radio__dot" }) }),
|
|
2133
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fractal-radio__content", children: [
|
|
2134
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-radio__label", children: label }),
|
|
2135
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-radio__description", children: description })
|
|
2117
2136
|
] })
|
|
2118
2137
|
] });
|
|
2119
2138
|
}
|
|
@@ -2121,7 +2140,7 @@ function Radio({
|
|
|
2121
2140
|
// src/components/SortableTable/SortableTable.tsx
|
|
2122
2141
|
var import_react6 = require("react");
|
|
2123
2142
|
var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
|
|
2124
|
-
var
|
|
2143
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2125
2144
|
function SortableTable({
|
|
2126
2145
|
columns,
|
|
2127
2146
|
data,
|
|
@@ -2221,17 +2240,17 @@ function SortableTable({
|
|
|
2221
2240
|
onSortChange?.(nextKey, nextDirection);
|
|
2222
2241
|
}
|
|
2223
2242
|
};
|
|
2224
|
-
return /* @__PURE__ */ (0,
|
|
2225
|
-
header && /* @__PURE__ */ (0,
|
|
2226
|
-
visibleRows.length === 0 ? /* @__PURE__ */ (0,
|
|
2227
|
-
/* @__PURE__ */ (0,
|
|
2228
|
-
selection && /* @__PURE__ */ (0,
|
|
2243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
|
|
2244
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
|
|
2245
|
+
visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
2246
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
2247
|
+
selection && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2229
2248
|
"th",
|
|
2230
2249
|
{
|
|
2231
2250
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
2232
2251
|
"data-pinned-column": "selection",
|
|
2233
2252
|
scope: "col",
|
|
2234
|
-
children: /* @__PURE__ */ (0,
|
|
2253
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2235
2254
|
Checkbox,
|
|
2236
2255
|
{
|
|
2237
2256
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -2257,26 +2276,26 @@ function SortableTable({
|
|
|
2257
2276
|
columns.map((col, columnIndex) => {
|
|
2258
2277
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
2259
2278
|
if (!col.sortable) {
|
|
2260
|
-
return /* @__PURE__ */ (0,
|
|
2279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2261
2280
|
"th",
|
|
2262
2281
|
{
|
|
2263
2282
|
className: "fractal-sortable-table-th",
|
|
2264
2283
|
scope: "col",
|
|
2265
2284
|
style: columnStyle(col),
|
|
2266
2285
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2267
|
-
children: /* @__PURE__ */ (0,
|
|
2286
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header })
|
|
2268
2287
|
},
|
|
2269
2288
|
col.key
|
|
2270
2289
|
);
|
|
2271
2290
|
}
|
|
2272
|
-
return /* @__PURE__ */ (0,
|
|
2291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2273
2292
|
"th",
|
|
2274
2293
|
{
|
|
2275
2294
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
2276
2295
|
scope: "col",
|
|
2277
2296
|
style: columnStyle(col),
|
|
2278
2297
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2279
|
-
children: /* @__PURE__ */ (0,
|
|
2298
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2280
2299
|
"button",
|
|
2281
2300
|
{
|
|
2282
2301
|
type: "button",
|
|
@@ -2287,8 +2306,8 @@ function SortableTable({
|
|
|
2287
2306
|
onClick: () => handleSortClick(col.key),
|
|
2288
2307
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
2289
2308
|
children: [
|
|
2290
|
-
/* @__PURE__ */ (0,
|
|
2291
|
-
/* @__PURE__ */ (0,
|
|
2309
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: col.header }),
|
|
2310
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ArrowsUpDown, { size: 14 }) })
|
|
2292
2311
|
]
|
|
2293
2312
|
}
|
|
2294
2313
|
) })
|
|
@@ -2296,9 +2315,9 @@ function SortableTable({
|
|
|
2296
2315
|
col.key
|
|
2297
2316
|
);
|
|
2298
2317
|
}),
|
|
2299
|
-
overflowMenu && /* @__PURE__ */ (0,
|
|
2318
|
+
overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-sortable-table-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
|
|
2300
2319
|
] }) }),
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2320
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
2302
2321
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
2303
2322
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
2304
2323
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -2307,7 +2326,7 @@ function SortableTable({
|
|
|
2307
2326
|
label: rowAction.label(row, rowIndex),
|
|
2308
2327
|
icon: rowAction.icon(row, rowIndex)
|
|
2309
2328
|
} : null;
|
|
2310
|
-
return /* @__PURE__ */ (0,
|
|
2329
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2311
2330
|
"tr",
|
|
2312
2331
|
{
|
|
2313
2332
|
className: cn(
|
|
@@ -2331,7 +2350,7 @@ function SortableTable({
|
|
|
2331
2350
|
role: interactive ? "button" : void 0,
|
|
2332
2351
|
tabIndex: interactive ? 0 : void 0,
|
|
2333
2352
|
children: [
|
|
2334
|
-
selection && /* @__PURE__ */ (0,
|
|
2353
|
+
selection && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", "data-pinned-column": "selection", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2335
2354
|
Checkbox,
|
|
2336
2355
|
{
|
|
2337
2356
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -2343,7 +2362,7 @@ function SortableTable({
|
|
|
2343
2362
|
}
|
|
2344
2363
|
}
|
|
2345
2364
|
) }),
|
|
2346
|
-
columns.map((col, columnIndex) => /* @__PURE__ */ (0,
|
|
2365
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2347
2366
|
"td",
|
|
2348
2367
|
{
|
|
2349
2368
|
className: cn(
|
|
@@ -2354,13 +2373,13 @@ function SortableTable({
|
|
|
2354
2373
|
"data-column-align": col.align,
|
|
2355
2374
|
"data-pinned-column": columnIndex === 0 ? "data" : void 0,
|
|
2356
2375
|
children: [
|
|
2357
|
-
/* @__PURE__ */ (0,
|
|
2358
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0,
|
|
2376
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }),
|
|
2377
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
2359
2378
|
]
|
|
2360
2379
|
},
|
|
2361
2380
|
col.key
|
|
2362
2381
|
)),
|
|
2363
|
-
overflowMenu && /* @__PURE__ */ (0,
|
|
2382
|
+
overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2364
2383
|
"td",
|
|
2365
2384
|
{
|
|
2366
2385
|
className: "fractal-sortable-table-td fractal-table-overflow-cell",
|
|
@@ -2368,7 +2387,7 @@ function SortableTable({
|
|
|
2368
2387
|
onClick: (event) => event.stopPropagation(),
|
|
2369
2388
|
onDoubleClick: (event) => event.stopPropagation(),
|
|
2370
2389
|
onKeyDown: (event) => event.stopPropagation(),
|
|
2371
|
-
children: /* @__PURE__ */ (0,
|
|
2390
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(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) })
|
|
2372
2391
|
}
|
|
2373
2392
|
)
|
|
2374
2393
|
]
|
|
@@ -2382,7 +2401,7 @@ function SortableTable({
|
|
|
2382
2401
|
|
|
2383
2402
|
// src/components/Tabs/Tabs.tsx
|
|
2384
2403
|
var import_react7 = require("react");
|
|
2385
|
-
var
|
|
2404
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2386
2405
|
function Tabs({
|
|
2387
2406
|
items,
|
|
2388
2407
|
defaultValue,
|
|
@@ -2453,8 +2472,8 @@ function Tabs({
|
|
|
2453
2472
|
selectTab(nextId2);
|
|
2454
2473
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
2455
2474
|
};
|
|
2456
|
-
return /* @__PURE__ */ (0,
|
|
2457
|
-
/* @__PURE__ */ (0,
|
|
2475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
2476
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2458
2477
|
"div",
|
|
2459
2478
|
{
|
|
2460
2479
|
ref: tabListRef,
|
|
@@ -2467,7 +2486,7 @@ function Tabs({
|
|
|
2467
2486
|
const isActive = item.id === activeId;
|
|
2468
2487
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2469
2488
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2470
|
-
return /* @__PURE__ */ (0,
|
|
2489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2471
2490
|
"button",
|
|
2472
2491
|
{
|
|
2473
2492
|
ref: (el) => {
|
|
@@ -2498,7 +2517,7 @@ function Tabs({
|
|
|
2498
2517
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2499
2518
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2500
2519
|
const isActive = item.id === activeId;
|
|
2501
|
-
return /* @__PURE__ */ (0,
|
|
2520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2502
2521
|
"div",
|
|
2503
2522
|
{
|
|
2504
2523
|
id: panelId,
|
|
@@ -2516,7 +2535,7 @@ function Tabs({
|
|
|
2516
2535
|
|
|
2517
2536
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
2518
2537
|
var React15 = __toESM(require("react"), 1);
|
|
2519
|
-
var
|
|
2538
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2520
2539
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
2521
2540
|
const switcherRef = React15.useRef(null);
|
|
2522
2541
|
const buttonRefs = React15.useRef([]);
|
|
@@ -2574,7 +2593,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2574
2593
|
onValueChange(items[nextIndex].value);
|
|
2575
2594
|
}
|
|
2576
2595
|
};
|
|
2577
|
-
return /* @__PURE__ */ (0,
|
|
2596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2578
2597
|
"div",
|
|
2579
2598
|
{
|
|
2580
2599
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -2582,10 +2601,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2582
2601
|
"aria-label": ariaLabel,
|
|
2583
2602
|
ref: switcherRef,
|
|
2584
2603
|
children: [
|
|
2585
|
-
/* @__PURE__ */ (0,
|
|
2604
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
2586
2605
|
items.map((item, index) => {
|
|
2587
2606
|
const active = item.value === value;
|
|
2588
|
-
return /* @__PURE__ */ (0,
|
|
2607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2589
2608
|
"button",
|
|
2590
2609
|
{
|
|
2591
2610
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -2619,7 +2638,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2619
2638
|
// src/components/Disclosure/Disclosure.tsx
|
|
2620
2639
|
var import_react8 = require("react");
|
|
2621
2640
|
var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
|
|
2622
|
-
var
|
|
2641
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2623
2642
|
function Disclosure({
|
|
2624
2643
|
title,
|
|
2625
2644
|
meta,
|
|
@@ -2647,7 +2666,7 @@ function Disclosure({
|
|
|
2647
2666
|
onOpenChange?.(next);
|
|
2648
2667
|
}
|
|
2649
2668
|
};
|
|
2650
|
-
return /* @__PURE__ */ (0,
|
|
2669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2651
2670
|
"div",
|
|
2652
2671
|
{
|
|
2653
2672
|
className: cn(
|
|
@@ -2658,7 +2677,7 @@ function Disclosure({
|
|
|
2658
2677
|
className
|
|
2659
2678
|
),
|
|
2660
2679
|
children: [
|
|
2661
|
-
/* @__PURE__ */ (0,
|
|
2680
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2662
2681
|
"button",
|
|
2663
2682
|
{
|
|
2664
2683
|
type: "button",
|
|
@@ -2669,13 +2688,13 @@ function Disclosure({
|
|
|
2669
2688
|
disabled,
|
|
2670
2689
|
onClick: toggle,
|
|
2671
2690
|
children: [
|
|
2672
|
-
/* @__PURE__ */ (0,
|
|
2673
|
-
/* @__PURE__ */ (0,
|
|
2674
|
-
meta && /* @__PURE__ */ (0,
|
|
2691
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons13.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons13.ChevronRight, { size: 16 }) }),
|
|
2692
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-disclosure-title", children: title }),
|
|
2693
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2675
2694
|
]
|
|
2676
2695
|
}
|
|
2677
2696
|
),
|
|
2678
|
-
/* @__PURE__ */ (0,
|
|
2697
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2679
2698
|
"div",
|
|
2680
2699
|
{
|
|
2681
2700
|
id: panelId,
|
|
@@ -2683,7 +2702,7 @@ function Disclosure({
|
|
|
2683
2702
|
"aria-labelledby": headerId,
|
|
2684
2703
|
className: "fractal-disclosure-panel",
|
|
2685
2704
|
hidden: !isOpen,
|
|
2686
|
-
children: /* @__PURE__ */ (0,
|
|
2705
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2687
2706
|
}
|
|
2688
2707
|
)
|
|
2689
2708
|
]
|
|
@@ -2692,18 +2711,18 @@ function Disclosure({
|
|
|
2692
2711
|
}
|
|
2693
2712
|
|
|
2694
2713
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2695
|
-
var
|
|
2714
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2696
2715
|
var LATTICE_COUNT = 160;
|
|
2697
2716
|
var WAVE_PERIOD = 80;
|
|
2698
2717
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2699
|
-
return /* @__PURE__ */ (0,
|
|
2718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2700
2719
|
"span",
|
|
2701
2720
|
{
|
|
2702
2721
|
"aria-label": label,
|
|
2703
2722
|
className: cn("fractal-lattice-loader", className),
|
|
2704
2723
|
role: "progressbar",
|
|
2705
2724
|
...props,
|
|
2706
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0,
|
|
2725
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2707
2726
|
"span",
|
|
2708
2727
|
{
|
|
2709
2728
|
"aria-hidden": "true",
|
|
@@ -2717,10 +2736,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2717
2736
|
}
|
|
2718
2737
|
|
|
2719
2738
|
// src/components/Ghost/Ghost.tsx
|
|
2720
|
-
var
|
|
2739
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2721
2740
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2722
2741
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2723
|
-
return /* @__PURE__ */ (0,
|
|
2742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2724
2743
|
"div",
|
|
2725
2744
|
{
|
|
2726
2745
|
"aria-hidden": "true",
|
|
@@ -2736,15 +2755,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2736
2755
|
);
|
|
2737
2756
|
}
|
|
2738
2757
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2739
|
-
return /* @__PURE__ */ (0,
|
|
2758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2740
2759
|
}
|
|
2741
2760
|
function ButtonGhost({ className, size = "lg", controlSize, iconOnly = false, width, ...props }) {
|
|
2742
|
-
return /* @__PURE__ */ (0,
|
|
2761
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2743
2762
|
}
|
|
2744
2763
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2745
|
-
return /* @__PURE__ */ (0,
|
|
2746
|
-
showHeader && /* @__PURE__ */ (0,
|
|
2747
|
-
/* @__PURE__ */ (0,
|
|
2764
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2765
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "38%" }),
|
|
2766
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
2748
2767
|
] });
|
|
2749
2768
|
}
|
|
2750
2769
|
function DataTableGhost({
|
|
@@ -2758,81 +2777,81 @@ function DataTableGhost({
|
|
|
2758
2777
|
...props
|
|
2759
2778
|
}) {
|
|
2760
2779
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2761
|
-
return /* @__PURE__ */ (0,
|
|
2762
|
-
(showHeader || headers) && /* @__PURE__ */ (0,
|
|
2763
|
-
/* @__PURE__ */ (0,
|
|
2780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("table", { className: "fractal-ghost-table__table", children: [
|
|
2781
|
+
(showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2782
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
2764
2783
|
] }) });
|
|
2765
2784
|
}
|
|
2766
2785
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2767
|
-
return /* @__PURE__ */ (0,
|
|
2786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FormFieldGhost, { className, labelWidth, ...props });
|
|
2768
2787
|
}
|
|
2769
2788
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2770
|
-
return /* @__PURE__ */ (0,
|
|
2789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2771
2790
|
}
|
|
2772
2791
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2773
|
-
return /* @__PURE__ */ (0,
|
|
2792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2774
2793
|
}
|
|
2775
2794
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "lg", ...props }) {
|
|
2776
|
-
return /* @__PURE__ */ (0,
|
|
2777
|
-
/* @__PURE__ */ (0,
|
|
2778
|
-
/* @__PURE__ */ (0,
|
|
2795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2796
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LabelGhost, { width: labelWidth }),
|
|
2797
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2779
2798
|
] });
|
|
2780
2799
|
}
|
|
2781
2800
|
function AlertGhost({ className, ...props }) {
|
|
2782
|
-
return /* @__PURE__ */ (0,
|
|
2783
|
-
/* @__PURE__ */ (0,
|
|
2784
|
-
/* @__PURE__ */ (0,
|
|
2801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2802
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "30%" }),
|
|
2803
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { size: "sm", width: "78%" })
|
|
2785
2804
|
] });
|
|
2786
2805
|
}
|
|
2787
2806
|
function CheckboxGhost({ className, ...props }) {
|
|
2788
|
-
return /* @__PURE__ */ (0,
|
|
2789
|
-
/* @__PURE__ */ (0,
|
|
2790
|
-
/* @__PURE__ */ (0,
|
|
2807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2808
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2809
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "42%" })
|
|
2791
2810
|
] });
|
|
2792
2811
|
}
|
|
2793
2812
|
var ToggleGhost = CheckboxGhost;
|
|
2794
2813
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2795
|
-
return /* @__PURE__ */ (0,
|
|
2814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2796
2815
|
}
|
|
2797
2816
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2798
|
-
return /* @__PURE__ */ (0,
|
|
2817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2799
2818
|
}
|
|
2800
2819
|
var TextButtonGhost = LinkGhost;
|
|
2801
2820
|
function DropdownGhost({ className, controlSize = "lg", ...props }) {
|
|
2802
|
-
return /* @__PURE__ */ (0,
|
|
2803
|
-
/* @__PURE__ */ (0,
|
|
2804
|
-
/* @__PURE__ */ (0,
|
|
2821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2822
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "38%" }),
|
|
2823
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2805
2824
|
] });
|
|
2806
2825
|
}
|
|
2807
2826
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2808
|
-
return /* @__PURE__ */ (0,
|
|
2827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, {}, index)) });
|
|
2809
2828
|
}
|
|
2810
2829
|
var TabsGhost = ContentSwitcherGhost;
|
|
2811
2830
|
function DisclosureGhost({ className, ...props }) {
|
|
2812
|
-
return /* @__PURE__ */ (0,
|
|
2813
|
-
/* @__PURE__ */ (0,
|
|
2814
|
-
/* @__PURE__ */ (0,
|
|
2831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2832
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2833
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "42%" })
|
|
2815
2834
|
] });
|
|
2816
2835
|
}
|
|
2817
2836
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2818
|
-
return /* @__PURE__ */ (0,
|
|
2837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, {}, index)) });
|
|
2819
2838
|
}
|
|
2820
2839
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2821
|
-
return /* @__PURE__ */ (0,
|
|
2822
|
-
/* @__PURE__ */ (0,
|
|
2823
|
-
/* @__PURE__ */ (0,
|
|
2824
|
-
/* @__PURE__ */ (0,
|
|
2840
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2841
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2842
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "26%" }),
|
|
2843
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { size: "sm", width: "46%" })
|
|
2825
2844
|
] });
|
|
2826
2845
|
}
|
|
2827
2846
|
function PromptCardGhost({ className, ...props }) {
|
|
2828
|
-
return /* @__PURE__ */ (0,
|
|
2847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2829
2848
|
}
|
|
2830
2849
|
function ConversationGhost({
|
|
2831
2850
|
className,
|
|
2832
2851
|
"aria-label": ariaLabel = "Loading conversation",
|
|
2833
2852
|
...props
|
|
2834
2853
|
}) {
|
|
2835
|
-
return /* @__PURE__ */ (0,
|
|
2854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2836
2855
|
"div",
|
|
2837
2856
|
{
|
|
2838
2857
|
"aria-busy": "true",
|
|
@@ -2841,54 +2860,54 @@ function ConversationGhost({
|
|
|
2841
2860
|
role: "status",
|
|
2842
2861
|
...props,
|
|
2843
2862
|
children: [
|
|
2844
|
-
/* @__PURE__ */ (0,
|
|
2845
|
-
/* @__PURE__ */ (0,
|
|
2846
|
-
/* @__PURE__ */ (0,
|
|
2847
|
-
/* @__PURE__ */ (0,
|
|
2863
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2864
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "100%" }),
|
|
2865
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "86%" }),
|
|
2866
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "64%" })
|
|
2848
2867
|
] }) }),
|
|
2849
|
-
/* @__PURE__ */ (0,
|
|
2850
|
-
/* @__PURE__ */ (0,
|
|
2851
|
-
/* @__PURE__ */ (0,
|
|
2852
|
-
/* @__PURE__ */ (0,
|
|
2868
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2869
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "92%" }),
|
|
2870
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "78%" }),
|
|
2871
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "58%" })
|
|
2853
2872
|
] })
|
|
2854
2873
|
]
|
|
2855
2874
|
}
|
|
2856
2875
|
);
|
|
2857
2876
|
}
|
|
2858
2877
|
function SortableTableGhost(props) {
|
|
2859
|
-
return /* @__PURE__ */ (0,
|
|
2878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DataTableGhost, { ...props });
|
|
2860
2879
|
}
|
|
2861
2880
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2862
|
-
return /* @__PURE__ */ (0,
|
|
2863
|
-
/* @__PURE__ */ (0,
|
|
2864
|
-
/* @__PURE__ */ (0,
|
|
2865
|
-
/* @__PURE__ */ (0,
|
|
2866
|
-
/* @__PURE__ */ (0,
|
|
2881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2882
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2883
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2884
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, {}),
|
|
2885
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2867
2886
|
] }, index)) })
|
|
2868
2887
|
] });
|
|
2869
2888
|
}
|
|
2870
2889
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2871
|
-
return /* @__PURE__ */ (0,
|
|
2890
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2872
2891
|
}
|
|
2873
2892
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2874
|
-
return /* @__PURE__ */ (0,
|
|
2893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2875
2894
|
}
|
|
2876
2895
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2877
|
-
return /* @__PURE__ */ (0,
|
|
2878
|
-
/* @__PURE__ */ (0,
|
|
2879
|
-
/* @__PURE__ */ (0,
|
|
2880
|
-
/* @__PURE__ */ (0,
|
|
2896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2897
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
|
|
2898
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "42%" }),
|
|
2899
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2881
2900
|
] }),
|
|
2882
|
-
title && /* @__PURE__ */ (0,
|
|
2883
|
-
/* @__PURE__ */ (0,
|
|
2901
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2902
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2884
2903
|
] });
|
|
2885
2904
|
}
|
|
2886
2905
|
|
|
2887
2906
|
// src/components/Sidebar/Sidebar.tsx
|
|
2888
2907
|
var React16 = __toESM(require("react"), 1);
|
|
2889
|
-
var
|
|
2908
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2890
2909
|
var Sidebar = React16.forwardRef(
|
|
2891
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2910
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2892
2911
|
"aside",
|
|
2893
2912
|
{
|
|
2894
2913
|
ref,
|
|
@@ -2901,11 +2920,11 @@ var Sidebar = React16.forwardRef(
|
|
|
2901
2920
|
);
|
|
2902
2921
|
Sidebar.displayName = "Sidebar";
|
|
2903
2922
|
var SidebarHeader = React16.forwardRef(
|
|
2904
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2923
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2905
2924
|
);
|
|
2906
2925
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2907
2926
|
var SidebarBrand = React16.forwardRef(
|
|
2908
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2927
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2909
2928
|
);
|
|
2910
2929
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2911
2930
|
function SidebarAccountMenu({
|
|
@@ -2916,7 +2935,7 @@ function SidebarAccountMenu({
|
|
|
2916
2935
|
icon,
|
|
2917
2936
|
className
|
|
2918
2937
|
}) {
|
|
2919
|
-
return /* @__PURE__ */ (0,
|
|
2938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2920
2939
|
Dropdown,
|
|
2921
2940
|
{
|
|
2922
2941
|
align: "left",
|
|
@@ -2926,9 +2945,9 @@ function SidebarAccountMenu({
|
|
|
2926
2945
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2927
2946
|
selectedValue: "",
|
|
2928
2947
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2929
|
-
triggerContent: /* @__PURE__ */ (0,
|
|
2930
|
-
icon && /* @__PURE__ */ (0,
|
|
2931
|
-
/* @__PURE__ */ (0,
|
|
2948
|
+
triggerContent: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
|
|
2949
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2950
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2932
2951
|
] }),
|
|
2933
2952
|
triggerLabel,
|
|
2934
2953
|
triggerVariant: "tertiary"
|
|
@@ -2936,15 +2955,15 @@ function SidebarAccountMenu({
|
|
|
2936
2955
|
);
|
|
2937
2956
|
}
|
|
2938
2957
|
var SidebarNav = React16.forwardRef(
|
|
2939
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2958
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2940
2959
|
);
|
|
2941
2960
|
SidebarNav.displayName = "SidebarNav";
|
|
2942
2961
|
var SidebarSection = React16.forwardRef(
|
|
2943
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2962
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2944
2963
|
);
|
|
2945
2964
|
SidebarSection.displayName = "SidebarSection";
|
|
2946
2965
|
var SidebarNavItem = React16.forwardRef(
|
|
2947
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2966
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2948
2967
|
"button",
|
|
2949
2968
|
{
|
|
2950
2969
|
ref,
|
|
@@ -2954,16 +2973,16 @@ var SidebarNavItem = React16.forwardRef(
|
|
|
2954
2973
|
"aria-current": active ? "page" : void 0,
|
|
2955
2974
|
...props,
|
|
2956
2975
|
children: [
|
|
2957
|
-
icon && /* @__PURE__ */ (0,
|
|
2958
|
-
/* @__PURE__ */ (0,
|
|
2959
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
2976
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2977
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2978
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2960
2979
|
]
|
|
2961
2980
|
}
|
|
2962
2981
|
)
|
|
2963
2982
|
);
|
|
2964
2983
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2965
2984
|
var SidebarFooter = React16.forwardRef(
|
|
2966
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2985
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2967
2986
|
);
|
|
2968
2987
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2969
2988
|
|
|
@@ -2971,7 +2990,7 @@ SidebarFooter.displayName = "SidebarFooter";
|
|
|
2971
2990
|
var React17 = __toESM(require("react"), 1);
|
|
2972
2991
|
var import_react_dom4 = require("react-dom");
|
|
2973
2992
|
var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
|
|
2974
|
-
var
|
|
2993
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2975
2994
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2976
2995
|
useEscapeDismiss(80, onClose, open);
|
|
2977
2996
|
const bodyRef = React17.useRef(null);
|
|
@@ -3007,7 +3026,7 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
3007
3026
|
}, [open, loading]);
|
|
3008
3027
|
if (!open) return null;
|
|
3009
3028
|
return (0, import_react_dom4.createPortal)(
|
|
3010
|
-
/* @__PURE__ */ (0,
|
|
3029
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
3011
3030
|
"aside",
|
|
3012
3031
|
{
|
|
3013
3032
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -3016,15 +3035,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
3016
3035
|
role: "dialog",
|
|
3017
3036
|
onMouseDown: (event) => event.stopPropagation(),
|
|
3018
3037
|
children: [
|
|
3019
|
-
/* @__PURE__ */ (0,
|
|
3020
|
-
/* @__PURE__ */ (0,
|
|
3021
|
-
typeof title === "string" ? /* @__PURE__ */ (0,
|
|
3022
|
-
description && /* @__PURE__ */ (0,
|
|
3038
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
|
|
3039
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fractal-side-panel__heading", children: [
|
|
3040
|
+
typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "fractal-side-panel__title", children: title }),
|
|
3041
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "fractal-side-panel__description", children: description })
|
|
3023
3042
|
] }),
|
|
3024
|
-
/* @__PURE__ */ (0,
|
|
3043
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.Close, { size: 18 }) })
|
|
3025
3044
|
] }),
|
|
3026
|
-
/* @__PURE__ */ (0,
|
|
3027
|
-
footer && /* @__PURE__ */ (0,
|
|
3045
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UILoader, { label: loadingLabel }) : children }),
|
|
3046
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
|
|
3028
3047
|
]
|
|
3029
3048
|
}
|
|
3030
3049
|
) }),
|
|
@@ -3034,12 +3053,12 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
3034
3053
|
|
|
3035
3054
|
// src/components/Textarea/Textarea.tsx
|
|
3036
3055
|
var React18 = __toESM(require("react"), 1);
|
|
3037
|
-
var
|
|
3056
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3038
3057
|
var Textarea = React18.forwardRef(
|
|
3039
3058
|
({ className, fieldLabel, textStyle = "source", id, placeholder, ...props }, ref) => {
|
|
3040
3059
|
const generatedId = React18.useId();
|
|
3041
3060
|
const fieldId = id ?? generatedId;
|
|
3042
|
-
const input = /* @__PURE__ */ (0,
|
|
3061
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3043
3062
|
"textarea",
|
|
3044
3063
|
{
|
|
3045
3064
|
ref,
|
|
@@ -3050,9 +3069,10 @@ var Textarea = React18.forwardRef(
|
|
|
3050
3069
|
...props
|
|
3051
3070
|
}
|
|
3052
3071
|
);
|
|
3053
|
-
return fieldLabel ? /* @__PURE__ */ (0,
|
|
3072
|
+
return fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
|
|
3054
3073
|
input,
|
|
3055
|
-
/* @__PURE__ */ (0,
|
|
3074
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FloatingFieldBorder, { label: fieldLabel ?? "" }),
|
|
3075
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
|
|
3056
3076
|
] }) : input;
|
|
3057
3077
|
}
|
|
3058
3078
|
);
|
|
@@ -3060,9 +3080,9 @@ Textarea.displayName = "Textarea";
|
|
|
3060
3080
|
|
|
3061
3081
|
// src/components/TextButton/TextButton.tsx
|
|
3062
3082
|
var React19 = __toESM(require("react"), 1);
|
|
3063
|
-
var
|
|
3083
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3064
3084
|
var TextButton = React19.forwardRef(
|
|
3065
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
3085
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
3066
3086
|
"button",
|
|
3067
3087
|
{
|
|
3068
3088
|
ref,
|
|
@@ -3070,9 +3090,9 @@ var TextButton = React19.forwardRef(
|
|
|
3070
3090
|
type: "button",
|
|
3071
3091
|
...props,
|
|
3072
3092
|
children: [
|
|
3073
|
-
icon && iconPosition === "start" && /* @__PURE__ */ (0,
|
|
3074
|
-
/* @__PURE__ */ (0,
|
|
3075
|
-
icon && iconPosition === "end" && /* @__PURE__ */ (0,
|
|
3093
|
+
icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
3094
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children }),
|
|
3095
|
+
icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
3076
3096
|
]
|
|
3077
3097
|
}
|
|
3078
3098
|
)
|
|
@@ -3082,7 +3102,7 @@ TextButton.displayName = "TextButton";
|
|
|
3082
3102
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
3083
3103
|
var React20 = __toESM(require("react"), 1);
|
|
3084
3104
|
var import_fractal_icons15 = require("@mirror-physics/fractal-icons");
|
|
3085
|
-
var
|
|
3105
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3086
3106
|
function FileDropzone({
|
|
3087
3107
|
files,
|
|
3088
3108
|
onFilesChange,
|
|
@@ -3102,8 +3122,8 @@ function FileDropzone({
|
|
|
3102
3122
|
if (additions.length === 0) return;
|
|
3103
3123
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
3104
3124
|
};
|
|
3105
|
-
return /* @__PURE__ */ (0,
|
|
3106
|
-
/* @__PURE__ */ (0,
|
|
3125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
3126
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3107
3127
|
"input",
|
|
3108
3128
|
{
|
|
3109
3129
|
ref: inputRef,
|
|
@@ -3119,7 +3139,7 @@ function FileDropzone({
|
|
|
3119
3139
|
}
|
|
3120
3140
|
}
|
|
3121
3141
|
),
|
|
3122
|
-
/* @__PURE__ */ (0,
|
|
3142
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3123
3143
|
"button",
|
|
3124
3144
|
{
|
|
3125
3145
|
className: "fractal-file-dropzone__target",
|
|
@@ -3142,18 +3162,18 @@ function FileDropzone({
|
|
|
3142
3162
|
addFiles(event.dataTransfer.files);
|
|
3143
3163
|
},
|
|
3144
3164
|
children: [
|
|
3145
|
-
/* @__PURE__ */ (0,
|
|
3146
|
-
/* @__PURE__ */ (0,
|
|
3147
|
-
/* @__PURE__ */ (0,
|
|
3148
|
-
description && /* @__PURE__ */ (0,
|
|
3165
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons15.FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
3166
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
|
|
3167
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
3168
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
|
|
3149
3169
|
] })
|
|
3150
3170
|
]
|
|
3151
3171
|
}
|
|
3152
3172
|
),
|
|
3153
|
-
files.length > 0 && /* @__PURE__ */ (0,
|
|
3154
|
-
/* @__PURE__ */ (0,
|
|
3155
|
-
/* @__PURE__ */ (0,
|
|
3156
|
-
/* @__PURE__ */ (0,
|
|
3173
|
+
files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
|
|
3174
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
3175
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
3176
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3157
3177
|
"button",
|
|
3158
3178
|
{
|
|
3159
3179
|
className: "fractal-file-dropzone__remove",
|
|
@@ -3161,7 +3181,7 @@ function FileDropzone({
|
|
|
3161
3181
|
"aria-label": `Remove ${file.name}`,
|
|
3162
3182
|
disabled,
|
|
3163
3183
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
3164
|
-
children: /* @__PURE__ */ (0,
|
|
3184
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons15.Close, { "aria-hidden": "true", size: 14 })
|
|
3165
3185
|
}
|
|
3166
3186
|
)
|
|
3167
3187
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -3175,7 +3195,7 @@ function formatFileSize(bytes) {
|
|
|
3175
3195
|
|
|
3176
3196
|
// src/components/Pagination/Pagination.tsx
|
|
3177
3197
|
var import_fractal_icons16 = require("@mirror-physics/fractal-icons");
|
|
3178
|
-
var
|
|
3198
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3179
3199
|
function Pagination({
|
|
3180
3200
|
page,
|
|
3181
3201
|
pageSize,
|
|
@@ -3191,10 +3211,10 @@ function Pagination({
|
|
|
3191
3211
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
3192
3212
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
3193
3213
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
3194
|
-
return /* @__PURE__ */ (0,
|
|
3195
|
-
/* @__PURE__ */ (0,
|
|
3196
|
-
/* @__PURE__ */ (0,
|
|
3197
|
-
canChangePageSize && /* @__PURE__ */ (0,
|
|
3214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
3215
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
3216
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "fractal-pagination__controls", children: [
|
|
3217
|
+
canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3198
3218
|
Dropdown,
|
|
3199
3219
|
{
|
|
3200
3220
|
align: "right",
|
|
@@ -3211,7 +3231,7 @@ function Pagination({
|
|
|
3211
3231
|
triggerVariant: "tertiary"
|
|
3212
3232
|
}
|
|
3213
3233
|
),
|
|
3214
|
-
/* @__PURE__ */ (0,
|
|
3234
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3215
3235
|
"button",
|
|
3216
3236
|
{
|
|
3217
3237
|
className: "fractal-pagination__button",
|
|
@@ -3220,15 +3240,15 @@ function Pagination({
|
|
|
3220
3240
|
title: "Previous page",
|
|
3221
3241
|
disabled: currentPage === 1 || totalItems === 0,
|
|
3222
3242
|
onClick: () => onPageChange(currentPage - 1),
|
|
3223
|
-
children: /* @__PURE__ */ (0,
|
|
3243
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons16.ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
3224
3244
|
}
|
|
3225
3245
|
),
|
|
3226
|
-
/* @__PURE__ */ (0,
|
|
3246
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
3227
3247
|
currentPage,
|
|
3228
3248
|
" of ",
|
|
3229
3249
|
totalPages
|
|
3230
3250
|
] }),
|
|
3231
|
-
/* @__PURE__ */ (0,
|
|
3251
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3232
3252
|
"button",
|
|
3233
3253
|
{
|
|
3234
3254
|
className: "fractal-pagination__button",
|
|
@@ -3237,7 +3257,7 @@ function Pagination({
|
|
|
3237
3257
|
title: "Next page",
|
|
3238
3258
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
3239
3259
|
onClick: () => onPageChange(currentPage + 1),
|
|
3240
|
-
children: /* @__PURE__ */ (0,
|
|
3260
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons16.ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
3241
3261
|
}
|
|
3242
3262
|
)
|
|
3243
3263
|
] })
|
|
@@ -3247,7 +3267,7 @@ function Pagination({
|
|
|
3247
3267
|
// src/components/ColumnEditor/ColumnEditor.tsx
|
|
3248
3268
|
var React21 = __toESM(require("react"), 1);
|
|
3249
3269
|
var import_fractal_icons17 = require("@mirror-physics/fractal-icons");
|
|
3250
|
-
var
|
|
3270
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3251
3271
|
var equal = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
|
|
3252
3272
|
function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLabel = "Hidden columns", className }) {
|
|
3253
3273
|
const [open, setOpen] = React21.useState(false);
|
|
@@ -3387,7 +3407,7 @@ function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLa
|
|
|
3387
3407
|
}
|
|
3388
3408
|
function row(key, isHidden, index) {
|
|
3389
3409
|
const item = items.find((item2) => item2.id === key);
|
|
3390
|
-
return /* @__PURE__ */ (0,
|
|
3410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3391
3411
|
"li",
|
|
3392
3412
|
{
|
|
3393
3413
|
className: "fractal-column-editor__row",
|
|
@@ -3396,40 +3416,40 @@ function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLa
|
|
|
3396
3416
|
"data-dragging": preview?.active === key || void 0,
|
|
3397
3417
|
onPointerDown: (event) => start(event, key),
|
|
3398
3418
|
children: [
|
|
3399
|
-
/* @__PURE__ */ (0,
|
|
3400
|
-
/* @__PURE__ */ (0,
|
|
3401
|
-
/* @__PURE__ */ (0,
|
|
3402
|
-
/* @__PURE__ */ (0,
|
|
3403
|
-
/* @__PURE__ */ (0,
|
|
3419
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.DotsSixVertical, { className: "fractal-column-editor__grip", "aria-hidden": "true" }),
|
|
3420
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fractal-column-editor__name", children: item.label }),
|
|
3421
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "fractal-column-editor__actions", onPointerDown: (event) => event.stopPropagation(), children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.Eye, { "aria-hidden": "true" }), "aria-label": `Show ${item.label} column`, onClick: () => commit([...committed, key], `${item.label} shown`) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
3422
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.ArrowUp, { "aria-hidden": "true" }), "aria-label": `Move ${item.label} up`, disabled: index === 0, onClick: () => move(key, -1) }),
|
|
3423
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: index === visible.length - 1 && !item.required ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.ArrowDown, { "aria-hidden": "true" }), "aria-label": index === visible.length - 1 && !item.required ? `Hide ${item.label} column` : `Move ${item.label} down`, disabled: index === visible.length - 1 && item.required, onClick: () => move(key, 1) })
|
|
3404
3424
|
] }) })
|
|
3405
3425
|
]
|
|
3406
3426
|
},
|
|
3407
3427
|
key
|
|
3408
3428
|
);
|
|
3409
3429
|
}
|
|
3410
|
-
return /* @__PURE__ */ (0,
|
|
3411
|
-
/* @__PURE__ */ (0,
|
|
3430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("fractal-column-editor", className), ref: root, children: [
|
|
3431
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { ref: trigger, controlSize: "lg", buttonType: "secondary", icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.Gear, { "aria-hidden": "true" }), iconPosition: "right", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => {
|
|
3412
3432
|
cancel();
|
|
3413
3433
|
setOpen((current) => !current);
|
|
3414
3434
|
}, children: label }),
|
|
3415
|
-
open ? /* @__PURE__ */ (0,
|
|
3416
|
-
/* @__PURE__ */ (0,
|
|
3417
|
-
/* @__PURE__ */ (0,
|
|
3418
|
-
/* @__PURE__ */ (0,
|
|
3435
|
+
open ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { id, className: "fractal-column-editor__panel", ref: panel, role: "dialog", "data-dragging": Boolean(preview) || void 0, "aria-label": label, tabIndex: -1, onPointerMove: update, onPointerUp: finish, onPointerCancel: cancel, onLostPointerCapture: cancel, children: [
|
|
3436
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: "fractal-column-editor__list", "data-column-editor-group": "visible", "aria-label": "Visible columns", children: visible.map((key, index) => row(key, false, index)) }),
|
|
3437
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { "data-column-editor-group": "hidden", className: "fractal-column-editor__hidden", "aria-label": hiddenLabel, children: [
|
|
3438
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "fractal-column-editor__divider", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
|
|
3419
3439
|
hiddenLabel,
|
|
3420
|
-
/* @__PURE__ */ (0,
|
|
3440
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" })
|
|
3421
3441
|
] }) }),
|
|
3422
|
-
/* @__PURE__ */ (0,
|
|
3423
|
-
!hidden.length ? /* @__PURE__ */ (0,
|
|
3442
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: "fractal-column-editor__list", children: hidden.map((key, index) => row(key, true, index)) }),
|
|
3443
|
+
!hidden.length ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "fractal-column-editor__empty", children: "Drag columns here to hide them." }) : null
|
|
3424
3444
|
] }),
|
|
3425
|
-
/* @__PURE__ */ (0,
|
|
3445
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fractal-column-editor__announcement", role: "status", "aria-live": "polite", children: announcement })
|
|
3426
3446
|
] }) : null
|
|
3427
3447
|
] });
|
|
3428
3448
|
}
|
|
3429
3449
|
|
|
3430
3450
|
// src/components/Tooltip/Tooltip.tsx
|
|
3431
3451
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
|
|
3432
|
-
var
|
|
3452
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3433
3453
|
function Tooltip({
|
|
3434
3454
|
content,
|
|
3435
3455
|
children,
|
|
@@ -3440,9 +3460,9 @@ function Tooltip({
|
|
|
3440
3460
|
className
|
|
3441
3461
|
}) {
|
|
3442
3462
|
if (disabled || content == null || content === "") return children;
|
|
3443
|
-
return /* @__PURE__ */ (0,
|
|
3444
|
-
/* @__PURE__ */ (0,
|
|
3445
|
-
/* @__PURE__ */ (0,
|
|
3463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(TooltipPrimitive.Root, { children: [
|
|
3464
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
|
|
3465
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3446
3466
|
TooltipPrimitive.Content,
|
|
3447
3467
|
{
|
|
3448
3468
|
side: placement,
|