@mirror-physics/fractal-ui 0.2.0-next.74 → 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 +184 -151
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +97 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +183 -151
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
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,
|
|
@@ -1681,10 +1682,41 @@ function Checkbox({
|
|
|
1681
1682
|
);
|
|
1682
1683
|
}
|
|
1683
1684
|
|
|
1685
|
+
// src/components/Radio/Radio.tsx
|
|
1686
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1687
|
+
function Radio({
|
|
1688
|
+
checked,
|
|
1689
|
+
className,
|
|
1690
|
+
description,
|
|
1691
|
+
disabled,
|
|
1692
|
+
label,
|
|
1693
|
+
onCheckedChange,
|
|
1694
|
+
...props
|
|
1695
|
+
}) {
|
|
1696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
|
|
1697
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1698
|
+
"input",
|
|
1699
|
+
{
|
|
1700
|
+
...props,
|
|
1701
|
+
checked,
|
|
1702
|
+
className: "fractal-radio__input",
|
|
1703
|
+
disabled,
|
|
1704
|
+
onChange: (event) => onCheckedChange?.(event.currentTarget.checked),
|
|
1705
|
+
type: "radio"
|
|
1706
|
+
}
|
|
1707
|
+
),
|
|
1708
|
+
/* @__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" }) }),
|
|
1709
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "fractal-radio__content", children: [
|
|
1710
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__label", children: label }),
|
|
1711
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-radio__description", children: description })
|
|
1712
|
+
] })
|
|
1713
|
+
] });
|
|
1714
|
+
}
|
|
1715
|
+
|
|
1684
1716
|
// src/components/SortableTable/SortableTable.tsx
|
|
1685
1717
|
var import_react4 = require("react");
|
|
1686
1718
|
var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
|
|
1687
|
-
var
|
|
1719
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1688
1720
|
function SortableTable({
|
|
1689
1721
|
columns,
|
|
1690
1722
|
data,
|
|
@@ -1779,16 +1811,16 @@ function SortableTable({
|
|
|
1779
1811
|
onSortChange?.(nextKey, nextDirection);
|
|
1780
1812
|
}
|
|
1781
1813
|
};
|
|
1782
|
-
return /* @__PURE__ */ (0,
|
|
1783
|
-
header && /* @__PURE__ */ (0,
|
|
1784
|
-
visibleRows.length === 0 ? /* @__PURE__ */ (0,
|
|
1785
|
-
/* @__PURE__ */ (0,
|
|
1786
|
-
selection && /* @__PURE__ */ (0,
|
|
1814
|
+
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: [
|
|
1815
|
+
header && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1816
|
+
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: [
|
|
1817
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1818
|
+
selection && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1787
1819
|
"th",
|
|
1788
1820
|
{
|
|
1789
1821
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1790
1822
|
scope: "col",
|
|
1791
|
-
children: /* @__PURE__ */ (0,
|
|
1823
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1792
1824
|
Checkbox,
|
|
1793
1825
|
{
|
|
1794
1826
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -1814,7 +1846,7 @@ function SortableTable({
|
|
|
1814
1846
|
columns.map((col) => {
|
|
1815
1847
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1816
1848
|
if (!col.sortable) {
|
|
1817
|
-
return /* @__PURE__ */ (0,
|
|
1849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1818
1850
|
"th",
|
|
1819
1851
|
{
|
|
1820
1852
|
className: "fractal-sortable-table-th",
|
|
@@ -1825,13 +1857,13 @@ function SortableTable({
|
|
|
1825
1857
|
col.key
|
|
1826
1858
|
);
|
|
1827
1859
|
}
|
|
1828
|
-
return /* @__PURE__ */ (0,
|
|
1860
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1829
1861
|
"th",
|
|
1830
1862
|
{
|
|
1831
1863
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1832
1864
|
scope: "col",
|
|
1833
1865
|
style: { width: col.width },
|
|
1834
|
-
children: /* @__PURE__ */ (0,
|
|
1866
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1835
1867
|
"button",
|
|
1836
1868
|
{
|
|
1837
1869
|
type: "button",
|
|
@@ -1842,8 +1874,8 @@ function SortableTable({
|
|
|
1842
1874
|
onClick: () => handleSortClick(col.key),
|
|
1843
1875
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1844
1876
|
children: [
|
|
1845
|
-
/* @__PURE__ */ (0,
|
|
1846
|
-
/* @__PURE__ */ (0,
|
|
1877
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: col.header }),
|
|
1878
|
+
/* @__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
1879
|
]
|
|
1848
1880
|
}
|
|
1849
1881
|
)
|
|
@@ -1852,7 +1884,7 @@ function SortableTable({
|
|
|
1852
1884
|
);
|
|
1853
1885
|
})
|
|
1854
1886
|
] }) }),
|
|
1855
|
-
/* @__PURE__ */ (0,
|
|
1887
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1856
1888
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1857
1889
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
1858
1890
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -1861,7 +1893,7 @@ function SortableTable({
|
|
|
1861
1893
|
label: rowAction.label(row, rowIndex),
|
|
1862
1894
|
icon: rowAction.icon(row, rowIndex)
|
|
1863
1895
|
} : null;
|
|
1864
|
-
return /* @__PURE__ */ (0,
|
|
1896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1865
1897
|
"tr",
|
|
1866
1898
|
{
|
|
1867
1899
|
className: cn(
|
|
@@ -1885,7 +1917,7 @@ function SortableTable({
|
|
|
1885
1917
|
role: interactive ? "button" : void 0,
|
|
1886
1918
|
tabIndex: interactive ? 0 : void 0,
|
|
1887
1919
|
children: [
|
|
1888
|
-
selection && /* @__PURE__ */ (0,
|
|
1920
|
+
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
1921
|
Checkbox,
|
|
1890
1922
|
{
|
|
1891
1923
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -1897,7 +1929,7 @@ function SortableTable({
|
|
|
1897
1929
|
}
|
|
1898
1930
|
}
|
|
1899
1931
|
) }),
|
|
1900
|
-
columns.map((col, columnIndex) => /* @__PURE__ */ (0,
|
|
1932
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1901
1933
|
"td",
|
|
1902
1934
|
{
|
|
1903
1935
|
className: cn(
|
|
@@ -1907,7 +1939,7 @@ function SortableTable({
|
|
|
1907
1939
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1908
1940
|
children: [
|
|
1909
1941
|
col.render(row, rowIndex),
|
|
1910
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0,
|
|
1942
|
+
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
1943
|
]
|
|
1912
1944
|
},
|
|
1913
1945
|
col.key
|
|
@@ -1923,7 +1955,7 @@ function SortableTable({
|
|
|
1923
1955
|
|
|
1924
1956
|
// src/components/Tabs/Tabs.tsx
|
|
1925
1957
|
var import_react5 = require("react");
|
|
1926
|
-
var
|
|
1958
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1927
1959
|
function Tabs({
|
|
1928
1960
|
items,
|
|
1929
1961
|
defaultValue,
|
|
@@ -1994,8 +2026,8 @@ function Tabs({
|
|
|
1994
2026
|
selectTab(nextId2);
|
|
1995
2027
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1996
2028
|
};
|
|
1997
|
-
return /* @__PURE__ */ (0,
|
|
1998
|
-
/* @__PURE__ */ (0,
|
|
2029
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
2030
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1999
2031
|
"div",
|
|
2000
2032
|
{
|
|
2001
2033
|
ref: tabListRef,
|
|
@@ -2008,7 +2040,7 @@ function Tabs({
|
|
|
2008
2040
|
const isActive = item.id === activeId;
|
|
2009
2041
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2010
2042
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2011
|
-
return /* @__PURE__ */ (0,
|
|
2043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2012
2044
|
"button",
|
|
2013
2045
|
{
|
|
2014
2046
|
ref: (el) => {
|
|
@@ -2039,7 +2071,7 @@ function Tabs({
|
|
|
2039
2071
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
2040
2072
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
2041
2073
|
const isActive = item.id === activeId;
|
|
2042
|
-
return /* @__PURE__ */ (0,
|
|
2074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2043
2075
|
"div",
|
|
2044
2076
|
{
|
|
2045
2077
|
id: panelId,
|
|
@@ -2057,7 +2089,7 @@ function Tabs({
|
|
|
2057
2089
|
|
|
2058
2090
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
2059
2091
|
var React15 = __toESM(require("react"), 1);
|
|
2060
|
-
var
|
|
2092
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2061
2093
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
2062
2094
|
const switcherRef = React15.useRef(null);
|
|
2063
2095
|
const buttonRefs = React15.useRef([]);
|
|
@@ -2115,7 +2147,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2115
2147
|
onValueChange(items[nextIndex].value);
|
|
2116
2148
|
}
|
|
2117
2149
|
};
|
|
2118
|
-
return /* @__PURE__ */ (0,
|
|
2150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
2119
2151
|
"div",
|
|
2120
2152
|
{
|
|
2121
2153
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -2123,10 +2155,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2123
2155
|
"aria-label": ariaLabel,
|
|
2124
2156
|
ref: switcherRef,
|
|
2125
2157
|
children: [
|
|
2126
|
-
/* @__PURE__ */ (0,
|
|
2158
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
2127
2159
|
items.map((item, index) => {
|
|
2128
2160
|
const active = item.value === value;
|
|
2129
|
-
return /* @__PURE__ */ (0,
|
|
2161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2130
2162
|
"button",
|
|
2131
2163
|
{
|
|
2132
2164
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -2160,7 +2192,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2160
2192
|
// src/components/Disclosure/Disclosure.tsx
|
|
2161
2193
|
var import_react6 = require("react");
|
|
2162
2194
|
var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
|
|
2163
|
-
var
|
|
2195
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2164
2196
|
function Disclosure({
|
|
2165
2197
|
title,
|
|
2166
2198
|
meta,
|
|
@@ -2188,7 +2220,7 @@ function Disclosure({
|
|
|
2188
2220
|
onOpenChange?.(next);
|
|
2189
2221
|
}
|
|
2190
2222
|
};
|
|
2191
|
-
return /* @__PURE__ */ (0,
|
|
2223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2192
2224
|
"div",
|
|
2193
2225
|
{
|
|
2194
2226
|
className: cn(
|
|
@@ -2199,7 +2231,7 @@ function Disclosure({
|
|
|
2199
2231
|
className
|
|
2200
2232
|
),
|
|
2201
2233
|
children: [
|
|
2202
|
-
/* @__PURE__ */ (0,
|
|
2234
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2203
2235
|
"button",
|
|
2204
2236
|
{
|
|
2205
2237
|
type: "button",
|
|
@@ -2210,13 +2242,13 @@ function Disclosure({
|
|
|
2210
2242
|
disabled,
|
|
2211
2243
|
onClick: toggle,
|
|
2212
2244
|
children: [
|
|
2213
|
-
/* @__PURE__ */ (0,
|
|
2214
|
-
/* @__PURE__ */ (0,
|
|
2215
|
-
meta && /* @__PURE__ */ (0,
|
|
2245
|
+
/* @__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 }) }),
|
|
2246
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-title", children: title }),
|
|
2247
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2216
2248
|
]
|
|
2217
2249
|
}
|
|
2218
2250
|
),
|
|
2219
|
-
/* @__PURE__ */ (0,
|
|
2251
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2220
2252
|
"div",
|
|
2221
2253
|
{
|
|
2222
2254
|
id: panelId,
|
|
@@ -2224,7 +2256,7 @@ function Disclosure({
|
|
|
2224
2256
|
"aria-labelledby": headerId,
|
|
2225
2257
|
className: "fractal-disclosure-panel",
|
|
2226
2258
|
hidden: !isOpen,
|
|
2227
|
-
children: /* @__PURE__ */ (0,
|
|
2259
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2228
2260
|
}
|
|
2229
2261
|
)
|
|
2230
2262
|
]
|
|
@@ -2233,18 +2265,18 @@ function Disclosure({
|
|
|
2233
2265
|
}
|
|
2234
2266
|
|
|
2235
2267
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2236
|
-
var
|
|
2268
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2237
2269
|
var LATTICE_COUNT = 160;
|
|
2238
2270
|
var WAVE_PERIOD = 80;
|
|
2239
2271
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2240
|
-
return /* @__PURE__ */ (0,
|
|
2272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2241
2273
|
"span",
|
|
2242
2274
|
{
|
|
2243
2275
|
"aria-label": label,
|
|
2244
2276
|
className: cn("fractal-lattice-loader", className),
|
|
2245
2277
|
role: "progressbar",
|
|
2246
2278
|
...props,
|
|
2247
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0,
|
|
2279
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2248
2280
|
"span",
|
|
2249
2281
|
{
|
|
2250
2282
|
"aria-hidden": "true",
|
|
@@ -2258,10 +2290,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2258
2290
|
}
|
|
2259
2291
|
|
|
2260
2292
|
// src/components/Ghost/Ghost.tsx
|
|
2261
|
-
var
|
|
2293
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2262
2294
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2263
2295
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2264
|
-
return /* @__PURE__ */ (0,
|
|
2296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2265
2297
|
"div",
|
|
2266
2298
|
{
|
|
2267
2299
|
"aria-hidden": "true",
|
|
@@ -2277,15 +2309,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2277
2309
|
);
|
|
2278
2310
|
}
|
|
2279
2311
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2280
|
-
return /* @__PURE__ */ (0,
|
|
2312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2281
2313
|
}
|
|
2282
2314
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
2283
|
-
return /* @__PURE__ */ (0,
|
|
2315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2284
2316
|
}
|
|
2285
2317
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2286
|
-
return /* @__PURE__ */ (0,
|
|
2287
|
-
showHeader && /* @__PURE__ */ (0,
|
|
2288
|
-
/* @__PURE__ */ (0,
|
|
2318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2319
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "38%" }),
|
|
2320
|
+
/* @__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
2321
|
] });
|
|
2290
2322
|
}
|
|
2291
2323
|
function DataTableGhost({
|
|
@@ -2299,81 +2331,81 @@ function DataTableGhost({
|
|
|
2299
2331
|
...props
|
|
2300
2332
|
}) {
|
|
2301
2333
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2302
|
-
return /* @__PURE__ */ (0,
|
|
2303
|
-
(showHeader || headers) && /* @__PURE__ */ (0,
|
|
2304
|
-
/* @__PURE__ */ (0,
|
|
2334
|
+
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: [
|
|
2335
|
+
(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)) }) }),
|
|
2336
|
+
/* @__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
2337
|
] }) });
|
|
2306
2338
|
}
|
|
2307
2339
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2308
|
-
return /* @__PURE__ */ (0,
|
|
2340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormFieldGhost, { className, labelWidth, ...props });
|
|
2309
2341
|
}
|
|
2310
2342
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2311
|
-
return /* @__PURE__ */ (0,
|
|
2343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2312
2344
|
}
|
|
2313
2345
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2314
|
-
return /* @__PURE__ */ (0,
|
|
2346
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2315
2347
|
}
|
|
2316
2348
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
2317
|
-
return /* @__PURE__ */ (0,
|
|
2318
|
-
/* @__PURE__ */ (0,
|
|
2319
|
-
/* @__PURE__ */ (0,
|
|
2349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2350
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelGhost, { width: labelWidth }),
|
|
2351
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2320
2352
|
] });
|
|
2321
2353
|
}
|
|
2322
2354
|
function AlertGhost({ className, ...props }) {
|
|
2323
|
-
return /* @__PURE__ */ (0,
|
|
2324
|
-
/* @__PURE__ */ (0,
|
|
2325
|
-
/* @__PURE__ */ (0,
|
|
2355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2356
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "30%" }),
|
|
2357
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: "78%" })
|
|
2326
2358
|
] });
|
|
2327
2359
|
}
|
|
2328
2360
|
function CheckboxGhost({ className, ...props }) {
|
|
2329
|
-
return /* @__PURE__ */ (0,
|
|
2330
|
-
/* @__PURE__ */ (0,
|
|
2331
|
-
/* @__PURE__ */ (0,
|
|
2361
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2362
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2363
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" })
|
|
2332
2364
|
] });
|
|
2333
2365
|
}
|
|
2334
2366
|
var ToggleGhost = CheckboxGhost;
|
|
2335
2367
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2336
|
-
return /* @__PURE__ */ (0,
|
|
2368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2337
2369
|
}
|
|
2338
2370
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2339
|
-
return /* @__PURE__ */ (0,
|
|
2371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2340
2372
|
}
|
|
2341
2373
|
var TextButtonGhost = LinkGhost;
|
|
2342
2374
|
function DropdownGhost({ className, ...props }) {
|
|
2343
|
-
return /* @__PURE__ */ (0,
|
|
2344
|
-
/* @__PURE__ */ (0,
|
|
2345
|
-
/* @__PURE__ */ (0,
|
|
2375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2376
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "38%" }),
|
|
2377
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2346
2378
|
] });
|
|
2347
2379
|
}
|
|
2348
2380
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2349
|
-
return /* @__PURE__ */ (0,
|
|
2381
|
+
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
2382
|
}
|
|
2351
2383
|
var TabsGhost = ContentSwitcherGhost;
|
|
2352
2384
|
function DisclosureGhost({ className, ...props }) {
|
|
2353
|
-
return /* @__PURE__ */ (0,
|
|
2354
|
-
/* @__PURE__ */ (0,
|
|
2355
|
-
/* @__PURE__ */ (0,
|
|
2385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2386
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2387
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" })
|
|
2356
2388
|
] });
|
|
2357
2389
|
}
|
|
2358
2390
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2359
|
-
return /* @__PURE__ */ (0,
|
|
2391
|
+
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
2392
|
}
|
|
2361
2393
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2362
|
-
return /* @__PURE__ */ (0,
|
|
2363
|
-
/* @__PURE__ */ (0,
|
|
2364
|
-
/* @__PURE__ */ (0,
|
|
2365
|
-
/* @__PURE__ */ (0,
|
|
2394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2396
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "26%" }),
|
|
2397
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { size: "sm", width: "46%" })
|
|
2366
2398
|
] });
|
|
2367
2399
|
}
|
|
2368
2400
|
function PromptCardGhost({ className, ...props }) {
|
|
2369
|
-
return /* @__PURE__ */ (0,
|
|
2401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2370
2402
|
}
|
|
2371
2403
|
function ConversationGhost({
|
|
2372
2404
|
className,
|
|
2373
2405
|
"aria-label": ariaLabel = "Loading conversation",
|
|
2374
2406
|
...props
|
|
2375
2407
|
}) {
|
|
2376
|
-
return /* @__PURE__ */ (0,
|
|
2408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2377
2409
|
"div",
|
|
2378
2410
|
{
|
|
2379
2411
|
"aria-busy": "true",
|
|
@@ -2382,54 +2414,54 @@ function ConversationGhost({
|
|
|
2382
2414
|
role: "status",
|
|
2383
2415
|
...props,
|
|
2384
2416
|
children: [
|
|
2385
|
-
/* @__PURE__ */ (0,
|
|
2386
|
-
/* @__PURE__ */ (0,
|
|
2387
|
-
/* @__PURE__ */ (0,
|
|
2388
|
-
/* @__PURE__ */ (0,
|
|
2417
|
+
/* @__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: [
|
|
2418
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "100%" }),
|
|
2419
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "86%" }),
|
|
2420
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "64%" })
|
|
2389
2421
|
] }) }),
|
|
2390
|
-
/* @__PURE__ */ (0,
|
|
2391
|
-
/* @__PURE__ */ (0,
|
|
2392
|
-
/* @__PURE__ */ (0,
|
|
2393
|
-
/* @__PURE__ */ (0,
|
|
2422
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2423
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "92%" }),
|
|
2424
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "78%" }),
|
|
2425
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "58%" })
|
|
2394
2426
|
] })
|
|
2395
2427
|
]
|
|
2396
2428
|
}
|
|
2397
2429
|
);
|
|
2398
2430
|
}
|
|
2399
2431
|
function SortableTableGhost(props) {
|
|
2400
|
-
return /* @__PURE__ */ (0,
|
|
2432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DataTableGhost, { ...props });
|
|
2401
2433
|
}
|
|
2402
2434
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2403
|
-
return /* @__PURE__ */ (0,
|
|
2404
|
-
/* @__PURE__ */ (0,
|
|
2405
|
-
/* @__PURE__ */ (0,
|
|
2406
|
-
/* @__PURE__ */ (0,
|
|
2407
|
-
/* @__PURE__ */ (0,
|
|
2435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2436
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2437
|
+
/* @__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: [
|
|
2438
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, {}),
|
|
2439
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2408
2440
|
] }, index)) })
|
|
2409
2441
|
] });
|
|
2410
2442
|
}
|
|
2411
2443
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2412
|
-
return /* @__PURE__ */ (0,
|
|
2444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2413
2445
|
}
|
|
2414
2446
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2415
|
-
return /* @__PURE__ */ (0,
|
|
2447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2416
2448
|
}
|
|
2417
2449
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2418
|
-
return /* @__PURE__ */ (0,
|
|
2419
|
-
/* @__PURE__ */ (0,
|
|
2420
|
-
/* @__PURE__ */ (0,
|
|
2421
|
-
/* @__PURE__ */ (0,
|
|
2450
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2451
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
|
|
2452
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(GhostLine, { width: "42%" }),
|
|
2453
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2422
2454
|
] }),
|
|
2423
|
-
title && /* @__PURE__ */ (0,
|
|
2424
|
-
/* @__PURE__ */ (0,
|
|
2455
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2456
|
+
/* @__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
2457
|
] });
|
|
2426
2458
|
}
|
|
2427
2459
|
|
|
2428
2460
|
// src/components/Sidebar/Sidebar.tsx
|
|
2429
2461
|
var React16 = __toESM(require("react"), 1);
|
|
2430
|
-
var
|
|
2462
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2431
2463
|
var Sidebar = React16.forwardRef(
|
|
2432
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2464
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2433
2465
|
"aside",
|
|
2434
2466
|
{
|
|
2435
2467
|
ref,
|
|
@@ -2442,11 +2474,11 @@ var Sidebar = React16.forwardRef(
|
|
|
2442
2474
|
);
|
|
2443
2475
|
Sidebar.displayName = "Sidebar";
|
|
2444
2476
|
var SidebarHeader = React16.forwardRef(
|
|
2445
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2477
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2446
2478
|
);
|
|
2447
2479
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2448
2480
|
var SidebarBrand = React16.forwardRef(
|
|
2449
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0,
|
|
2481
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2450
2482
|
);
|
|
2451
2483
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2452
2484
|
function SidebarAccountMenu({
|
|
@@ -2457,7 +2489,7 @@ function SidebarAccountMenu({
|
|
|
2457
2489
|
icon,
|
|
2458
2490
|
className
|
|
2459
2491
|
}) {
|
|
2460
|
-
return /* @__PURE__ */ (0,
|
|
2492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2461
2493
|
Dropdown,
|
|
2462
2494
|
{
|
|
2463
2495
|
align: "left",
|
|
@@ -2467,9 +2499,9 @@ function SidebarAccountMenu({
|
|
|
2467
2499
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2468
2500
|
selectedValue: "",
|
|
2469
2501
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2470
|
-
triggerContent: /* @__PURE__ */ (0,
|
|
2471
|
-
icon && /* @__PURE__ */ (0,
|
|
2472
|
-
/* @__PURE__ */ (0,
|
|
2502
|
+
triggerContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
2503
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2504
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2473
2505
|
] }),
|
|
2474
2506
|
triggerLabel,
|
|
2475
2507
|
triggerVariant: "tertiary"
|
|
@@ -2477,15 +2509,15 @@ function SidebarAccountMenu({
|
|
|
2477
2509
|
);
|
|
2478
2510
|
}
|
|
2479
2511
|
var SidebarNav = React16.forwardRef(
|
|
2480
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2512
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2481
2513
|
);
|
|
2482
2514
|
SidebarNav.displayName = "SidebarNav";
|
|
2483
2515
|
var SidebarSection = React16.forwardRef(
|
|
2484
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2516
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2485
2517
|
);
|
|
2486
2518
|
SidebarSection.displayName = "SidebarSection";
|
|
2487
2519
|
var SidebarNavItem = React16.forwardRef(
|
|
2488
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2520
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2489
2521
|
"button",
|
|
2490
2522
|
{
|
|
2491
2523
|
ref,
|
|
@@ -2495,28 +2527,28 @@ var SidebarNavItem = React16.forwardRef(
|
|
|
2495
2527
|
"aria-current": active ? "page" : void 0,
|
|
2496
2528
|
...props,
|
|
2497
2529
|
children: [
|
|
2498
|
-
icon && /* @__PURE__ */ (0,
|
|
2499
|
-
/* @__PURE__ */ (0,
|
|
2500
|
-
endAdornment && /* @__PURE__ */ (0,
|
|
2530
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2531
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2532
|
+
endAdornment && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2501
2533
|
]
|
|
2502
2534
|
}
|
|
2503
2535
|
)
|
|
2504
2536
|
);
|
|
2505
2537
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2506
2538
|
var SidebarFooter = React16.forwardRef(
|
|
2507
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2539
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2508
2540
|
);
|
|
2509
2541
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2510
2542
|
|
|
2511
2543
|
// src/components/SidePanel/SidePanel.tsx
|
|
2512
2544
|
var import_react_dom3 = require("react-dom");
|
|
2513
2545
|
var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
|
|
2514
|
-
var
|
|
2546
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2515
2547
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2516
2548
|
useEscapeDismiss(80, onClose, open);
|
|
2517
2549
|
if (!open) return null;
|
|
2518
2550
|
return (0, import_react_dom3.createPortal)(
|
|
2519
|
-
/* @__PURE__ */ (0,
|
|
2551
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2520
2552
|
"aside",
|
|
2521
2553
|
{
|
|
2522
2554
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2525,15 +2557,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2525
2557
|
role: "dialog",
|
|
2526
2558
|
onMouseDown: (event) => event.stopPropagation(),
|
|
2527
2559
|
children: [
|
|
2528
|
-
/* @__PURE__ */ (0,
|
|
2529
|
-
/* @__PURE__ */ (0,
|
|
2530
|
-
typeof title === "string" ? /* @__PURE__ */ (0,
|
|
2531
|
-
description && /* @__PURE__ */ (0,
|
|
2560
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "fractal-side-panel__header", children: [
|
|
2561
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-side-panel__heading", children: [
|
|
2562
|
+
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 }),
|
|
2563
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "fractal-side-panel__description", children: description })
|
|
2532
2564
|
] }),
|
|
2533
|
-
/* @__PURE__ */ (0,
|
|
2565
|
+
/* @__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
2566
|
] }),
|
|
2535
|
-
/* @__PURE__ */ (0,
|
|
2536
|
-
footer && /* @__PURE__ */ (0,
|
|
2567
|
+
/* @__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 }),
|
|
2568
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
2537
2569
|
]
|
|
2538
2570
|
}
|
|
2539
2571
|
) }),
|
|
@@ -2543,17 +2575,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2543
2575
|
|
|
2544
2576
|
// src/components/Textarea/Textarea.tsx
|
|
2545
2577
|
var React17 = __toESM(require("react"), 1);
|
|
2546
|
-
var
|
|
2578
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2547
2579
|
var Textarea = React17.forwardRef(
|
|
2548
|
-
({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2580
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
2549
2581
|
);
|
|
2550
2582
|
Textarea.displayName = "Textarea";
|
|
2551
2583
|
|
|
2552
2584
|
// src/components/TextButton/TextButton.tsx
|
|
2553
2585
|
var React18 = __toESM(require("react"), 1);
|
|
2554
|
-
var
|
|
2586
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2555
2587
|
var TextButton = React18.forwardRef(
|
|
2556
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
2588
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2557
2589
|
"button",
|
|
2558
2590
|
{
|
|
2559
2591
|
ref,
|
|
@@ -2561,9 +2593,9 @@ var TextButton = React18.forwardRef(
|
|
|
2561
2593
|
type: "button",
|
|
2562
2594
|
...props,
|
|
2563
2595
|
children: [
|
|
2564
|
-
icon && iconPosition === "start" && /* @__PURE__ */ (0,
|
|
2565
|
-
/* @__PURE__ */ (0,
|
|
2566
|
-
icon && iconPosition === "end" && /* @__PURE__ */ (0,
|
|
2596
|
+
icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2597
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children }),
|
|
2598
|
+
icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2567
2599
|
]
|
|
2568
2600
|
}
|
|
2569
2601
|
)
|
|
@@ -2573,7 +2605,7 @@ TextButton.displayName = "TextButton";
|
|
|
2573
2605
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2574
2606
|
var React19 = __toESM(require("react"), 1);
|
|
2575
2607
|
var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
|
|
2576
|
-
var
|
|
2608
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2577
2609
|
function FileDropzone({
|
|
2578
2610
|
files,
|
|
2579
2611
|
onFilesChange,
|
|
@@ -2593,8 +2625,8 @@ function FileDropzone({
|
|
|
2593
2625
|
if (additions.length === 0) return;
|
|
2594
2626
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2595
2627
|
};
|
|
2596
|
-
return /* @__PURE__ */ (0,
|
|
2597
|
-
/* @__PURE__ */ (0,
|
|
2628
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2629
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2598
2630
|
"input",
|
|
2599
2631
|
{
|
|
2600
2632
|
ref: inputRef,
|
|
@@ -2610,7 +2642,7 @@ function FileDropzone({
|
|
|
2610
2642
|
}
|
|
2611
2643
|
}
|
|
2612
2644
|
),
|
|
2613
|
-
/* @__PURE__ */ (0,
|
|
2645
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
2614
2646
|
"button",
|
|
2615
2647
|
{
|
|
2616
2648
|
className: "fractal-file-dropzone__target",
|
|
@@ -2633,18 +2665,18 @@ function FileDropzone({
|
|
|
2633
2665
|
addFiles(event.dataTransfer.files);
|
|
2634
2666
|
},
|
|
2635
2667
|
children: [
|
|
2636
|
-
/* @__PURE__ */ (0,
|
|
2637
|
-
/* @__PURE__ */ (0,
|
|
2638
|
-
/* @__PURE__ */ (0,
|
|
2639
|
-
description && /* @__PURE__ */ (0,
|
|
2668
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2669
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2670
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2671
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2640
2672
|
] })
|
|
2641
2673
|
]
|
|
2642
2674
|
}
|
|
2643
2675
|
),
|
|
2644
|
-
files.length > 0 && /* @__PURE__ */ (0,
|
|
2645
|
-
/* @__PURE__ */ (0,
|
|
2646
|
-
/* @__PURE__ */ (0,
|
|
2647
|
-
/* @__PURE__ */ (0,
|
|
2676
|
+
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: [
|
|
2677
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2678
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2679
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2648
2680
|
"button",
|
|
2649
2681
|
{
|
|
2650
2682
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2652,7 +2684,7 @@ function FileDropzone({
|
|
|
2652
2684
|
"aria-label": `Remove ${file.name}`,
|
|
2653
2685
|
disabled,
|
|
2654
2686
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2655
|
-
children: /* @__PURE__ */ (0,
|
|
2687
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.Close, { "aria-hidden": "true", size: 14 })
|
|
2656
2688
|
}
|
|
2657
2689
|
)
|
|
2658
2690
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2666,7 +2698,7 @@ function formatFileSize(bytes) {
|
|
|
2666
2698
|
|
|
2667
2699
|
// src/components/Pagination/Pagination.tsx
|
|
2668
2700
|
var import_fractal_icons15 = require("@mirror-physics/fractal-icons");
|
|
2669
|
-
var
|
|
2701
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2670
2702
|
function Pagination({
|
|
2671
2703
|
page,
|
|
2672
2704
|
pageSize,
|
|
@@ -2682,10 +2714,10 @@ function Pagination({
|
|
|
2682
2714
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
2683
2715
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2684
2716
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2685
|
-
return /* @__PURE__ */ (0,
|
|
2686
|
-
/* @__PURE__ */ (0,
|
|
2687
|
-
/* @__PURE__ */ (0,
|
|
2688
|
-
canChangePageSize && /* @__PURE__ */ (0,
|
|
2717
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2718
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2719
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fractal-pagination__controls", children: [
|
|
2720
|
+
canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2689
2721
|
Dropdown,
|
|
2690
2722
|
{
|
|
2691
2723
|
align: "right",
|
|
@@ -2702,7 +2734,7 @@ function Pagination({
|
|
|
2702
2734
|
triggerVariant: "tertiary"
|
|
2703
2735
|
}
|
|
2704
2736
|
),
|
|
2705
|
-
/* @__PURE__ */ (0,
|
|
2737
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2706
2738
|
"button",
|
|
2707
2739
|
{
|
|
2708
2740
|
className: "fractal-pagination__button",
|
|
@@ -2711,15 +2743,15 @@ function Pagination({
|
|
|
2711
2743
|
title: "Previous page",
|
|
2712
2744
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2713
2745
|
onClick: () => onPageChange(currentPage - 1),
|
|
2714
|
-
children: /* @__PURE__ */ (0,
|
|
2746
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fractal_icons15.ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2715
2747
|
}
|
|
2716
2748
|
),
|
|
2717
|
-
/* @__PURE__ */ (0,
|
|
2749
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
2718
2750
|
currentPage,
|
|
2719
2751
|
" of ",
|
|
2720
2752
|
totalPages
|
|
2721
2753
|
] }),
|
|
2722
|
-
/* @__PURE__ */ (0,
|
|
2754
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2723
2755
|
"button",
|
|
2724
2756
|
{
|
|
2725
2757
|
className: "fractal-pagination__button",
|
|
@@ -2728,7 +2760,7 @@ function Pagination({
|
|
|
2728
2760
|
title: "Next page",
|
|
2729
2761
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2730
2762
|
onClick: () => onPageChange(currentPage + 1),
|
|
2731
|
-
children: /* @__PURE__ */ (0,
|
|
2763
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fractal_icons15.ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2732
2764
|
}
|
|
2733
2765
|
)
|
|
2734
2766
|
] })
|
|
@@ -2786,6 +2818,7 @@ function Pagination({
|
|
|
2786
2818
|
PromptCard,
|
|
2787
2819
|
PromptCardGhost,
|
|
2788
2820
|
PromptGrid,
|
|
2821
|
+
Radio,
|
|
2789
2822
|
SidePanel,
|
|
2790
2823
|
SidePanelGhost,
|
|
2791
2824
|
Sidebar,
|