@mirror-physics/fractal-ui 0.2.0-next.73 → 0.2.0-next.74
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 +368 -265
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +141 -16
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +26 -1
- package/dist/index.d.ts +26 -1
- package/dist/index.js +373 -272
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1033,10 +1033,109 @@ var AlertDescription = React9.forwardRef(
|
|
|
1033
1033
|
);
|
|
1034
1034
|
AlertDescription.displayName = "AlertDescription";
|
|
1035
1035
|
|
|
1036
|
-
// src/components/
|
|
1036
|
+
// src/components/Toast/Toast.tsx
|
|
1037
|
+
import * as React10 from "react";
|
|
1038
|
+
import { createPortal } from "react-dom";
|
|
1039
|
+
import { CircleCheck as CircleCheck2, CircleClose as CircleClose2, CircleInfo as CircleInfo2, Close, Warning as Warning2 } from "@mirror-physics/fractal-icons";
|
|
1037
1040
|
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1038
|
-
|
|
1041
|
+
var defaultIcons2 = {
|
|
1042
|
+
default: CircleInfo2,
|
|
1043
|
+
info: CircleInfo2,
|
|
1044
|
+
success: CircleCheck2,
|
|
1045
|
+
warning: Warning2,
|
|
1046
|
+
error: CircleClose2
|
|
1047
|
+
};
|
|
1048
|
+
var Toast = React10.forwardRef(function Toast2({
|
|
1049
|
+
action,
|
|
1050
|
+
children,
|
|
1051
|
+
className,
|
|
1052
|
+
dismissLabel = "Dismiss notification",
|
|
1053
|
+
duration,
|
|
1054
|
+
icon,
|
|
1055
|
+
onBlurCapture,
|
|
1056
|
+
onDismiss,
|
|
1057
|
+
onFocusCapture,
|
|
1058
|
+
onPointerEnter,
|
|
1059
|
+
onPointerLeave,
|
|
1060
|
+
role,
|
|
1061
|
+
variant = "default",
|
|
1062
|
+
...props
|
|
1063
|
+
}, ref) {
|
|
1064
|
+
const [paused, setPaused] = React10.useState(false);
|
|
1065
|
+
const dismissRef = React10.useRef(onDismiss);
|
|
1066
|
+
const DefaultIcon = defaultIcons2[variant];
|
|
1067
|
+
const resolvedDuration = duration === void 0 ? variant === "error" ? null : 5e3 : duration;
|
|
1068
|
+
React10.useEffect(() => {
|
|
1069
|
+
dismissRef.current = onDismiss;
|
|
1070
|
+
}, [onDismiss]);
|
|
1071
|
+
React10.useEffect(() => {
|
|
1072
|
+
if (!dismissRef.current || paused || resolvedDuration === null || resolvedDuration <= 0) return;
|
|
1073
|
+
const timeout = window.setTimeout(() => dismissRef.current?.(), resolvedDuration);
|
|
1074
|
+
return () => window.clearTimeout(timeout);
|
|
1075
|
+
}, [paused, resolvedDuration]);
|
|
1076
|
+
const announcementRole = role ?? (variant === "error" ? "alert" : "status");
|
|
1039
1077
|
return /* @__PURE__ */ jsxs11(
|
|
1078
|
+
"div",
|
|
1079
|
+
{
|
|
1080
|
+
ref,
|
|
1081
|
+
"aria-atomic": "true",
|
|
1082
|
+
"aria-live": announcementRole === "alert" ? "assertive" : "polite",
|
|
1083
|
+
className: cn("fractal-toast", `fractal-toast--${variant}`, className),
|
|
1084
|
+
role: announcementRole,
|
|
1085
|
+
onBlurCapture: (event) => {
|
|
1086
|
+
onBlurCapture?.(event);
|
|
1087
|
+
if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
|
|
1088
|
+
},
|
|
1089
|
+
onFocusCapture: (event) => {
|
|
1090
|
+
onFocusCapture?.(event);
|
|
1091
|
+
setPaused(true);
|
|
1092
|
+
},
|
|
1093
|
+
onPointerEnter: (event) => {
|
|
1094
|
+
onPointerEnter?.(event);
|
|
1095
|
+
setPaused(true);
|
|
1096
|
+
},
|
|
1097
|
+
onPointerLeave: (event) => {
|
|
1098
|
+
onPointerLeave?.(event);
|
|
1099
|
+
setPaused(false);
|
|
1100
|
+
},
|
|
1101
|
+
...props,
|
|
1102
|
+
children: [
|
|
1103
|
+
/* @__PURE__ */ jsx12("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) }),
|
|
1104
|
+
/* @__PURE__ */ jsx12("div", { className: "fractal-toast__content", children }),
|
|
1105
|
+
action && /* @__PURE__ */ jsx12("div", { className: "fractal-toast__action", children: action }),
|
|
1106
|
+
/* @__PURE__ */ jsx12(
|
|
1107
|
+
"button",
|
|
1108
|
+
{
|
|
1109
|
+
"aria-label": dismissLabel,
|
|
1110
|
+
className: "fractal-toast__dismiss",
|
|
1111
|
+
onClick: onDismiss,
|
|
1112
|
+
type: "button",
|
|
1113
|
+
children: /* @__PURE__ */ jsx12(Close, { "aria-hidden": "true", size: 14 })
|
|
1114
|
+
}
|
|
1115
|
+
)
|
|
1116
|
+
]
|
|
1117
|
+
}
|
|
1118
|
+
);
|
|
1119
|
+
});
|
|
1120
|
+
var ToastViewport = React10.forwardRef(function ToastViewport2({ children, className, portal = true, position = "top-center", ...props }, ref) {
|
|
1121
|
+
const viewport = /* @__PURE__ */ jsx12(
|
|
1122
|
+
"div",
|
|
1123
|
+
{
|
|
1124
|
+
ref,
|
|
1125
|
+
className: cn("fractal-toast-viewport", `fractal-toast-viewport--${position}`, className),
|
|
1126
|
+
"data-position": position,
|
|
1127
|
+
...props,
|
|
1128
|
+
children
|
|
1129
|
+
}
|
|
1130
|
+
);
|
|
1131
|
+
if (!portal || typeof document === "undefined") return viewport;
|
|
1132
|
+
return createPortal(viewport, document.body);
|
|
1133
|
+
});
|
|
1134
|
+
|
|
1135
|
+
// src/components/Toggle/Toggle.tsx
|
|
1136
|
+
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1137
|
+
function Toggle({ checked, onChange, label, className }) {
|
|
1138
|
+
return /* @__PURE__ */ jsxs12(
|
|
1040
1139
|
"button",
|
|
1041
1140
|
{
|
|
1042
1141
|
type: "button",
|
|
@@ -1045,19 +1144,19 @@ function Toggle({ checked, onChange, label, className }) {
|
|
|
1045
1144
|
className: cn("fractal-toggle", className),
|
|
1046
1145
|
onClick: () => onChange(!checked),
|
|
1047
1146
|
children: [
|
|
1048
|
-
/* @__PURE__ */
|
|
1049
|
-
label && /* @__PURE__ */
|
|
1147
|
+
/* @__PURE__ */ jsx13("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx13("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
|
|
1148
|
+
label && /* @__PURE__ */ jsx13("span", { className: "fractal-toggle-label", children: label })
|
|
1050
1149
|
]
|
|
1051
1150
|
}
|
|
1052
1151
|
);
|
|
1053
1152
|
}
|
|
1054
1153
|
|
|
1055
1154
|
// src/components/Modal/Modal.tsx
|
|
1056
|
-
import * as
|
|
1057
|
-
import { createPortal } from "react-dom";
|
|
1155
|
+
import * as React11 from "react";
|
|
1156
|
+
import { createPortal as createPortal2 } from "react-dom";
|
|
1058
1157
|
|
|
1059
1158
|
// src/hooks/useEscapeDismiss.ts
|
|
1060
|
-
import { useEffect as
|
|
1159
|
+
import { useEffect as useEffect3, useRef as useRef4 } from "react";
|
|
1061
1160
|
var nextId = 0;
|
|
1062
1161
|
var stack = [];
|
|
1063
1162
|
function insertSorted(entry) {
|
|
@@ -1090,9 +1189,9 @@ function ensureGlobalListener() {
|
|
|
1090
1189
|
);
|
|
1091
1190
|
}
|
|
1092
1191
|
function useEscapeDismiss(priority, handler, enabled = true) {
|
|
1093
|
-
const handlerRef =
|
|
1192
|
+
const handlerRef = useRef4(handler);
|
|
1094
1193
|
handlerRef.current = handler;
|
|
1095
|
-
|
|
1194
|
+
useEffect3(() => {
|
|
1096
1195
|
if (!enabled) return;
|
|
1097
1196
|
ensureGlobalListener();
|
|
1098
1197
|
const id = nextId++;
|
|
@@ -1108,7 +1207,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
|
|
|
1108
1207
|
|
|
1109
1208
|
// src/components/UILoader/UILoader.tsx
|
|
1110
1209
|
import { useId } from "react";
|
|
1111
|
-
import { jsx as
|
|
1210
|
+
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1112
1211
|
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";
|
|
1113
1212
|
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";
|
|
1114
1213
|
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";
|
|
@@ -1117,7 +1216,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1117
1216
|
const clipId = `fractal-ui-loader-clip-${rawId}`;
|
|
1118
1217
|
const gradientId = `fractal-ui-loader-gradient-${rawId}`;
|
|
1119
1218
|
const height = typeof size === "number" ? `${size}px` : size;
|
|
1120
|
-
return /* @__PURE__ */
|
|
1219
|
+
return /* @__PURE__ */ jsx14(
|
|
1121
1220
|
"span",
|
|
1122
1221
|
{
|
|
1123
1222
|
"aria-hidden": ariaHidden || void 0,
|
|
@@ -1125,52 +1224,52 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
|
|
|
1125
1224
|
className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
|
|
1126
1225
|
role: ariaHidden ? void 0 : "status",
|
|
1127
1226
|
style,
|
|
1128
|
-
children: /* @__PURE__ */
|
|
1129
|
-
/* @__PURE__ */
|
|
1130
|
-
/* @__PURE__ */
|
|
1131
|
-
/* @__PURE__ */
|
|
1132
|
-
/* @__PURE__ */
|
|
1227
|
+
children: /* @__PURE__ */ jsxs13("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
|
|
1228
|
+
/* @__PURE__ */ jsxs13("defs", { children: [
|
|
1229
|
+
/* @__PURE__ */ jsxs13("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
|
|
1230
|
+
/* @__PURE__ */ jsx14("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
|
|
1231
|
+
/* @__PURE__ */ jsx14("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
|
|
1133
1232
|
] }),
|
|
1134
|
-
/* @__PURE__ */
|
|
1135
|
-
/* @__PURE__ */
|
|
1136
|
-
/* @__PURE__ */
|
|
1137
|
-
/* @__PURE__ */
|
|
1233
|
+
/* @__PURE__ */ jsxs13("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
1234
|
+
/* @__PURE__ */ jsx14("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
|
|
1235
|
+
/* @__PURE__ */ jsx14("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
|
|
1236
|
+
/* @__PURE__ */ jsx14("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
|
|
1138
1237
|
] }),
|
|
1139
|
-
/* @__PURE__ */
|
|
1140
|
-
/* @__PURE__ */
|
|
1141
|
-
/* @__PURE__ */
|
|
1142
|
-
/* @__PURE__ */
|
|
1238
|
+
/* @__PURE__ */ jsxs13("clipPath", { id: clipId, children: [
|
|
1239
|
+
/* @__PURE__ */ jsx14("path", { d: LEFT }),
|
|
1240
|
+
/* @__PURE__ */ jsx14("path", { d: CENTER }),
|
|
1241
|
+
/* @__PURE__ */ jsx14("path", { d: RIGHT })
|
|
1143
1242
|
] })
|
|
1144
1243
|
] }),
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
/* @__PURE__ */
|
|
1147
|
-
/* @__PURE__ */
|
|
1148
|
-
/* @__PURE__ */
|
|
1244
|
+
/* @__PURE__ */ jsx14("path", { d: CENTER, fill: `url(#${gradientId})` }),
|
|
1245
|
+
/* @__PURE__ */ jsx14("path", { d: RIGHT, fill: `url(#${gradientId})` }),
|
|
1246
|
+
/* @__PURE__ */ jsx14("path", { d: LEFT, fill: `url(#${gradientId})` }),
|
|
1247
|
+
/* @__PURE__ */ jsx14("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx14("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx14("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
|
|
1149
1248
|
] })
|
|
1150
1249
|
}
|
|
1151
1250
|
);
|
|
1152
1251
|
}
|
|
1153
1252
|
|
|
1154
1253
|
// src/components/Modal/Modal.tsx
|
|
1155
|
-
import { jsx as
|
|
1156
|
-
var CloseIcon = () => /* @__PURE__ */
|
|
1254
|
+
import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1255
|
+
var CloseIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1157
1256
|
function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
|
|
1158
|
-
const [bodyScrolled, setBodyScrolled] =
|
|
1257
|
+
const [bodyScrolled, setBodyScrolled] = React11.useState(false);
|
|
1159
1258
|
useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
|
|
1160
|
-
|
|
1259
|
+
React11.useEffect(() => {
|
|
1161
1260
|
if (open) setBodyScrolled(false);
|
|
1162
1261
|
}, [open]);
|
|
1163
1262
|
if (!open) return null;
|
|
1164
1263
|
const sizeClass = `fractal-modal-panel--${size}`;
|
|
1165
1264
|
const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
|
|
1166
|
-
return
|
|
1167
|
-
/* @__PURE__ */
|
|
1265
|
+
return createPortal2(
|
|
1266
|
+
/* @__PURE__ */ jsx15("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs14(
|
|
1168
1267
|
"div",
|
|
1169
1268
|
{
|
|
1170
1269
|
className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
|
|
1171
1270
|
onClick: (e) => e.stopPropagation(),
|
|
1172
1271
|
children: [
|
|
1173
|
-
/* @__PURE__ */
|
|
1272
|
+
/* @__PURE__ */ jsxs14(
|
|
1174
1273
|
"div",
|
|
1175
1274
|
{
|
|
1176
1275
|
className: cn(
|
|
@@ -1179,12 +1278,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1179
1278
|
scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
|
|
1180
1279
|
),
|
|
1181
1280
|
children: [
|
|
1182
|
-
/* @__PURE__ */
|
|
1183
|
-
!noClose && /* @__PURE__ */
|
|
1281
|
+
/* @__PURE__ */ jsx15("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
|
|
1282
|
+
!noClose && /* @__PURE__ */ jsx15("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx15(CloseIcon, {}) })
|
|
1184
1283
|
]
|
|
1185
1284
|
}
|
|
1186
1285
|
),
|
|
1187
|
-
/* @__PURE__ */
|
|
1286
|
+
/* @__PURE__ */ jsx15(
|
|
1188
1287
|
"div",
|
|
1189
1288
|
{
|
|
1190
1289
|
"aria-busy": loading || void 0,
|
|
@@ -1195,10 +1294,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1195
1294
|
scrollable && "fractal-modal-body--scrollable"
|
|
1196
1295
|
),
|
|
1197
1296
|
onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
|
|
1198
|
-
children: loading ? /* @__PURE__ */
|
|
1297
|
+
children: loading ? /* @__PURE__ */ jsx15(UILoader, { label: loadingLabel }) : children
|
|
1199
1298
|
}
|
|
1200
1299
|
),
|
|
1201
|
-
footer && /* @__PURE__ */
|
|
1300
|
+
footer && /* @__PURE__ */ jsx15("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
|
|
1202
1301
|
]
|
|
1203
1302
|
}
|
|
1204
1303
|
) }),
|
|
@@ -1207,17 +1306,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
|
|
|
1207
1306
|
}
|
|
1208
1307
|
|
|
1209
1308
|
// src/components/DataTable/DataTable.tsx
|
|
1210
|
-
import { jsx as
|
|
1309
|
+
import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1211
1310
|
function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
|
|
1212
|
-
return /* @__PURE__ */
|
|
1213
|
-
header && /* @__PURE__ */
|
|
1214
|
-
data.length === 0 ? /* @__PURE__ */
|
|
1215
|
-
/* @__PURE__ */
|
|
1216
|
-
/* @__PURE__ */
|
|
1311
|
+
return /* @__PURE__ */ jsx16("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs15("div", { className: "fractal-datatable-surface", children: [
|
|
1312
|
+
header && /* @__PURE__ */ jsx16("div", { className: "fractal-datatable-header", children: header }),
|
|
1313
|
+
data.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs15("table", { className: "fractal-datatable-table", children: [
|
|
1314
|
+
/* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsx16("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx16("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
|
|
1315
|
+
/* @__PURE__ */ jsx16("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx16(
|
|
1217
1316
|
"tr",
|
|
1218
1317
|
{
|
|
1219
1318
|
className: "fractal-datatable-row",
|
|
1220
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
1319
|
+
children: columns.map((col) => /* @__PURE__ */ jsx16("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
|
|
1221
1320
|
},
|
|
1222
1321
|
rowIndex
|
|
1223
1322
|
)) })
|
|
@@ -1226,9 +1325,9 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
|
|
|
1226
1325
|
}
|
|
1227
1326
|
|
|
1228
1327
|
// src/components/Dropdown/Dropdown.tsx
|
|
1229
|
-
import * as
|
|
1328
|
+
import * as React12 from "react";
|
|
1230
1329
|
import { ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
|
|
1231
|
-
import { Fragment as Fragment2, jsx as
|
|
1330
|
+
import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1232
1331
|
var MARGIN = 4;
|
|
1233
1332
|
function Dropdown({
|
|
1234
1333
|
items,
|
|
@@ -1250,10 +1349,10 @@ function Dropdown({
|
|
|
1250
1349
|
closeOnSelect = true,
|
|
1251
1350
|
disabled = false
|
|
1252
1351
|
}) {
|
|
1253
|
-
const [open, setOpen] =
|
|
1254
|
-
const triggerRef =
|
|
1255
|
-
const panelRef =
|
|
1256
|
-
const [panelStyle, setPanelStyle] =
|
|
1352
|
+
const [open, setOpen] = React12.useState(false);
|
|
1353
|
+
const triggerRef = React12.useRef(null);
|
|
1354
|
+
const panelRef = React12.useRef(null);
|
|
1355
|
+
const [panelStyle, setPanelStyle] = React12.useState({});
|
|
1257
1356
|
const visibleItems = items.filter(
|
|
1258
1357
|
(item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
|
|
1259
1358
|
);
|
|
@@ -1263,7 +1362,7 @@ function Dropdown({
|
|
|
1263
1362
|
const isUp = direction === "up";
|
|
1264
1363
|
const isHorizontalDirection = direction === "left" || direction === "right";
|
|
1265
1364
|
const ChevronIcon = direction === "up" ? ChevronUp : direction === "left" ? ChevronLeft : direction === "right" ? ChevronRight2 : ChevronDown;
|
|
1266
|
-
|
|
1365
|
+
React12.useLayoutEffect(() => {
|
|
1267
1366
|
if (!open || !triggerRef.current || !panelRef.current) return;
|
|
1268
1367
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
|
1269
1368
|
const panelRect = panelRef.current.getBoundingClientRect();
|
|
@@ -1314,7 +1413,7 @@ function Dropdown({
|
|
|
1314
1413
|
}
|
|
1315
1414
|
setPanelStyle({ top, left, right });
|
|
1316
1415
|
}, [open, direction, isHorizontalDirection, isUp, align]);
|
|
1317
|
-
|
|
1416
|
+
React12.useEffect(() => {
|
|
1318
1417
|
if (!open) return;
|
|
1319
1418
|
const handleClickOutside = (e) => {
|
|
1320
1419
|
const target = e.target;
|
|
@@ -1324,8 +1423,8 @@ function Dropdown({
|
|
|
1324
1423
|
document.addEventListener("mousedown", handleClickOutside);
|
|
1325
1424
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1326
1425
|
}, [open]);
|
|
1327
|
-
return /* @__PURE__ */
|
|
1328
|
-
/* @__PURE__ */
|
|
1426
|
+
return /* @__PURE__ */ jsxs16("div", { className: cn("fractal-dropdown", className), children: [
|
|
1427
|
+
/* @__PURE__ */ jsxs16(
|
|
1329
1428
|
"button",
|
|
1330
1429
|
{
|
|
1331
1430
|
ref: triggerRef,
|
|
@@ -1344,15 +1443,15 @@ function Dropdown({
|
|
|
1344
1443
|
triggerClassName
|
|
1345
1444
|
),
|
|
1346
1445
|
children: [
|
|
1347
|
-
triggerContent != null ? triggerContent : /* @__PURE__ */
|
|
1348
|
-
selected.icon != null && /* @__PURE__ */
|
|
1349
|
-
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */
|
|
1446
|
+
triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs16(Fragment2, { children: [
|
|
1447
|
+
selected.icon != null && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
|
|
1448
|
+
selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-selected-text", children: selected.description })
|
|
1350
1449
|
] }),
|
|
1351
|
-
!noChevron && !iconOnly && /* @__PURE__ */
|
|
1450
|
+
!noChevron && !iconOnly && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx17(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
|
|
1352
1451
|
]
|
|
1353
1452
|
}
|
|
1354
1453
|
),
|
|
1355
|
-
open && /* @__PURE__ */
|
|
1454
|
+
open && /* @__PURE__ */ jsxs16(
|
|
1356
1455
|
"div",
|
|
1357
1456
|
{
|
|
1358
1457
|
ref: panelRef,
|
|
@@ -1361,21 +1460,21 @@ function Dropdown({
|
|
|
1361
1460
|
className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
|
|
1362
1461
|
style: panelStyle,
|
|
1363
1462
|
children: [
|
|
1364
|
-
label != null && /* @__PURE__ */
|
|
1463
|
+
label != null && /* @__PURE__ */ jsx17("div", { className: "fractal-dropdown-label", children: label }),
|
|
1365
1464
|
visibleItems.map((item, index) => {
|
|
1366
|
-
const topDivider = item.border === "top" ? /* @__PURE__ */
|
|
1367
|
-
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */
|
|
1465
|
+
const topDivider = item.border === "top" ? /* @__PURE__ */ jsx17("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1466
|
+
const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx17("div", { className: "fractal-dropdown-separator" }) : null;
|
|
1368
1467
|
if (item.kind === "header") {
|
|
1369
|
-
return /* @__PURE__ */
|
|
1468
|
+
return /* @__PURE__ */ jsxs16(React12.Fragment, { children: [
|
|
1370
1469
|
topDivider,
|
|
1371
|
-
/* @__PURE__ */
|
|
1470
|
+
/* @__PURE__ */ jsx17("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
|
|
1372
1471
|
bottomDivider
|
|
1373
1472
|
] }, `header-${index}`);
|
|
1374
1473
|
}
|
|
1375
1474
|
const isSelected = item.value === selectedValue;
|
|
1376
|
-
return /* @__PURE__ */
|
|
1475
|
+
return /* @__PURE__ */ jsxs16(React12.Fragment, { children: [
|
|
1377
1476
|
topDivider,
|
|
1378
|
-
/* @__PURE__ */
|
|
1477
|
+
/* @__PURE__ */ jsxs16(
|
|
1379
1478
|
"button",
|
|
1380
1479
|
{
|
|
1381
1480
|
type: "button",
|
|
@@ -1387,9 +1486,9 @@ function Dropdown({
|
|
|
1387
1486
|
},
|
|
1388
1487
|
className: "fractal-dropdown-option",
|
|
1389
1488
|
children: [
|
|
1390
|
-
item.icon != null && /* @__PURE__ */
|
|
1391
|
-
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */
|
|
1392
|
-
item.trailing != null && /* @__PURE__ */
|
|
1489
|
+
item.icon != null && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-icon", children: item.icon }),
|
|
1490
|
+
item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-option-text", children: item.description }),
|
|
1491
|
+
item.trailing != null && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-trailing", children: item.trailing })
|
|
1393
1492
|
]
|
|
1394
1493
|
}
|
|
1395
1494
|
),
|
|
@@ -1403,10 +1502,10 @@ function Dropdown({
|
|
|
1403
1502
|
}
|
|
1404
1503
|
|
|
1405
1504
|
// src/components/Link/Link.tsx
|
|
1406
|
-
import * as
|
|
1407
|
-
import { jsx as
|
|
1408
|
-
var Link =
|
|
1409
|
-
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */
|
|
1505
|
+
import * as React13 from "react";
|
|
1506
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1507
|
+
var Link = React13.forwardRef(
|
|
1508
|
+
({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx18(
|
|
1410
1509
|
"a",
|
|
1411
1510
|
{
|
|
1412
1511
|
ref,
|
|
@@ -1418,10 +1517,10 @@ var Link = React12.forwardRef(
|
|
|
1418
1517
|
Link.displayName = "Link";
|
|
1419
1518
|
|
|
1420
1519
|
// src/components/Chip/Chip.tsx
|
|
1421
|
-
import * as
|
|
1422
|
-
import { jsx as
|
|
1423
|
-
var Chip =
|
|
1424
|
-
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */
|
|
1520
|
+
import * as React14 from "react";
|
|
1521
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1522
|
+
var Chip = React14.forwardRef(
|
|
1523
|
+
({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1425
1524
|
"span",
|
|
1426
1525
|
{
|
|
1427
1526
|
ref,
|
|
@@ -1434,7 +1533,7 @@ Chip.displayName = "Chip";
|
|
|
1434
1533
|
|
|
1435
1534
|
// src/components/Checkbox/Checkbox.tsx
|
|
1436
1535
|
import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
|
|
1437
|
-
import { jsx as
|
|
1536
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1438
1537
|
function Checkbox({
|
|
1439
1538
|
checked,
|
|
1440
1539
|
indeterminate = false,
|
|
@@ -1445,7 +1544,7 @@ function Checkbox({
|
|
|
1445
1544
|
onKeyDown,
|
|
1446
1545
|
...props
|
|
1447
1546
|
}) {
|
|
1448
|
-
return /* @__PURE__ */
|
|
1547
|
+
return /* @__PURE__ */ jsx20(
|
|
1449
1548
|
"button",
|
|
1450
1549
|
{
|
|
1451
1550
|
...props,
|
|
@@ -1467,18 +1566,18 @@ function Checkbox({
|
|
|
1467
1566
|
onKeyDown?.(event);
|
|
1468
1567
|
if (event.key === " " || event.key === "Enter") event.stopPropagation();
|
|
1469
1568
|
},
|
|
1470
|
-
children: indeterminate ? /* @__PURE__ */
|
|
1471
|
-
/* @__PURE__ */
|
|
1472
|
-
/* @__PURE__ */
|
|
1473
|
-
] }) : checked ? /* @__PURE__ */
|
|
1569
|
+
children: indeterminate ? /* @__PURE__ */ jsxs17("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
|
|
1570
|
+
/* @__PURE__ */ jsx20(CheckboxIcon, { size: 18 }),
|
|
1571
|
+
/* @__PURE__ */ jsx20(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
|
|
1572
|
+
] }) : checked ? /* @__PURE__ */ jsx20(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx20(CheckboxIcon, { "aria-hidden": "true", size: 18 })
|
|
1474
1573
|
}
|
|
1475
1574
|
);
|
|
1476
1575
|
}
|
|
1477
1576
|
|
|
1478
1577
|
// src/components/SortableTable/SortableTable.tsx
|
|
1479
|
-
import { useMemo as useMemo2, useState as
|
|
1578
|
+
import { useMemo as useMemo2, useState as useState7 } from "react";
|
|
1480
1579
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
1481
|
-
import { jsx as
|
|
1580
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1482
1581
|
function SortableTable({
|
|
1483
1582
|
columns,
|
|
1484
1583
|
data,
|
|
@@ -1503,8 +1602,8 @@ function SortableTable({
|
|
|
1503
1602
|
onRowDoubleClick,
|
|
1504
1603
|
rowAction
|
|
1505
1604
|
}) {
|
|
1506
|
-
const [internalKey, setInternalKey] =
|
|
1507
|
-
const [internalDirection, setInternalDirection] =
|
|
1605
|
+
const [internalKey, setInternalKey] = useState7(defaultSortKey ?? null);
|
|
1606
|
+
const [internalDirection, setInternalDirection] = useState7(defaultSortDirection);
|
|
1508
1607
|
const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
|
|
1509
1608
|
const activeKey = isControlled ? controlledKey : internalKey;
|
|
1510
1609
|
const activeDirection = isControlled ? controlledDirection : internalDirection;
|
|
@@ -1573,16 +1672,16 @@ function SortableTable({
|
|
|
1573
1672
|
onSortChange?.(nextKey, nextDirection);
|
|
1574
1673
|
}
|
|
1575
1674
|
};
|
|
1576
|
-
return /* @__PURE__ */
|
|
1577
|
-
header && /* @__PURE__ */
|
|
1578
|
-
visibleRows.length === 0 ? /* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1580
|
-
selection && /* @__PURE__ */
|
|
1675
|
+
return /* @__PURE__ */ jsx21("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs18("div", { className: "fractal-sortable-table-surface", children: [
|
|
1676
|
+
header && /* @__PURE__ */ jsx21("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1677
|
+
visibleRows.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs18("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1678
|
+
/* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsxs18("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1679
|
+
selection && /* @__PURE__ */ jsx21(
|
|
1581
1680
|
"th",
|
|
1582
1681
|
{
|
|
1583
1682
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1584
1683
|
scope: "col",
|
|
1585
|
-
children: /* @__PURE__ */
|
|
1684
|
+
children: /* @__PURE__ */ jsx21(
|
|
1586
1685
|
Checkbox,
|
|
1587
1686
|
{
|
|
1588
1687
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -1608,7 +1707,7 @@ function SortableTable({
|
|
|
1608
1707
|
columns.map((col) => {
|
|
1609
1708
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1610
1709
|
if (!col.sortable) {
|
|
1611
|
-
return /* @__PURE__ */
|
|
1710
|
+
return /* @__PURE__ */ jsx21(
|
|
1612
1711
|
"th",
|
|
1613
1712
|
{
|
|
1614
1713
|
className: "fractal-sortable-table-th",
|
|
@@ -1619,13 +1718,13 @@ function SortableTable({
|
|
|
1619
1718
|
col.key
|
|
1620
1719
|
);
|
|
1621
1720
|
}
|
|
1622
|
-
return /* @__PURE__ */
|
|
1721
|
+
return /* @__PURE__ */ jsx21(
|
|
1623
1722
|
"th",
|
|
1624
1723
|
{
|
|
1625
1724
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1626
1725
|
scope: "col",
|
|
1627
1726
|
style: { width: col.width },
|
|
1628
|
-
children: /* @__PURE__ */
|
|
1727
|
+
children: /* @__PURE__ */ jsxs18(
|
|
1629
1728
|
"button",
|
|
1630
1729
|
{
|
|
1631
1730
|
type: "button",
|
|
@@ -1636,8 +1735,8 @@ function SortableTable({
|
|
|
1636
1735
|
onClick: () => handleSortClick(col.key),
|
|
1637
1736
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1638
1737
|
children: [
|
|
1639
|
-
/* @__PURE__ */
|
|
1640
|
-
/* @__PURE__ */
|
|
1738
|
+
/* @__PURE__ */ jsx21("span", { children: col.header }),
|
|
1739
|
+
/* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx21(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx21(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx21(ArrowsUpDown, { size: 14 }) })
|
|
1641
1740
|
]
|
|
1642
1741
|
}
|
|
1643
1742
|
)
|
|
@@ -1646,7 +1745,7 @@ function SortableTable({
|
|
|
1646
1745
|
);
|
|
1647
1746
|
})
|
|
1648
1747
|
] }) }),
|
|
1649
|
-
/* @__PURE__ */
|
|
1748
|
+
/* @__PURE__ */ jsx21("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1650
1749
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1651
1750
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
1652
1751
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -1655,7 +1754,7 @@ function SortableTable({
|
|
|
1655
1754
|
label: rowAction.label(row, rowIndex),
|
|
1656
1755
|
icon: rowAction.icon(row, rowIndex)
|
|
1657
1756
|
} : null;
|
|
1658
|
-
return /* @__PURE__ */
|
|
1757
|
+
return /* @__PURE__ */ jsxs18(
|
|
1659
1758
|
"tr",
|
|
1660
1759
|
{
|
|
1661
1760
|
className: cn(
|
|
@@ -1679,7 +1778,7 @@ function SortableTable({
|
|
|
1679
1778
|
role: interactive ? "button" : void 0,
|
|
1680
1779
|
tabIndex: interactive ? 0 : void 0,
|
|
1681
1780
|
children: [
|
|
1682
|
-
selection && /* @__PURE__ */
|
|
1781
|
+
selection && /* @__PURE__ */ jsx21("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx21(
|
|
1683
1782
|
Checkbox,
|
|
1684
1783
|
{
|
|
1685
1784
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -1691,7 +1790,7 @@ function SortableTable({
|
|
|
1691
1790
|
}
|
|
1692
1791
|
}
|
|
1693
1792
|
) }),
|
|
1694
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1793
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsxs18(
|
|
1695
1794
|
"td",
|
|
1696
1795
|
{
|
|
1697
1796
|
className: cn(
|
|
@@ -1701,7 +1800,7 @@ function SortableTable({
|
|
|
1701
1800
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1702
1801
|
children: [
|
|
1703
1802
|
col.render(row, rowIndex),
|
|
1704
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
1803
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1705
1804
|
]
|
|
1706
1805
|
},
|
|
1707
1806
|
col.key
|
|
@@ -1716,8 +1815,8 @@ function SortableTable({
|
|
|
1716
1815
|
}
|
|
1717
1816
|
|
|
1718
1817
|
// src/components/Tabs/Tabs.tsx
|
|
1719
|
-
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as
|
|
1720
|
-
import { jsx as
|
|
1818
|
+
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState8 } from "react";
|
|
1819
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1721
1820
|
function Tabs({
|
|
1722
1821
|
items,
|
|
1723
1822
|
defaultValue,
|
|
@@ -1729,14 +1828,14 @@ function Tabs({
|
|
|
1729
1828
|
variant = "line"
|
|
1730
1829
|
}) {
|
|
1731
1830
|
const reactId = useId2();
|
|
1732
|
-
const [internalValue, setInternalValue] =
|
|
1831
|
+
const [internalValue, setInternalValue] = useState8(
|
|
1733
1832
|
defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
|
|
1734
1833
|
);
|
|
1735
1834
|
const isControlled = controlledValue !== void 0;
|
|
1736
1835
|
const activeId = isControlled ? controlledValue : internalValue;
|
|
1737
|
-
const tabListRef =
|
|
1738
|
-
const tabRefs =
|
|
1739
|
-
const [indicator, setIndicator] =
|
|
1836
|
+
const tabListRef = useRef6(null);
|
|
1837
|
+
const tabRefs = useRef6({});
|
|
1838
|
+
const [indicator, setIndicator] = useState8(null);
|
|
1740
1839
|
useLayoutEffect2(() => {
|
|
1741
1840
|
const updateIndicator = () => {
|
|
1742
1841
|
const activeTab = tabRefs.current[activeId];
|
|
@@ -1788,8 +1887,8 @@ function Tabs({
|
|
|
1788
1887
|
selectTab(nextId2);
|
|
1789
1888
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1790
1889
|
};
|
|
1791
|
-
return /* @__PURE__ */
|
|
1792
|
-
/* @__PURE__ */
|
|
1890
|
+
return /* @__PURE__ */ jsxs19("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1891
|
+
/* @__PURE__ */ jsx22(
|
|
1793
1892
|
"div",
|
|
1794
1893
|
{
|
|
1795
1894
|
ref: tabListRef,
|
|
@@ -1802,7 +1901,7 @@ function Tabs({
|
|
|
1802
1901
|
const isActive = item.id === activeId;
|
|
1803
1902
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1804
1903
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1805
|
-
return /* @__PURE__ */
|
|
1904
|
+
return /* @__PURE__ */ jsx22(
|
|
1806
1905
|
"button",
|
|
1807
1906
|
{
|
|
1808
1907
|
ref: (el) => {
|
|
@@ -1833,7 +1932,7 @@ function Tabs({
|
|
|
1833
1932
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1834
1933
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1835
1934
|
const isActive = item.id === activeId;
|
|
1836
|
-
return /* @__PURE__ */
|
|
1935
|
+
return /* @__PURE__ */ jsx22(
|
|
1837
1936
|
"div",
|
|
1838
1937
|
{
|
|
1839
1938
|
id: panelId,
|
|
@@ -1850,14 +1949,14 @@ function Tabs({
|
|
|
1850
1949
|
}
|
|
1851
1950
|
|
|
1852
1951
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1853
|
-
import * as
|
|
1854
|
-
import { jsx as
|
|
1952
|
+
import * as React15 from "react";
|
|
1953
|
+
import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1855
1954
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1856
|
-
const switcherRef =
|
|
1857
|
-
const buttonRefs =
|
|
1858
|
-
const indicatorMotionReadyRef =
|
|
1955
|
+
const switcherRef = React15.useRef(null);
|
|
1956
|
+
const buttonRefs = React15.useRef([]);
|
|
1957
|
+
const indicatorMotionReadyRef = React15.useRef(false);
|
|
1859
1958
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1860
|
-
|
|
1959
|
+
React15.useLayoutEffect(() => {
|
|
1861
1960
|
const switcher = switcherRef.current;
|
|
1862
1961
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1863
1962
|
let motionFrame = 0;
|
|
@@ -1909,7 +2008,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1909
2008
|
onValueChange(items[nextIndex].value);
|
|
1910
2009
|
}
|
|
1911
2010
|
};
|
|
1912
|
-
return /* @__PURE__ */
|
|
2011
|
+
return /* @__PURE__ */ jsxs20(
|
|
1913
2012
|
"div",
|
|
1914
2013
|
{
|
|
1915
2014
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1917,10 +2016,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1917
2016
|
"aria-label": ariaLabel,
|
|
1918
2017
|
ref: switcherRef,
|
|
1919
2018
|
children: [
|
|
1920
|
-
/* @__PURE__ */
|
|
2019
|
+
/* @__PURE__ */ jsx23("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1921
2020
|
items.map((item, index) => {
|
|
1922
2021
|
const active = item.value === value;
|
|
1923
|
-
return /* @__PURE__ */
|
|
2022
|
+
return /* @__PURE__ */ jsx23(
|
|
1924
2023
|
"button",
|
|
1925
2024
|
{
|
|
1926
2025
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1952,9 +2051,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1952
2051
|
}
|
|
1953
2052
|
|
|
1954
2053
|
// src/components/Disclosure/Disclosure.tsx
|
|
1955
|
-
import { useId as useId3, useState as
|
|
2054
|
+
import { useId as useId3, useState as useState9 } from "react";
|
|
1956
2055
|
import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
1957
|
-
import { jsx as
|
|
2056
|
+
import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1958
2057
|
function Disclosure({
|
|
1959
2058
|
title,
|
|
1960
2059
|
meta,
|
|
@@ -1969,7 +2068,7 @@ function Disclosure({
|
|
|
1969
2068
|
const reactId = useId3();
|
|
1970
2069
|
const headerId = `${reactId}-header`;
|
|
1971
2070
|
const panelId = `${reactId}-panel`;
|
|
1972
|
-
const [internalOpen, setInternalOpen] =
|
|
2071
|
+
const [internalOpen, setInternalOpen] = useState9(defaultOpen);
|
|
1973
2072
|
const isControlled = controlledOpen !== void 0;
|
|
1974
2073
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
1975
2074
|
const toggle = () => {
|
|
@@ -1982,7 +2081,7 @@ function Disclosure({
|
|
|
1982
2081
|
onOpenChange?.(next);
|
|
1983
2082
|
}
|
|
1984
2083
|
};
|
|
1985
|
-
return /* @__PURE__ */
|
|
2084
|
+
return /* @__PURE__ */ jsxs21(
|
|
1986
2085
|
"div",
|
|
1987
2086
|
{
|
|
1988
2087
|
className: cn(
|
|
@@ -1993,7 +2092,7 @@ function Disclosure({
|
|
|
1993
2092
|
className
|
|
1994
2093
|
),
|
|
1995
2094
|
children: [
|
|
1996
|
-
/* @__PURE__ */
|
|
2095
|
+
/* @__PURE__ */ jsxs21(
|
|
1997
2096
|
"button",
|
|
1998
2097
|
{
|
|
1999
2098
|
type: "button",
|
|
@@ -2004,13 +2103,13 @@ function Disclosure({
|
|
|
2004
2103
|
disabled,
|
|
2005
2104
|
onClick: toggle,
|
|
2006
2105
|
children: [
|
|
2007
|
-
/* @__PURE__ */
|
|
2008
|
-
/* @__PURE__ */
|
|
2009
|
-
meta && /* @__PURE__ */
|
|
2106
|
+
/* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx24(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx24(ChevronRight3, { size: 16 }) }),
|
|
2107
|
+
/* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-title", children: title }),
|
|
2108
|
+
meta && /* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2010
2109
|
]
|
|
2011
2110
|
}
|
|
2012
2111
|
),
|
|
2013
|
-
/* @__PURE__ */
|
|
2112
|
+
/* @__PURE__ */ jsx24(
|
|
2014
2113
|
"div",
|
|
2015
2114
|
{
|
|
2016
2115
|
id: panelId,
|
|
@@ -2018,7 +2117,7 @@ function Disclosure({
|
|
|
2018
2117
|
"aria-labelledby": headerId,
|
|
2019
2118
|
className: "fractal-disclosure-panel",
|
|
2020
2119
|
hidden: !isOpen,
|
|
2021
|
-
children: /* @__PURE__ */
|
|
2120
|
+
children: /* @__PURE__ */ jsx24("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2022
2121
|
}
|
|
2023
2122
|
)
|
|
2024
2123
|
]
|
|
@@ -2027,18 +2126,18 @@ function Disclosure({
|
|
|
2027
2126
|
}
|
|
2028
2127
|
|
|
2029
2128
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2030
|
-
import { jsx as
|
|
2129
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
2031
2130
|
var LATTICE_COUNT = 160;
|
|
2032
2131
|
var WAVE_PERIOD = 80;
|
|
2033
2132
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2034
|
-
return /* @__PURE__ */
|
|
2133
|
+
return /* @__PURE__ */ jsx25(
|
|
2035
2134
|
"span",
|
|
2036
2135
|
{
|
|
2037
2136
|
"aria-label": label,
|
|
2038
2137
|
className: cn("fractal-lattice-loader", className),
|
|
2039
2138
|
role: "progressbar",
|
|
2040
2139
|
...props,
|
|
2041
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
2140
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx25(
|
|
2042
2141
|
"span",
|
|
2043
2142
|
{
|
|
2044
2143
|
"aria-hidden": "true",
|
|
@@ -2052,10 +2151,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2052
2151
|
}
|
|
2053
2152
|
|
|
2054
2153
|
// src/components/Ghost/Ghost.tsx
|
|
2055
|
-
import { jsx as
|
|
2154
|
+
import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2056
2155
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2057
2156
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2058
|
-
return /* @__PURE__ */
|
|
2157
|
+
return /* @__PURE__ */ jsx26(
|
|
2059
2158
|
"div",
|
|
2060
2159
|
{
|
|
2061
2160
|
"aria-hidden": "true",
|
|
@@ -2071,15 +2170,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2071
2170
|
);
|
|
2072
2171
|
}
|
|
2073
2172
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2074
|
-
return /* @__PURE__ */
|
|
2173
|
+
return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2075
2174
|
}
|
|
2076
2175
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
2077
|
-
return /* @__PURE__ */
|
|
2176
|
+
return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2078
2177
|
}
|
|
2079
2178
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2080
|
-
return /* @__PURE__ */
|
|
2081
|
-
showHeader && /* @__PURE__ */
|
|
2082
|
-
/* @__PURE__ */
|
|
2179
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2180
|
+
showHeader && /* @__PURE__ */ jsx26(GhostLine, { width: "38%" }),
|
|
2181
|
+
/* @__PURE__ */ jsx26("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx26(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
2083
2182
|
] });
|
|
2084
2183
|
}
|
|
2085
2184
|
function DataTableGhost({
|
|
@@ -2093,81 +2192,81 @@ function DataTableGhost({
|
|
|
2093
2192
|
...props
|
|
2094
2193
|
}) {
|
|
2095
2194
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2096
|
-
return /* @__PURE__ */
|
|
2097
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
2098
|
-
/* @__PURE__ */
|
|
2195
|
+
return /* @__PURE__ */ jsx26("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs22("table", { className: "fractal-ghost-table__table", children: [
|
|
2196
|
+
(showHeader || headers) && /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsx26("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx26("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2197
|
+
/* @__PURE__ */ jsx26("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx26("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx26("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx26(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
2099
2198
|
] }) });
|
|
2100
2199
|
}
|
|
2101
2200
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2102
|
-
return /* @__PURE__ */
|
|
2201
|
+
return /* @__PURE__ */ jsx26(FormFieldGhost, { className, labelWidth, ...props });
|
|
2103
2202
|
}
|
|
2104
2203
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2105
|
-
return /* @__PURE__ */
|
|
2204
|
+
return /* @__PURE__ */ jsx26(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2106
2205
|
}
|
|
2107
2206
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2108
|
-
return /* @__PURE__ */
|
|
2207
|
+
return /* @__PURE__ */ jsx26(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2109
2208
|
}
|
|
2110
2209
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
2111
|
-
return /* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2113
|
-
/* @__PURE__ */
|
|
2210
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2211
|
+
/* @__PURE__ */ jsx26(LabelGhost, { width: labelWidth }),
|
|
2212
|
+
/* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2114
2213
|
] });
|
|
2115
2214
|
}
|
|
2116
2215
|
function AlertGhost({ className, ...props }) {
|
|
2117
|
-
return /* @__PURE__ */
|
|
2118
|
-
/* @__PURE__ */
|
|
2119
|
-
/* @__PURE__ */
|
|
2216
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2217
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "30%" }),
|
|
2218
|
+
/* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: "78%" })
|
|
2120
2219
|
] });
|
|
2121
2220
|
}
|
|
2122
2221
|
function CheckboxGhost({ className, ...props }) {
|
|
2123
|
-
return /* @__PURE__ */
|
|
2124
|
-
/* @__PURE__ */
|
|
2125
|
-
/* @__PURE__ */
|
|
2222
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2223
|
+
/* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2224
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "42%" })
|
|
2126
2225
|
] });
|
|
2127
2226
|
}
|
|
2128
2227
|
var ToggleGhost = CheckboxGhost;
|
|
2129
2228
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2130
|
-
return /* @__PURE__ */
|
|
2229
|
+
return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2131
2230
|
}
|
|
2132
2231
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2133
|
-
return /* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ jsx26(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2134
2233
|
}
|
|
2135
2234
|
var TextButtonGhost = LinkGhost;
|
|
2136
2235
|
function DropdownGhost({ className, ...props }) {
|
|
2137
|
-
return /* @__PURE__ */
|
|
2138
|
-
/* @__PURE__ */
|
|
2139
|
-
/* @__PURE__ */
|
|
2236
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2237
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "38%" }),
|
|
2238
|
+
/* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2140
2239
|
] });
|
|
2141
2240
|
}
|
|
2142
2241
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2143
|
-
return /* @__PURE__ */
|
|
2242
|
+
return /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx26(Ghost, {}, index)) });
|
|
2144
2243
|
}
|
|
2145
2244
|
var TabsGhost = ContentSwitcherGhost;
|
|
2146
2245
|
function DisclosureGhost({ className, ...props }) {
|
|
2147
|
-
return /* @__PURE__ */
|
|
2148
|
-
/* @__PURE__ */
|
|
2149
|
-
/* @__PURE__ */
|
|
2246
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2247
|
+
/* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2248
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "42%" })
|
|
2150
2249
|
] });
|
|
2151
2250
|
}
|
|
2152
2251
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2153
|
-
return /* @__PURE__ */
|
|
2252
|
+
return /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx26(Ghost, {}, index)) });
|
|
2154
2253
|
}
|
|
2155
2254
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2156
|
-
return /* @__PURE__ */
|
|
2157
|
-
/* @__PURE__ */
|
|
2158
|
-
/* @__PURE__ */
|
|
2159
|
-
/* @__PURE__ */
|
|
2255
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2256
|
+
/* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2257
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "26%" }),
|
|
2258
|
+
/* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: "46%" })
|
|
2160
2259
|
] });
|
|
2161
2260
|
}
|
|
2162
2261
|
function PromptCardGhost({ className, ...props }) {
|
|
2163
|
-
return /* @__PURE__ */
|
|
2262
|
+
return /* @__PURE__ */ jsx26(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2164
2263
|
}
|
|
2165
2264
|
function ConversationGhost({
|
|
2166
2265
|
className,
|
|
2167
2266
|
"aria-label": ariaLabel = "Loading conversation",
|
|
2168
2267
|
...props
|
|
2169
2268
|
}) {
|
|
2170
|
-
return /* @__PURE__ */
|
|
2269
|
+
return /* @__PURE__ */ jsxs22(
|
|
2171
2270
|
"div",
|
|
2172
2271
|
{
|
|
2173
2272
|
"aria-busy": "true",
|
|
@@ -2176,54 +2275,54 @@ function ConversationGhost({
|
|
|
2176
2275
|
role: "status",
|
|
2177
2276
|
...props,
|
|
2178
2277
|
children: [
|
|
2179
|
-
/* @__PURE__ */
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2182
|
-
/* @__PURE__ */
|
|
2278
|
+
/* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2279
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "100%" }),
|
|
2280
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "86%" }),
|
|
2281
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "64%" })
|
|
2183
2282
|
] }) }),
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
/* @__PURE__ */
|
|
2187
|
-
/* @__PURE__ */
|
|
2283
|
+
/* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2284
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "92%" }),
|
|
2285
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "78%" }),
|
|
2286
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "58%" })
|
|
2188
2287
|
] })
|
|
2189
2288
|
]
|
|
2190
2289
|
}
|
|
2191
2290
|
);
|
|
2192
2291
|
}
|
|
2193
2292
|
function SortableTableGhost(props) {
|
|
2194
|
-
return /* @__PURE__ */
|
|
2293
|
+
return /* @__PURE__ */ jsx26(DataTableGhost, { ...props });
|
|
2195
2294
|
}
|
|
2196
2295
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2197
|
-
return /* @__PURE__ */
|
|
2198
|
-
/* @__PURE__ */
|
|
2199
|
-
/* @__PURE__ */
|
|
2200
|
-
/* @__PURE__ */
|
|
2201
|
-
/* @__PURE__ */
|
|
2296
|
+
return /* @__PURE__ */ jsxs22("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2297
|
+
/* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2298
|
+
/* @__PURE__ */ jsx26("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2299
|
+
/* @__PURE__ */ jsx26(Ghost, {}),
|
|
2300
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2202
2301
|
] }, index)) })
|
|
2203
2302
|
] });
|
|
2204
2303
|
}
|
|
2205
2304
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2206
|
-
return /* @__PURE__ */
|
|
2305
|
+
return /* @__PURE__ */ jsx26(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2207
2306
|
}
|
|
2208
2307
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2209
|
-
return /* @__PURE__ */
|
|
2308
|
+
return /* @__PURE__ */ jsx26(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2210
2309
|
}
|
|
2211
2310
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2212
|
-
return /* @__PURE__ */
|
|
2213
|
-
/* @__PURE__ */
|
|
2214
|
-
/* @__PURE__ */
|
|
2215
|
-
/* @__PURE__ */
|
|
2311
|
+
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2312
|
+
/* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-surface__header", children: [
|
|
2313
|
+
/* @__PURE__ */ jsx26(GhostLine, { width: "42%" }),
|
|
2314
|
+
/* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2216
2315
|
] }),
|
|
2217
|
-
title && /* @__PURE__ */
|
|
2218
|
-
/* @__PURE__ */
|
|
2316
|
+
title && /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2317
|
+
/* @__PURE__ */ jsx26("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx26(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2219
2318
|
] });
|
|
2220
2319
|
}
|
|
2221
2320
|
|
|
2222
2321
|
// src/components/Sidebar/Sidebar.tsx
|
|
2223
|
-
import * as
|
|
2224
|
-
import { Fragment as Fragment3, jsx as
|
|
2225
|
-
var Sidebar =
|
|
2226
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
2322
|
+
import * as React16 from "react";
|
|
2323
|
+
import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2324
|
+
var Sidebar = React16.forwardRef(
|
|
2325
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx27(
|
|
2227
2326
|
"aside",
|
|
2228
2327
|
{
|
|
2229
2328
|
ref,
|
|
@@ -2235,12 +2334,12 @@ var Sidebar = React15.forwardRef(
|
|
|
2235
2334
|
)
|
|
2236
2335
|
);
|
|
2237
2336
|
Sidebar.displayName = "Sidebar";
|
|
2238
|
-
var SidebarHeader =
|
|
2239
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2337
|
+
var SidebarHeader = React16.forwardRef(
|
|
2338
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2240
2339
|
);
|
|
2241
2340
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2242
|
-
var SidebarBrand =
|
|
2243
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
2341
|
+
var SidebarBrand = React16.forwardRef(
|
|
2342
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx27("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2244
2343
|
);
|
|
2245
2344
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2246
2345
|
function SidebarAccountMenu({
|
|
@@ -2251,7 +2350,7 @@ function SidebarAccountMenu({
|
|
|
2251
2350
|
icon,
|
|
2252
2351
|
className
|
|
2253
2352
|
}) {
|
|
2254
|
-
return /* @__PURE__ */
|
|
2353
|
+
return /* @__PURE__ */ jsx27(
|
|
2255
2354
|
Dropdown,
|
|
2256
2355
|
{
|
|
2257
2356
|
align: "left",
|
|
@@ -2261,25 +2360,25 @@ function SidebarAccountMenu({
|
|
|
2261
2360
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2262
2361
|
selectedValue: "",
|
|
2263
2362
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2264
|
-
triggerContent: /* @__PURE__ */
|
|
2265
|
-
icon && /* @__PURE__ */
|
|
2266
|
-
/* @__PURE__ */
|
|
2363
|
+
triggerContent: /* @__PURE__ */ jsxs23(Fragment3, { children: [
|
|
2364
|
+
icon && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2365
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2267
2366
|
] }),
|
|
2268
2367
|
triggerLabel,
|
|
2269
2368
|
triggerVariant: "tertiary"
|
|
2270
2369
|
}
|
|
2271
2370
|
);
|
|
2272
2371
|
}
|
|
2273
|
-
var SidebarNav =
|
|
2274
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2372
|
+
var SidebarNav = React16.forwardRef(
|
|
2373
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx27("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2275
2374
|
);
|
|
2276
2375
|
SidebarNav.displayName = "SidebarNav";
|
|
2277
|
-
var SidebarSection =
|
|
2278
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2376
|
+
var SidebarSection = React16.forwardRef(
|
|
2377
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2279
2378
|
);
|
|
2280
2379
|
SidebarSection.displayName = "SidebarSection";
|
|
2281
|
-
var SidebarNavItem =
|
|
2282
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */
|
|
2380
|
+
var SidebarNavItem = React16.forwardRef(
|
|
2381
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs23(
|
|
2283
2382
|
"button",
|
|
2284
2383
|
{
|
|
2285
2384
|
ref,
|
|
@@ -2289,28 +2388,28 @@ var SidebarNavItem = React15.forwardRef(
|
|
|
2289
2388
|
"aria-current": active ? "page" : void 0,
|
|
2290
2389
|
...props,
|
|
2291
2390
|
children: [
|
|
2292
|
-
icon && /* @__PURE__ */
|
|
2293
|
-
/* @__PURE__ */
|
|
2294
|
-
endAdornment && /* @__PURE__ */
|
|
2391
|
+
icon && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2392
|
+
/* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2393
|
+
endAdornment && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2295
2394
|
]
|
|
2296
2395
|
}
|
|
2297
2396
|
)
|
|
2298
2397
|
);
|
|
2299
2398
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2300
|
-
var SidebarFooter =
|
|
2301
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2399
|
+
var SidebarFooter = React16.forwardRef(
|
|
2400
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2302
2401
|
);
|
|
2303
2402
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2304
2403
|
|
|
2305
2404
|
// src/components/SidePanel/SidePanel.tsx
|
|
2306
|
-
import { createPortal as
|
|
2307
|
-
import { Close } from "@mirror-physics/fractal-icons";
|
|
2308
|
-
import { jsx as
|
|
2405
|
+
import { createPortal as createPortal3 } from "react-dom";
|
|
2406
|
+
import { Close as Close2 } from "@mirror-physics/fractal-icons";
|
|
2407
|
+
import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2309
2408
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2310
2409
|
useEscapeDismiss(80, onClose, open);
|
|
2311
2410
|
if (!open) return null;
|
|
2312
|
-
return
|
|
2313
|
-
/* @__PURE__ */
|
|
2411
|
+
return createPortal3(
|
|
2412
|
+
/* @__PURE__ */ jsx28("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs24(
|
|
2314
2413
|
"aside",
|
|
2315
2414
|
{
|
|
2316
2415
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2319,15 +2418,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2319
2418
|
role: "dialog",
|
|
2320
2419
|
onMouseDown: (event) => event.stopPropagation(),
|
|
2321
2420
|
children: [
|
|
2322
|
-
/* @__PURE__ */
|
|
2323
|
-
/* @__PURE__ */
|
|
2324
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
2325
|
-
description && /* @__PURE__ */
|
|
2421
|
+
/* @__PURE__ */ jsxs24("header", { className: "fractal-side-panel__header", children: [
|
|
2422
|
+
/* @__PURE__ */ jsxs24("div", { className: "fractal-side-panel__heading", children: [
|
|
2423
|
+
typeof title === "string" ? /* @__PURE__ */ jsx28("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx28("div", { className: "fractal-side-panel__title", children: title }),
|
|
2424
|
+
description && /* @__PURE__ */ jsx28("p", { className: "fractal-side-panel__description", children: description })
|
|
2326
2425
|
] }),
|
|
2327
|
-
/* @__PURE__ */
|
|
2426
|
+
/* @__PURE__ */ jsx28("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx28(Close2, { size: 18 }) })
|
|
2328
2427
|
] }),
|
|
2329
|
-
/* @__PURE__ */
|
|
2330
|
-
footer && /* @__PURE__ */
|
|
2428
|
+
/* @__PURE__ */ jsx28("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx28(UILoader, { label: loadingLabel }) : children }),
|
|
2429
|
+
footer && /* @__PURE__ */ jsx28("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
2331
2430
|
]
|
|
2332
2431
|
}
|
|
2333
2432
|
) }),
|
|
@@ -2336,18 +2435,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2336
2435
|
}
|
|
2337
2436
|
|
|
2338
2437
|
// src/components/Textarea/Textarea.tsx
|
|
2339
|
-
import * as
|
|
2340
|
-
import { jsx as
|
|
2341
|
-
var Textarea =
|
|
2342
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2438
|
+
import * as React17 from "react";
|
|
2439
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
2440
|
+
var Textarea = React17.forwardRef(
|
|
2441
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx29("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
2343
2442
|
);
|
|
2344
2443
|
Textarea.displayName = "Textarea";
|
|
2345
2444
|
|
|
2346
2445
|
// src/components/TextButton/TextButton.tsx
|
|
2347
|
-
import * as
|
|
2348
|
-
import { jsx as
|
|
2349
|
-
var TextButton =
|
|
2350
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */
|
|
2446
|
+
import * as React18 from "react";
|
|
2447
|
+
import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2448
|
+
var TextButton = React18.forwardRef(
|
|
2449
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs25(
|
|
2351
2450
|
"button",
|
|
2352
2451
|
{
|
|
2353
2452
|
ref,
|
|
@@ -2355,9 +2454,9 @@ var TextButton = React17.forwardRef(
|
|
|
2355
2454
|
type: "button",
|
|
2356
2455
|
...props,
|
|
2357
2456
|
children: [
|
|
2358
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
2359
|
-
/* @__PURE__ */
|
|
2360
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
2457
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx30("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2458
|
+
/* @__PURE__ */ jsx30("span", { children }),
|
|
2459
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx30("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2361
2460
|
]
|
|
2362
2461
|
}
|
|
2363
2462
|
)
|
|
@@ -2365,9 +2464,9 @@ var TextButton = React17.forwardRef(
|
|
|
2365
2464
|
TextButton.displayName = "TextButton";
|
|
2366
2465
|
|
|
2367
2466
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2368
|
-
import * as
|
|
2369
|
-
import { Close as
|
|
2370
|
-
import { jsx as
|
|
2467
|
+
import * as React19 from "react";
|
|
2468
|
+
import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
2469
|
+
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2371
2470
|
function FileDropzone({
|
|
2372
2471
|
files,
|
|
2373
2472
|
onFilesChange,
|
|
@@ -2378,17 +2477,17 @@ function FileDropzone({
|
|
|
2378
2477
|
description = "Files stay attached to this record.",
|
|
2379
2478
|
className
|
|
2380
2479
|
}) {
|
|
2381
|
-
const inputId =
|
|
2382
|
-
const inputRef =
|
|
2383
|
-
const [isDragging, setIsDragging] =
|
|
2480
|
+
const inputId = React19.useId();
|
|
2481
|
+
const inputRef = React19.useRef(null);
|
|
2482
|
+
const [isDragging, setIsDragging] = React19.useState(false);
|
|
2384
2483
|
const addFiles = (nextFiles) => {
|
|
2385
2484
|
if (disabled) return;
|
|
2386
2485
|
const additions = Array.from(nextFiles);
|
|
2387
2486
|
if (additions.length === 0) return;
|
|
2388
2487
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2389
2488
|
};
|
|
2390
|
-
return /* @__PURE__ */
|
|
2391
|
-
/* @__PURE__ */
|
|
2489
|
+
return /* @__PURE__ */ jsxs26("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2490
|
+
/* @__PURE__ */ jsx31(
|
|
2392
2491
|
"input",
|
|
2393
2492
|
{
|
|
2394
2493
|
ref: inputRef,
|
|
@@ -2404,7 +2503,7 @@ function FileDropzone({
|
|
|
2404
2503
|
}
|
|
2405
2504
|
}
|
|
2406
2505
|
),
|
|
2407
|
-
/* @__PURE__ */
|
|
2506
|
+
/* @__PURE__ */ jsxs26(
|
|
2408
2507
|
"button",
|
|
2409
2508
|
{
|
|
2410
2509
|
className: "fractal-file-dropzone__target",
|
|
@@ -2427,18 +2526,18 @@ function FileDropzone({
|
|
|
2427
2526
|
addFiles(event.dataTransfer.files);
|
|
2428
2527
|
},
|
|
2429
2528
|
children: [
|
|
2430
|
-
/* @__PURE__ */
|
|
2431
|
-
/* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
2433
|
-
description && /* @__PURE__ */
|
|
2529
|
+
/* @__PURE__ */ jsx31(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2530
|
+
/* @__PURE__ */ jsxs26("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2531
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2532
|
+
description && /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2434
2533
|
] })
|
|
2435
2534
|
]
|
|
2436
2535
|
}
|
|
2437
2536
|
),
|
|
2438
|
-
files.length > 0 && /* @__PURE__ */
|
|
2439
|
-
/* @__PURE__ */
|
|
2440
|
-
/* @__PURE__ */
|
|
2441
|
-
/* @__PURE__ */
|
|
2537
|
+
files.length > 0 && /* @__PURE__ */ jsx31("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs26("li", { className: "fractal-file-dropzone__file", children: [
|
|
2538
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2539
|
+
/* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2540
|
+
/* @__PURE__ */ jsx31(
|
|
2442
2541
|
"button",
|
|
2443
2542
|
{
|
|
2444
2543
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2446,7 +2545,7 @@ function FileDropzone({
|
|
|
2446
2545
|
"aria-label": `Remove ${file.name}`,
|
|
2447
2546
|
disabled,
|
|
2448
2547
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2449
|
-
children: /* @__PURE__ */
|
|
2548
|
+
children: /* @__PURE__ */ jsx31(Close3, { "aria-hidden": "true", size: 14 })
|
|
2450
2549
|
}
|
|
2451
2550
|
)
|
|
2452
2551
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2460,7 +2559,7 @@ function formatFileSize(bytes) {
|
|
|
2460
2559
|
|
|
2461
2560
|
// src/components/Pagination/Pagination.tsx
|
|
2462
2561
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
2463
|
-
import { jsx as
|
|
2562
|
+
import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2464
2563
|
function Pagination({
|
|
2465
2564
|
page,
|
|
2466
2565
|
pageSize,
|
|
@@ -2476,10 +2575,10 @@ function Pagination({
|
|
|
2476
2575
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
2477
2576
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2478
2577
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2479
|
-
return /* @__PURE__ */
|
|
2480
|
-
/* @__PURE__ */
|
|
2481
|
-
/* @__PURE__ */
|
|
2482
|
-
canChangePageSize && /* @__PURE__ */
|
|
2578
|
+
return /* @__PURE__ */ jsxs27("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2579
|
+
/* @__PURE__ */ jsx32("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2580
|
+
/* @__PURE__ */ jsxs27("div", { className: "fractal-pagination__controls", children: [
|
|
2581
|
+
canChangePageSize && /* @__PURE__ */ jsx32(
|
|
2483
2582
|
Dropdown,
|
|
2484
2583
|
{
|
|
2485
2584
|
align: "right",
|
|
@@ -2496,7 +2595,7 @@ function Pagination({
|
|
|
2496
2595
|
triggerVariant: "tertiary"
|
|
2497
2596
|
}
|
|
2498
2597
|
),
|
|
2499
|
-
/* @__PURE__ */
|
|
2598
|
+
/* @__PURE__ */ jsx32(
|
|
2500
2599
|
"button",
|
|
2501
2600
|
{
|
|
2502
2601
|
className: "fractal-pagination__button",
|
|
@@ -2505,15 +2604,15 @@ function Pagination({
|
|
|
2505
2604
|
title: "Previous page",
|
|
2506
2605
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2507
2606
|
onClick: () => onPageChange(currentPage - 1),
|
|
2508
|
-
children: /* @__PURE__ */
|
|
2607
|
+
children: /* @__PURE__ */ jsx32(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2509
2608
|
}
|
|
2510
2609
|
),
|
|
2511
|
-
/* @__PURE__ */
|
|
2610
|
+
/* @__PURE__ */ jsxs27("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
2512
2611
|
currentPage,
|
|
2513
2612
|
" of ",
|
|
2514
2613
|
totalPages
|
|
2515
2614
|
] }),
|
|
2516
|
-
/* @__PURE__ */
|
|
2615
|
+
/* @__PURE__ */ jsx32(
|
|
2517
2616
|
"button",
|
|
2518
2617
|
{
|
|
2519
2618
|
className: "fractal-pagination__button",
|
|
@@ -2522,7 +2621,7 @@ function Pagination({
|
|
|
2522
2621
|
title: "Next page",
|
|
2523
2622
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2524
2623
|
onClick: () => onPageChange(currentPage + 1),
|
|
2525
|
-
children: /* @__PURE__ */
|
|
2624
|
+
children: /* @__PURE__ */ jsx32(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2526
2625
|
}
|
|
2527
2626
|
)
|
|
2528
2627
|
] })
|
|
@@ -2600,6 +2699,8 @@ export {
|
|
|
2600
2699
|
TextButtonGhost,
|
|
2601
2700
|
Textarea,
|
|
2602
2701
|
TextareaGhost,
|
|
2702
|
+
Toast,
|
|
2703
|
+
ToastViewport,
|
|
2603
2704
|
Toggle,
|
|
2604
2705
|
ToggleGhost,
|
|
2605
2706
|
UILoader,
|