@cytario/design 4.0.0 → 5.1.0
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.css +1 -1
- package/dist/index.d.ts +6 -74
- package/dist/index.js +131 -614
- package/dist/index.js.map +1 -1
- package/package.json +1 -2
package/dist/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import { twMerge } from "tailwind-merge";
|
|
|
11
11
|
|
|
12
12
|
// src/components/_shared/styles.ts
|
|
13
13
|
var sizeStyles = {
|
|
14
|
+
xs: "px-2 py-1 text-xs",
|
|
14
15
|
sm: "px-3 py-1.5 text-sm",
|
|
15
16
|
md: "px-4 py-2 text-base",
|
|
16
17
|
lg: "px-6 py-3 text-lg"
|
|
@@ -149,6 +150,7 @@ function useInputGroup() {
|
|
|
149
150
|
// src/components/Button/Button.tsx
|
|
150
151
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
151
152
|
var iconSizeMap = {
|
|
153
|
+
xs: "sm",
|
|
152
154
|
sm: "sm",
|
|
153
155
|
md: "sm",
|
|
154
156
|
lg: "md"
|
|
@@ -156,11 +158,11 @@ var iconSizeMap = {
|
|
|
156
158
|
function groupRadiusClass(position) {
|
|
157
159
|
switch (position) {
|
|
158
160
|
case "start":
|
|
159
|
-
return "rounded-l-
|
|
161
|
+
return "rounded-l-md rounded-r-none";
|
|
160
162
|
case "middle":
|
|
161
163
|
return "rounded-none";
|
|
162
164
|
case "end":
|
|
163
|
-
return "rounded-r-
|
|
165
|
+
return "rounded-r-md rounded-l-none";
|
|
164
166
|
default:
|
|
165
167
|
return "rounded-md";
|
|
166
168
|
}
|
|
@@ -187,7 +189,7 @@ function Button({
|
|
|
187
189
|
...props,
|
|
188
190
|
isDisabled: isDisabled || isLoading,
|
|
189
191
|
className: twMerge(
|
|
190
|
-
"inline-flex items-center justify-center gap-2 shrink-0",
|
|
192
|
+
"inline-flex items-center justify-center gap-2 shrink-0 cursor-pointer",
|
|
191
193
|
radiusClass,
|
|
192
194
|
"font-medium",
|
|
193
195
|
"leading-tight",
|
|
@@ -255,16 +257,19 @@ import {
|
|
|
255
257
|
} from "react-aria-components";
|
|
256
258
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
257
259
|
var squareSizeStyles = {
|
|
260
|
+
xs: "h-7 w-7",
|
|
258
261
|
sm: "h-8 w-8",
|
|
259
262
|
md: "h-10 w-10",
|
|
260
263
|
lg: "h-12 w-12"
|
|
261
264
|
};
|
|
262
265
|
var squareWidthOnly = {
|
|
266
|
+
xs: "w-7",
|
|
263
267
|
sm: "w-8",
|
|
264
268
|
md: "w-10",
|
|
265
269
|
lg: "w-12"
|
|
266
270
|
};
|
|
267
271
|
var iconSizeMap2 = {
|
|
272
|
+
xs: "sm",
|
|
268
273
|
sm: "sm",
|
|
269
274
|
md: "sm",
|
|
270
275
|
lg: "md"
|
|
@@ -272,11 +277,11 @@ var iconSizeMap2 = {
|
|
|
272
277
|
function groupRadiusClass2(position) {
|
|
273
278
|
switch (position) {
|
|
274
279
|
case "start":
|
|
275
|
-
return "rounded-l-
|
|
280
|
+
return "rounded-l-md rounded-r-none";
|
|
276
281
|
case "middle":
|
|
277
282
|
return "rounded-none";
|
|
278
283
|
case "end":
|
|
279
|
-
return "rounded-r-
|
|
284
|
+
return "rounded-r-md rounded-l-none";
|
|
280
285
|
default:
|
|
281
286
|
return "rounded-md";
|
|
282
287
|
}
|
|
@@ -305,7 +310,7 @@ function IconButton({
|
|
|
305
310
|
"aria-label": ariaLabel,
|
|
306
311
|
isDisabled: isDisabled || isLoading,
|
|
307
312
|
className: [
|
|
308
|
-
"inline-flex items-center justify-center shrink-0",
|
|
313
|
+
"inline-flex items-center justify-center shrink-0 cursor-pointer",
|
|
309
314
|
radiusClass,
|
|
310
315
|
"outline-none transition-colors",
|
|
311
316
|
focusRing,
|
|
@@ -1414,6 +1419,7 @@ import {
|
|
|
1414
1419
|
import { twMerge as twMerge5 } from "tailwind-merge";
|
|
1415
1420
|
import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1416
1421
|
var iconSizeMap3 = {
|
|
1422
|
+
xs: "sm",
|
|
1417
1423
|
sm: "sm",
|
|
1418
1424
|
md: "sm",
|
|
1419
1425
|
lg: "md"
|
|
@@ -1432,7 +1438,7 @@ function ButtonLink({
|
|
|
1432
1438
|
{
|
|
1433
1439
|
...props,
|
|
1434
1440
|
className: twMerge5(
|
|
1435
|
-
"inline-flex items-center justify-center gap-2",
|
|
1441
|
+
"inline-flex items-center justify-center gap-2 cursor-pointer",
|
|
1436
1442
|
"rounded-md",
|
|
1437
1443
|
"font-medium",
|
|
1438
1444
|
"leading-tight",
|
|
@@ -1471,7 +1477,7 @@ function IconButtonLink({
|
|
|
1471
1477
|
...props,
|
|
1472
1478
|
"aria-label": ariaLabel,
|
|
1473
1479
|
className: twMerge5(
|
|
1474
|
-
"inline-flex items-center justify-center",
|
|
1480
|
+
"inline-flex items-center justify-center cursor-pointer",
|
|
1475
1481
|
"rounded-md",
|
|
1476
1482
|
"outline-none transition-colors no-underline",
|
|
1477
1483
|
"focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
|
|
@@ -1494,12 +1500,8 @@ import {
|
|
|
1494
1500
|
} from "react-aria-components";
|
|
1495
1501
|
import { twMerge as twMerge6 } from "tailwind-merge";
|
|
1496
1502
|
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1497
|
-
var sizeStyles4 = {
|
|
1498
|
-
sm: "px-3 py-1.5 text-sm",
|
|
1499
|
-
md: "px-4 py-2 text-base",
|
|
1500
|
-
lg: "px-6 py-3 text-lg"
|
|
1501
|
-
};
|
|
1502
1503
|
var squareSizeStyles3 = {
|
|
1504
|
+
xs: "h-6 w-6 text-xs",
|
|
1503
1505
|
sm: "h-7 w-7 text-sm",
|
|
1504
1506
|
md: "h-8 w-8 text-base",
|
|
1505
1507
|
lg: "h-10 w-10 text-lg"
|
|
@@ -1547,14 +1549,14 @@ function ToggleButton({
|
|
|
1547
1549
|
{
|
|
1548
1550
|
...props,
|
|
1549
1551
|
className: ({ isSelected }) => twMerge6(
|
|
1550
|
-
"inline-flex items-center justify-center gap-2",
|
|
1552
|
+
"inline-flex items-center justify-center gap-2 cursor-pointer",
|
|
1551
1553
|
isSquare ? "rounded-none" : "rounded-md",
|
|
1552
1554
|
"font-medium",
|
|
1553
1555
|
"leading-tight",
|
|
1554
1556
|
"outline-none transition-colors",
|
|
1555
1557
|
"focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
|
|
1556
1558
|
"disabled:opacity-50 disabled:pointer-events-none",
|
|
1557
|
-
isSquare ? squareSizeStyles3[size] :
|
|
1559
|
+
isSquare ? squareSizeStyles3[size] : sizeStyles[size],
|
|
1558
1560
|
isSelected ? styles.selected : styles.base,
|
|
1559
1561
|
className
|
|
1560
1562
|
)
|
|
@@ -1573,7 +1575,7 @@ import { jsx as jsx25 } from "react/jsx-runtime";
|
|
|
1573
1575
|
var ToggleButtonGroupContext = createContext3({
|
|
1574
1576
|
size: "md"
|
|
1575
1577
|
});
|
|
1576
|
-
var
|
|
1578
|
+
var sizeStyles4 = {
|
|
1577
1579
|
sm: "px-2.5 py-1 text-xs gap-1",
|
|
1578
1580
|
md: "px-3 py-1.5 text-sm gap-1.5",
|
|
1579
1581
|
lg: "px-4 py-2 text-base gap-2"
|
|
@@ -1624,7 +1626,7 @@ function ToggleButtonGroupItem({
|
|
|
1624
1626
|
// Disabled
|
|
1625
1627
|
isDisabled && "opacity-50 pointer-events-none",
|
|
1626
1628
|
// Size
|
|
1627
|
-
isIconOnly ? iconOnlySizeStyles[size] :
|
|
1629
|
+
isIconOnly ? iconOnlySizeStyles[size] : sizeStyles4[size],
|
|
1628
1630
|
// Selected state
|
|
1629
1631
|
isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
|
|
1630
1632
|
className
|
|
@@ -1908,7 +1910,7 @@ var TabsContext = createContext4({
|
|
|
1908
1910
|
variant: "underline",
|
|
1909
1911
|
size: "md"
|
|
1910
1912
|
});
|
|
1911
|
-
var
|
|
1913
|
+
var sizeStyles5 = {
|
|
1912
1914
|
sm: "px-3 py-1.5 text-sm",
|
|
1913
1915
|
md: "px-4 py-2 text-base",
|
|
1914
1916
|
lg: "px-6 py-3 text-lg"
|
|
@@ -1977,7 +1979,7 @@ function Tab({ className, ...props }) {
|
|
|
1977
1979
|
// Disabled
|
|
1978
1980
|
isDisabled ? "opacity-50 pointer-events-none" : "",
|
|
1979
1981
|
// Size
|
|
1980
|
-
|
|
1982
|
+
sizeStyles5[size],
|
|
1981
1983
|
...getTabVariantStyles(variant, {
|
|
1982
1984
|
isSelected,
|
|
1983
1985
|
isHovered,
|
|
@@ -2032,240 +2034,6 @@ import {
|
|
|
2032
2034
|
TabPanel as TabPanel2
|
|
2033
2035
|
} from "react-aria-components";
|
|
2034
2036
|
|
|
2035
|
-
// src/components/Tree/Tree.tsx
|
|
2036
|
-
import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
|
|
2037
|
-
import { Tree as ArboristTree } from "react-arborist";
|
|
2038
|
-
import { ChevronRight as ChevronRight2, Folder, File } from "lucide-react";
|
|
2039
|
-
import { Check as Check4 } from "lucide-react";
|
|
2040
|
-
import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2041
|
-
var rowHeightMap = {
|
|
2042
|
-
compact: 32,
|
|
2043
|
-
comfortable: 40
|
|
2044
|
-
};
|
|
2045
|
-
function NodeRenderer({
|
|
2046
|
-
node,
|
|
2047
|
-
style,
|
|
2048
|
-
tree,
|
|
2049
|
-
dragHandle,
|
|
2050
|
-
checkedIds,
|
|
2051
|
-
onCheckToggle,
|
|
2052
|
-
selectionMode,
|
|
2053
|
-
size,
|
|
2054
|
-
onHover,
|
|
2055
|
-
onHoverEnd,
|
|
2056
|
-
onToggle
|
|
2057
|
-
}) {
|
|
2058
|
-
const data = node.data;
|
|
2059
|
-
const isCheckbox = selectionMode === "checkbox";
|
|
2060
|
-
const isChecked = isCheckbox && checkedIds.has(node.id);
|
|
2061
|
-
const isSelected = node.isSelected && !isCheckbox;
|
|
2062
|
-
const isCompact = size === "compact";
|
|
2063
|
-
const IconComponent = data.icon ? data.icon : node.isInternal ? Folder : File;
|
|
2064
|
-
return /* @__PURE__ */ jsxs21(
|
|
2065
|
-
"div",
|
|
2066
|
-
{
|
|
2067
|
-
ref: dragHandle,
|
|
2068
|
-
style,
|
|
2069
|
-
className: [
|
|
2070
|
-
"relative flex items-center cursor-default select-none",
|
|
2071
|
-
isCompact ? "gap-0.5 px-2" : "gap-1 px-3",
|
|
2072
|
-
"text-sm text-(--color-text-primary)",
|
|
2073
|
-
"outline-none",
|
|
2074
|
-
// Full-width background via pseudo-element
|
|
2075
|
-
"before:absolute before:inset-y-0 before:left-[-100vw] before:right-0 before:-z-10 before:transition-colors",
|
|
2076
|
-
isSelected ? "before:bg-(--color-surface-selected) hover:before:bg-(--color-surface-selected-hover) border-l-2 border-l-(--color-brand-accent)" : "hover:before:bg-(--color-surface-hover)",
|
|
2077
|
-
node.isFocused ? "outline-2 outline-(--color-border-focus) outline-offset-[-2px]" : ""
|
|
2078
|
-
].filter(Boolean).join(" "),
|
|
2079
|
-
role: "treeitem",
|
|
2080
|
-
"aria-selected": isCheckbox ? isChecked : node.isSelected,
|
|
2081
|
-
"aria-expanded": node.isInternal ? node.isOpen : void 0,
|
|
2082
|
-
"aria-level": node.level + 1,
|
|
2083
|
-
onPointerEnter: () => onHover?.(node.data),
|
|
2084
|
-
onPointerLeave: () => onHoverEnd?.(node.data),
|
|
2085
|
-
onClick: (e) => {
|
|
2086
|
-
if (isCheckbox) {
|
|
2087
|
-
onCheckToggle(node.id);
|
|
2088
|
-
} else {
|
|
2089
|
-
node.handleClick(e);
|
|
2090
|
-
}
|
|
2091
|
-
},
|
|
2092
|
-
onKeyDown: (e) => {
|
|
2093
|
-
if (isCheckbox && (e.key === " " || e.key === "Enter")) {
|
|
2094
|
-
e.preventDefault();
|
|
2095
|
-
onCheckToggle(node.id);
|
|
2096
|
-
}
|
|
2097
|
-
},
|
|
2098
|
-
children: [
|
|
2099
|
-
/* @__PURE__ */ jsx34(
|
|
2100
|
-
"button",
|
|
2101
|
-
{
|
|
2102
|
-
type: "button",
|
|
2103
|
-
className: [
|
|
2104
|
-
"flex items-center justify-center w-6 h-6 shrink-0",
|
|
2105
|
-
"rounded-sm",
|
|
2106
|
-
"text-(--color-text-secondary)",
|
|
2107
|
-
"hover:text-(--color-text-primary)",
|
|
2108
|
-
"transition-transform",
|
|
2109
|
-
node.isInternal ? "visible" : "invisible"
|
|
2110
|
-
].filter(Boolean).join(" "),
|
|
2111
|
-
onClick: (e) => {
|
|
2112
|
-
e.stopPropagation();
|
|
2113
|
-
node.toggle();
|
|
2114
|
-
onToggle?.(node.data);
|
|
2115
|
-
},
|
|
2116
|
-
tabIndex: -1,
|
|
2117
|
-
"aria-label": node.isOpen ? "Collapse" : "Expand",
|
|
2118
|
-
children: /* @__PURE__ */ jsx34(
|
|
2119
|
-
ChevronRight2,
|
|
2120
|
-
{
|
|
2121
|
-
size: 14,
|
|
2122
|
-
className: [
|
|
2123
|
-
"transition-transform",
|
|
2124
|
-
node.isOpen ? "rotate-90" : ""
|
|
2125
|
-
].filter(Boolean).join(" ")
|
|
2126
|
-
}
|
|
2127
|
-
)
|
|
2128
|
-
}
|
|
2129
|
-
),
|
|
2130
|
-
isCheckbox && /* @__PURE__ */ jsx34(
|
|
2131
|
-
"div",
|
|
2132
|
-
{
|
|
2133
|
-
className: [
|
|
2134
|
-
"flex items-center justify-center w-5 h-5 shrink-0",
|
|
2135
|
-
"rounded-sm border transition-colors",
|
|
2136
|
-
isChecked ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) hover:border-(--color-border-strong)"
|
|
2137
|
-
].join(" "),
|
|
2138
|
-
role: "checkbox",
|
|
2139
|
-
"aria-checked": isChecked,
|
|
2140
|
-
"aria-label": `Select ${data.name}`,
|
|
2141
|
-
children: isChecked && /* @__PURE__ */ jsx34(
|
|
2142
|
-
Check4,
|
|
2143
|
-
{
|
|
2144
|
-
className: "w-3 h-3 text-(--color-text-inverse)",
|
|
2145
|
-
strokeWidth: 3
|
|
2146
|
-
}
|
|
2147
|
-
)
|
|
2148
|
-
}
|
|
2149
|
-
),
|
|
2150
|
-
/* @__PURE__ */ jsx34(
|
|
2151
|
-
IconComponent,
|
|
2152
|
-
{
|
|
2153
|
-
size: 16,
|
|
2154
|
-
className: "shrink-0 text-(--color-text-secondary)",
|
|
2155
|
-
"aria-hidden": "true"
|
|
2156
|
-
}
|
|
2157
|
-
),
|
|
2158
|
-
/* @__PURE__ */ jsx34("span", { className: "truncate", children: data.name })
|
|
2159
|
-
]
|
|
2160
|
-
}
|
|
2161
|
-
);
|
|
2162
|
-
}
|
|
2163
|
-
function Tree({
|
|
2164
|
-
data,
|
|
2165
|
-
"aria-label": ariaLabel,
|
|
2166
|
-
size = "comfortable",
|
|
2167
|
-
selectionMode = "single",
|
|
2168
|
-
selectedIds,
|
|
2169
|
-
onSelectionChange,
|
|
2170
|
-
onActivate,
|
|
2171
|
-
onToggle,
|
|
2172
|
-
onHover,
|
|
2173
|
-
onHoverEnd,
|
|
2174
|
-
openByDefault = false,
|
|
2175
|
-
searchTerm,
|
|
2176
|
-
searchMatch,
|
|
2177
|
-
height = 400,
|
|
2178
|
-
indent = 24,
|
|
2179
|
-
disableDrag = true,
|
|
2180
|
-
disableDrop = true,
|
|
2181
|
-
treeRef,
|
|
2182
|
-
className
|
|
2183
|
-
}) {
|
|
2184
|
-
const internalRef = useRef2(null);
|
|
2185
|
-
useImperativeHandle(treeRef, () => internalRef.current, []);
|
|
2186
|
-
const [internalChecked, setInternalChecked] = useState2(
|
|
2187
|
-
() => /* @__PURE__ */ new Set()
|
|
2188
|
-
);
|
|
2189
|
-
const checkedIds = selectedIds ?? internalChecked;
|
|
2190
|
-
const handleCheckToggle = useCallback2(
|
|
2191
|
-
(id) => {
|
|
2192
|
-
const next = new Set(checkedIds);
|
|
2193
|
-
if (next.has(id)) {
|
|
2194
|
-
next.delete(id);
|
|
2195
|
-
} else {
|
|
2196
|
-
next.add(id);
|
|
2197
|
-
}
|
|
2198
|
-
if (onSelectionChange) {
|
|
2199
|
-
onSelectionChange(next);
|
|
2200
|
-
} else {
|
|
2201
|
-
setInternalChecked(next);
|
|
2202
|
-
}
|
|
2203
|
-
},
|
|
2204
|
-
[checkedIds, onSelectionChange]
|
|
2205
|
-
);
|
|
2206
|
-
const handleSelect = useCallback2(
|
|
2207
|
-
(nodes) => {
|
|
2208
|
-
if (selectionMode === "checkbox" || selectionMode === "none") return;
|
|
2209
|
-
if (onSelectionChange) {
|
|
2210
|
-
onSelectionChange(new Set(nodes.map((n) => n.id)));
|
|
2211
|
-
}
|
|
2212
|
-
},
|
|
2213
|
-
[selectionMode, onSelectionChange]
|
|
2214
|
-
);
|
|
2215
|
-
const handleActivate = useCallback2(
|
|
2216
|
-
(node) => {
|
|
2217
|
-
if (onActivate) {
|
|
2218
|
-
onActivate(node.data);
|
|
2219
|
-
}
|
|
2220
|
-
},
|
|
2221
|
-
[onActivate]
|
|
2222
|
-
);
|
|
2223
|
-
const arboristSearchMatch = searchMatch ? (node, term) => searchMatch(node.data, term) : void 0;
|
|
2224
|
-
const selectionProp = selectionMode === "single" && selectedIds && selectedIds.size > 0 ? [...selectedIds][0] : void 0;
|
|
2225
|
-
return /* @__PURE__ */ jsx34(
|
|
2226
|
-
"div",
|
|
2227
|
-
{
|
|
2228
|
-
role: "tree",
|
|
2229
|
-
"aria-label": ariaLabel,
|
|
2230
|
-
className: ["outline-none overflow-hidden", className].filter(Boolean).join(" "),
|
|
2231
|
-
children: /* @__PURE__ */ jsx34(
|
|
2232
|
-
ArboristTree,
|
|
2233
|
-
{
|
|
2234
|
-
ref: internalRef,
|
|
2235
|
-
data,
|
|
2236
|
-
width: "100%",
|
|
2237
|
-
height,
|
|
2238
|
-
rowHeight: rowHeightMap[size],
|
|
2239
|
-
indent,
|
|
2240
|
-
openByDefault,
|
|
2241
|
-
searchTerm,
|
|
2242
|
-
searchMatch: arboristSearchMatch,
|
|
2243
|
-
disableDrag,
|
|
2244
|
-
disableDrop,
|
|
2245
|
-
disableMultiSelection: selectionMode === "single" || selectionMode === "none",
|
|
2246
|
-
selection: selectionProp,
|
|
2247
|
-
onSelect: handleSelect,
|
|
2248
|
-
onActivate: handleActivate,
|
|
2249
|
-
disableEdit: true,
|
|
2250
|
-
children: (props) => /* @__PURE__ */ jsx34(
|
|
2251
|
-
NodeRenderer,
|
|
2252
|
-
{
|
|
2253
|
-
...props,
|
|
2254
|
-
checkedIds,
|
|
2255
|
-
onCheckToggle: handleCheckToggle,
|
|
2256
|
-
selectionMode,
|
|
2257
|
-
size,
|
|
2258
|
-
onHover,
|
|
2259
|
-
onHoverEnd,
|
|
2260
|
-
onToggle
|
|
2261
|
-
}
|
|
2262
|
-
)
|
|
2263
|
-
}
|
|
2264
|
-
)
|
|
2265
|
-
}
|
|
2266
|
-
);
|
|
2267
|
-
}
|
|
2268
|
-
|
|
2269
2037
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
2270
2038
|
import { createContext as createContext5, useContext as useContext5 } from "react";
|
|
2271
2039
|
import { twMerge as twMerge10 } from "tailwind-merge";
|
|
@@ -2273,11 +2041,11 @@ import {
|
|
|
2273
2041
|
ToggleButtonGroup as AriaToggleButtonGroup,
|
|
2274
2042
|
ToggleButton as AriaToggleButton2
|
|
2275
2043
|
} from "react-aria-components";
|
|
2276
|
-
import { jsx as
|
|
2044
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
2277
2045
|
var SegmentedControlContext = createContext5({
|
|
2278
2046
|
size: "md"
|
|
2279
2047
|
});
|
|
2280
|
-
var
|
|
2048
|
+
var sizeStyles6 = {
|
|
2281
2049
|
sm: "px-2.5 py-1 text-xs",
|
|
2282
2050
|
md: "px-3 py-1.5 text-sm",
|
|
2283
2051
|
lg: "px-4 py-2 text-base"
|
|
@@ -2293,7 +2061,7 @@ function SegmentedControl({
|
|
|
2293
2061
|
...props
|
|
2294
2062
|
}) {
|
|
2295
2063
|
const isNoneMode = selectionMode === "none";
|
|
2296
|
-
return /* @__PURE__ */
|
|
2064
|
+
return /* @__PURE__ */ jsx34(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx34(
|
|
2297
2065
|
AriaToggleButtonGroup,
|
|
2298
2066
|
{
|
|
2299
2067
|
...props,
|
|
@@ -2314,7 +2082,7 @@ function SegmentedControlItem({
|
|
|
2314
2082
|
...props
|
|
2315
2083
|
}) {
|
|
2316
2084
|
const { size } = useContext5(SegmentedControlContext);
|
|
2317
|
-
return /* @__PURE__ */
|
|
2085
|
+
return /* @__PURE__ */ jsx34(
|
|
2318
2086
|
AriaToggleButton2,
|
|
2319
2087
|
{
|
|
2320
2088
|
...props,
|
|
@@ -2329,7 +2097,7 @@ function SegmentedControlItem({
|
|
|
2329
2097
|
// Disabled
|
|
2330
2098
|
isDisabled && "opacity-50 pointer-events-none",
|
|
2331
2099
|
// Size
|
|
2332
|
-
|
|
2100
|
+
sizeStyles6[size],
|
|
2333
2101
|
// Selected state
|
|
2334
2102
|
isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
|
|
2335
2103
|
className
|
|
@@ -2338,257 +2106,9 @@ function SegmentedControlItem({
|
|
|
2338
2106
|
);
|
|
2339
2107
|
}
|
|
2340
2108
|
|
|
2341
|
-
// src/components/FileCard/FileCard.tsx
|
|
2342
|
-
import { useCallback as useCallback3 } from "react";
|
|
2343
|
-
import { File as File2, Info as Info2 } from "lucide-react";
|
|
2344
|
-
import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2345
|
-
function FileCard({
|
|
2346
|
-
name,
|
|
2347
|
-
icon: IconComponent = File2,
|
|
2348
|
-
size,
|
|
2349
|
-
compact = false,
|
|
2350
|
-
children,
|
|
2351
|
-
onInfo,
|
|
2352
|
-
onPress,
|
|
2353
|
-
className
|
|
2354
|
-
}) {
|
|
2355
|
-
const isInteractive = !!onPress;
|
|
2356
|
-
const radius = compact ? "rounded-md" : "rounded-lg";
|
|
2357
|
-
const iconSize = compact ? 24 : 32;
|
|
2358
|
-
const thumbnailClass = compact ? "aspect-square rounded-t-(--border-radius-md)" : "aspect-[4/3] rounded-t-(--border-radius-lg)";
|
|
2359
|
-
const handleInfoClick = useCallback3(
|
|
2360
|
-
(e) => {
|
|
2361
|
-
if (isInteractive) {
|
|
2362
|
-
e.stopPropagation();
|
|
2363
|
-
e.preventDefault();
|
|
2364
|
-
}
|
|
2365
|
-
onInfo?.();
|
|
2366
|
-
},
|
|
2367
|
-
[onInfo, isInteractive]
|
|
2368
|
-
);
|
|
2369
|
-
const handleKeyDown = useCallback3(
|
|
2370
|
-
(e) => {
|
|
2371
|
-
if (onPress && (e.key === "Enter" || e.key === " ")) {
|
|
2372
|
-
e.preventDefault();
|
|
2373
|
-
onPress();
|
|
2374
|
-
}
|
|
2375
|
-
},
|
|
2376
|
-
[onPress]
|
|
2377
|
-
);
|
|
2378
|
-
const cardContent = /* @__PURE__ */ jsxs22(Fragment8, { children: [
|
|
2379
|
-
/* @__PURE__ */ jsx36(
|
|
2380
|
-
"div",
|
|
2381
|
-
{
|
|
2382
|
-
className: `shrink-0 overflow-hidden bg-neutral-900 ${thumbnailClass}`,
|
|
2383
|
-
children: children ? /* @__PURE__ */ jsx36("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx36("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx36(IconComponent, { size: iconSize, className: "text-(--color-text-secondary)" }) })
|
|
2384
|
-
}
|
|
2385
|
-
),
|
|
2386
|
-
/* @__PURE__ */ jsx36(
|
|
2387
|
-
"div",
|
|
2388
|
-
{
|
|
2389
|
-
className: [
|
|
2390
|
-
"flex flex-col border-t border-(--color-border-default)",
|
|
2391
|
-
"bg-(--color-surface-default)",
|
|
2392
|
-
compact ? "px-2 py-1.5 rounded-b-(--border-radius-md)" : "gap-0.5 px-3 py-2 rounded-b-(--border-radius-lg)"
|
|
2393
|
-
].join(" "),
|
|
2394
|
-
children: compact ? /* @__PURE__ */ jsx36("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs22(Fragment8, { children: [
|
|
2395
|
-
/* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
|
|
2396
|
-
/* @__PURE__ */ jsx36(
|
|
2397
|
-
IconComponent,
|
|
2398
|
-
{
|
|
2399
|
-
size: 16,
|
|
2400
|
-
className: "shrink-0 text-(--color-text-secondary)"
|
|
2401
|
-
}
|
|
2402
|
-
),
|
|
2403
|
-
/* @__PURE__ */ jsx36("span", { className: "min-w-0 flex-1 text-sm font-medium text-(--color-text-primary) truncate", children: name }),
|
|
2404
|
-
onInfo && /* @__PURE__ */ jsx36(
|
|
2405
|
-
"span",
|
|
2406
|
-
{
|
|
2407
|
-
onClick: handleInfoClick,
|
|
2408
|
-
onKeyDown: (e) => {
|
|
2409
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
2410
|
-
handleInfoClick(e);
|
|
2411
|
-
}
|
|
2412
|
-
},
|
|
2413
|
-
role: "presentation",
|
|
2414
|
-
children: /* @__PURE__ */ jsx36(
|
|
2415
|
-
IconButton,
|
|
2416
|
-
{
|
|
2417
|
-
icon: Info2,
|
|
2418
|
-
"aria-label": `Show info for ${name}`,
|
|
2419
|
-
variant: "ghost",
|
|
2420
|
-
size: "sm",
|
|
2421
|
-
className: "shrink-0 -mt-0.5 -mr-1",
|
|
2422
|
-
onPress: onInfo
|
|
2423
|
-
}
|
|
2424
|
-
)
|
|
2425
|
-
}
|
|
2426
|
-
)
|
|
2427
|
-
] }),
|
|
2428
|
-
size && /* @__PURE__ */ jsx36("span", { className: "text-xs text-(--color-text-secondary) tabular-nums pl-[22px]", children: size })
|
|
2429
|
-
] })
|
|
2430
|
-
}
|
|
2431
|
-
)
|
|
2432
|
-
] });
|
|
2433
|
-
const baseStyles = [
|
|
2434
|
-
"group flex flex-col overflow-hidden",
|
|
2435
|
-
radius,
|
|
2436
|
-
"border border-(--color-border-default)",
|
|
2437
|
-
"shadow-sm",
|
|
2438
|
-
"transition-all",
|
|
2439
|
-
isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
|
|
2440
|
-
isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
|
|
2441
|
-
className
|
|
2442
|
-
].filter(Boolean).join(" ");
|
|
2443
|
-
if (onPress) {
|
|
2444
|
-
return /* @__PURE__ */ jsx36(
|
|
2445
|
-
"div",
|
|
2446
|
-
{
|
|
2447
|
-
role: "button",
|
|
2448
|
-
tabIndex: 0,
|
|
2449
|
-
"aria-label": name,
|
|
2450
|
-
className: baseStyles,
|
|
2451
|
-
onClick: onPress,
|
|
2452
|
-
onKeyDown: handleKeyDown,
|
|
2453
|
-
children: cardContent
|
|
2454
|
-
}
|
|
2455
|
-
);
|
|
2456
|
-
}
|
|
2457
|
-
return /* @__PURE__ */ jsx36("div", { className: baseStyles, children: cardContent });
|
|
2458
|
-
}
|
|
2459
|
-
|
|
2460
|
-
// src/components/StorageConnectionCard/StorageConnectionCard.tsx
|
|
2461
|
-
import { useCallback as useCallback4 } from "react";
|
|
2462
|
-
import { AlertCircle, Database } from "lucide-react";
|
|
2463
|
-
import { twMerge as twMerge11 } from "tailwind-merge";
|
|
2464
|
-
import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2465
|
-
var statusDotStyles = {
|
|
2466
|
-
connected: "bg-(--color-status-success)",
|
|
2467
|
-
error: "border-2 border-(--color-status-danger) bg-transparent",
|
|
2468
|
-
loading: "bg-(--color-status-warning) animate-pulse"
|
|
2469
|
-
};
|
|
2470
|
-
function PreviewArea({
|
|
2471
|
-
status = "connected",
|
|
2472
|
-
errorMessage,
|
|
2473
|
-
children
|
|
2474
|
-
}) {
|
|
2475
|
-
if (status === "loading") {
|
|
2476
|
-
return /* @__PURE__ */ jsx37("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx37(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
|
|
2477
|
-
}
|
|
2478
|
-
if (status === "error") {
|
|
2479
|
-
return /* @__PURE__ */ jsxs23("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-(--color-surface-danger) px-4", children: [
|
|
2480
|
-
/* @__PURE__ */ jsx37(
|
|
2481
|
-
Icon,
|
|
2482
|
-
{
|
|
2483
|
-
icon: AlertCircle,
|
|
2484
|
-
size: "lg",
|
|
2485
|
-
className: "text-(--color-text-danger)"
|
|
2486
|
-
}
|
|
2487
|
-
),
|
|
2488
|
-
errorMessage && /* @__PURE__ */ jsx37("p", { className: "text-center text-xs text-(--color-text-danger)", children: errorMessage })
|
|
2489
|
-
] });
|
|
2490
|
-
}
|
|
2491
|
-
if (children) {
|
|
2492
|
-
return /* @__PURE__ */ jsx37("div", { className: "h-full w-full overflow-hidden", children });
|
|
2493
|
-
}
|
|
2494
|
-
return /* @__PURE__ */ jsx37("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx37(
|
|
2495
|
-
Icon,
|
|
2496
|
-
{
|
|
2497
|
-
icon: Database,
|
|
2498
|
-
size: "xl",
|
|
2499
|
-
className: "text-(--color-text-secondary)"
|
|
2500
|
-
}
|
|
2501
|
-
) });
|
|
2502
|
-
}
|
|
2503
|
-
function StorageConnectionCard({
|
|
2504
|
-
name,
|
|
2505
|
-
status,
|
|
2506
|
-
errorMessage,
|
|
2507
|
-
meta,
|
|
2508
|
-
children,
|
|
2509
|
-
href,
|
|
2510
|
-
onPress,
|
|
2511
|
-
actions,
|
|
2512
|
-
className
|
|
2513
|
-
}) {
|
|
2514
|
-
const isInteractive = !!href || !!onPress;
|
|
2515
|
-
const handleKeyDown = useCallback4(
|
|
2516
|
-
(e) => {
|
|
2517
|
-
if (onPress && (e.key === "Enter" || e.key === " ")) {
|
|
2518
|
-
e.preventDefault();
|
|
2519
|
-
onPress();
|
|
2520
|
-
}
|
|
2521
|
-
},
|
|
2522
|
-
[onPress]
|
|
2523
|
-
);
|
|
2524
|
-
const cardContent = /* @__PURE__ */ jsxs23(Fragment9, { children: [
|
|
2525
|
-
/* @__PURE__ */ jsx37("div", { className: "aspect-[4/3] bg-neutral-900 overflow-hidden rounded-t-(--border-radius-lg)", children: /* @__PURE__ */ jsx37(PreviewArea, { status, errorMessage, children }) }),
|
|
2526
|
-
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1.5 border-t border-(--color-border-default) bg-(--color-surface-default) px-3 py-2.5 rounded-b-(--border-radius-lg)", children: [
|
|
2527
|
-
/* @__PURE__ */ jsxs23("div", { className: "flex items-start gap-2", children: [
|
|
2528
|
-
status && /* @__PURE__ */ jsx37(
|
|
2529
|
-
"span",
|
|
2530
|
-
{
|
|
2531
|
-
className: twMerge11(
|
|
2532
|
-
"mt-1.5 h-2 w-2 shrink-0 rounded-full",
|
|
2533
|
-
statusDotStyles[status]
|
|
2534
|
-
),
|
|
2535
|
-
"aria-label": `Status: ${status}`
|
|
2536
|
-
}
|
|
2537
|
-
),
|
|
2538
|
-
/* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-(--color-text-primary)", children: name }),
|
|
2539
|
-
actions && /* @__PURE__ */ jsx37(
|
|
2540
|
-
"span",
|
|
2541
|
-
{
|
|
2542
|
-
onClick: (e) => {
|
|
2543
|
-
if (isInteractive) {
|
|
2544
|
-
e.stopPropagation();
|
|
2545
|
-
e.preventDefault();
|
|
2546
|
-
}
|
|
2547
|
-
},
|
|
2548
|
-
onKeyDown: (e) => {
|
|
2549
|
-
if (isInteractive) {
|
|
2550
|
-
e.stopPropagation();
|
|
2551
|
-
}
|
|
2552
|
-
},
|
|
2553
|
-
role: "presentation",
|
|
2554
|
-
className: "shrink-0 -mt-1 -mr-1",
|
|
2555
|
-
children: actions
|
|
2556
|
-
}
|
|
2557
|
-
)
|
|
2558
|
-
] }),
|
|
2559
|
-
meta && /* @__PURE__ */ jsx37("div", { className: twMerge11("flex items-center gap-2", status && "pl-4"), children: meta })
|
|
2560
|
-
] })
|
|
2561
|
-
] });
|
|
2562
|
-
const baseStyles = twMerge11(
|
|
2563
|
-
"flex flex-col overflow-hidden rounded-lg",
|
|
2564
|
-
"border border-(--color-border-default)",
|
|
2565
|
-
"shadow-sm transition-all",
|
|
2566
|
-
isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
|
|
2567
|
-
isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
|
|
2568
|
-
className
|
|
2569
|
-
);
|
|
2570
|
-
if (href) {
|
|
2571
|
-
return /* @__PURE__ */ jsx37("a", { href, className: twMerge11(baseStyles, "no-underline"), children: cardContent });
|
|
2572
|
-
}
|
|
2573
|
-
if (onPress) {
|
|
2574
|
-
return /* @__PURE__ */ jsx37(
|
|
2575
|
-
"div",
|
|
2576
|
-
{
|
|
2577
|
-
role: "button",
|
|
2578
|
-
tabIndex: 0,
|
|
2579
|
-
className: baseStyles,
|
|
2580
|
-
onClick: onPress,
|
|
2581
|
-
onKeyDown: handleKeyDown,
|
|
2582
|
-
children: cardContent
|
|
2583
|
-
}
|
|
2584
|
-
);
|
|
2585
|
-
}
|
|
2586
|
-
return /* @__PURE__ */ jsx37("div", { className: baseStyles, children: cardContent });
|
|
2587
|
-
}
|
|
2588
|
-
|
|
2589
2109
|
// src/components/Badge/Badge.tsx
|
|
2590
|
-
import { twMerge as
|
|
2591
|
-
import { jsx as
|
|
2110
|
+
import { twMerge as twMerge11 } from "tailwind-merge";
|
|
2111
|
+
import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2592
2112
|
var variantStyles4 = {
|
|
2593
2113
|
neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
|
|
2594
2114
|
purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
|
|
@@ -2598,7 +2118,7 @@ var variantStyles4 = {
|
|
|
2598
2118
|
green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
|
|
2599
2119
|
amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
|
|
2600
2120
|
};
|
|
2601
|
-
var
|
|
2121
|
+
var sizeStyles7 = {
|
|
2602
2122
|
sm: "px-1.5 py-0.5",
|
|
2603
2123
|
md: "px-2 py-0.5"
|
|
2604
2124
|
};
|
|
@@ -2613,18 +2133,18 @@ function Badge({
|
|
|
2613
2133
|
icon: IconComponent,
|
|
2614
2134
|
className
|
|
2615
2135
|
}) {
|
|
2616
|
-
return /* @__PURE__ */
|
|
2136
|
+
return /* @__PURE__ */ jsxs21(
|
|
2617
2137
|
"span",
|
|
2618
2138
|
{
|
|
2619
|
-
className:
|
|
2139
|
+
className: twMerge11(
|
|
2620
2140
|
"inline-flex items-center gap-1 rounded-full",
|
|
2621
2141
|
"text-xs font-medium leading-tight",
|
|
2622
2142
|
variantStyles4[variant],
|
|
2623
|
-
|
|
2143
|
+
sizeStyles7[size],
|
|
2624
2144
|
className
|
|
2625
2145
|
),
|
|
2626
2146
|
children: [
|
|
2627
|
-
IconComponent && /* @__PURE__ */
|
|
2147
|
+
IconComponent && /* @__PURE__ */ jsx35(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
|
|
2628
2148
|
children
|
|
2629
2149
|
]
|
|
2630
2150
|
}
|
|
@@ -2632,9 +2152,9 @@ function Badge({
|
|
|
2632
2152
|
}
|
|
2633
2153
|
|
|
2634
2154
|
// src/components/Card/Card.tsx
|
|
2635
|
-
import { useCallback as
|
|
2636
|
-
import { twMerge as
|
|
2637
|
-
import { Fragment as
|
|
2155
|
+
import { useCallback as useCallback2 } from "react";
|
|
2156
|
+
import { twMerge as twMerge12 } from "tailwind-merge";
|
|
2157
|
+
import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2638
2158
|
var paddingStyles = {
|
|
2639
2159
|
none: "p-0",
|
|
2640
2160
|
sm: "p-3",
|
|
@@ -2652,13 +2172,13 @@ function Card({
|
|
|
2652
2172
|
className
|
|
2653
2173
|
}) {
|
|
2654
2174
|
const isInteractive = interactive || !!href || !!onPress;
|
|
2655
|
-
const containerClass =
|
|
2175
|
+
const containerClass = twMerge12(
|
|
2656
2176
|
"bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
|
|
2657
2177
|
isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
|
|
2658
2178
|
(href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
|
|
2659
2179
|
className
|
|
2660
2180
|
);
|
|
2661
|
-
const handleKeyDown =
|
|
2181
|
+
const handleKeyDown = useCallback2(
|
|
2662
2182
|
(e) => {
|
|
2663
2183
|
if (onPress && (e.key === "Enter" || e.key === " ")) {
|
|
2664
2184
|
e.preventDefault();
|
|
@@ -2667,22 +2187,22 @@ function Card({
|
|
|
2667
2187
|
},
|
|
2668
2188
|
[onPress]
|
|
2669
2189
|
);
|
|
2670
|
-
const content = /* @__PURE__ */
|
|
2671
|
-
header && /* @__PURE__ */
|
|
2190
|
+
const content = /* @__PURE__ */ jsxs22(Fragment8, { children: [
|
|
2191
|
+
header && /* @__PURE__ */ jsx36(
|
|
2672
2192
|
"div",
|
|
2673
2193
|
{
|
|
2674
|
-
className:
|
|
2194
|
+
className: twMerge12(
|
|
2675
2195
|
"border-b border-(--color-border-default)",
|
|
2676
2196
|
paddingStyles[padding]
|
|
2677
2197
|
),
|
|
2678
2198
|
children: header
|
|
2679
2199
|
}
|
|
2680
2200
|
),
|
|
2681
|
-
/* @__PURE__ */
|
|
2682
|
-
footer && /* @__PURE__ */
|
|
2201
|
+
/* @__PURE__ */ jsx36("div", { className: paddingStyles[padding], children }),
|
|
2202
|
+
footer && /* @__PURE__ */ jsx36(
|
|
2683
2203
|
"div",
|
|
2684
2204
|
{
|
|
2685
|
-
className:
|
|
2205
|
+
className: twMerge12(
|
|
2686
2206
|
"border-t border-(--color-border-default)",
|
|
2687
2207
|
paddingStyles[padding]
|
|
2688
2208
|
),
|
|
@@ -2691,10 +2211,10 @@ function Card({
|
|
|
2691
2211
|
)
|
|
2692
2212
|
] });
|
|
2693
2213
|
if (href) {
|
|
2694
|
-
return /* @__PURE__ */
|
|
2214
|
+
return /* @__PURE__ */ jsx36("a", { href, className: containerClass, children: content });
|
|
2695
2215
|
}
|
|
2696
2216
|
if (onPress) {
|
|
2697
|
-
return /* @__PURE__ */
|
|
2217
|
+
return /* @__PURE__ */ jsx36(
|
|
2698
2218
|
"div",
|
|
2699
2219
|
{
|
|
2700
2220
|
role: "button",
|
|
@@ -2706,13 +2226,13 @@ function Card({
|
|
|
2706
2226
|
}
|
|
2707
2227
|
);
|
|
2708
2228
|
}
|
|
2709
|
-
return /* @__PURE__ */
|
|
2229
|
+
return /* @__PURE__ */ jsx36("div", { className: containerClass, children: content });
|
|
2710
2230
|
}
|
|
2711
2231
|
|
|
2712
2232
|
// src/components/DeltaIndicator/DeltaIndicator.tsx
|
|
2713
2233
|
import { ArrowUp, ArrowDown, Minus } from "lucide-react";
|
|
2714
|
-
import { twMerge as
|
|
2715
|
-
import { jsx as
|
|
2234
|
+
import { twMerge as twMerge13 } from "tailwind-merge";
|
|
2235
|
+
import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2716
2236
|
function getDirection(current, previous) {
|
|
2717
2237
|
const diff = current - previous;
|
|
2718
2238
|
if (diff > 0) return "increase";
|
|
@@ -2765,16 +2285,16 @@ function DeltaIndicator({
|
|
|
2765
2285
|
className
|
|
2766
2286
|
}) {
|
|
2767
2287
|
if (unavailable) {
|
|
2768
|
-
return /* @__PURE__ */
|
|
2288
|
+
return /* @__PURE__ */ jsxs23(
|
|
2769
2289
|
"span",
|
|
2770
2290
|
{
|
|
2771
|
-
className:
|
|
2291
|
+
className: twMerge13(
|
|
2772
2292
|
"inline-flex items-center gap-1 font-medium",
|
|
2773
2293
|
"text-(--color-text-tertiary)",
|
|
2774
2294
|
className
|
|
2775
2295
|
),
|
|
2776
2296
|
children: [
|
|
2777
|
-
label && /* @__PURE__ */
|
|
2297
|
+
label && /* @__PURE__ */ jsx37("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
|
|
2778
2298
|
unavailableText
|
|
2779
2299
|
]
|
|
2780
2300
|
}
|
|
@@ -2804,10 +2324,10 @@ function DeltaIndicator({
|
|
|
2804
2324
|
}
|
|
2805
2325
|
}
|
|
2806
2326
|
const isPill = mode === "pill";
|
|
2807
|
-
return /* @__PURE__ */
|
|
2327
|
+
return /* @__PURE__ */ jsxs23(
|
|
2808
2328
|
"span",
|
|
2809
2329
|
{
|
|
2810
|
-
className:
|
|
2330
|
+
className: twMerge13(
|
|
2811
2331
|
"inline-flex items-center gap-1 font-medium",
|
|
2812
2332
|
colorStyles2,
|
|
2813
2333
|
isPill && [
|
|
@@ -2818,8 +2338,8 @@ function DeltaIndicator({
|
|
|
2818
2338
|
className
|
|
2819
2339
|
),
|
|
2820
2340
|
children: [
|
|
2821
|
-
label && /* @__PURE__ */
|
|
2822
|
-
/* @__PURE__ */
|
|
2341
|
+
label && /* @__PURE__ */ jsx37("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
|
|
2342
|
+
/* @__PURE__ */ jsx37(IconComponent, { size: 14, "aria-hidden": true }),
|
|
2823
2343
|
valueText
|
|
2824
2344
|
]
|
|
2825
2345
|
}
|
|
@@ -2827,8 +2347,8 @@ function DeltaIndicator({
|
|
|
2827
2347
|
}
|
|
2828
2348
|
|
|
2829
2349
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
2830
|
-
import { twMerge as
|
|
2831
|
-
import { jsx as
|
|
2350
|
+
import { twMerge as twMerge14 } from "tailwind-merge";
|
|
2351
|
+
import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2832
2352
|
var fillStyles = {
|
|
2833
2353
|
brand: "bg-(--color-progress-fill)",
|
|
2834
2354
|
success: "bg-(--color-progress-fill-success)",
|
|
@@ -2836,7 +2356,7 @@ var fillStyles = {
|
|
|
2836
2356
|
danger: "bg-(--color-progress-fill-danger)",
|
|
2837
2357
|
neutral: "bg-(--color-text-secondary)"
|
|
2838
2358
|
};
|
|
2839
|
-
var
|
|
2359
|
+
var sizeStyles8 = {
|
|
2840
2360
|
sm: "h-1.5",
|
|
2841
2361
|
md: "h-3",
|
|
2842
2362
|
lg: "h-4"
|
|
@@ -2851,12 +2371,12 @@ function ProgressBar({
|
|
|
2851
2371
|
className
|
|
2852
2372
|
}) {
|
|
2853
2373
|
const clampedValue = Math.min(100, Math.max(0, value));
|
|
2854
|
-
return /* @__PURE__ */
|
|
2855
|
-
(label || description || showValue) && /* @__PURE__ */
|
|
2856
|
-
/* @__PURE__ */
|
|
2857
|
-
/* @__PURE__ */
|
|
2374
|
+
return /* @__PURE__ */ jsxs24("div", { className: twMerge14("w-full", className), children: [
|
|
2375
|
+
(label || description || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
|
|
2376
|
+
/* @__PURE__ */ jsx38("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
|
|
2377
|
+
/* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
|
|
2858
2378
|
] }),
|
|
2859
|
-
/* @__PURE__ */
|
|
2379
|
+
/* @__PURE__ */ jsx38(
|
|
2860
2380
|
"div",
|
|
2861
2381
|
{
|
|
2862
2382
|
role: "progressbar",
|
|
@@ -2864,14 +2384,14 @@ function ProgressBar({
|
|
|
2864
2384
|
"aria-valuemin": 0,
|
|
2865
2385
|
"aria-valuemax": 100,
|
|
2866
2386
|
"aria-label": label ?? "Progress",
|
|
2867
|
-
className:
|
|
2387
|
+
className: twMerge14(
|
|
2868
2388
|
"w-full rounded-full bg-(--color-progress-track)",
|
|
2869
|
-
|
|
2389
|
+
sizeStyles8[size]
|
|
2870
2390
|
),
|
|
2871
|
-
children: /* @__PURE__ */
|
|
2391
|
+
children: /* @__PURE__ */ jsx38(
|
|
2872
2392
|
"div",
|
|
2873
2393
|
{
|
|
2874
|
-
className:
|
|
2394
|
+
className: twMerge14(
|
|
2875
2395
|
"h-full rounded-full transition-all duration-300",
|
|
2876
2396
|
fillStyles[variant]
|
|
2877
2397
|
),
|
|
@@ -2884,19 +2404,19 @@ function ProgressBar({
|
|
|
2884
2404
|
}
|
|
2885
2405
|
|
|
2886
2406
|
// src/components/Banner/Banner.tsx
|
|
2887
|
-
import { useState as
|
|
2407
|
+
import { useState as useState2 } from "react";
|
|
2888
2408
|
import {
|
|
2889
|
-
Info as
|
|
2409
|
+
Info as Info2,
|
|
2890
2410
|
AlertTriangle,
|
|
2891
|
-
AlertCircle
|
|
2411
|
+
AlertCircle,
|
|
2892
2412
|
CheckCircle2,
|
|
2893
2413
|
X as X3
|
|
2894
2414
|
} from "lucide-react";
|
|
2895
|
-
import { twMerge as
|
|
2896
|
-
import { jsx as
|
|
2415
|
+
import { twMerge as twMerge15 } from "tailwind-merge";
|
|
2416
|
+
import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2897
2417
|
var variantConfig2 = {
|
|
2898
2418
|
info: {
|
|
2899
|
-
icon:
|
|
2419
|
+
icon: Info2,
|
|
2900
2420
|
containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
|
|
2901
2421
|
iconClass: "text-(--color-banner-info-icon)",
|
|
2902
2422
|
role: "status"
|
|
@@ -2908,7 +2428,7 @@ var variantConfig2 = {
|
|
|
2908
2428
|
role: "alert"
|
|
2909
2429
|
},
|
|
2910
2430
|
danger: {
|
|
2911
|
-
icon:
|
|
2431
|
+
icon: AlertCircle,
|
|
2912
2432
|
containerClass: "bg-(--color-banner-danger-bg) border-(--color-banner-danger-border) text-(--color-banner-danger-text)",
|
|
2913
2433
|
iconClass: "text-(--color-banner-danger-icon)",
|
|
2914
2434
|
role: "alert"
|
|
@@ -2929,7 +2449,7 @@ function Banner({
|
|
|
2929
2449
|
onDismiss,
|
|
2930
2450
|
className
|
|
2931
2451
|
}) {
|
|
2932
|
-
const [dismissed, setDismissed] =
|
|
2452
|
+
const [dismissed, setDismissed] = useState2(false);
|
|
2933
2453
|
if (dismissed) return null;
|
|
2934
2454
|
const config = variantConfig2[variant];
|
|
2935
2455
|
const IconComponent = icon ?? config.icon;
|
|
@@ -2937,40 +2457,40 @@ function Banner({
|
|
|
2937
2457
|
setDismissed(true);
|
|
2938
2458
|
onDismiss?.();
|
|
2939
2459
|
};
|
|
2940
|
-
return /* @__PURE__ */
|
|
2460
|
+
return /* @__PURE__ */ jsxs25(
|
|
2941
2461
|
"div",
|
|
2942
2462
|
{
|
|
2943
2463
|
role: config.role,
|
|
2944
|
-
className:
|
|
2464
|
+
className: twMerge15(
|
|
2945
2465
|
"flex items-start gap-3 rounded-lg border px-4 py-3",
|
|
2946
2466
|
"text-sm",
|
|
2947
2467
|
config.containerClass,
|
|
2948
2468
|
className
|
|
2949
2469
|
),
|
|
2950
2470
|
children: [
|
|
2951
|
-
/* @__PURE__ */
|
|
2471
|
+
/* @__PURE__ */ jsx39(
|
|
2952
2472
|
IconComponent,
|
|
2953
2473
|
{
|
|
2954
2474
|
size: 20,
|
|
2955
|
-
className:
|
|
2475
|
+
className: twMerge15("shrink-0 mt-0.5", config.iconClass),
|
|
2956
2476
|
"aria-hidden": "true"
|
|
2957
2477
|
}
|
|
2958
2478
|
),
|
|
2959
|
-
/* @__PURE__ */
|
|
2960
|
-
title && /* @__PURE__ */
|
|
2479
|
+
/* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
|
|
2480
|
+
title && /* @__PURE__ */ jsxs25("span", { className: "font-medium", children: [
|
|
2961
2481
|
title,
|
|
2962
2482
|
" \u2014 "
|
|
2963
2483
|
] }),
|
|
2964
2484
|
children
|
|
2965
2485
|
] }),
|
|
2966
|
-
dismissible && /* @__PURE__ */
|
|
2486
|
+
dismissible && /* @__PURE__ */ jsx39(
|
|
2967
2487
|
"button",
|
|
2968
2488
|
{
|
|
2969
2489
|
type: "button",
|
|
2970
2490
|
onClick: handleDismiss,
|
|
2971
2491
|
className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
|
|
2972
2492
|
"aria-label": "Dismiss",
|
|
2973
|
-
children: /* @__PURE__ */
|
|
2493
|
+
children: /* @__PURE__ */ jsx39(X3, { size: 16, "aria-hidden": "true" })
|
|
2974
2494
|
}
|
|
2975
2495
|
)
|
|
2976
2496
|
]
|
|
@@ -2979,8 +2499,8 @@ function Banner({
|
|
|
2979
2499
|
}
|
|
2980
2500
|
|
|
2981
2501
|
// src/components/MetricCard/MetricCard.tsx
|
|
2982
|
-
import { twMerge as
|
|
2983
|
-
import { Fragment as
|
|
2502
|
+
import { twMerge as twMerge16 } from "tailwind-merge";
|
|
2503
|
+
import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2984
2504
|
var sizeConfig = {
|
|
2985
2505
|
sm: {
|
|
2986
2506
|
padding: "p-3",
|
|
@@ -3002,58 +2522,58 @@ function MetricCard({
|
|
|
3002
2522
|
className
|
|
3003
2523
|
}) {
|
|
3004
2524
|
const config = sizeConfig[size];
|
|
3005
|
-
const containerClass =
|
|
2525
|
+
const containerClass = twMerge16(
|
|
3006
2526
|
"bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
|
|
3007
2527
|
config.padding,
|
|
3008
2528
|
href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
|
|
3009
2529
|
className
|
|
3010
2530
|
);
|
|
3011
|
-
const content = /* @__PURE__ */
|
|
3012
|
-
/* @__PURE__ */
|
|
3013
|
-
/* @__PURE__ */
|
|
2531
|
+
const content = /* @__PURE__ */ jsxs26(Fragment9, { children: [
|
|
2532
|
+
/* @__PURE__ */ jsx40("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
|
|
2533
|
+
/* @__PURE__ */ jsx40(
|
|
3014
2534
|
"div",
|
|
3015
2535
|
{
|
|
3016
|
-
className:
|
|
2536
|
+
className: twMerge16(
|
|
3017
2537
|
config.valueClass,
|
|
3018
2538
|
"font-semibold text-(--color-text-primary) mt-1 tabular-nums"
|
|
3019
2539
|
),
|
|
3020
2540
|
children: value
|
|
3021
2541
|
}
|
|
3022
2542
|
),
|
|
3023
|
-
secondary && /* @__PURE__ */
|
|
2543
|
+
secondary && /* @__PURE__ */ jsx40("div", { className: "mt-1 text-sm", children: secondary })
|
|
3024
2544
|
] });
|
|
3025
2545
|
if (href) {
|
|
3026
|
-
return /* @__PURE__ */
|
|
2546
|
+
return /* @__PURE__ */ jsx40("a", { href, className: containerClass, children: content });
|
|
3027
2547
|
}
|
|
3028
|
-
return /* @__PURE__ */
|
|
2548
|
+
return /* @__PURE__ */ jsx40("div", { className: containerClass, children: content });
|
|
3029
2549
|
}
|
|
3030
2550
|
|
|
3031
2551
|
// src/components/SectionHeader/SectionHeader.tsx
|
|
3032
|
-
import { twMerge as
|
|
3033
|
-
import { jsx as
|
|
2552
|
+
import { twMerge as twMerge17 } from "tailwind-merge";
|
|
2553
|
+
import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3034
2554
|
function SectionHeader({
|
|
3035
2555
|
title,
|
|
3036
2556
|
children,
|
|
3037
2557
|
className
|
|
3038
2558
|
}) {
|
|
3039
|
-
return /* @__PURE__ */
|
|
2559
|
+
return /* @__PURE__ */ jsxs27(
|
|
3040
2560
|
"div",
|
|
3041
2561
|
{
|
|
3042
|
-
className:
|
|
2562
|
+
className: twMerge17(
|
|
3043
2563
|
"flex flex-wrap items-center gap-3 py-4",
|
|
3044
2564
|
className
|
|
3045
2565
|
),
|
|
3046
2566
|
children: [
|
|
3047
|
-
/* @__PURE__ */
|
|
3048
|
-
children && /* @__PURE__ */
|
|
2567
|
+
/* @__PURE__ */ jsx41(H2, { children: title }),
|
|
2568
|
+
children && /* @__PURE__ */ jsx41("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
|
|
3049
2569
|
]
|
|
3050
2570
|
}
|
|
3051
2571
|
);
|
|
3052
2572
|
}
|
|
3053
2573
|
|
|
3054
2574
|
// src/components/Pill/Pill.tsx
|
|
3055
|
-
import { twMerge as
|
|
3056
|
-
import { jsx as
|
|
2575
|
+
import { twMerge as twMerge18 } from "tailwind-merge";
|
|
2576
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
3057
2577
|
var hashColors = {
|
|
3058
2578
|
purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
|
|
3059
2579
|
teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text) border-(--color-badge-teal-text)/20",
|
|
@@ -3079,7 +2599,7 @@ function Pill({
|
|
|
3079
2599
|
className,
|
|
3080
2600
|
...rest
|
|
3081
2601
|
}) {
|
|
3082
|
-
const cx =
|
|
2602
|
+
const cx = twMerge18(
|
|
3083
2603
|
`
|
|
3084
2604
|
inline-flex items-center
|
|
3085
2605
|
rounded-full
|
|
@@ -3091,12 +2611,12 @@ function Pill({
|
|
|
3091
2611
|
colorStyles[color],
|
|
3092
2612
|
className
|
|
3093
2613
|
);
|
|
3094
|
-
return /* @__PURE__ */
|
|
2614
|
+
return /* @__PURE__ */ jsx42("span", { className: cx, ...rest, children });
|
|
3095
2615
|
}
|
|
3096
2616
|
|
|
3097
2617
|
// src/components/Pill/PathPill.tsx
|
|
3098
|
-
import { twMerge as
|
|
3099
|
-
import { jsx as
|
|
2618
|
+
import { twMerge as twMerge19 } from "tailwind-merge";
|
|
2619
|
+
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
3100
2620
|
function PathPill({
|
|
3101
2621
|
children,
|
|
3102
2622
|
visibleCount,
|
|
@@ -3108,17 +2628,17 @@ function PathPill({
|
|
|
3108
2628
|
const effectiveVisible = visibleCount ?? segments.length;
|
|
3109
2629
|
const dotCount = Math.max(0, segments.length - effectiveVisible);
|
|
3110
2630
|
const fullPath = segments.join(" / ");
|
|
3111
|
-
return /* @__PURE__ */
|
|
2631
|
+
return /* @__PURE__ */ jsx43(
|
|
3112
2632
|
"div",
|
|
3113
2633
|
{
|
|
3114
|
-
className:
|
|
2634
|
+
className: twMerge19("relative flex", className),
|
|
3115
2635
|
"aria-label": `Path: ${fullPath}`,
|
|
3116
2636
|
children: segments.map((segment, i) => {
|
|
3117
2637
|
const isCollapsed = i < dotCount;
|
|
3118
2638
|
const isLast = i === segments.length - 1;
|
|
3119
|
-
const cx =
|
|
2639
|
+
const cx = twMerge19(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
|
|
3120
2640
|
const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
|
|
3121
|
-
return /* @__PURE__ */
|
|
2641
|
+
return /* @__PURE__ */ jsx43(
|
|
3122
2642
|
Pill,
|
|
3123
2643
|
{
|
|
3124
2644
|
className: cx,
|
|
@@ -3134,8 +2654,8 @@ function PathPill({
|
|
|
3134
2654
|
}
|
|
3135
2655
|
|
|
3136
2656
|
// src/components/FormWizard/FormWizard.tsx
|
|
3137
|
-
import { createContext as createContext6, useContext as useContext6, useCallback as
|
|
3138
|
-
import { jsx as
|
|
2657
|
+
import { createContext as createContext6, useContext as useContext6, useCallback as useCallback3, useMemo } from "react";
|
|
2658
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
3139
2659
|
var FormWizardContext = createContext6({
|
|
3140
2660
|
currentStep: 0,
|
|
3141
2661
|
totalSteps: 1,
|
|
@@ -3155,7 +2675,7 @@ function FormWizard({
|
|
|
3155
2675
|
}) {
|
|
3156
2676
|
const canGoBack = currentStep > 0;
|
|
3157
2677
|
const isLastStep = currentStep >= totalSteps - 1;
|
|
3158
|
-
const goBack =
|
|
2678
|
+
const goBack = useCallback3(() => {
|
|
3159
2679
|
if (currentStep > 0) {
|
|
3160
2680
|
onStepChange(currentStep - 1);
|
|
3161
2681
|
}
|
|
@@ -3170,13 +2690,13 @@ function FormWizard({
|
|
|
3170
2690
|
}),
|
|
3171
2691
|
[currentStep, totalSteps, canGoBack, goBack, isLastStep]
|
|
3172
2692
|
);
|
|
3173
|
-
return /* @__PURE__ */
|
|
2693
|
+
return /* @__PURE__ */ jsx44(FormWizardContext.Provider, { value, children });
|
|
3174
2694
|
}
|
|
3175
2695
|
|
|
3176
2696
|
// src/components/FormWizard/FormWizardProgress.tsx
|
|
3177
|
-
import { jsx as
|
|
2697
|
+
import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3178
2698
|
function CheckIcon() {
|
|
3179
|
-
return /* @__PURE__ */
|
|
2699
|
+
return /* @__PURE__ */ jsx45(
|
|
3180
2700
|
"svg",
|
|
3181
2701
|
{
|
|
3182
2702
|
"aria-hidden": "true",
|
|
@@ -3187,24 +2707,24 @@ function CheckIcon() {
|
|
|
3187
2707
|
strokeWidth: "2",
|
|
3188
2708
|
strokeLinecap: "round",
|
|
3189
2709
|
strokeLinejoin: "round",
|
|
3190
|
-
children: /* @__PURE__ */
|
|
2710
|
+
children: /* @__PURE__ */ jsx45("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
|
|
3191
2711
|
}
|
|
3192
2712
|
);
|
|
3193
2713
|
}
|
|
3194
2714
|
function FormWizardProgress({ labels }) {
|
|
3195
2715
|
const { currentStep, totalSteps } = useFormWizard();
|
|
3196
|
-
return /* @__PURE__ */
|
|
2716
|
+
return /* @__PURE__ */ jsx45("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx45("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
|
|
3197
2717
|
const isCompleted = index < currentStep;
|
|
3198
2718
|
const isCurrent = index === currentStep;
|
|
3199
2719
|
const isFuture = index > currentStep;
|
|
3200
|
-
return /* @__PURE__ */
|
|
2720
|
+
return /* @__PURE__ */ jsxs28(
|
|
3201
2721
|
"li",
|
|
3202
2722
|
{
|
|
3203
2723
|
className: "flex flex-1 flex-col items-center",
|
|
3204
2724
|
"aria-current": isCurrent ? "step" : void 0,
|
|
3205
2725
|
children: [
|
|
3206
|
-
/* @__PURE__ */
|
|
3207
|
-
index > 0 ? /* @__PURE__ */
|
|
2726
|
+
/* @__PURE__ */ jsxs28("div", { className: "flex w-full items-center", children: [
|
|
2727
|
+
index > 0 ? /* @__PURE__ */ jsx45(
|
|
3208
2728
|
"div",
|
|
3209
2729
|
{
|
|
3210
2730
|
"aria-hidden": "true",
|
|
@@ -3213,8 +2733,8 @@ function FormWizardProgress({ labels }) {
|
|
|
3213
2733
|
index <= currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
|
|
3214
2734
|
].join(" ")
|
|
3215
2735
|
}
|
|
3216
|
-
) : /* @__PURE__ */
|
|
3217
|
-
/* @__PURE__ */
|
|
2736
|
+
) : /* @__PURE__ */ jsx45("div", { className: "flex-1", "aria-hidden": "true" }),
|
|
2737
|
+
/* @__PURE__ */ jsx45(
|
|
3218
2738
|
"div",
|
|
3219
2739
|
{
|
|
3220
2740
|
className: [
|
|
@@ -3226,10 +2746,10 @@ function FormWizardProgress({ labels }) {
|
|
|
3226
2746
|
isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
|
|
3227
2747
|
].join(" "),
|
|
3228
2748
|
"aria-hidden": "true",
|
|
3229
|
-
children: isCompleted ? /* @__PURE__ */
|
|
2749
|
+
children: isCompleted ? /* @__PURE__ */ jsx45(CheckIcon, {}) : index + 1
|
|
3230
2750
|
}
|
|
3231
2751
|
),
|
|
3232
|
-
index < totalSteps - 1 ? /* @__PURE__ */
|
|
2752
|
+
index < totalSteps - 1 ? /* @__PURE__ */ jsx45(
|
|
3233
2753
|
"div",
|
|
3234
2754
|
{
|
|
3235
2755
|
"aria-hidden": "true",
|
|
@@ -3238,9 +2758,9 @@ function FormWizardProgress({ labels }) {
|
|
|
3238
2758
|
index < currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
|
|
3239
2759
|
].join(" ")
|
|
3240
2760
|
}
|
|
3241
|
-
) : /* @__PURE__ */
|
|
2761
|
+
) : /* @__PURE__ */ jsx45("div", { className: "flex-1", "aria-hidden": "true" })
|
|
3242
2762
|
] }),
|
|
3243
|
-
/* @__PURE__ */
|
|
2763
|
+
/* @__PURE__ */ jsx45(
|
|
3244
2764
|
"span",
|
|
3245
2765
|
{
|
|
3246
2766
|
className: [
|
|
@@ -3258,15 +2778,15 @@ function FormWizardProgress({ labels }) {
|
|
|
3258
2778
|
}
|
|
3259
2779
|
|
|
3260
2780
|
// src/components/FormWizard/FormWizardNav.tsx
|
|
3261
|
-
import { jsx as
|
|
2781
|
+
import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3262
2782
|
function FormWizardNav({
|
|
3263
2783
|
onNext,
|
|
3264
2784
|
isSubmitting = false,
|
|
3265
2785
|
submitLabel = "Submit"
|
|
3266
2786
|
}) {
|
|
3267
2787
|
const { canGoBack, goBack, isLastStep } = useFormWizard();
|
|
3268
|
-
return /* @__PURE__ */
|
|
3269
|
-
canGoBack && /* @__PURE__ */
|
|
2788
|
+
return /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-end gap-3", children: [
|
|
2789
|
+
canGoBack && /* @__PURE__ */ jsx46(
|
|
3270
2790
|
Button,
|
|
3271
2791
|
{
|
|
3272
2792
|
variant: "secondary",
|
|
@@ -3276,7 +2796,7 @@ function FormWizardNav({
|
|
|
3276
2796
|
children: "Back"
|
|
3277
2797
|
}
|
|
3278
2798
|
),
|
|
3279
|
-
/* @__PURE__ */
|
|
2799
|
+
/* @__PURE__ */ jsx46(
|
|
3280
2800
|
Button,
|
|
3281
2801
|
{
|
|
3282
2802
|
variant: "primary",
|
|
@@ -3682,7 +3202,6 @@ export {
|
|
|
3682
3202
|
Dialog,
|
|
3683
3203
|
EmptyState,
|
|
3684
3204
|
Fieldset,
|
|
3685
|
-
FileCard,
|
|
3686
3205
|
FontSize2xl,
|
|
3687
3206
|
FontSize3xl,
|
|
3688
3207
|
FontSize4xl,
|
|
@@ -3748,7 +3267,6 @@ export {
|
|
|
3748
3267
|
Spacing6,
|
|
3749
3268
|
Spacing8,
|
|
3750
3269
|
Spinner,
|
|
3751
|
-
StorageConnectionCard,
|
|
3752
3270
|
Switch,
|
|
3753
3271
|
Tab,
|
|
3754
3272
|
TabList,
|
|
@@ -3762,7 +3280,6 @@ export {
|
|
|
3762
3280
|
ToggleButtonGroup,
|
|
3763
3281
|
ToggleButtonGroupItem,
|
|
3764
3282
|
Tooltip,
|
|
3765
|
-
Tree,
|
|
3766
3283
|
Tab2 as UnstyledTab,
|
|
3767
3284
|
TabList2 as UnstyledTabList,
|
|
3768
3285
|
TabPanel2 as UnstyledTabPanel,
|