@mirror-physics/fractal-ui 0.2.0-next.74 → 0.2.0-next.76
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/README.md +8 -0
- package/dist/index.cjs +222 -182
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +237 -74
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +33 -9
- package/dist/index.d.ts +33 -9
- package/dist/index.js +221 -182
- package/dist/index.js.map +1 -1
- package/dist/tokens.css +71 -6
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -80,6 +80,7 @@ __export(index_exports, {
|
|
|
80
80
|
PromptCard: () => PromptCard,
|
|
81
81
|
PromptCardGhost: () => PromptCardGhost,
|
|
82
82
|
PromptGrid: () => PromptGrid,
|
|
83
|
+
Radio: () => Radio,
|
|
83
84
|
SidePanel: () => SidePanel,
|
|
84
85
|
SidePanelGhost: () => SidePanelGhost,
|
|
85
86
|
Sidebar: () => Sidebar,
|
|
@@ -160,31 +161,19 @@ var colorPalette = {
|
|
|
160
161
|
700: "var(--green-700)"
|
|
161
162
|
}
|
|
162
163
|
};
|
|
163
|
-
|
|
164
|
-
xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
|
|
165
|
-
sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
|
|
166
|
-
md: { height: "40px", padding: "8px 16px", iconOnly: "40px", fontSize: "0.875rem" },
|
|
167
|
-
lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
|
|
168
|
-
xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
|
|
169
|
-
};
|
|
170
|
-
function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled, color, hasIconOnly) {
|
|
164
|
+
function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIconOnly) {
|
|
171
165
|
const palette = colorPalette[color];
|
|
172
|
-
const size = sizeConfig[buttonSize];
|
|
173
166
|
const base = {
|
|
174
|
-
height: size.height,
|
|
175
|
-
padding: hasIconOnly ? "0" : size.padding,
|
|
176
167
|
borderRadius: hasIconOnly ? "var(--radius-lg, 8px)" : "var(--radius-full, 9999px)",
|
|
177
168
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
178
|
-
fontSize: size.fontSize,
|
|
179
169
|
transition: "background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease"
|
|
180
170
|
};
|
|
181
171
|
if (hasIconOnly) {
|
|
182
|
-
base.width = size.iconOnly;
|
|
183
172
|
base.justifyContent = "center";
|
|
184
173
|
}
|
|
185
174
|
if (disabled) {
|
|
186
175
|
if (buttonType === "ghost") {
|
|
187
|
-
return { ...base, backgroundColor: "transparent", border: "
|
|
176
|
+
return { ...base, backgroundColor: "transparent", border: "1px solid transparent", color: "var(--fg-disabled)" };
|
|
188
177
|
}
|
|
189
178
|
return { ...base, backgroundColor: "transparent", border: "1px solid var(--fg-disabled)", color: "var(--fg-disabled)" };
|
|
190
179
|
}
|
|
@@ -195,7 +184,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
|
|
|
195
184
|
return {
|
|
196
185
|
...base,
|
|
197
186
|
backgroundColor: isActive ? palette[700] : isHovered ? palette[500] : palette[600],
|
|
198
|
-
border: "
|
|
187
|
+
border: "1px solid transparent",
|
|
199
188
|
color: "var(--fg-inverse)"
|
|
200
189
|
};
|
|
201
190
|
}
|
|
@@ -219,7 +208,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
|
|
|
219
208
|
return {
|
|
220
209
|
...base,
|
|
221
210
|
backgroundColor: isHovered || isActive ? "var(--bg-surface-1)" : "transparent",
|
|
222
|
-
border: "
|
|
211
|
+
border: "1px solid transparent",
|
|
223
212
|
color: "var(--fg-primary)"
|
|
224
213
|
};
|
|
225
214
|
// Danger: low-intensity destructive action. Text stays steady; hover deepens the light red surface.
|
|
@@ -227,7 +216,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
|
|
|
227
216
|
return {
|
|
228
217
|
...base,
|
|
229
218
|
backgroundColor: isHovered || isActive ? "var(--danger-button-surface-hover)" : "var(--danger-button-surface)",
|
|
230
|
-
border: "
|
|
219
|
+
border: "1px solid transparent",
|
|
231
220
|
color: "var(--danger-button-fg)"
|
|
232
221
|
};
|
|
233
222
|
default:
|
|
@@ -235,10 +224,10 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
|
|
|
235
224
|
}
|
|
236
225
|
}
|
|
237
226
|
var Button = React.forwardRef(
|
|
238
|
-
({ className, buttonType = "primary", buttonSize = "md", color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
|
|
227
|
+
({ className, buttonType = "primary", buttonSize = "md", controlSize, color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
|
|
239
228
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
240
229
|
const [isActive, setIsActive] = React.useState(false);
|
|
241
|
-
const typeStyles = getButtonStyles(buttonType, isHovered, isActive,
|
|
230
|
+
const typeStyles = getButtonStyles(buttonType, isHovered, isActive, !!disabled, color, hasIconOnly);
|
|
242
231
|
const hasIconAndText = icon && children && !hasIconOnly;
|
|
243
232
|
const finalStyles = hasIconAndText ? { ...typeStyles, gap: "var(--space-2, 8px)", ...style } : { ...typeStyles, ...style };
|
|
244
233
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -246,7 +235,9 @@ var Button = React.forwardRef(
|
|
|
246
235
|
{
|
|
247
236
|
ref,
|
|
248
237
|
type: "button",
|
|
249
|
-
|
|
238
|
+
"data-control-size": controlSize ?? buttonSize,
|
|
239
|
+
"data-icon-only": hasIconOnly || void 0,
|
|
240
|
+
className: cn("fractal-control", "fractal-button", `fractal-button--${buttonType}`, className),
|
|
250
241
|
style: finalStyles,
|
|
251
242
|
disabled,
|
|
252
243
|
onMouseEnter: (e) => {
|
|
@@ -648,7 +639,7 @@ var React2 = __toESM(require("react"), 1);
|
|
|
648
639
|
var import_fractal_icons3 = require("@mirror-physics/fractal-icons");
|
|
649
640
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
650
641
|
var Card = React2.forwardRef(
|
|
651
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("fractal-card", className), ...props })
|
|
642
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, "data-fractal-border-surface": "surface-1", className: cn("fractal-card", className), ...props })
|
|
652
643
|
);
|
|
653
644
|
Card.displayName = "Card";
|
|
654
645
|
var CardHeader = React2.forwardRef(
|
|
@@ -778,12 +769,13 @@ PromptGrid.displayName = "PromptGrid";
|
|
|
778
769
|
var React4 = __toESM(require("react"), 1);
|
|
779
770
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
780
771
|
var Input = React4.forwardRef(
|
|
781
|
-
({ className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
772
|
+
({ className, type, controlSize = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
782
773
|
"input",
|
|
783
774
|
{
|
|
784
775
|
type,
|
|
785
776
|
ref,
|
|
786
|
-
|
|
777
|
+
"data-control-size": controlSize,
|
|
778
|
+
className: cn("fractal-control", "fractal-input", className),
|
|
787
779
|
...props
|
|
788
780
|
}
|
|
789
781
|
)
|
|
@@ -797,6 +789,7 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
|
797
789
|
var TableSearch = React5.forwardRef(
|
|
798
790
|
({
|
|
799
791
|
searchType = "text",
|
|
792
|
+
controlSize = "md",
|
|
800
793
|
className,
|
|
801
794
|
inputClassName,
|
|
802
795
|
placeholder,
|
|
@@ -810,12 +803,14 @@ var TableSearch = React5.forwardRef(
|
|
|
810
803
|
{
|
|
811
804
|
className: cn("fractal-table-search", className),
|
|
812
805
|
"data-search-type": searchType,
|
|
806
|
+
"data-control-size": controlSize,
|
|
813
807
|
children: [
|
|
814
808
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
|
|
815
809
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
816
810
|
Input,
|
|
817
811
|
{
|
|
818
812
|
...props,
|
|
813
|
+
controlSize,
|
|
819
814
|
ref,
|
|
820
815
|
type: "search",
|
|
821
816
|
className: cn("fractal-table-search__input", inputClassName),
|
|
@@ -836,6 +831,7 @@ var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
|
|
|
836
831
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
837
832
|
function NumberInput({
|
|
838
833
|
unit,
|
|
834
|
+
controlSize = "md",
|
|
839
835
|
className,
|
|
840
836
|
value,
|
|
841
837
|
defaultValue,
|
|
@@ -859,11 +855,12 @@ function NumberInput({
|
|
|
859
855
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
860
856
|
input.focus();
|
|
861
857
|
};
|
|
862
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
858
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
|
|
863
859
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
864
860
|
Input,
|
|
865
861
|
{
|
|
866
862
|
ref: inputRef,
|
|
863
|
+
controlSize,
|
|
867
864
|
type: "number",
|
|
868
865
|
value,
|
|
869
866
|
defaultValue,
|
|
@@ -878,7 +875,7 @@ function NumberInput({
|
|
|
878
875
|
"span",
|
|
879
876
|
{
|
|
880
877
|
className: "fractal-number-input-unit",
|
|
881
|
-
style: { left: `calc(var(--
|
|
878
|
+
style: { left: `calc(var(--control-padding-inline) + ${characterCount}ch)` },
|
|
882
879
|
"aria-hidden": "true",
|
|
883
880
|
children: unit
|
|
884
881
|
}
|
|
@@ -1043,6 +1040,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
|
1043
1040
|
var PasswordInput = React7.forwardRef(
|
|
1044
1041
|
({
|
|
1045
1042
|
className,
|
|
1043
|
+
controlSize = "md",
|
|
1046
1044
|
disabled,
|
|
1047
1045
|
showPasswordLabel = "Show password",
|
|
1048
1046
|
hidePasswordLabel = "Hide password",
|
|
@@ -1054,12 +1052,14 @@ var PasswordInput = React7.forwardRef(
|
|
|
1054
1052
|
"div",
|
|
1055
1053
|
{
|
|
1056
1054
|
className: cn("fractal-password-input", className),
|
|
1055
|
+
"data-control-size": controlSize,
|
|
1057
1056
|
"data-password-visible": passwordVisible ? "" : void 0,
|
|
1058
1057
|
children: [
|
|
1059
1058
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1060
1059
|
Input,
|
|
1061
1060
|
{
|
|
1062
1061
|
...props,
|
|
1062
|
+
controlSize,
|
|
1063
1063
|
ref,
|
|
1064
1064
|
className: "fractal-password-input-field",
|
|
1065
1065
|
disabled,
|
|
@@ -1090,10 +1090,11 @@ PasswordInput.displayName = "PasswordInput";
|
|
|
1090
1090
|
var React8 = __toESM(require("react"), 1);
|
|
1091
1091
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1092
1092
|
var Label = React8.forwardRef(
|
|
1093
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1093
|
+
({ className, controlSize = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1094
1094
|
"label",
|
|
1095
1095
|
{
|
|
1096
1096
|
ref,
|
|
1097
|
+
"data-control-size": controlSize,
|
|
1097
1098
|
className: cn("fractal-label", className),
|
|
1098
1099
|
...props
|
|
1099
1100
|
}
|
|
@@ -1448,7 +1449,9 @@ function Dropdown({
|
|
|
1448
1449
|
label,
|
|
1449
1450
|
iconOnly = false,
|
|
1450
1451
|
noChevron = false,
|
|
1451
|
-
size = "md",
|
|
1452
|
+
size: sizeAlias = "md",
|
|
1453
|
+
controlSize,
|
|
1454
|
+
triggerId,
|
|
1452
1455
|
triggerVariant = "outline",
|
|
1453
1456
|
className,
|
|
1454
1457
|
triggerClassName,
|
|
@@ -1456,6 +1459,7 @@ function Dropdown({
|
|
|
1456
1459
|
closeOnSelect = true,
|
|
1457
1460
|
disabled = false
|
|
1458
1461
|
}) {
|
|
1462
|
+
const size = controlSize ?? sizeAlias;
|
|
1459
1463
|
const [open, setOpen] = React12.useState(false);
|
|
1460
1464
|
const triggerRef = React12.useRef(null);
|
|
1461
1465
|
const panelRef = React12.useRef(null);
|
|
@@ -1530,11 +1534,13 @@ function Dropdown({
|
|
|
1530
1534
|
document.addEventListener("mousedown", handleClickOutside);
|
|
1531
1535
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
1532
1536
|
}, [open]);
|
|
1533
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("fractal-dropdown", className), children: [
|
|
1537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-control-size": size, className: cn("fractal-dropdown", className), children: [
|
|
1534
1538
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
1535
1539
|
"button",
|
|
1536
1540
|
{
|
|
1537
1541
|
ref: triggerRef,
|
|
1542
|
+
id: triggerId,
|
|
1543
|
+
"data-control-size": size,
|
|
1538
1544
|
type: "button",
|
|
1539
1545
|
disabled,
|
|
1540
1546
|
"aria-haspopup": "listbox",
|
|
@@ -1542,6 +1548,7 @@ function Dropdown({
|
|
|
1542
1548
|
"aria-label": triggerLabel,
|
|
1543
1549
|
onClick: () => setOpen((o) => !o),
|
|
1544
1550
|
className: cn(
|
|
1551
|
+
"fractal-control",
|
|
1545
1552
|
"fractal-dropdown-trigger",
|
|
1546
1553
|
`fractal-dropdown-trigger--${size}`,
|
|
1547
1554
|
`fractal-dropdown-trigger--${triggerVariant}`,
|
|
@@ -1631,6 +1638,7 @@ var Chip = React14.forwardRef(
|
|
|
1631
1638
|
"span",
|
|
1632
1639
|
{
|
|
1633
1640
|
ref,
|
|
1641
|
+
"data-fractal-border-surface": tone === "neutral" ? "surface-2" : void 0,
|
|
1634
1642
|
className: cn("fractal-chip", `fractal-chip--${tone}`, className),
|
|
1635
1643
|
...props
|
|
1636
1644
|
}
|
|
@@ -1681,10 +1689,41 @@ function Checkbox({
|
|
|
1681
1689
|
);
|
|
1682
1690
|
}
|
|
1683
1691
|
|
|
1692
|
+
// src/components/Radio/Radio.tsx
|
|
1693
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1694
|
+
function Radio({
|
|
1695
|
+
checked,
|
|
1696
|
+
className,
|
|
1697
|
+
description,
|
|
1698
|
+
disabled,
|
|
1699
|
+
label,
|
|
1700
|
+
onCheckedChange,
|
|
1701
|
+
...props
|
|
1702
|
+
}) {
|
|
1703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
|
|
1704
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1705
|
+
"input",
|
|
1706
|
+
{
|
|
1707
|
+
...props,
|
|
1708
|
+
checked,
|
|
1709
|
+
className: "fractal-radio__input",
|
|
1710
|
+
disabled,
|
|
1711
|
+
onChange: (event) => onCheckedChange?.(event.currentTarget.checked),
|
|
1712
|
+
type: "radio"
|
|
1713
|
+
}
|
|
1714
|
+
),
|
|
1715
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__dot" }) }),
|
|
1716
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "fractal-radio__content", children: [
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__label", children: label }),
|
|
1718
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__description", children: description })
|
|
1719
|
+
] })
|
|
1720
|
+
] });
|
|
1721
|
+
}
|
|
1722
|
+
|
|
1684
1723
|
// src/components/SortableTable/SortableTable.tsx
|
|
1685
1724
|
var import_react4 = require("react");
|
|
1686
1725
|
var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
|
|
1687
|
-
var
|
|
1726
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1688
1727
|
function SortableTable({
|
|
1689
1728
|
columns,
|
|
1690
1729
|
data,
|
|
@@ -1779,16 +1818,16 @@ function SortableTable({
|
|
|
1779
1818
|
onSortChange?.(nextKey, nextDirection);
|
|
1780
1819
|
}
|
|
1781
1820
|
};
|
|
1782
|
-
return /* @__PURE__ */ (0,
|
|
1783
|
-
header && /* @__PURE__ */ (0,
|
|
1784
|
-
visibleRows.length === 0 ? /* @__PURE__ */ (0,
|
|
1785
|
-
/* @__PURE__ */ (0,
|
|
1786
|
-
selection && /* @__PURE__ */ (0,
|
|
1821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
|
|
1822
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1823
|
+
visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1824
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1825
|
+
selection && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1787
1826
|
"th",
|
|
1788
1827
|
{
|
|
1789
1828
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1790
1829
|
scope: "col",
|
|
1791
|
-
children: /* @__PURE__ */ (0,
|
|
1830
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1792
1831
|
Checkbox,
|
|
1793
1832
|
{
|
|
1794
1833
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -1814,7 +1853,7 @@ function SortableTable({
|
|
|
1814
1853
|
columns.map((col) => {
|
|
1815
1854
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1816
1855
|
if (!col.sortable) {
|
|
1817
|
-
return /* @__PURE__ */ (0,
|
|
1856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1818
1857
|
"th",
|
|
1819
1858
|
{
|
|
1820
1859
|
className: "fractal-sortable-table-th",
|
|
@@ -1825,13 +1864,13 @@ function SortableTable({
|
|
|
1825
1864
|
col.key
|
|
1826
1865
|
);
|
|
1827
1866
|
}
|
|
1828
|
-
return /* @__PURE__ */ (0,
|
|
1867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1829
1868
|
"th",
|
|
1830
1869
|
{
|
|
1831
1870
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1832
1871
|
scope: "col",
|
|
1833
1872
|
style: { width: col.width },
|
|
1834
|
-
children: /* @__PURE__ */ (0,
|
|
1873
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1835
1874
|
"button",
|
|
1836
1875
|
{
|
|
1837
1876
|
type: "button",
|
|
@@ -1842,8 +1881,8 @@ function SortableTable({
|
|
|
1842
1881
|
onClick: () => handleSortClick(col.key),
|
|
1843
1882
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1844
1883
|
children: [
|
|
1845
|
-
/* @__PURE__ */ (0,
|
|
1846
|
-
/* @__PURE__ */ (0,
|
|
1884
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: col.header }),
|
|
1885
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.ArrowsUpDown, { size: 14 }) })
|
|
1847
1886
|
]
|
|
1848
1887
|
}
|
|
1849
1888
|
)
|
|
@@ -1852,7 +1891,7 @@ function SortableTable({
|
|
|
1852
1891
|
);
|
|
1853
1892
|
})
|
|
1854
1893
|
] }) }),
|
|
1855
|
-
/* @__PURE__ */ (0,
|
|
1894
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1856
1895
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1857
1896
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
1858
1897
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -1861,7 +1900,7 @@ function SortableTable({
|
|
|
1861
1900
|
label: rowAction.label(row, rowIndex),
|
|
1862
1901
|
icon: rowAction.icon(row, rowIndex)
|
|
1863
1902
|
} : null;
|
|
1864
|
-
return /* @__PURE__ */ (0,
|
|
1903
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1865
1904
|
"tr",
|
|
1866
1905
|
{
|
|
1867
1906
|
className: cn(
|
|
@@ -1885,7 +1924,7 @@ function SortableTable({
|
|
|
1885
1924
|
role: interactive ? "button" : void 0,
|
|
1886
1925
|
tabIndex: interactive ? 0 : void 0,
|
|
1887
1926
|
children: [
|
|
1888
|
-
selection && /* @__PURE__ */ (0,
|
|
1927
|
+
selection && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1889
1928
|
Checkbox,
|
|
1890
1929
|
{
|
|
1891
1930
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -1897,7 +1936,7 @@ function SortableTable({
|
|
|
1897
1936
|
}
|
|
1898
1937
|
}
|
|
1899
1938
|
) }),
|
|
1900
|
-
columns.map((col, columnIndex) => /* @__PURE__ */ (0,
|
|
1939
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1901
1940
|
"td",
|
|
1902
1941
|
{
|
|
1903
1942
|
className: cn(
|
|
@@ -1907,7 +1946,7 @@ function SortableTable({
|
|
|
1907
1946
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1908
1947
|
children: [
|
|
1909
1948
|
col.render(row, rowIndex),
|
|
1910
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0,
|
|
1949
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1911
1950
|
]
|
|
1912
1951
|
},
|
|
1913
1952
|
col.key
|
|
@@ -1923,7 +1962,7 @@ function SortableTable({
|
|
|
1923
1962
|
|
|
1924
1963
|
// src/components/Tabs/Tabs.tsx
|
|
1925
1964
|
var import_react5 = require("react");
|
|
1926
|
-
var
|
|
1965
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1927
1966
|
function Tabs({
|
|
1928
1967
|
items,
|
|
1929
1968
|
defaultValue,
|
|
@@ -1994,8 +2033,8 @@ function Tabs({
|
|
|
1994
2033
|
selectTab(nextId2);
|
|
1995
2034
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1996
2035
|
};
|
|
1997
|
-
return /* @__PURE__ */ (0,
|
|
1998
|
-
/* @__PURE__ */ (0,
|
|
2036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
2037
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1999
2038
|
"div",
|
|
2000
2039
|
{
|
|
2001
2040
|
ref: tabListRef,
|
|
@@ -2008,7 +2047,7 @@ function Tabs({
|
|
|
2008
2047
|
const isActive = item.id === activeId;
|
|
2009
2048
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2010
2049
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2011
|
-
return /* @__PURE__ */ (0,
|
|
2050
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2012
2051
|
"button",
|
|
2013
2052
|
{
|
|
2014
2053
|
ref: (el) => {
|
|
@@ -2039,7 +2078,7 @@ function Tabs({
|
|
|
2039
2078
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2040
2079
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2041
2080
|
const isActive = item.id === activeId;
|
|
2042
|
-
return /* @__PURE__ */ (0,
|
|
2081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2043
2082
|
"div",
|
|
2044
2083
|
{
|
|
2045
2084
|
id: panelId,
|
|
@@ -2057,7 +2096,7 @@ function Tabs({
|
|
|
2057
2096
|
|
|
2058
2097
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
2059
2098
|
var React15 = __toESM(require("react"), 1);
|
|
2060
|
-
var
|
|
2099
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2061
2100
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
2062
2101
|
const switcherRef = React15.useRef(null);
|
|
2063
2102
|
const buttonRefs = React15.useRef([]);
|
|
@@ -2115,7 +2154,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2115
2154
|
onValueChange(items[nextIndex].value);
|
|
2116
2155
|
}
|
|
2117
2156
|
};
|
|
2118
|
-
return /* @__PURE__ */ (0,
|
|
2157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
2119
2158
|
"div",
|
|
2120
2159
|
{
|
|
2121
2160
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -2123,10 +2162,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2123
2162
|
"aria-label": ariaLabel,
|
|
2124
2163
|
ref: switcherRef,
|
|
2125
2164
|
children: [
|
|
2126
|
-
/* @__PURE__ */ (0,
|
|
2165
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
2127
2166
|
items.map((item, index) => {
|
|
2128
2167
|
const active = item.value === value;
|
|
2129
|
-
return /* @__PURE__ */ (0,
|
|
2168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2130
2169
|
"button",
|
|
2131
2170
|
{
|
|
2132
2171
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -2160,7 +2199,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2160
2199
|
// src/components/Disclosure/Disclosure.tsx
|
|
2161
2200
|
var import_react6 = require("react");
|
|
2162
2201
|
var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
|
|
2163
|
-
var
|
|
2202
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2164
2203
|
function Disclosure({
|
|
2165
2204
|
title,
|
|
2166
2205
|
meta,
|
|
@@ -2188,7 +2227,7 @@ function Disclosure({
|
|
|
2188
2227
|
onOpenChange?.(next);
|
|
2189
2228
|
}
|
|
2190
2229
|
};
|
|
2191
|
-
return /* @__PURE__ */ (0,
|
|
2230
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2192
2231
|
"div",
|
|
2193
2232
|
{
|
|
2194
2233
|
className: cn(
|
|
@@ -2199,7 +2238,7 @@ function Disclosure({
|
|
|
2199
2238
|
className
|
|
2200
2239
|
),
|
|
2201
2240
|
children: [
|
|
2202
|
-
/* @__PURE__ */ (0,
|
|
2241
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2203
2242
|
"button",
|
|
2204
2243
|
{
|
|
2205
2244
|
type: "button",
|
|
@@ -2210,13 +2249,13 @@ function Disclosure({
|
|
|
2210
2249
|
disabled,
|
|
2211
2250
|
onClick: toggle,
|
|
2212
2251
|
children: [
|
|
2213
|
-
/* @__PURE__ */ (0,
|
|
2214
|
-
/* @__PURE__ */ (0,
|
|
2215
|
-
meta && /* @__PURE__ */ (0,
|
|
2252
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ChevronRight, { size: 16 }) }),
|
|
2253
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-title", children: title }),
|
|
2254
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2216
2255
|
]
|
|
2217
2256
|
}
|
|
2218
2257
|
),
|
|
2219
|
-
/* @__PURE__ */ (0,
|
|
2258
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2220
2259
|
"div",
|
|
2221
2260
|
{
|
|
2222
2261
|
id: panelId,
|
|
@@ -2224,7 +2263,7 @@ function Disclosure({
|
|
|
2224
2263
|
"aria-labelledby": headerId,
|
|
2225
2264
|
className: "fractal-disclosure-panel",
|
|
2226
2265
|
hidden: !isOpen,
|
|
2227
|
-
children: /* @__PURE__ */ (0,
|
|
2266
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2228
2267
|
}
|
|
2229
2268
|
)
|
|
2230
2269
|
]
|
|
@@ -2233,18 +2272,18 @@ function Disclosure({
|
|
|
2233
2272
|
}
|
|
2234
2273
|
|
|
2235
2274
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2236
|
-
var
|
|
2275
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2237
2276
|
var LATTICE_COUNT = 160;
|
|
2238
2277
|
var WAVE_PERIOD = 80;
|
|
2239
2278
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2240
|
-
return /* @__PURE__ */ (0,
|
|
2279
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2241
2280
|
"span",
|
|
2242
2281
|
{
|
|
2243
2282
|
"aria-label": label,
|
|
2244
2283
|
className: cn("fractal-lattice-loader", className),
|
|
2245
2284
|
role: "progressbar",
|
|
2246
2285
|
...props,
|
|
2247
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0,
|
|
2286
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2248
2287
|
"span",
|
|
2249
2288
|
{
|
|
2250
2289
|
"aria-hidden": "true",
|
|
@@ -2258,10 +2297,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2258
2297
|
}
|
|
2259
2298
|
|
|
2260
2299
|
// src/components/Ghost/Ghost.tsx
|
|
2261
|
-
var
|
|
2300
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2262
2301
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2263
2302
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2264
|
-
return /* @__PURE__ */ (0,
|
|
2303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2265
2304
|
"div",
|
|
2266
2305
|
{
|
|
2267
2306
|
"aria-hidden": "true",
|
|
@@ -2277,15 +2316,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2277
2316
|
);
|
|
2278
2317
|
}
|
|
2279
2318
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2280
|
-
return /* @__PURE__ */ (0,
|
|
2319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2281
2320
|
}
|
|
2282
|
-
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
2283
|
-
return /* @__PURE__ */ (0,
|
|
2321
|
+
function ButtonGhost({ className, size = "md", controlSize, iconOnly = false, width, ...props }) {
|
|
2322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2284
2323
|
}
|
|
2285
2324
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2286
|
-
return /* @__PURE__ */ (0,
|
|
2287
|
-
showHeader && /* @__PURE__ */ (0,
|
|
2288
|
-
/* @__PURE__ */ (0,
|
|
2325
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2326
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "38%" }),
|
|
2327
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
2289
2328
|
] });
|
|
2290
2329
|
}
|
|
2291
2330
|
function DataTableGhost({
|
|
@@ -2299,81 +2338,81 @@ function DataTableGhost({
|
|
|
2299
2338
|
...props
|
|
2300
2339
|
}) {
|
|
2301
2340
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2302
|
-
return /* @__PURE__ */ (0,
|
|
2303
|
-
(showHeader || headers) && /* @__PURE__ */ (0,
|
|
2304
|
-
/* @__PURE__ */ (0,
|
|
2341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("table", { className: "fractal-ghost-table__table", children: [
|
|
2342
|
+
(showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2343
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
2305
2344
|
] }) });
|
|
2306
2345
|
}
|
|
2307
2346
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2308
|
-
return /* @__PURE__ */ (0,
|
|
2347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormFieldGhost, { className, labelWidth, ...props });
|
|
2309
2348
|
}
|
|
2310
2349
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2311
|
-
return /* @__PURE__ */ (0,
|
|
2350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2312
2351
|
}
|
|
2313
2352
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2314
|
-
return /* @__PURE__ */ (0,
|
|
2353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2315
2354
|
}
|
|
2316
|
-
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
2317
|
-
return /* @__PURE__ */ (0,
|
|
2318
|
-
/* @__PURE__ */ (0,
|
|
2319
|
-
/* @__PURE__ */ (0,
|
|
2355
|
+
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "md", ...props }) {
|
|
2356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2357
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelGhost, { width: labelWidth }),
|
|
2358
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2320
2359
|
] });
|
|
2321
2360
|
}
|
|
2322
2361
|
function AlertGhost({ className, ...props }) {
|
|
2323
|
-
return /* @__PURE__ */ (0,
|
|
2324
|
-
/* @__PURE__ */ (0,
|
|
2325
|
-
/* @__PURE__ */ (0,
|
|
2362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2363
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "30%" }),
|
|
2364
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: "78%" })
|
|
2326
2365
|
] });
|
|
2327
2366
|
}
|
|
2328
2367
|
function CheckboxGhost({ className, ...props }) {
|
|
2329
|
-
return /* @__PURE__ */ (0,
|
|
2330
|
-
/* @__PURE__ */ (0,
|
|
2331
|
-
/* @__PURE__ */ (0,
|
|
2368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2369
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2370
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" })
|
|
2332
2371
|
] });
|
|
2333
2372
|
}
|
|
2334
2373
|
var ToggleGhost = CheckboxGhost;
|
|
2335
2374
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2336
|
-
return /* @__PURE__ */ (0,
|
|
2375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2337
2376
|
}
|
|
2338
2377
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2339
|
-
return /* @__PURE__ */ (0,
|
|
2378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2340
2379
|
}
|
|
2341
2380
|
var TextButtonGhost = LinkGhost;
|
|
2342
|
-
function DropdownGhost({ className, ...props }) {
|
|
2343
|
-
return /* @__PURE__ */ (0,
|
|
2344
|
-
/* @__PURE__ */ (0,
|
|
2345
|
-
/* @__PURE__ */ (0,
|
|
2381
|
+
function DropdownGhost({ className, controlSize = "md", ...props }) {
|
|
2382
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2383
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "38%" }),
|
|
2384
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2346
2385
|
] });
|
|
2347
2386
|
}
|
|
2348
2387
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2349
|
-
return /* @__PURE__ */ (0,
|
|
2388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, {}, index)) });
|
|
2350
2389
|
}
|
|
2351
2390
|
var TabsGhost = ContentSwitcherGhost;
|
|
2352
2391
|
function DisclosureGhost({ className, ...props }) {
|
|
2353
|
-
return /* @__PURE__ */ (0,
|
|
2354
|
-
/* @__PURE__ */ (0,
|
|
2355
|
-
/* @__PURE__ */ (0,
|
|
2392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2393
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2394
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" })
|
|
2356
2395
|
] });
|
|
2357
2396
|
}
|
|
2358
2397
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2359
|
-
return /* @__PURE__ */ (0,
|
|
2398
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, {}, index)) });
|
|
2360
2399
|
}
|
|
2361
2400
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2362
|
-
return /* @__PURE__ */ (0,
|
|
2363
|
-
/* @__PURE__ */ (0,
|
|
2364
|
-
/* @__PURE__ */ (0,
|
|
2365
|
-
/* @__PURE__ */ (0,
|
|
2401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2402
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2403
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "26%" }),
|
|
2404
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: "46%" })
|
|
2366
2405
|
] });
|
|
2367
2406
|
}
|
|
2368
2407
|
function PromptCardGhost({ className, ...props }) {
|
|
2369
|
-
return /* @__PURE__ */ (0,
|
|
2408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2370
2409
|
}
|
|
2371
2410
|
function ConversationGhost({
|
|
2372
2411
|
className,
|
|
2373
2412
|
"aria-label": ariaLabel = "Loading conversation",
|
|
2374
2413
|
...props
|
|
2375
2414
|
}) {
|
|
2376
|
-
return /* @__PURE__ */ (0,
|
|
2415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2377
2416
|
"div",
|
|
2378
2417
|
{
|
|
2379
2418
|
"aria-busy": "true",
|
|
@@ -2382,54 +2421,54 @@ function ConversationGhost({
|
|
|
2382
2421
|
role: "status",
|
|
2383
2422
|
...props,
|
|
2384
2423
|
children: [
|
|
2385
|
-
/* @__PURE__ */ (0,
|
|
2386
|
-
/* @__PURE__ */ (0,
|
|
2387
|
-
/* @__PURE__ */ (0,
|
|
2388
|
-
/* @__PURE__ */ (0,
|
|
2424
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2425
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "100%" }),
|
|
2426
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "86%" }),
|
|
2427
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "64%" })
|
|
2389
2428
|
] }) }),
|
|
2390
|
-
/* @__PURE__ */ (0,
|
|
2391
|
-
/* @__PURE__ */ (0,
|
|
2392
|
-
/* @__PURE__ */ (0,
|
|
2393
|
-
/* @__PURE__ */ (0,
|
|
2429
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2430
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "92%" }),
|
|
2431
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "78%" }),
|
|
2432
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "58%" })
|
|
2394
2433
|
] })
|
|
2395
2434
|
]
|
|
2396
2435
|
}
|
|
2397
2436
|
);
|
|
2398
2437
|
}
|
|
2399
2438
|
function SortableTableGhost(props) {
|
|
2400
|
-
return /* @__PURE__ */ (0,
|
|
2439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DataTableGhost, { ...props });
|
|
2401
2440
|
}
|
|
2402
2441
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2403
|
-
return /* @__PURE__ */ (0,
|
|
2404
|
-
/* @__PURE__ */ (0,
|
|
2405
|
-
/* @__PURE__ */ (0,
|
|
2406
|
-
/* @__PURE__ */ (0,
|
|
2407
|
-
/* @__PURE__ */ (0,
|
|
2442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2443
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2444
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2445
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, {}),
|
|
2446
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2408
2447
|
] }, index)) })
|
|
2409
2448
|
] });
|
|
2410
2449
|
}
|
|
2411
2450
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2412
|
-
return /* @__PURE__ */ (0,
|
|
2451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2413
2452
|
}
|
|
2414
2453
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2415
|
-
return /* @__PURE__ */ (0,
|
|
2454
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2416
2455
|
}
|
|
2417
2456
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2418
|
-
return /* @__PURE__ */ (0,
|
|
2419
|
-
/* @__PURE__ */ (0,
|
|
2420
|
-
/* @__PURE__ */ (0,
|
|
2421
|
-
/* @__PURE__ */ (0,
|
|
2457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2458
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
|
|
2459
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" }),
|
|
2460
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2422
2461
|
] }),
|
|
2423
|
-
title && /* @__PURE__ */ (0,
|
|
2424
|
-
/* @__PURE__ */ (0,
|
|
2462
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2463
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2425
2464
|
] });
|
|
2426
2465
|
}
|
|
2427
2466
|
|
|
2428
2467
|
// src/components/Sidebar/Sidebar.tsx
|
|
2429
2468
|
var React16 = __toESM(require("react"), 1);
|
|
2430
|
-
var
|
|
2469
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2431
2470
|
var Sidebar = React16.forwardRef(
|
|
2432
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2471
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2433
2472
|
"aside",
|
|
2434
2473
|
{
|
|
2435
2474
|
ref,
|
|
@@ -2442,11 +2481,11 @@ var Sidebar = React16.forwardRef(
|
|
|
2442
2481
|
);
|
|
2443
2482
|
Sidebar.displayName = "Sidebar";
|
|
2444
2483
|
var SidebarHeader = React16.forwardRef(
|
|
2445
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2484
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2446
2485
|
);
|
|
2447
2486
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2448
2487
|
var SidebarBrand = React16.forwardRef(
|
|
2449
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2488
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2450
2489
|
);
|
|
2451
2490
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2452
2491
|
function SidebarAccountMenu({
|
|
@@ -2457,7 +2496,7 @@ function SidebarAccountMenu({
|
|
|
2457
2496
|
icon,
|
|
2458
2497
|
className
|
|
2459
2498
|
}) {
|
|
2460
|
-
return /* @__PURE__ */ (0,
|
|
2499
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2461
2500
|
Dropdown,
|
|
2462
2501
|
{
|
|
2463
2502
|
align: "left",
|
|
@@ -2467,9 +2506,9 @@ function SidebarAccountMenu({
|
|
|
2467
2506
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2468
2507
|
selectedValue: "",
|
|
2469
2508
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2470
|
-
triggerContent: /* @__PURE__ */ (0,
|
|
2471
|
-
icon && /* @__PURE__ */ (0,
|
|
2472
|
-
/* @__PURE__ */ (0,
|
|
2509
|
+
triggerContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
2510
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2511
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2473
2512
|
] }),
|
|
2474
2513
|
triggerLabel,
|
|
2475
2514
|
triggerVariant: "tertiary"
|
|
@@ -2477,15 +2516,15 @@ function SidebarAccountMenu({
|
|
|
2477
2516
|
);
|
|
2478
2517
|
}
|
|
2479
2518
|
var SidebarNav = React16.forwardRef(
|
|
2480
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2519
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2481
2520
|
);
|
|
2482
2521
|
SidebarNav.displayName = "SidebarNav";
|
|
2483
2522
|
var SidebarSection = React16.forwardRef(
|
|
2484
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2523
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2485
2524
|
);
|
|
2486
2525
|
SidebarSection.displayName = "SidebarSection";
|
|
2487
2526
|
var SidebarNavItem = React16.forwardRef(
|
|
2488
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2527
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2489
2528
|
"button",
|
|
2490
2529
|
{
|
|
2491
2530
|
ref,
|
|
@@ -2495,28 +2534,28 @@ var SidebarNavItem = React16.forwardRef(
|
|
|
2495
2534
|
"aria-current": active ? "page" : void 0,
|
|
2496
2535
|
...props,
|
|
2497
2536
|
children: [
|
|
2498
|
-
icon && /* @__PURE__ */ (0,
|
|
2499
|
-
/* @__PURE__ */ (0,
|
|
2500
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
2537
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2539
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2501
2540
|
]
|
|
2502
2541
|
}
|
|
2503
2542
|
)
|
|
2504
2543
|
);
|
|
2505
2544
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2506
2545
|
var SidebarFooter = React16.forwardRef(
|
|
2507
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2546
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2508
2547
|
);
|
|
2509
2548
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2510
2549
|
|
|
2511
2550
|
// src/components/SidePanel/SidePanel.tsx
|
|
2512
2551
|
var import_react_dom3 = require("react-dom");
|
|
2513
2552
|
var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
|
|
2514
|
-
var
|
|
2553
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2515
2554
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2516
2555
|
useEscapeDismiss(80, onClose, open);
|
|
2517
2556
|
if (!open) return null;
|
|
2518
2557
|
return (0, import_react_dom3.createPortal)(
|
|
2519
|
-
/* @__PURE__ */ (0,
|
|
2558
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2520
2559
|
"aside",
|
|
2521
2560
|
{
|
|
2522
2561
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2525,15 +2564,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2525
2564
|
role: "dialog",
|
|
2526
2565
|
onMouseDown: (event) => event.stopPropagation(),
|
|
2527
2566
|
children: [
|
|
2528
|
-
/* @__PURE__ */ (0,
|
|
2529
|
-
/* @__PURE__ */ (0,
|
|
2530
|
-
typeof title === "string" ? /* @__PURE__ */ (0,
|
|
2531
|
-
description && /* @__PURE__ */ (0,
|
|
2567
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "fractal-side-panel__header", children: [
|
|
2568
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-side-panel__heading", children: [
|
|
2569
|
+
typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-side-panel__title", children: title }),
|
|
2570
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "fractal-side-panel__description", children: description })
|
|
2532
2571
|
] }),
|
|
2533
|
-
/* @__PURE__ */ (0,
|
|
2572
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fractal_icons13.Close, { size: 18 }) })
|
|
2534
2573
|
] }),
|
|
2535
|
-
/* @__PURE__ */ (0,
|
|
2536
|
-
footer && /* @__PURE__ */ (0,
|
|
2574
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UILoader, { label: loadingLabel }) : children }),
|
|
2575
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
2537
2576
|
]
|
|
2538
2577
|
}
|
|
2539
2578
|
) }),
|
|
@@ -2543,17 +2582,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2543
2582
|
|
|
2544
2583
|
// src/components/Textarea/Textarea.tsx
|
|
2545
2584
|
var React17 = __toESM(require("react"), 1);
|
|
2546
|
-
var
|
|
2585
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2547
2586
|
var Textarea = React17.forwardRef(
|
|
2548
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2587
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
2549
2588
|
);
|
|
2550
2589
|
Textarea.displayName = "Textarea";
|
|
2551
2590
|
|
|
2552
2591
|
// src/components/TextButton/TextButton.tsx
|
|
2553
2592
|
var React18 = __toESM(require("react"), 1);
|
|
2554
|
-
var
|
|
2593
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2555
2594
|
var TextButton = React18.forwardRef(
|
|
2556
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2595
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2557
2596
|
"button",
|
|
2558
2597
|
{
|
|
2559
2598
|
ref,
|
|
@@ -2561,9 +2600,9 @@ var TextButton = React18.forwardRef(
|
|
|
2561
2600
|
type: "button",
|
|
2562
2601
|
...props,
|
|
2563
2602
|
children: [
|
|
2564
|
-
icon && iconPosition === "start" && /* @__PURE__ */ (0,
|
|
2565
|
-
/* @__PURE__ */ (0,
|
|
2566
|
-
icon && iconPosition === "end" && /* @__PURE__ */ (0,
|
|
2603
|
+
icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2604
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children }),
|
|
2605
|
+
icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2567
2606
|
]
|
|
2568
2607
|
}
|
|
2569
2608
|
)
|
|
@@ -2573,7 +2612,7 @@ TextButton.displayName = "TextButton";
|
|
|
2573
2612
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2574
2613
|
var React19 = __toESM(require("react"), 1);
|
|
2575
2614
|
var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
|
|
2576
|
-
var
|
|
2615
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2577
2616
|
function FileDropzone({
|
|
2578
2617
|
files,
|
|
2579
2618
|
onFilesChange,
|
|
@@ -2593,8 +2632,8 @@ function FileDropzone({
|
|
|
2593
2632
|
if (additions.length === 0) return;
|
|
2594
2633
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2595
2634
|
};
|
|
2596
|
-
return /* @__PURE__ */ (0,
|
|
2597
|
-
/* @__PURE__ */ (0,
|
|
2635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2636
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2598
2637
|
"input",
|
|
2599
2638
|
{
|
|
2600
2639
|
ref: inputRef,
|
|
@@ -2610,7 +2649,7 @@ function FileDropzone({
|
|
|
2610
2649
|
}
|
|
2611
2650
|
}
|
|
2612
2651
|
),
|
|
2613
|
-
/* @__PURE__ */ (0,
|
|
2652
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
2614
2653
|
"button",
|
|
2615
2654
|
{
|
|
2616
2655
|
className: "fractal-file-dropzone__target",
|
|
@@ -2633,18 +2672,18 @@ function FileDropzone({
|
|
|
2633
2672
|
addFiles(event.dataTransfer.files);
|
|
2634
2673
|
},
|
|
2635
2674
|
children: [
|
|
2636
|
-
/* @__PURE__ */ (0,
|
|
2637
|
-
/* @__PURE__ */ (0,
|
|
2638
|
-
/* @__PURE__ */ (0,
|
|
2639
|
-
description && /* @__PURE__ */ (0,
|
|
2675
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2676
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2677
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2678
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2640
2679
|
] })
|
|
2641
2680
|
]
|
|
2642
2681
|
}
|
|
2643
2682
|
),
|
|
2644
|
-
files.length > 0 && /* @__PURE__ */ (0,
|
|
2645
|
-
/* @__PURE__ */ (0,
|
|
2646
|
-
/* @__PURE__ */ (0,
|
|
2647
|
-
/* @__PURE__ */ (0,
|
|
2683
|
+
files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
|
|
2684
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2685
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2686
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2648
2687
|
"button",
|
|
2649
2688
|
{
|
|
2650
2689
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2652,7 +2691,7 @@ function FileDropzone({
|
|
|
2652
2691
|
"aria-label": `Remove ${file.name}`,
|
|
2653
2692
|
disabled,
|
|
2654
2693
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2655
|
-
children: /* @__PURE__ */ (0,
|
|
2694
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.Close, { "aria-hidden": "true", size: 14 })
|
|
2656
2695
|
}
|
|
2657
2696
|
)
|
|
2658
2697
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2666,7 +2705,7 @@ function formatFileSize(bytes) {
|
|
|
2666
2705
|
|
|
2667
2706
|
// src/components/Pagination/Pagination.tsx
|
|
2668
2707
|
var import_fractal_icons15 = require("@mirror-physics/fractal-icons");
|
|
2669
|
-
var
|
|
2708
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2670
2709
|
function Pagination({
|
|
2671
2710
|
page,
|
|
2672
2711
|
pageSize,
|
|
@@ -2682,10 +2721,10 @@ function Pagination({
|
|
|
2682
2721
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
2683
2722
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2684
2723
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2685
|
-
return /* @__PURE__ */ (0,
|
|
2686
|
-
/* @__PURE__ */ (0,
|
|
2687
|
-
/* @__PURE__ */ (0,
|
|
2688
|
-
canChangePageSize && /* @__PURE__ */ (0,
|
|
2724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2725
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2726
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fractal-pagination__controls", children: [
|
|
2727
|
+
canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2689
2728
|
Dropdown,
|
|
2690
2729
|
{
|
|
2691
2730
|
align: "right",
|
|
@@ -2702,7 +2741,7 @@ function Pagination({
|
|
|
2702
2741
|
triggerVariant: "tertiary"
|
|
2703
2742
|
}
|
|
2704
2743
|
),
|
|
2705
|
-
/* @__PURE__ */ (0,
|
|
2744
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2706
2745
|
"button",
|
|
2707
2746
|
{
|
|
2708
2747
|
className: "fractal-pagination__button",
|
|
@@ -2711,15 +2750,15 @@ function Pagination({
|
|
|
2711
2750
|
title: "Previous page",
|
|
2712
2751
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2713
2752
|
onClick: () => onPageChange(currentPage - 1),
|
|
2714
|
-
children: /* @__PURE__ */ (0,
|
|
2753
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fractal_icons15.ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2715
2754
|
}
|
|
2716
2755
|
),
|
|
2717
|
-
/* @__PURE__ */ (0,
|
|
2756
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
2718
2757
|
currentPage,
|
|
2719
2758
|
" of ",
|
|
2720
2759
|
totalPages
|
|
2721
2760
|
] }),
|
|
2722
|
-
/* @__PURE__ */ (0,
|
|
2761
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2723
2762
|
"button",
|
|
2724
2763
|
{
|
|
2725
2764
|
className: "fractal-pagination__button",
|
|
@@ -2728,7 +2767,7 @@ function Pagination({
|
|
|
2728
2767
|
title: "Next page",
|
|
2729
2768
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2730
2769
|
onClick: () => onPageChange(currentPage + 1),
|
|
2731
|
-
children: /* @__PURE__ */ (0,
|
|
2770
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fractal_icons15.ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2732
2771
|
}
|
|
2733
2772
|
)
|
|
2734
2773
|
] })
|
|
@@ -2786,6 +2825,7 @@ function Pagination({
|
|
|
2786
2825
|
PromptCard,
|
|
2787
2826
|
PromptCardGhost,
|
|
2788
2827
|
PromptGrid,
|
|
2828
|
+
Radio,
|
|
2789
2829
|
SidePanel,
|
|
2790
2830
|
SidePanelGhost,
|
|
2791
2831
|
Sidebar,
|