@mirror-physics/fractal-ui 0.2.0-next.73 → 0.2.0-next.75
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 +401 -265
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +221 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +33 -1
- package/dist/index.d.ts +33 -1
- package/dist/index.js +405 -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,49 @@ 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
|
|
|
1577
|
+
// src/components/Radio/Radio.tsx
|
|
1578
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1579
|
+
function Radio({
|
|
1580
|
+
checked,
|
|
1581
|
+
className,
|
|
1582
|
+
description,
|
|
1583
|
+
disabled,
|
|
1584
|
+
label,
|
|
1585
|
+
onCheckedChange,
|
|
1586
|
+
...props
|
|
1587
|
+
}) {
|
|
1588
|
+
return /* @__PURE__ */ jsxs18("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
|
|
1589
|
+
/* @__PURE__ */ jsx21(
|
|
1590
|
+
"input",
|
|
1591
|
+
{
|
|
1592
|
+
...props,
|
|
1593
|
+
checked,
|
|
1594
|
+
className: "fractal-radio__input",
|
|
1595
|
+
disabled,
|
|
1596
|
+
onChange: (event) => onCheckedChange?.(event.currentTarget.checked),
|
|
1597
|
+
type: "radio"
|
|
1598
|
+
}
|
|
1599
|
+
),
|
|
1600
|
+
/* @__PURE__ */ jsx21("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ jsx21("span", { className: "fractal-radio__dot" }) }),
|
|
1601
|
+
/* @__PURE__ */ jsxs18("span", { className: "fractal-radio__content", children: [
|
|
1602
|
+
/* @__PURE__ */ jsx21("span", { className: "fractal-radio__label", children: label }),
|
|
1603
|
+
description && /* @__PURE__ */ jsx21("span", { className: "fractal-radio__description", children: description })
|
|
1604
|
+
] })
|
|
1605
|
+
] });
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1478
1608
|
// src/components/SortableTable/SortableTable.tsx
|
|
1479
|
-
import { useMemo as useMemo2, useState as
|
|
1609
|
+
import { useMemo as useMemo2, useState as useState7 } from "react";
|
|
1480
1610
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
1481
|
-
import { jsx as
|
|
1611
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1482
1612
|
function SortableTable({
|
|
1483
1613
|
columns,
|
|
1484
1614
|
data,
|
|
@@ -1503,8 +1633,8 @@ function SortableTable({
|
|
|
1503
1633
|
onRowDoubleClick,
|
|
1504
1634
|
rowAction
|
|
1505
1635
|
}) {
|
|
1506
|
-
const [internalKey, setInternalKey] =
|
|
1507
|
-
const [internalDirection, setInternalDirection] =
|
|
1636
|
+
const [internalKey, setInternalKey] = useState7(defaultSortKey ?? null);
|
|
1637
|
+
const [internalDirection, setInternalDirection] = useState7(defaultSortDirection);
|
|
1508
1638
|
const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
|
|
1509
1639
|
const activeKey = isControlled ? controlledKey : internalKey;
|
|
1510
1640
|
const activeDirection = isControlled ? controlledDirection : internalDirection;
|
|
@@ -1573,16 +1703,16 @@ function SortableTable({
|
|
|
1573
1703
|
onSortChange?.(nextKey, nextDirection);
|
|
1574
1704
|
}
|
|
1575
1705
|
};
|
|
1576
|
-
return /* @__PURE__ */
|
|
1577
|
-
header && /* @__PURE__ */
|
|
1578
|
-
visibleRows.length === 0 ? /* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1580
|
-
selection && /* @__PURE__ */
|
|
1706
|
+
return /* @__PURE__ */ jsx22("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs19("div", { className: "fractal-sortable-table-surface", children: [
|
|
1707
|
+
header && /* @__PURE__ */ jsx22("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1708
|
+
visibleRows.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs19("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1709
|
+
/* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1710
|
+
selection && /* @__PURE__ */ jsx22(
|
|
1581
1711
|
"th",
|
|
1582
1712
|
{
|
|
1583
1713
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1584
1714
|
scope: "col",
|
|
1585
|
-
children: /* @__PURE__ */
|
|
1715
|
+
children: /* @__PURE__ */ jsx22(
|
|
1586
1716
|
Checkbox,
|
|
1587
1717
|
{
|
|
1588
1718
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -1608,7 +1738,7 @@ function SortableTable({
|
|
|
1608
1738
|
columns.map((col) => {
|
|
1609
1739
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1610
1740
|
if (!col.sortable) {
|
|
1611
|
-
return /* @__PURE__ */
|
|
1741
|
+
return /* @__PURE__ */ jsx22(
|
|
1612
1742
|
"th",
|
|
1613
1743
|
{
|
|
1614
1744
|
className: "fractal-sortable-table-th",
|
|
@@ -1619,13 +1749,13 @@ function SortableTable({
|
|
|
1619
1749
|
col.key
|
|
1620
1750
|
);
|
|
1621
1751
|
}
|
|
1622
|
-
return /* @__PURE__ */
|
|
1752
|
+
return /* @__PURE__ */ jsx22(
|
|
1623
1753
|
"th",
|
|
1624
1754
|
{
|
|
1625
1755
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1626
1756
|
scope: "col",
|
|
1627
1757
|
style: { width: col.width },
|
|
1628
|
-
children: /* @__PURE__ */
|
|
1758
|
+
children: /* @__PURE__ */ jsxs19(
|
|
1629
1759
|
"button",
|
|
1630
1760
|
{
|
|
1631
1761
|
type: "button",
|
|
@@ -1636,8 +1766,8 @@ function SortableTable({
|
|
|
1636
1766
|
onClick: () => handleSortClick(col.key),
|
|
1637
1767
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1638
1768
|
children: [
|
|
1639
|
-
/* @__PURE__ */
|
|
1640
|
-
/* @__PURE__ */
|
|
1769
|
+
/* @__PURE__ */ jsx22("span", { children: col.header }),
|
|
1770
|
+
/* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx22(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx22(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx22(ArrowsUpDown, { size: 14 }) })
|
|
1641
1771
|
]
|
|
1642
1772
|
}
|
|
1643
1773
|
)
|
|
@@ -1646,7 +1776,7 @@ function SortableTable({
|
|
|
1646
1776
|
);
|
|
1647
1777
|
})
|
|
1648
1778
|
] }) }),
|
|
1649
|
-
/* @__PURE__ */
|
|
1779
|
+
/* @__PURE__ */ jsx22("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1650
1780
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1651
1781
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
1652
1782
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -1655,7 +1785,7 @@ function SortableTable({
|
|
|
1655
1785
|
label: rowAction.label(row, rowIndex),
|
|
1656
1786
|
icon: rowAction.icon(row, rowIndex)
|
|
1657
1787
|
} : null;
|
|
1658
|
-
return /* @__PURE__ */
|
|
1788
|
+
return /* @__PURE__ */ jsxs19(
|
|
1659
1789
|
"tr",
|
|
1660
1790
|
{
|
|
1661
1791
|
className: cn(
|
|
@@ -1679,7 +1809,7 @@ function SortableTable({
|
|
|
1679
1809
|
role: interactive ? "button" : void 0,
|
|
1680
1810
|
tabIndex: interactive ? 0 : void 0,
|
|
1681
1811
|
children: [
|
|
1682
|
-
selection && /* @__PURE__ */
|
|
1812
|
+
selection && /* @__PURE__ */ jsx22("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx22(
|
|
1683
1813
|
Checkbox,
|
|
1684
1814
|
{
|
|
1685
1815
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -1691,7 +1821,7 @@ function SortableTable({
|
|
|
1691
1821
|
}
|
|
1692
1822
|
}
|
|
1693
1823
|
) }),
|
|
1694
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1824
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsxs19(
|
|
1695
1825
|
"td",
|
|
1696
1826
|
{
|
|
1697
1827
|
className: cn(
|
|
@@ -1701,7 +1831,7 @@ function SortableTable({
|
|
|
1701
1831
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1702
1832
|
children: [
|
|
1703
1833
|
col.render(row, rowIndex),
|
|
1704
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
1834
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1705
1835
|
]
|
|
1706
1836
|
},
|
|
1707
1837
|
col.key
|
|
@@ -1716,8 +1846,8 @@ function SortableTable({
|
|
|
1716
1846
|
}
|
|
1717
1847
|
|
|
1718
1848
|
// src/components/Tabs/Tabs.tsx
|
|
1719
|
-
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as
|
|
1720
|
-
import { jsx as
|
|
1849
|
+
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState8 } from "react";
|
|
1850
|
+
import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1721
1851
|
function Tabs({
|
|
1722
1852
|
items,
|
|
1723
1853
|
defaultValue,
|
|
@@ -1729,14 +1859,14 @@ function Tabs({
|
|
|
1729
1859
|
variant = "line"
|
|
1730
1860
|
}) {
|
|
1731
1861
|
const reactId = useId2();
|
|
1732
|
-
const [internalValue, setInternalValue] =
|
|
1862
|
+
const [internalValue, setInternalValue] = useState8(
|
|
1733
1863
|
defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
|
|
1734
1864
|
);
|
|
1735
1865
|
const isControlled = controlledValue !== void 0;
|
|
1736
1866
|
const activeId = isControlled ? controlledValue : internalValue;
|
|
1737
|
-
const tabListRef =
|
|
1738
|
-
const tabRefs =
|
|
1739
|
-
const [indicator, setIndicator] =
|
|
1867
|
+
const tabListRef = useRef6(null);
|
|
1868
|
+
const tabRefs = useRef6({});
|
|
1869
|
+
const [indicator, setIndicator] = useState8(null);
|
|
1740
1870
|
useLayoutEffect2(() => {
|
|
1741
1871
|
const updateIndicator = () => {
|
|
1742
1872
|
const activeTab = tabRefs.current[activeId];
|
|
@@ -1788,8 +1918,8 @@ function Tabs({
|
|
|
1788
1918
|
selectTab(nextId2);
|
|
1789
1919
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1790
1920
|
};
|
|
1791
|
-
return /* @__PURE__ */
|
|
1792
|
-
/* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1922
|
+
/* @__PURE__ */ jsx23(
|
|
1793
1923
|
"div",
|
|
1794
1924
|
{
|
|
1795
1925
|
ref: tabListRef,
|
|
@@ -1802,7 +1932,7 @@ function Tabs({
|
|
|
1802
1932
|
const isActive = item.id === activeId;
|
|
1803
1933
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1804
1934
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1805
|
-
return /* @__PURE__ */
|
|
1935
|
+
return /* @__PURE__ */ jsx23(
|
|
1806
1936
|
"button",
|
|
1807
1937
|
{
|
|
1808
1938
|
ref: (el) => {
|
|
@@ -1833,7 +1963,7 @@ function Tabs({
|
|
|
1833
1963
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1834
1964
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1835
1965
|
const isActive = item.id === activeId;
|
|
1836
|
-
return /* @__PURE__ */
|
|
1966
|
+
return /* @__PURE__ */ jsx23(
|
|
1837
1967
|
"div",
|
|
1838
1968
|
{
|
|
1839
1969
|
id: panelId,
|
|
@@ -1850,14 +1980,14 @@ function Tabs({
|
|
|
1850
1980
|
}
|
|
1851
1981
|
|
|
1852
1982
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1853
|
-
import * as
|
|
1854
|
-
import { jsx as
|
|
1983
|
+
import * as React15 from "react";
|
|
1984
|
+
import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1855
1985
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1856
|
-
const switcherRef =
|
|
1857
|
-
const buttonRefs =
|
|
1858
|
-
const indicatorMotionReadyRef =
|
|
1986
|
+
const switcherRef = React15.useRef(null);
|
|
1987
|
+
const buttonRefs = React15.useRef([]);
|
|
1988
|
+
const indicatorMotionReadyRef = React15.useRef(false);
|
|
1859
1989
|
const activeIndex = items.findIndex((item) => item.value === value);
|
|
1860
|
-
|
|
1990
|
+
React15.useLayoutEffect(() => {
|
|
1861
1991
|
const switcher = switcherRef.current;
|
|
1862
1992
|
const activeButton = buttonRefs.current[activeIndex];
|
|
1863
1993
|
let motionFrame = 0;
|
|
@@ -1909,7 +2039,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1909
2039
|
onValueChange(items[nextIndex].value);
|
|
1910
2040
|
}
|
|
1911
2041
|
};
|
|
1912
|
-
return /* @__PURE__ */
|
|
2042
|
+
return /* @__PURE__ */ jsxs21(
|
|
1913
2043
|
"div",
|
|
1914
2044
|
{
|
|
1915
2045
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -1917,10 +2047,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1917
2047
|
"aria-label": ariaLabel,
|
|
1918
2048
|
ref: switcherRef,
|
|
1919
2049
|
children: [
|
|
1920
|
-
/* @__PURE__ */
|
|
2050
|
+
/* @__PURE__ */ jsx24("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
1921
2051
|
items.map((item, index) => {
|
|
1922
2052
|
const active = item.value === value;
|
|
1923
|
-
return /* @__PURE__ */
|
|
2053
|
+
return /* @__PURE__ */ jsx24(
|
|
1924
2054
|
"button",
|
|
1925
2055
|
{
|
|
1926
2056
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -1952,9 +2082,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
1952
2082
|
}
|
|
1953
2083
|
|
|
1954
2084
|
// src/components/Disclosure/Disclosure.tsx
|
|
1955
|
-
import { useId as useId3, useState as
|
|
2085
|
+
import { useId as useId3, useState as useState9 } from "react";
|
|
1956
2086
|
import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
1957
|
-
import { jsx as
|
|
2087
|
+
import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1958
2088
|
function Disclosure({
|
|
1959
2089
|
title,
|
|
1960
2090
|
meta,
|
|
@@ -1969,7 +2099,7 @@ function Disclosure({
|
|
|
1969
2099
|
const reactId = useId3();
|
|
1970
2100
|
const headerId = `${reactId}-header`;
|
|
1971
2101
|
const panelId = `${reactId}-panel`;
|
|
1972
|
-
const [internalOpen, setInternalOpen] =
|
|
2102
|
+
const [internalOpen, setInternalOpen] = useState9(defaultOpen);
|
|
1973
2103
|
const isControlled = controlledOpen !== void 0;
|
|
1974
2104
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
1975
2105
|
const toggle = () => {
|
|
@@ -1982,7 +2112,7 @@ function Disclosure({
|
|
|
1982
2112
|
onOpenChange?.(next);
|
|
1983
2113
|
}
|
|
1984
2114
|
};
|
|
1985
|
-
return /* @__PURE__ */
|
|
2115
|
+
return /* @__PURE__ */ jsxs22(
|
|
1986
2116
|
"div",
|
|
1987
2117
|
{
|
|
1988
2118
|
className: cn(
|
|
@@ -1993,7 +2123,7 @@ function Disclosure({
|
|
|
1993
2123
|
className
|
|
1994
2124
|
),
|
|
1995
2125
|
children: [
|
|
1996
|
-
/* @__PURE__ */
|
|
2126
|
+
/* @__PURE__ */ jsxs22(
|
|
1997
2127
|
"button",
|
|
1998
2128
|
{
|
|
1999
2129
|
type: "button",
|
|
@@ -2004,13 +2134,13 @@ function Disclosure({
|
|
|
2004
2134
|
disabled,
|
|
2005
2135
|
onClick: toggle,
|
|
2006
2136
|
children: [
|
|
2007
|
-
/* @__PURE__ */
|
|
2008
|
-
/* @__PURE__ */
|
|
2009
|
-
meta && /* @__PURE__ */
|
|
2137
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx25(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx25(ChevronRight3, { size: 16 }) }),
|
|
2138
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-title", children: title }),
|
|
2139
|
+
meta && /* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2010
2140
|
]
|
|
2011
2141
|
}
|
|
2012
2142
|
),
|
|
2013
|
-
/* @__PURE__ */
|
|
2143
|
+
/* @__PURE__ */ jsx25(
|
|
2014
2144
|
"div",
|
|
2015
2145
|
{
|
|
2016
2146
|
id: panelId,
|
|
@@ -2018,7 +2148,7 @@ function Disclosure({
|
|
|
2018
2148
|
"aria-labelledby": headerId,
|
|
2019
2149
|
className: "fractal-disclosure-panel",
|
|
2020
2150
|
hidden: !isOpen,
|
|
2021
|
-
children: /* @__PURE__ */
|
|
2151
|
+
children: /* @__PURE__ */ jsx25("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2022
2152
|
}
|
|
2023
2153
|
)
|
|
2024
2154
|
]
|
|
@@ -2027,18 +2157,18 @@ function Disclosure({
|
|
|
2027
2157
|
}
|
|
2028
2158
|
|
|
2029
2159
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2030
|
-
import { jsx as
|
|
2160
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
2031
2161
|
var LATTICE_COUNT = 160;
|
|
2032
2162
|
var WAVE_PERIOD = 80;
|
|
2033
2163
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2034
|
-
return /* @__PURE__ */
|
|
2164
|
+
return /* @__PURE__ */ jsx26(
|
|
2035
2165
|
"span",
|
|
2036
2166
|
{
|
|
2037
2167
|
"aria-label": label,
|
|
2038
2168
|
className: cn("fractal-lattice-loader", className),
|
|
2039
2169
|
role: "progressbar",
|
|
2040
2170
|
...props,
|
|
2041
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
2171
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx26(
|
|
2042
2172
|
"span",
|
|
2043
2173
|
{
|
|
2044
2174
|
"aria-hidden": "true",
|
|
@@ -2052,10 +2182,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2052
2182
|
}
|
|
2053
2183
|
|
|
2054
2184
|
// src/components/Ghost/Ghost.tsx
|
|
2055
|
-
import { jsx as
|
|
2185
|
+
import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2056
2186
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2057
2187
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2058
|
-
return /* @__PURE__ */
|
|
2188
|
+
return /* @__PURE__ */ jsx27(
|
|
2059
2189
|
"div",
|
|
2060
2190
|
{
|
|
2061
2191
|
"aria-hidden": "true",
|
|
@@ -2071,15 +2201,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2071
2201
|
);
|
|
2072
2202
|
}
|
|
2073
2203
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2074
|
-
return /* @__PURE__ */
|
|
2204
|
+
return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2075
2205
|
}
|
|
2076
2206
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
2077
|
-
return /* @__PURE__ */
|
|
2207
|
+
return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2078
2208
|
}
|
|
2079
2209
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2080
|
-
return /* @__PURE__ */
|
|
2081
|
-
showHeader && /* @__PURE__ */
|
|
2082
|
-
/* @__PURE__ */
|
|
2210
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2211
|
+
showHeader && /* @__PURE__ */ jsx27(GhostLine, { width: "38%" }),
|
|
2212
|
+
/* @__PURE__ */ jsx27("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx27(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
2083
2213
|
] });
|
|
2084
2214
|
}
|
|
2085
2215
|
function DataTableGhost({
|
|
@@ -2093,81 +2223,81 @@ function DataTableGhost({
|
|
|
2093
2223
|
...props
|
|
2094
2224
|
}) {
|
|
2095
2225
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2096
|
-
return /* @__PURE__ */
|
|
2097
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
2098
|
-
/* @__PURE__ */
|
|
2226
|
+
return /* @__PURE__ */ jsx27("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs23("table", { className: "fractal-ghost-table__table", children: [
|
|
2227
|
+
(showHeader || headers) && /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsx27("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx27("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2228
|
+
/* @__PURE__ */ jsx27("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx27("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx27("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx27(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
2099
2229
|
] }) });
|
|
2100
2230
|
}
|
|
2101
2231
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2102
|
-
return /* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ jsx27(FormFieldGhost, { className, labelWidth, ...props });
|
|
2103
2233
|
}
|
|
2104
2234
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2105
|
-
return /* @__PURE__ */
|
|
2235
|
+
return /* @__PURE__ */ jsx27(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2106
2236
|
}
|
|
2107
2237
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2108
|
-
return /* @__PURE__ */
|
|
2238
|
+
return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2109
2239
|
}
|
|
2110
2240
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
2111
|
-
return /* @__PURE__ */
|
|
2112
|
-
/* @__PURE__ */
|
|
2113
|
-
/* @__PURE__ */
|
|
2241
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2242
|
+
/* @__PURE__ */ jsx27(LabelGhost, { width: labelWidth }),
|
|
2243
|
+
/* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2114
2244
|
] });
|
|
2115
2245
|
}
|
|
2116
2246
|
function AlertGhost({ className, ...props }) {
|
|
2117
|
-
return /* @__PURE__ */
|
|
2118
|
-
/* @__PURE__ */
|
|
2119
|
-
/* @__PURE__ */
|
|
2247
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2248
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "30%" }),
|
|
2249
|
+
/* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: "78%" })
|
|
2120
2250
|
] });
|
|
2121
2251
|
}
|
|
2122
2252
|
function CheckboxGhost({ className, ...props }) {
|
|
2123
|
-
return /* @__PURE__ */
|
|
2124
|
-
/* @__PURE__ */
|
|
2125
|
-
/* @__PURE__ */
|
|
2253
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2254
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2255
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "42%" })
|
|
2126
2256
|
] });
|
|
2127
2257
|
}
|
|
2128
2258
|
var ToggleGhost = CheckboxGhost;
|
|
2129
2259
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2130
|
-
return /* @__PURE__ */
|
|
2260
|
+
return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2131
2261
|
}
|
|
2132
2262
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2133
|
-
return /* @__PURE__ */
|
|
2263
|
+
return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2134
2264
|
}
|
|
2135
2265
|
var TextButtonGhost = LinkGhost;
|
|
2136
2266
|
function DropdownGhost({ className, ...props }) {
|
|
2137
|
-
return /* @__PURE__ */
|
|
2138
|
-
/* @__PURE__ */
|
|
2139
|
-
/* @__PURE__ */
|
|
2267
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2268
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "38%" }),
|
|
2269
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2140
2270
|
] });
|
|
2141
2271
|
}
|
|
2142
2272
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2143
|
-
return /* @__PURE__ */
|
|
2273
|
+
return /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx27(Ghost, {}, index)) });
|
|
2144
2274
|
}
|
|
2145
2275
|
var TabsGhost = ContentSwitcherGhost;
|
|
2146
2276
|
function DisclosureGhost({ className, ...props }) {
|
|
2147
|
-
return /* @__PURE__ */
|
|
2148
|
-
/* @__PURE__ */
|
|
2149
|
-
/* @__PURE__ */
|
|
2277
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2278
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2279
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "42%" })
|
|
2150
2280
|
] });
|
|
2151
2281
|
}
|
|
2152
2282
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2153
|
-
return /* @__PURE__ */
|
|
2283
|
+
return /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx27(Ghost, {}, index)) });
|
|
2154
2284
|
}
|
|
2155
2285
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2156
|
-
return /* @__PURE__ */
|
|
2157
|
-
/* @__PURE__ */
|
|
2158
|
-
/* @__PURE__ */
|
|
2159
|
-
/* @__PURE__ */
|
|
2286
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2287
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2288
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "26%" }),
|
|
2289
|
+
/* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: "46%" })
|
|
2160
2290
|
] });
|
|
2161
2291
|
}
|
|
2162
2292
|
function PromptCardGhost({ className, ...props }) {
|
|
2163
|
-
return /* @__PURE__ */
|
|
2293
|
+
return /* @__PURE__ */ jsx27(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2164
2294
|
}
|
|
2165
2295
|
function ConversationGhost({
|
|
2166
2296
|
className,
|
|
2167
2297
|
"aria-label": ariaLabel = "Loading conversation",
|
|
2168
2298
|
...props
|
|
2169
2299
|
}) {
|
|
2170
|
-
return /* @__PURE__ */
|
|
2300
|
+
return /* @__PURE__ */ jsxs23(
|
|
2171
2301
|
"div",
|
|
2172
2302
|
{
|
|
2173
2303
|
"aria-busy": "true",
|
|
@@ -2176,54 +2306,54 @@ function ConversationGhost({
|
|
|
2176
2306
|
role: "status",
|
|
2177
2307
|
...props,
|
|
2178
2308
|
children: [
|
|
2179
|
-
/* @__PURE__ */
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2182
|
-
/* @__PURE__ */
|
|
2309
|
+
/* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2310
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "100%" }),
|
|
2311
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "86%" }),
|
|
2312
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "64%" })
|
|
2183
2313
|
] }) }),
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
/* @__PURE__ */
|
|
2187
|
-
/* @__PURE__ */
|
|
2314
|
+
/* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2315
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "92%" }),
|
|
2316
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "78%" }),
|
|
2317
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "58%" })
|
|
2188
2318
|
] })
|
|
2189
2319
|
]
|
|
2190
2320
|
}
|
|
2191
2321
|
);
|
|
2192
2322
|
}
|
|
2193
2323
|
function SortableTableGhost(props) {
|
|
2194
|
-
return /* @__PURE__ */
|
|
2324
|
+
return /* @__PURE__ */ jsx27(DataTableGhost, { ...props });
|
|
2195
2325
|
}
|
|
2196
2326
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2197
|
-
return /* @__PURE__ */
|
|
2198
|
-
/* @__PURE__ */
|
|
2199
|
-
/* @__PURE__ */
|
|
2200
|
-
/* @__PURE__ */
|
|
2201
|
-
/* @__PURE__ */
|
|
2327
|
+
return /* @__PURE__ */ jsxs23("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2328
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2329
|
+
/* @__PURE__ */ jsx27("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2330
|
+
/* @__PURE__ */ jsx27(Ghost, {}),
|
|
2331
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2202
2332
|
] }, index)) })
|
|
2203
2333
|
] });
|
|
2204
2334
|
}
|
|
2205
2335
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2206
|
-
return /* @__PURE__ */
|
|
2336
|
+
return /* @__PURE__ */ jsx27(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2207
2337
|
}
|
|
2208
2338
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2209
|
-
return /* @__PURE__ */
|
|
2339
|
+
return /* @__PURE__ */ jsx27(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2210
2340
|
}
|
|
2211
2341
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2212
|
-
return /* @__PURE__ */
|
|
2213
|
-
/* @__PURE__ */
|
|
2214
|
-
/* @__PURE__ */
|
|
2215
|
-
/* @__PURE__ */
|
|
2342
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2343
|
+
/* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-surface__header", children: [
|
|
2344
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "42%" }),
|
|
2345
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2216
2346
|
] }),
|
|
2217
|
-
title && /* @__PURE__ */
|
|
2218
|
-
/* @__PURE__ */
|
|
2347
|
+
title && /* @__PURE__ */ jsx27("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2348
|
+
/* @__PURE__ */ jsx27("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx27(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2219
2349
|
] });
|
|
2220
2350
|
}
|
|
2221
2351
|
|
|
2222
2352
|
// 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__ */
|
|
2353
|
+
import * as React16 from "react";
|
|
2354
|
+
import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2355
|
+
var Sidebar = React16.forwardRef(
|
|
2356
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx28(
|
|
2227
2357
|
"aside",
|
|
2228
2358
|
{
|
|
2229
2359
|
ref,
|
|
@@ -2235,12 +2365,12 @@ var Sidebar = React15.forwardRef(
|
|
|
2235
2365
|
)
|
|
2236
2366
|
);
|
|
2237
2367
|
Sidebar.displayName = "Sidebar";
|
|
2238
|
-
var SidebarHeader =
|
|
2239
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2368
|
+
var SidebarHeader = React16.forwardRef(
|
|
2369
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2240
2370
|
);
|
|
2241
2371
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2242
|
-
var SidebarBrand =
|
|
2243
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
2372
|
+
var SidebarBrand = React16.forwardRef(
|
|
2373
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx28("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2244
2374
|
);
|
|
2245
2375
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2246
2376
|
function SidebarAccountMenu({
|
|
@@ -2251,7 +2381,7 @@ function SidebarAccountMenu({
|
|
|
2251
2381
|
icon,
|
|
2252
2382
|
className
|
|
2253
2383
|
}) {
|
|
2254
|
-
return /* @__PURE__ */
|
|
2384
|
+
return /* @__PURE__ */ jsx28(
|
|
2255
2385
|
Dropdown,
|
|
2256
2386
|
{
|
|
2257
2387
|
align: "left",
|
|
@@ -2261,25 +2391,25 @@ function SidebarAccountMenu({
|
|
|
2261
2391
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2262
2392
|
selectedValue: "",
|
|
2263
2393
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2264
|
-
triggerContent: /* @__PURE__ */
|
|
2265
|
-
icon && /* @__PURE__ */
|
|
2266
|
-
/* @__PURE__ */
|
|
2394
|
+
triggerContent: /* @__PURE__ */ jsxs24(Fragment3, { children: [
|
|
2395
|
+
icon && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2396
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2267
2397
|
] }),
|
|
2268
2398
|
triggerLabel,
|
|
2269
2399
|
triggerVariant: "tertiary"
|
|
2270
2400
|
}
|
|
2271
2401
|
);
|
|
2272
2402
|
}
|
|
2273
|
-
var SidebarNav =
|
|
2274
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2403
|
+
var SidebarNav = React16.forwardRef(
|
|
2404
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2275
2405
|
);
|
|
2276
2406
|
SidebarNav.displayName = "SidebarNav";
|
|
2277
|
-
var SidebarSection =
|
|
2278
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2407
|
+
var SidebarSection = React16.forwardRef(
|
|
2408
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2279
2409
|
);
|
|
2280
2410
|
SidebarSection.displayName = "SidebarSection";
|
|
2281
|
-
var SidebarNavItem =
|
|
2282
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */
|
|
2411
|
+
var SidebarNavItem = React16.forwardRef(
|
|
2412
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs24(
|
|
2283
2413
|
"button",
|
|
2284
2414
|
{
|
|
2285
2415
|
ref,
|
|
@@ -2289,28 +2419,28 @@ var SidebarNavItem = React15.forwardRef(
|
|
|
2289
2419
|
"aria-current": active ? "page" : void 0,
|
|
2290
2420
|
...props,
|
|
2291
2421
|
children: [
|
|
2292
|
-
icon && /* @__PURE__ */
|
|
2293
|
-
/* @__PURE__ */
|
|
2294
|
-
endAdornment && /* @__PURE__ */
|
|
2422
|
+
icon && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2423
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2424
|
+
endAdornment && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2295
2425
|
]
|
|
2296
2426
|
}
|
|
2297
2427
|
)
|
|
2298
2428
|
);
|
|
2299
2429
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2300
|
-
var SidebarFooter =
|
|
2301
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2430
|
+
var SidebarFooter = React16.forwardRef(
|
|
2431
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2302
2432
|
);
|
|
2303
2433
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2304
2434
|
|
|
2305
2435
|
// src/components/SidePanel/SidePanel.tsx
|
|
2306
|
-
import { createPortal as
|
|
2307
|
-
import { Close } from "@mirror-physics/fractal-icons";
|
|
2308
|
-
import { jsx as
|
|
2436
|
+
import { createPortal as createPortal3 } from "react-dom";
|
|
2437
|
+
import { Close as Close2 } from "@mirror-physics/fractal-icons";
|
|
2438
|
+
import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2309
2439
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2310
2440
|
useEscapeDismiss(80, onClose, open);
|
|
2311
2441
|
if (!open) return null;
|
|
2312
|
-
return
|
|
2313
|
-
/* @__PURE__ */
|
|
2442
|
+
return createPortal3(
|
|
2443
|
+
/* @__PURE__ */ jsx29("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs25(
|
|
2314
2444
|
"aside",
|
|
2315
2445
|
{
|
|
2316
2446
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2319,15 +2449,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2319
2449
|
role: "dialog",
|
|
2320
2450
|
onMouseDown: (event) => event.stopPropagation(),
|
|
2321
2451
|
children: [
|
|
2322
|
-
/* @__PURE__ */
|
|
2323
|
-
/* @__PURE__ */
|
|
2324
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
2325
|
-
description && /* @__PURE__ */
|
|
2452
|
+
/* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", children: [
|
|
2453
|
+
/* @__PURE__ */ jsxs25("div", { className: "fractal-side-panel__heading", children: [
|
|
2454
|
+
typeof title === "string" ? /* @__PURE__ */ jsx29("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel__title", children: title }),
|
|
2455
|
+
description && /* @__PURE__ */ jsx29("p", { className: "fractal-side-panel__description", children: description })
|
|
2326
2456
|
] }),
|
|
2327
|
-
/* @__PURE__ */
|
|
2457
|
+
/* @__PURE__ */ jsx29("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx29(Close2, { size: 18 }) })
|
|
2328
2458
|
] }),
|
|
2329
|
-
/* @__PURE__ */
|
|
2330
|
-
footer && /* @__PURE__ */
|
|
2459
|
+
/* @__PURE__ */ jsx29("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx29(UILoader, { label: loadingLabel }) : children }),
|
|
2460
|
+
footer && /* @__PURE__ */ jsx29("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
2331
2461
|
]
|
|
2332
2462
|
}
|
|
2333
2463
|
) }),
|
|
@@ -2336,18 +2466,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2336
2466
|
}
|
|
2337
2467
|
|
|
2338
2468
|
// src/components/Textarea/Textarea.tsx
|
|
2339
|
-
import * as
|
|
2340
|
-
import { jsx as
|
|
2341
|
-
var Textarea =
|
|
2342
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2469
|
+
import * as React17 from "react";
|
|
2470
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
2471
|
+
var Textarea = React17.forwardRef(
|
|
2472
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx30("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
2343
2473
|
);
|
|
2344
2474
|
Textarea.displayName = "Textarea";
|
|
2345
2475
|
|
|
2346
2476
|
// 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__ */
|
|
2477
|
+
import * as React18 from "react";
|
|
2478
|
+
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2479
|
+
var TextButton = React18.forwardRef(
|
|
2480
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs26(
|
|
2351
2481
|
"button",
|
|
2352
2482
|
{
|
|
2353
2483
|
ref,
|
|
@@ -2355,9 +2485,9 @@ var TextButton = React17.forwardRef(
|
|
|
2355
2485
|
type: "button",
|
|
2356
2486
|
...props,
|
|
2357
2487
|
children: [
|
|
2358
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
2359
|
-
/* @__PURE__ */
|
|
2360
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
2488
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx31("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2489
|
+
/* @__PURE__ */ jsx31("span", { children }),
|
|
2490
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx31("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2361
2491
|
]
|
|
2362
2492
|
}
|
|
2363
2493
|
)
|
|
@@ -2365,9 +2495,9 @@ var TextButton = React17.forwardRef(
|
|
|
2365
2495
|
TextButton.displayName = "TextButton";
|
|
2366
2496
|
|
|
2367
2497
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2368
|
-
import * as
|
|
2369
|
-
import { Close as
|
|
2370
|
-
import { jsx as
|
|
2498
|
+
import * as React19 from "react";
|
|
2499
|
+
import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
2500
|
+
import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2371
2501
|
function FileDropzone({
|
|
2372
2502
|
files,
|
|
2373
2503
|
onFilesChange,
|
|
@@ -2378,17 +2508,17 @@ function FileDropzone({
|
|
|
2378
2508
|
description = "Files stay attached to this record.",
|
|
2379
2509
|
className
|
|
2380
2510
|
}) {
|
|
2381
|
-
const inputId =
|
|
2382
|
-
const inputRef =
|
|
2383
|
-
const [isDragging, setIsDragging] =
|
|
2511
|
+
const inputId = React19.useId();
|
|
2512
|
+
const inputRef = React19.useRef(null);
|
|
2513
|
+
const [isDragging, setIsDragging] = React19.useState(false);
|
|
2384
2514
|
const addFiles = (nextFiles) => {
|
|
2385
2515
|
if (disabled) return;
|
|
2386
2516
|
const additions = Array.from(nextFiles);
|
|
2387
2517
|
if (additions.length === 0) return;
|
|
2388
2518
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2389
2519
|
};
|
|
2390
|
-
return /* @__PURE__ */
|
|
2391
|
-
/* @__PURE__ */
|
|
2520
|
+
return /* @__PURE__ */ jsxs27("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2521
|
+
/* @__PURE__ */ jsx32(
|
|
2392
2522
|
"input",
|
|
2393
2523
|
{
|
|
2394
2524
|
ref: inputRef,
|
|
@@ -2404,7 +2534,7 @@ function FileDropzone({
|
|
|
2404
2534
|
}
|
|
2405
2535
|
}
|
|
2406
2536
|
),
|
|
2407
|
-
/* @__PURE__ */
|
|
2537
|
+
/* @__PURE__ */ jsxs27(
|
|
2408
2538
|
"button",
|
|
2409
2539
|
{
|
|
2410
2540
|
className: "fractal-file-dropzone__target",
|
|
@@ -2427,18 +2557,18 @@ function FileDropzone({
|
|
|
2427
2557
|
addFiles(event.dataTransfer.files);
|
|
2428
2558
|
},
|
|
2429
2559
|
children: [
|
|
2430
|
-
/* @__PURE__ */
|
|
2431
|
-
/* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
2433
|
-
description && /* @__PURE__ */
|
|
2560
|
+
/* @__PURE__ */ jsx32(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2561
|
+
/* @__PURE__ */ jsxs27("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2562
|
+
/* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2563
|
+
description && /* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2434
2564
|
] })
|
|
2435
2565
|
]
|
|
2436
2566
|
}
|
|
2437
2567
|
),
|
|
2438
|
-
files.length > 0 && /* @__PURE__ */
|
|
2439
|
-
/* @__PURE__ */
|
|
2440
|
-
/* @__PURE__ */
|
|
2441
|
-
/* @__PURE__ */
|
|
2568
|
+
files.length > 0 && /* @__PURE__ */ jsx32("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs27("li", { className: "fractal-file-dropzone__file", children: [
|
|
2569
|
+
/* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2570
|
+
/* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2571
|
+
/* @__PURE__ */ jsx32(
|
|
2442
2572
|
"button",
|
|
2443
2573
|
{
|
|
2444
2574
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2446,7 +2576,7 @@ function FileDropzone({
|
|
|
2446
2576
|
"aria-label": `Remove ${file.name}`,
|
|
2447
2577
|
disabled,
|
|
2448
2578
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2449
|
-
children: /* @__PURE__ */
|
|
2579
|
+
children: /* @__PURE__ */ jsx32(Close3, { "aria-hidden": "true", size: 14 })
|
|
2450
2580
|
}
|
|
2451
2581
|
)
|
|
2452
2582
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2460,7 +2590,7 @@ function formatFileSize(bytes) {
|
|
|
2460
2590
|
|
|
2461
2591
|
// src/components/Pagination/Pagination.tsx
|
|
2462
2592
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
2463
|
-
import { jsx as
|
|
2593
|
+
import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2464
2594
|
function Pagination({
|
|
2465
2595
|
page,
|
|
2466
2596
|
pageSize,
|
|
@@ -2476,10 +2606,10 @@ function Pagination({
|
|
|
2476
2606
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
2477
2607
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2478
2608
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2479
|
-
return /* @__PURE__ */
|
|
2480
|
-
/* @__PURE__ */
|
|
2481
|
-
/* @__PURE__ */
|
|
2482
|
-
canChangePageSize && /* @__PURE__ */
|
|
2609
|
+
return /* @__PURE__ */ jsxs28("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2610
|
+
/* @__PURE__ */ jsx33("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2611
|
+
/* @__PURE__ */ jsxs28("div", { className: "fractal-pagination__controls", children: [
|
|
2612
|
+
canChangePageSize && /* @__PURE__ */ jsx33(
|
|
2483
2613
|
Dropdown,
|
|
2484
2614
|
{
|
|
2485
2615
|
align: "right",
|
|
@@ -2496,7 +2626,7 @@ function Pagination({
|
|
|
2496
2626
|
triggerVariant: "tertiary"
|
|
2497
2627
|
}
|
|
2498
2628
|
),
|
|
2499
|
-
/* @__PURE__ */
|
|
2629
|
+
/* @__PURE__ */ jsx33(
|
|
2500
2630
|
"button",
|
|
2501
2631
|
{
|
|
2502
2632
|
className: "fractal-pagination__button",
|
|
@@ -2505,15 +2635,15 @@ function Pagination({
|
|
|
2505
2635
|
title: "Previous page",
|
|
2506
2636
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2507
2637
|
onClick: () => onPageChange(currentPage - 1),
|
|
2508
|
-
children: /* @__PURE__ */
|
|
2638
|
+
children: /* @__PURE__ */ jsx33(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2509
2639
|
}
|
|
2510
2640
|
),
|
|
2511
|
-
/* @__PURE__ */
|
|
2641
|
+
/* @__PURE__ */ jsxs28("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
2512
2642
|
currentPage,
|
|
2513
2643
|
" of ",
|
|
2514
2644
|
totalPages
|
|
2515
2645
|
] }),
|
|
2516
|
-
/* @__PURE__ */
|
|
2646
|
+
/* @__PURE__ */ jsx33(
|
|
2517
2647
|
"button",
|
|
2518
2648
|
{
|
|
2519
2649
|
className: "fractal-pagination__button",
|
|
@@ -2522,7 +2652,7 @@ function Pagination({
|
|
|
2522
2652
|
title: "Next page",
|
|
2523
2653
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2524
2654
|
onClick: () => onPageChange(currentPage + 1),
|
|
2525
|
-
children: /* @__PURE__ */
|
|
2655
|
+
children: /* @__PURE__ */ jsx33(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2526
2656
|
}
|
|
2527
2657
|
)
|
|
2528
2658
|
] })
|
|
@@ -2579,6 +2709,7 @@ export {
|
|
|
2579
2709
|
PromptCard,
|
|
2580
2710
|
PromptCardGhost,
|
|
2581
2711
|
PromptGrid,
|
|
2712
|
+
Radio,
|
|
2582
2713
|
SidePanel,
|
|
2583
2714
|
SidePanelGhost,
|
|
2584
2715
|
Sidebar,
|
|
@@ -2600,6 +2731,8 @@ export {
|
|
|
2600
2731
|
TextButtonGhost,
|
|
2601
2732
|
Textarea,
|
|
2602
2733
|
TextareaGhost,
|
|
2734
|
+
Toast,
|
|
2735
|
+
ToastViewport,
|
|
2603
2736
|
Toggle,
|
|
2604
2737
|
ToggleGhost,
|
|
2605
2738
|
UILoader,
|