@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.js
CHANGED
|
@@ -1574,10 +1574,41 @@ function Checkbox({
|
|
|
1574
1574
|
);
|
|
1575
1575
|
}
|
|
1576
1576
|
|
|
1577
|
+
// src/components/Radio/Radio.tsx
|
|
1578
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1579
|
+
function Radio({
|
|
1580
|
+
checked,
|
|
1581
|
+
className,
|
|
1582
|
+
description,
|
|
1583
|
+
disabled,
|
|
1584
|
+
label,
|
|
1585
|
+
onCheckedChange,
|
|
1586
|
+
...props
|
|
1587
|
+
}) {
|
|
1588
|
+
return /* @__PURE__ */ jsxs18("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
|
|
1589
|
+
/* @__PURE__ */ jsx21(
|
|
1590
|
+
"input",
|
|
1591
|
+
{
|
|
1592
|
+
...props,
|
|
1593
|
+
checked,
|
|
1594
|
+
className: "fractal-radio__input",
|
|
1595
|
+
disabled,
|
|
1596
|
+
onChange: (event) => onCheckedChange?.(event.currentTarget.checked),
|
|
1597
|
+
type: "radio"
|
|
1598
|
+
}
|
|
1599
|
+
),
|
|
1600
|
+
/* @__PURE__ */ jsx21("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ jsx21("span", { className: "fractal-radio__dot" }) }),
|
|
1601
|
+
/* @__PURE__ */ jsxs18("span", { className: "fractal-radio__content", children: [
|
|
1602
|
+
/* @__PURE__ */ jsx21("span", { className: "fractal-radio__label", children: label }),
|
|
1603
|
+
description && /* @__PURE__ */ jsx21("span", { className: "fractal-radio__description", children: description })
|
|
1604
|
+
] })
|
|
1605
|
+
] });
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1577
1608
|
// src/components/SortableTable/SortableTable.tsx
|
|
1578
1609
|
import { useMemo as useMemo2, useState as useState7 } from "react";
|
|
1579
1610
|
import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
|
|
1580
|
-
import { jsx as
|
|
1611
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1581
1612
|
function SortableTable({
|
|
1582
1613
|
columns,
|
|
1583
1614
|
data,
|
|
@@ -1672,16 +1703,16 @@ function SortableTable({
|
|
|
1672
1703
|
onSortChange?.(nextKey, nextDirection);
|
|
1673
1704
|
}
|
|
1674
1705
|
};
|
|
1675
|
-
return /* @__PURE__ */
|
|
1676
|
-
header && /* @__PURE__ */
|
|
1677
|
-
visibleRows.length === 0 ? /* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1679
|
-
selection && /* @__PURE__ */
|
|
1706
|
+
return /* @__PURE__ */ jsx22("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs19("div", { className: "fractal-sortable-table-surface", children: [
|
|
1707
|
+
header && /* @__PURE__ */ jsx22("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1708
|
+
visibleRows.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs19("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1709
|
+
/* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1710
|
+
selection && /* @__PURE__ */ jsx22(
|
|
1680
1711
|
"th",
|
|
1681
1712
|
{
|
|
1682
1713
|
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1683
1714
|
scope: "col",
|
|
1684
|
-
children: /* @__PURE__ */
|
|
1715
|
+
children: /* @__PURE__ */ jsx22(
|
|
1685
1716
|
Checkbox,
|
|
1686
1717
|
{
|
|
1687
1718
|
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
@@ -1707,7 +1738,7 @@ function SortableTable({
|
|
|
1707
1738
|
columns.map((col) => {
|
|
1708
1739
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1709
1740
|
if (!col.sortable) {
|
|
1710
|
-
return /* @__PURE__ */
|
|
1741
|
+
return /* @__PURE__ */ jsx22(
|
|
1711
1742
|
"th",
|
|
1712
1743
|
{
|
|
1713
1744
|
className: "fractal-sortable-table-th",
|
|
@@ -1718,13 +1749,13 @@ function SortableTable({
|
|
|
1718
1749
|
col.key
|
|
1719
1750
|
);
|
|
1720
1751
|
}
|
|
1721
|
-
return /* @__PURE__ */
|
|
1752
|
+
return /* @__PURE__ */ jsx22(
|
|
1722
1753
|
"th",
|
|
1723
1754
|
{
|
|
1724
1755
|
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1725
1756
|
scope: "col",
|
|
1726
1757
|
style: { width: col.width },
|
|
1727
|
-
children: /* @__PURE__ */
|
|
1758
|
+
children: /* @__PURE__ */ jsxs19(
|
|
1728
1759
|
"button",
|
|
1729
1760
|
{
|
|
1730
1761
|
type: "button",
|
|
@@ -1735,8 +1766,8 @@ function SortableTable({
|
|
|
1735
1766
|
onClick: () => handleSortClick(col.key),
|
|
1736
1767
|
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1737
1768
|
children: [
|
|
1738
|
-
/* @__PURE__ */
|
|
1739
|
-
/* @__PURE__ */
|
|
1769
|
+
/* @__PURE__ */ jsx22("span", { children: col.header }),
|
|
1770
|
+
/* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx22(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx22(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx22(ArrowsUpDown, { size: 14 }) })
|
|
1740
1771
|
]
|
|
1741
1772
|
}
|
|
1742
1773
|
)
|
|
@@ -1745,7 +1776,7 @@ function SortableTable({
|
|
|
1745
1776
|
);
|
|
1746
1777
|
})
|
|
1747
1778
|
] }) }),
|
|
1748
|
-
/* @__PURE__ */
|
|
1779
|
+
/* @__PURE__ */ jsx22("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1749
1780
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1750
1781
|
const disabled = isRowDisabled?.(row) ?? false;
|
|
1751
1782
|
const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
|
|
@@ -1754,7 +1785,7 @@ function SortableTable({
|
|
|
1754
1785
|
label: rowAction.label(row, rowIndex),
|
|
1755
1786
|
icon: rowAction.icon(row, rowIndex)
|
|
1756
1787
|
} : null;
|
|
1757
|
-
return /* @__PURE__ */
|
|
1788
|
+
return /* @__PURE__ */ jsxs19(
|
|
1758
1789
|
"tr",
|
|
1759
1790
|
{
|
|
1760
1791
|
className: cn(
|
|
@@ -1778,7 +1809,7 @@ function SortableTable({
|
|
|
1778
1809
|
role: interactive ? "button" : void 0,
|
|
1779
1810
|
tabIndex: interactive ? 0 : void 0,
|
|
1780
1811
|
children: [
|
|
1781
|
-
selection && /* @__PURE__ */
|
|
1812
|
+
selection && /* @__PURE__ */ jsx22("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx22(
|
|
1782
1813
|
Checkbox,
|
|
1783
1814
|
{
|
|
1784
1815
|
"aria-label": selection.getRowLabel(row),
|
|
@@ -1790,7 +1821,7 @@ function SortableTable({
|
|
|
1790
1821
|
}
|
|
1791
1822
|
}
|
|
1792
1823
|
) }),
|
|
1793
|
-
columns.map((col, columnIndex) => /* @__PURE__ */
|
|
1824
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ jsxs19(
|
|
1794
1825
|
"td",
|
|
1795
1826
|
{
|
|
1796
1827
|
className: cn(
|
|
@@ -1800,7 +1831,7 @@ function SortableTable({
|
|
|
1800
1831
|
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1801
1832
|
children: [
|
|
1802
1833
|
col.render(row, rowIndex),
|
|
1803
|
-
action && columnIndex === columns.length - 1 && /* @__PURE__ */
|
|
1834
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1804
1835
|
]
|
|
1805
1836
|
},
|
|
1806
1837
|
col.key
|
|
@@ -1816,7 +1847,7 @@ function SortableTable({
|
|
|
1816
1847
|
|
|
1817
1848
|
// src/components/Tabs/Tabs.tsx
|
|
1818
1849
|
import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState8 } from "react";
|
|
1819
|
-
import { jsx as
|
|
1850
|
+
import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1820
1851
|
function Tabs({
|
|
1821
1852
|
items,
|
|
1822
1853
|
defaultValue,
|
|
@@ -1887,8 +1918,8 @@ function Tabs({
|
|
|
1887
1918
|
selectTab(nextId2);
|
|
1888
1919
|
requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
|
|
1889
1920
|
};
|
|
1890
|
-
return /* @__PURE__ */
|
|
1891
|
-
/* @__PURE__ */
|
|
1921
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
|
|
1922
|
+
/* @__PURE__ */ jsx23(
|
|
1892
1923
|
"div",
|
|
1893
1924
|
{
|
|
1894
1925
|
ref: tabListRef,
|
|
@@ -1901,7 +1932,7 @@ function Tabs({
|
|
|
1901
1932
|
const isActive = item.id === activeId;
|
|
1902
1933
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1903
1934
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1904
|
-
return /* @__PURE__ */
|
|
1935
|
+
return /* @__PURE__ */ jsx23(
|
|
1905
1936
|
"button",
|
|
1906
1937
|
{
|
|
1907
1938
|
ref: (el) => {
|
|
@@ -1932,7 +1963,7 @@ function Tabs({
|
|
|
1932
1963
|
const tabId = `${reactId}-tab-${item.id}`;
|
|
1933
1964
|
const panelId = `${reactId}-panel-${item.id}`;
|
|
1934
1965
|
const isActive = item.id === activeId;
|
|
1935
|
-
return /* @__PURE__ */
|
|
1966
|
+
return /* @__PURE__ */ jsx23(
|
|
1936
1967
|
"div",
|
|
1937
1968
|
{
|
|
1938
1969
|
id: panelId,
|
|
@@ -1950,7 +1981,7 @@ function Tabs({
|
|
|
1950
1981
|
|
|
1951
1982
|
// src/components/ContentSwitcher/ContentSwitcher.tsx
|
|
1952
1983
|
import * as React15 from "react";
|
|
1953
|
-
import { jsx as
|
|
1984
|
+
import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1954
1985
|
function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
|
|
1955
1986
|
const switcherRef = React15.useRef(null);
|
|
1956
1987
|
const buttonRefs = React15.useRef([]);
|
|
@@ -2008,7 +2039,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2008
2039
|
onValueChange(items[nextIndex].value);
|
|
2009
2040
|
}
|
|
2010
2041
|
};
|
|
2011
|
-
return /* @__PURE__ */
|
|
2042
|
+
return /* @__PURE__ */ jsxs21(
|
|
2012
2043
|
"div",
|
|
2013
2044
|
{
|
|
2014
2045
|
className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
|
|
@@ -2016,10 +2047,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2016
2047
|
"aria-label": ariaLabel,
|
|
2017
2048
|
ref: switcherRef,
|
|
2018
2049
|
children: [
|
|
2019
|
-
/* @__PURE__ */
|
|
2050
|
+
/* @__PURE__ */ jsx24("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
|
|
2020
2051
|
items.map((item, index) => {
|
|
2021
2052
|
const active = item.value === value;
|
|
2022
|
-
return /* @__PURE__ */
|
|
2053
|
+
return /* @__PURE__ */ jsx24(
|
|
2023
2054
|
"button",
|
|
2024
2055
|
{
|
|
2025
2056
|
className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
|
|
@@ -2053,7 +2084,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
|
|
|
2053
2084
|
// src/components/Disclosure/Disclosure.tsx
|
|
2054
2085
|
import { useId as useId3, useState as useState9 } from "react";
|
|
2055
2086
|
import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
|
|
2056
|
-
import { jsx as
|
|
2087
|
+
import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2057
2088
|
function Disclosure({
|
|
2058
2089
|
title,
|
|
2059
2090
|
meta,
|
|
@@ -2081,7 +2112,7 @@ function Disclosure({
|
|
|
2081
2112
|
onOpenChange?.(next);
|
|
2082
2113
|
}
|
|
2083
2114
|
};
|
|
2084
|
-
return /* @__PURE__ */
|
|
2115
|
+
return /* @__PURE__ */ jsxs22(
|
|
2085
2116
|
"div",
|
|
2086
2117
|
{
|
|
2087
2118
|
className: cn(
|
|
@@ -2092,7 +2123,7 @@ function Disclosure({
|
|
|
2092
2123
|
className
|
|
2093
2124
|
),
|
|
2094
2125
|
children: [
|
|
2095
|
-
/* @__PURE__ */
|
|
2126
|
+
/* @__PURE__ */ jsxs22(
|
|
2096
2127
|
"button",
|
|
2097
2128
|
{
|
|
2098
2129
|
type: "button",
|
|
@@ -2103,13 +2134,13 @@ function Disclosure({
|
|
|
2103
2134
|
disabled,
|
|
2104
2135
|
onClick: toggle,
|
|
2105
2136
|
children: [
|
|
2106
|
-
/* @__PURE__ */
|
|
2107
|
-
/* @__PURE__ */
|
|
2108
|
-
meta && /* @__PURE__ */
|
|
2137
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx25(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx25(ChevronRight3, { size: 16 }) }),
|
|
2138
|
+
/* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-title", children: title }),
|
|
2139
|
+
meta && /* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-meta", children: meta })
|
|
2109
2140
|
]
|
|
2110
2141
|
}
|
|
2111
2142
|
),
|
|
2112
|
-
/* @__PURE__ */
|
|
2143
|
+
/* @__PURE__ */ jsx25(
|
|
2113
2144
|
"div",
|
|
2114
2145
|
{
|
|
2115
2146
|
id: panelId,
|
|
@@ -2117,7 +2148,7 @@ function Disclosure({
|
|
|
2117
2148
|
"aria-labelledby": headerId,
|
|
2118
2149
|
className: "fractal-disclosure-panel",
|
|
2119
2150
|
hidden: !isOpen,
|
|
2120
|
-
children: /* @__PURE__ */
|
|
2151
|
+
children: /* @__PURE__ */ jsx25("div", { className: "fractal-disclosure-panel-inner", children })
|
|
2121
2152
|
}
|
|
2122
2153
|
)
|
|
2123
2154
|
]
|
|
@@ -2126,18 +2157,18 @@ function Disclosure({
|
|
|
2126
2157
|
}
|
|
2127
2158
|
|
|
2128
2159
|
// src/components/LatticeLoader/LatticeLoader.tsx
|
|
2129
|
-
import { jsx as
|
|
2160
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
2130
2161
|
var LATTICE_COUNT = 160;
|
|
2131
2162
|
var WAVE_PERIOD = 80;
|
|
2132
2163
|
function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
2133
|
-
return /* @__PURE__ */
|
|
2164
|
+
return /* @__PURE__ */ jsx26(
|
|
2134
2165
|
"span",
|
|
2135
2166
|
{
|
|
2136
2167
|
"aria-label": label,
|
|
2137
2168
|
className: cn("fractal-lattice-loader", className),
|
|
2138
2169
|
role: "progressbar",
|
|
2139
2170
|
...props,
|
|
2140
|
-
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */
|
|
2171
|
+
children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx26(
|
|
2141
2172
|
"span",
|
|
2142
2173
|
{
|
|
2143
2174
|
"aria-hidden": "true",
|
|
@@ -2151,10 +2182,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
|
|
|
2151
2182
|
}
|
|
2152
2183
|
|
|
2153
2184
|
// src/components/Ghost/Ghost.tsx
|
|
2154
|
-
import { jsx as
|
|
2185
|
+
import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2155
2186
|
var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
|
|
2156
2187
|
function Ghost({ className, width, height, radius, style, ...props }) {
|
|
2157
|
-
return /* @__PURE__ */
|
|
2188
|
+
return /* @__PURE__ */ jsx27(
|
|
2158
2189
|
"div",
|
|
2159
2190
|
{
|
|
2160
2191
|
"aria-hidden": "true",
|
|
@@ -2170,15 +2201,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
|
|
|
2170
2201
|
);
|
|
2171
2202
|
}
|
|
2172
2203
|
function GhostLine({ className, size = "md", width = "100%", ...props }) {
|
|
2173
|
-
return /* @__PURE__ */
|
|
2204
|
+
return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
|
|
2174
2205
|
}
|
|
2175
2206
|
function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
|
|
2176
|
-
return /* @__PURE__ */
|
|
2207
|
+
return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
|
|
2177
2208
|
}
|
|
2178
2209
|
function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
|
|
2179
|
-
return /* @__PURE__ */
|
|
2180
|
-
showHeader && /* @__PURE__ */
|
|
2181
|
-
/* @__PURE__ */
|
|
2210
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
|
|
2211
|
+
showHeader && /* @__PURE__ */ jsx27(GhostLine, { width: "38%" }),
|
|
2212
|
+
/* @__PURE__ */ jsx27("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx27(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
|
|
2182
2213
|
] });
|
|
2183
2214
|
}
|
|
2184
2215
|
function DataTableGhost({
|
|
@@ -2192,81 +2223,81 @@ function DataTableGhost({
|
|
|
2192
2223
|
...props
|
|
2193
2224
|
}) {
|
|
2194
2225
|
const cells = Array.from({ length: columns }, (_, index) => index);
|
|
2195
|
-
return /* @__PURE__ */
|
|
2196
|
-
(showHeader || headers) && /* @__PURE__ */
|
|
2197
|
-
/* @__PURE__ */
|
|
2226
|
+
return /* @__PURE__ */ jsx27("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs23("table", { className: "fractal-ghost-table__table", children: [
|
|
2227
|
+
(showHeader || headers) && /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsx27("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx27("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
|
|
2228
|
+
/* @__PURE__ */ jsx27("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx27("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx27("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx27(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
|
|
2198
2229
|
] }) });
|
|
2199
2230
|
}
|
|
2200
2231
|
function InputGhost({ className, labelWidth = "26%", ...props }) {
|
|
2201
|
-
return /* @__PURE__ */
|
|
2232
|
+
return /* @__PURE__ */ jsx27(FormFieldGhost, { className, labelWidth, ...props });
|
|
2202
2233
|
}
|
|
2203
2234
|
function TextareaGhost({ className, labelWidth = "26%", ...props }) {
|
|
2204
|
-
return /* @__PURE__ */
|
|
2235
|
+
return /* @__PURE__ */ jsx27(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
|
|
2205
2236
|
}
|
|
2206
2237
|
function LabelGhost({ className, width = "26%", ...props }) {
|
|
2207
|
-
return /* @__PURE__ */
|
|
2238
|
+
return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
|
|
2208
2239
|
}
|
|
2209
2240
|
function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
|
|
2210
|
-
return /* @__PURE__ */
|
|
2211
|
-
/* @__PURE__ */
|
|
2212
|
-
/* @__PURE__ */
|
|
2241
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
|
|
2242
|
+
/* @__PURE__ */ jsx27(LabelGhost, { width: labelWidth }),
|
|
2243
|
+
/* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
|
|
2213
2244
|
] });
|
|
2214
2245
|
}
|
|
2215
2246
|
function AlertGhost({ className, ...props }) {
|
|
2216
|
-
return /* @__PURE__ */
|
|
2217
|
-
/* @__PURE__ */
|
|
2218
|
-
/* @__PURE__ */
|
|
2247
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
|
|
2248
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "30%" }),
|
|
2249
|
+
/* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: "78%" })
|
|
2219
2250
|
] });
|
|
2220
2251
|
}
|
|
2221
2252
|
function CheckboxGhost({ className, ...props }) {
|
|
2222
|
-
return /* @__PURE__ */
|
|
2223
|
-
/* @__PURE__ */
|
|
2224
|
-
/* @__PURE__ */
|
|
2253
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
|
|
2254
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-choice__control" }),
|
|
2255
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "42%" })
|
|
2225
2256
|
] });
|
|
2226
2257
|
}
|
|
2227
2258
|
var ToggleGhost = CheckboxGhost;
|
|
2228
2259
|
function ChipGhost({ className, width = 74, ...props }) {
|
|
2229
|
-
return /* @__PURE__ */
|
|
2260
|
+
return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
|
|
2230
2261
|
}
|
|
2231
2262
|
function LinkGhost({ className, width = 96, ...props }) {
|
|
2232
|
-
return /* @__PURE__ */
|
|
2263
|
+
return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
|
|
2233
2264
|
}
|
|
2234
2265
|
var TextButtonGhost = LinkGhost;
|
|
2235
2266
|
function DropdownGhost({ className, ...props }) {
|
|
2236
|
-
return /* @__PURE__ */
|
|
2237
|
-
/* @__PURE__ */
|
|
2238
|
-
/* @__PURE__ */
|
|
2267
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
|
|
2268
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "38%" }),
|
|
2269
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-dropdown__chevron" })
|
|
2239
2270
|
] });
|
|
2240
2271
|
}
|
|
2241
2272
|
function ContentSwitcherGhost({ className, options = 3, ...props }) {
|
|
2242
|
-
return /* @__PURE__ */
|
|
2273
|
+
return /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx27(Ghost, {}, index)) });
|
|
2243
2274
|
}
|
|
2244
2275
|
var TabsGhost = ContentSwitcherGhost;
|
|
2245
2276
|
function DisclosureGhost({ className, ...props }) {
|
|
2246
|
-
return /* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2248
|
-
/* @__PURE__ */
|
|
2277
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
|
|
2278
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-disclosure__icon" }),
|
|
2279
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "42%" })
|
|
2249
2280
|
] });
|
|
2250
2281
|
}
|
|
2251
2282
|
function PaginationGhost({ className, pages = 5, ...props }) {
|
|
2252
|
-
return /* @__PURE__ */
|
|
2283
|
+
return /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx27(Ghost, {}, index)) });
|
|
2253
2284
|
}
|
|
2254
2285
|
function FileDropzoneGhost({ className, ...props }) {
|
|
2255
|
-
return /* @__PURE__ */
|
|
2256
|
-
/* @__PURE__ */
|
|
2257
|
-
/* @__PURE__ */
|
|
2258
|
-
/* @__PURE__ */
|
|
2286
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
|
|
2287
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-dropzone__icon" }),
|
|
2288
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "26%" }),
|
|
2289
|
+
/* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: "46%" })
|
|
2259
2290
|
] });
|
|
2260
2291
|
}
|
|
2261
2292
|
function PromptCardGhost({ className, ...props }) {
|
|
2262
|
-
return /* @__PURE__ */
|
|
2293
|
+
return /* @__PURE__ */ jsx27(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
|
|
2263
2294
|
}
|
|
2264
2295
|
function ConversationGhost({
|
|
2265
2296
|
className,
|
|
2266
2297
|
"aria-label": ariaLabel = "Loading conversation",
|
|
2267
2298
|
...props
|
|
2268
2299
|
}) {
|
|
2269
|
-
return /* @__PURE__ */
|
|
2300
|
+
return /* @__PURE__ */ jsxs23(
|
|
2270
2301
|
"div",
|
|
2271
2302
|
{
|
|
2272
2303
|
"aria-busy": "true",
|
|
@@ -2275,54 +2306,54 @@ function ConversationGhost({
|
|
|
2275
2306
|
role: "status",
|
|
2276
2307
|
...props,
|
|
2277
2308
|
children: [
|
|
2278
|
-
/* @__PURE__ */
|
|
2279
|
-
/* @__PURE__ */
|
|
2280
|
-
/* @__PURE__ */
|
|
2281
|
-
/* @__PURE__ */
|
|
2309
|
+
/* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-conversation__bubble", children: [
|
|
2310
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "100%" }),
|
|
2311
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "86%" }),
|
|
2312
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "64%" })
|
|
2282
2313
|
] }) }),
|
|
2283
|
-
/* @__PURE__ */
|
|
2284
|
-
/* @__PURE__ */
|
|
2285
|
-
/* @__PURE__ */
|
|
2286
|
-
/* @__PURE__ */
|
|
2314
|
+
/* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
|
|
2315
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "92%" }),
|
|
2316
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "78%" }),
|
|
2317
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "58%" })
|
|
2287
2318
|
] })
|
|
2288
2319
|
]
|
|
2289
2320
|
}
|
|
2290
2321
|
);
|
|
2291
2322
|
}
|
|
2292
2323
|
function SortableTableGhost(props) {
|
|
2293
|
-
return /* @__PURE__ */
|
|
2324
|
+
return /* @__PURE__ */ jsx27(DataTableGhost, { ...props });
|
|
2294
2325
|
}
|
|
2295
2326
|
function SidebarGhost({ className, items = 6, ...props }) {
|
|
2296
|
-
return /* @__PURE__ */
|
|
2297
|
-
/* @__PURE__ */
|
|
2298
|
-
/* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
/* @__PURE__ */
|
|
2327
|
+
return /* @__PURE__ */ jsxs23("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
|
|
2328
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-sidebar__brand" }),
|
|
2329
|
+
/* @__PURE__ */ jsx27("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-sidebar__item", children: [
|
|
2330
|
+
/* @__PURE__ */ jsx27(Ghost, {}),
|
|
2331
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
|
|
2301
2332
|
] }, index)) })
|
|
2302
2333
|
] });
|
|
2303
2334
|
}
|
|
2304
2335
|
function ModalGhost({ className, title, lines = 3, ...props }) {
|
|
2305
|
-
return /* @__PURE__ */
|
|
2336
|
+
return /* @__PURE__ */ jsx27(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
|
|
2306
2337
|
}
|
|
2307
2338
|
function SidePanelGhost({ className, title, lines = 5, ...props }) {
|
|
2308
|
-
return /* @__PURE__ */
|
|
2339
|
+
return /* @__PURE__ */ jsx27(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
|
|
2309
2340
|
}
|
|
2310
2341
|
function SurfaceGhost({ className, title, lines = 3, ...props }) {
|
|
2311
|
-
return /* @__PURE__ */
|
|
2312
|
-
/* @__PURE__ */
|
|
2313
|
-
/* @__PURE__ */
|
|
2314
|
-
/* @__PURE__ */
|
|
2342
|
+
return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
|
|
2343
|
+
/* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-surface__header", children: [
|
|
2344
|
+
/* @__PURE__ */ jsx27(GhostLine, { width: "42%" }),
|
|
2345
|
+
/* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-surface__close" })
|
|
2315
2346
|
] }),
|
|
2316
|
-
title && /* @__PURE__ */
|
|
2317
|
-
/* @__PURE__ */
|
|
2347
|
+
title && /* @__PURE__ */ jsx27("div", { className: "fractal-ghost-surface__title", children: title }),
|
|
2348
|
+
/* @__PURE__ */ jsx27("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx27(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
|
|
2318
2349
|
] });
|
|
2319
2350
|
}
|
|
2320
2351
|
|
|
2321
2352
|
// src/components/Sidebar/Sidebar.tsx
|
|
2322
2353
|
import * as React16 from "react";
|
|
2323
|
-
import { Fragment as Fragment3, jsx as
|
|
2354
|
+
import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2324
2355
|
var Sidebar = React16.forwardRef(
|
|
2325
|
-
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */
|
|
2356
|
+
({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx28(
|
|
2326
2357
|
"aside",
|
|
2327
2358
|
{
|
|
2328
2359
|
ref,
|
|
@@ -2335,11 +2366,11 @@ var Sidebar = React16.forwardRef(
|
|
|
2335
2366
|
);
|
|
2336
2367
|
Sidebar.displayName = "Sidebar";
|
|
2337
2368
|
var SidebarHeader = React16.forwardRef(
|
|
2338
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2369
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
|
|
2339
2370
|
);
|
|
2340
2371
|
SidebarHeader.displayName = "SidebarHeader";
|
|
2341
2372
|
var SidebarBrand = React16.forwardRef(
|
|
2342
|
-
({ className, type = "button", ...props }, ref) => /* @__PURE__ */
|
|
2373
|
+
({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx28("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
|
|
2343
2374
|
);
|
|
2344
2375
|
SidebarBrand.displayName = "SidebarBrand";
|
|
2345
2376
|
function SidebarAccountMenu({
|
|
@@ -2350,7 +2381,7 @@ function SidebarAccountMenu({
|
|
|
2350
2381
|
icon,
|
|
2351
2382
|
className
|
|
2352
2383
|
}) {
|
|
2353
|
-
return /* @__PURE__ */
|
|
2384
|
+
return /* @__PURE__ */ jsx28(
|
|
2354
2385
|
Dropdown,
|
|
2355
2386
|
{
|
|
2356
2387
|
align: "left",
|
|
@@ -2360,9 +2391,9 @@ function SidebarAccountMenu({
|
|
|
2360
2391
|
panelClassName: "fractal-sidebar__account-panel",
|
|
2361
2392
|
selectedValue: "",
|
|
2362
2393
|
triggerClassName: "fractal-sidebar__account-trigger",
|
|
2363
|
-
triggerContent: /* @__PURE__ */
|
|
2364
|
-
icon && /* @__PURE__ */
|
|
2365
|
-
/* @__PURE__ */
|
|
2394
|
+
triggerContent: /* @__PURE__ */ jsxs24(Fragment3, { children: [
|
|
2395
|
+
icon && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
|
|
2396
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__account-name", children: name })
|
|
2366
2397
|
] }),
|
|
2367
2398
|
triggerLabel,
|
|
2368
2399
|
triggerVariant: "tertiary"
|
|
@@ -2370,15 +2401,15 @@ function SidebarAccountMenu({
|
|
|
2370
2401
|
);
|
|
2371
2402
|
}
|
|
2372
2403
|
var SidebarNav = React16.forwardRef(
|
|
2373
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2404
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
|
|
2374
2405
|
);
|
|
2375
2406
|
SidebarNav.displayName = "SidebarNav";
|
|
2376
2407
|
var SidebarSection = React16.forwardRef(
|
|
2377
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2408
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
|
|
2378
2409
|
);
|
|
2379
2410
|
SidebarSection.displayName = "SidebarSection";
|
|
2380
2411
|
var SidebarNavItem = React16.forwardRef(
|
|
2381
|
-
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */
|
|
2412
|
+
({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs24(
|
|
2382
2413
|
"button",
|
|
2383
2414
|
{
|
|
2384
2415
|
ref,
|
|
@@ -2388,28 +2419,28 @@ var SidebarNavItem = React16.forwardRef(
|
|
|
2388
2419
|
"aria-current": active ? "page" : void 0,
|
|
2389
2420
|
...props,
|
|
2390
2421
|
children: [
|
|
2391
|
-
icon && /* @__PURE__ */
|
|
2392
|
-
/* @__PURE__ */
|
|
2393
|
-
endAdornment && /* @__PURE__ */
|
|
2422
|
+
icon && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
|
|
2423
|
+
/* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-label", children }),
|
|
2424
|
+
endAdornment && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
|
|
2394
2425
|
]
|
|
2395
2426
|
}
|
|
2396
2427
|
)
|
|
2397
2428
|
);
|
|
2398
2429
|
SidebarNavItem.displayName = "SidebarNavItem";
|
|
2399
2430
|
var SidebarFooter = React16.forwardRef(
|
|
2400
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2431
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
|
|
2401
2432
|
);
|
|
2402
2433
|
SidebarFooter.displayName = "SidebarFooter";
|
|
2403
2434
|
|
|
2404
2435
|
// src/components/SidePanel/SidePanel.tsx
|
|
2405
2436
|
import { createPortal as createPortal3 } from "react-dom";
|
|
2406
2437
|
import { Close as Close2 } from "@mirror-physics/fractal-icons";
|
|
2407
|
-
import { jsx as
|
|
2438
|
+
import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2408
2439
|
function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
|
|
2409
2440
|
useEscapeDismiss(80, onClose, open);
|
|
2410
2441
|
if (!open) return null;
|
|
2411
2442
|
return createPortal3(
|
|
2412
|
-
/* @__PURE__ */
|
|
2443
|
+
/* @__PURE__ */ jsx29("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs25(
|
|
2413
2444
|
"aside",
|
|
2414
2445
|
{
|
|
2415
2446
|
className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
|
|
@@ -2418,15 +2449,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2418
2449
|
role: "dialog",
|
|
2419
2450
|
onMouseDown: (event) => event.stopPropagation(),
|
|
2420
2451
|
children: [
|
|
2421
|
-
/* @__PURE__ */
|
|
2422
|
-
/* @__PURE__ */
|
|
2423
|
-
typeof title === "string" ? /* @__PURE__ */
|
|
2424
|
-
description && /* @__PURE__ */
|
|
2452
|
+
/* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", children: [
|
|
2453
|
+
/* @__PURE__ */ jsxs25("div", { className: "fractal-side-panel__heading", children: [
|
|
2454
|
+
typeof title === "string" ? /* @__PURE__ */ jsx29("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel__title", children: title }),
|
|
2455
|
+
description && /* @__PURE__ */ jsx29("p", { className: "fractal-side-panel__description", children: description })
|
|
2425
2456
|
] }),
|
|
2426
|
-
/* @__PURE__ */
|
|
2457
|
+
/* @__PURE__ */ jsx29("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx29(Close2, { size: 18 }) })
|
|
2427
2458
|
] }),
|
|
2428
|
-
/* @__PURE__ */
|
|
2429
|
-
footer && /* @__PURE__ */
|
|
2459
|
+
/* @__PURE__ */ jsx29("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx29(UILoader, { label: loadingLabel }) : children }),
|
|
2460
|
+
footer && /* @__PURE__ */ jsx29("footer", { className: "fractal-side-panel__footer", children: footer })
|
|
2430
2461
|
]
|
|
2431
2462
|
}
|
|
2432
2463
|
) }),
|
|
@@ -2436,17 +2467,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
|
|
|
2436
2467
|
|
|
2437
2468
|
// src/components/Textarea/Textarea.tsx
|
|
2438
2469
|
import * as React17 from "react";
|
|
2439
|
-
import { jsx as
|
|
2470
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
2440
2471
|
var Textarea = React17.forwardRef(
|
|
2441
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
2472
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx30("textarea", { ref, className: cn("fractal-textarea", className), ...props })
|
|
2442
2473
|
);
|
|
2443
2474
|
Textarea.displayName = "Textarea";
|
|
2444
2475
|
|
|
2445
2476
|
// src/components/TextButton/TextButton.tsx
|
|
2446
2477
|
import * as React18 from "react";
|
|
2447
|
-
import { jsx as
|
|
2478
|
+
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2448
2479
|
var TextButton = React18.forwardRef(
|
|
2449
|
-
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */
|
|
2480
|
+
({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs26(
|
|
2450
2481
|
"button",
|
|
2451
2482
|
{
|
|
2452
2483
|
ref,
|
|
@@ -2454,9 +2485,9 @@ var TextButton = React18.forwardRef(
|
|
|
2454
2485
|
type: "button",
|
|
2455
2486
|
...props,
|
|
2456
2487
|
children: [
|
|
2457
|
-
icon && iconPosition === "start" && /* @__PURE__ */
|
|
2458
|
-
/* @__PURE__ */
|
|
2459
|
-
icon && iconPosition === "end" && /* @__PURE__ */
|
|
2488
|
+
icon && iconPosition === "start" && /* @__PURE__ */ jsx31("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
|
|
2489
|
+
/* @__PURE__ */ jsx31("span", { children }),
|
|
2490
|
+
icon && iconPosition === "end" && /* @__PURE__ */ jsx31("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
|
|
2460
2491
|
]
|
|
2461
2492
|
}
|
|
2462
2493
|
)
|
|
@@ -2466,7 +2497,7 @@ TextButton.displayName = "TextButton";
|
|
|
2466
2497
|
// src/components/FileDropzone/FileDropzone.tsx
|
|
2467
2498
|
import * as React19 from "react";
|
|
2468
2499
|
import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
|
|
2469
|
-
import { jsx as
|
|
2500
|
+
import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2470
2501
|
function FileDropzone({
|
|
2471
2502
|
files,
|
|
2472
2503
|
onFilesChange,
|
|
@@ -2486,8 +2517,8 @@ function FileDropzone({
|
|
|
2486
2517
|
if (additions.length === 0) return;
|
|
2487
2518
|
onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
|
|
2488
2519
|
};
|
|
2489
|
-
return /* @__PURE__ */
|
|
2490
|
-
/* @__PURE__ */
|
|
2520
|
+
return /* @__PURE__ */ jsxs27("div", { className: cn("fractal-file-dropzone", className), children: [
|
|
2521
|
+
/* @__PURE__ */ jsx32(
|
|
2491
2522
|
"input",
|
|
2492
2523
|
{
|
|
2493
2524
|
ref: inputRef,
|
|
@@ -2503,7 +2534,7 @@ function FileDropzone({
|
|
|
2503
2534
|
}
|
|
2504
2535
|
}
|
|
2505
2536
|
),
|
|
2506
|
-
/* @__PURE__ */
|
|
2537
|
+
/* @__PURE__ */ jsxs27(
|
|
2507
2538
|
"button",
|
|
2508
2539
|
{
|
|
2509
2540
|
className: "fractal-file-dropzone__target",
|
|
@@ -2526,18 +2557,18 @@ function FileDropzone({
|
|
|
2526
2557
|
addFiles(event.dataTransfer.files);
|
|
2527
2558
|
},
|
|
2528
2559
|
children: [
|
|
2529
|
-
/* @__PURE__ */
|
|
2530
|
-
/* @__PURE__ */
|
|
2531
|
-
/* @__PURE__ */
|
|
2532
|
-
description && /* @__PURE__ */
|
|
2560
|
+
/* @__PURE__ */ jsx32(FileArrowUp, { "aria-hidden": "true", size: 20 }),
|
|
2561
|
+
/* @__PURE__ */ jsxs27("span", { className: "fractal-file-dropzone__copy", children: [
|
|
2562
|
+
/* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__title", children: title }),
|
|
2563
|
+
description && /* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__description", children: description })
|
|
2533
2564
|
] })
|
|
2534
2565
|
]
|
|
2535
2566
|
}
|
|
2536
2567
|
),
|
|
2537
|
-
files.length > 0 && /* @__PURE__ */
|
|
2538
|
-
/* @__PURE__ */
|
|
2539
|
-
/* @__PURE__ */
|
|
2540
|
-
/* @__PURE__ */
|
|
2568
|
+
files.length > 0 && /* @__PURE__ */ jsx32("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs27("li", { className: "fractal-file-dropzone__file", children: [
|
|
2569
|
+
/* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
|
|
2570
|
+
/* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
|
|
2571
|
+
/* @__PURE__ */ jsx32(
|
|
2541
2572
|
"button",
|
|
2542
2573
|
{
|
|
2543
2574
|
className: "fractal-file-dropzone__remove",
|
|
@@ -2545,7 +2576,7 @@ function FileDropzone({
|
|
|
2545
2576
|
"aria-label": `Remove ${file.name}`,
|
|
2546
2577
|
disabled,
|
|
2547
2578
|
onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
|
|
2548
|
-
children: /* @__PURE__ */
|
|
2579
|
+
children: /* @__PURE__ */ jsx32(Close3, { "aria-hidden": "true", size: 14 })
|
|
2549
2580
|
}
|
|
2550
2581
|
)
|
|
2551
2582
|
] }, `${file.name}-${file.size}-${index}`)) })
|
|
@@ -2559,7 +2590,7 @@ function formatFileSize(bytes) {
|
|
|
2559
2590
|
|
|
2560
2591
|
// src/components/Pagination/Pagination.tsx
|
|
2561
2592
|
import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
|
|
2562
|
-
import { jsx as
|
|
2593
|
+
import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2563
2594
|
function Pagination({
|
|
2564
2595
|
page,
|
|
2565
2596
|
pageSize,
|
|
@@ -2575,10 +2606,10 @@ function Pagination({
|
|
|
2575
2606
|
const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
|
|
2576
2607
|
const end = Math.min(currentPage * pageSize, totalItems);
|
|
2577
2608
|
const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
|
|
2578
|
-
return /* @__PURE__ */
|
|
2579
|
-
/* @__PURE__ */
|
|
2580
|
-
/* @__PURE__ */
|
|
2581
|
-
canChangePageSize && /* @__PURE__ */
|
|
2609
|
+
return /* @__PURE__ */ jsxs28("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
|
|
2610
|
+
/* @__PURE__ */ jsx33("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
|
|
2611
|
+
/* @__PURE__ */ jsxs28("div", { className: "fractal-pagination__controls", children: [
|
|
2612
|
+
canChangePageSize && /* @__PURE__ */ jsx33(
|
|
2582
2613
|
Dropdown,
|
|
2583
2614
|
{
|
|
2584
2615
|
align: "right",
|
|
@@ -2595,7 +2626,7 @@ function Pagination({
|
|
|
2595
2626
|
triggerVariant: "tertiary"
|
|
2596
2627
|
}
|
|
2597
2628
|
),
|
|
2598
|
-
/* @__PURE__ */
|
|
2629
|
+
/* @__PURE__ */ jsx33(
|
|
2599
2630
|
"button",
|
|
2600
2631
|
{
|
|
2601
2632
|
className: "fractal-pagination__button",
|
|
@@ -2604,15 +2635,15 @@ function Pagination({
|
|
|
2604
2635
|
title: "Previous page",
|
|
2605
2636
|
disabled: currentPage === 1 || totalItems === 0,
|
|
2606
2637
|
onClick: () => onPageChange(currentPage - 1),
|
|
2607
|
-
children: /* @__PURE__ */
|
|
2638
|
+
children: /* @__PURE__ */ jsx33(ArrowLeft, { "aria-hidden": "true", size: 16 })
|
|
2608
2639
|
}
|
|
2609
2640
|
),
|
|
2610
|
-
/* @__PURE__ */
|
|
2641
|
+
/* @__PURE__ */ jsxs28("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
|
|
2611
2642
|
currentPage,
|
|
2612
2643
|
" of ",
|
|
2613
2644
|
totalPages
|
|
2614
2645
|
] }),
|
|
2615
|
-
/* @__PURE__ */
|
|
2646
|
+
/* @__PURE__ */ jsx33(
|
|
2616
2647
|
"button",
|
|
2617
2648
|
{
|
|
2618
2649
|
className: "fractal-pagination__button",
|
|
@@ -2621,7 +2652,7 @@ function Pagination({
|
|
|
2621
2652
|
title: "Next page",
|
|
2622
2653
|
disabled: currentPage === totalPages || totalItems === 0,
|
|
2623
2654
|
onClick: () => onPageChange(currentPage + 1),
|
|
2624
|
-
children: /* @__PURE__ */
|
|
2655
|
+
children: /* @__PURE__ */ jsx33(ArrowRight, { "aria-hidden": "true", size: 16 })
|
|
2625
2656
|
}
|
|
2626
2657
|
)
|
|
2627
2658
|
] })
|
|
@@ -2678,6 +2709,7 @@ export {
|
|
|
2678
2709
|
PromptCard,
|
|
2679
2710
|
PromptCardGhost,
|
|
2680
2711
|
PromptGrid,
|
|
2712
|
+
Radio,
|
|
2681
2713
|
SidePanel,
|
|
2682
2714
|
SidePanelGhost,
|
|
2683
2715
|
Sidebar,
|