@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.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-(--border-radius-md) rounded-r-none";
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-(--border-radius-md) rounded-l-none";
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-(--border-radius-md) rounded-r-none";
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-(--border-radius-md) rounded-l-none";
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] : sizeStyles4[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 sizeStyles5 = {
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] : sizeStyles5[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 sizeStyles6 = {
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
- sizeStyles6[size],
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 jsx35 } from "react/jsx-runtime";
2044
+ import { jsx as jsx34 } from "react/jsx-runtime";
2277
2045
  var SegmentedControlContext = createContext5({
2278
2046
  size: "md"
2279
2047
  });
2280
- var sizeStyles7 = {
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__ */ jsx35(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx35(
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__ */ jsx35(
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
- sizeStyles7[size],
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 twMerge12 } from "tailwind-merge";
2591
- import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
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 sizeStyles8 = {
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__ */ jsxs24(
2136
+ return /* @__PURE__ */ jsxs21(
2617
2137
  "span",
2618
2138
  {
2619
- className: twMerge12(
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
- sizeStyles8[size],
2143
+ sizeStyles7[size],
2624
2144
  className
2625
2145
  ),
2626
2146
  children: [
2627
- IconComponent && /* @__PURE__ */ jsx38(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
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 useCallback5 } from "react";
2636
- import { twMerge as twMerge13 } from "tailwind-merge";
2637
- import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
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 = twMerge13(
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 = useCallback5(
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__ */ jsxs25(Fragment10, { children: [
2671
- header && /* @__PURE__ */ jsx39(
2190
+ const content = /* @__PURE__ */ jsxs22(Fragment8, { children: [
2191
+ header && /* @__PURE__ */ jsx36(
2672
2192
  "div",
2673
2193
  {
2674
- className: twMerge13(
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__ */ jsx39("div", { className: paddingStyles[padding], children }),
2682
- footer && /* @__PURE__ */ jsx39(
2201
+ /* @__PURE__ */ jsx36("div", { className: paddingStyles[padding], children }),
2202
+ footer && /* @__PURE__ */ jsx36(
2683
2203
  "div",
2684
2204
  {
2685
- className: twMerge13(
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__ */ jsx39("a", { href, className: containerClass, children: content });
2214
+ return /* @__PURE__ */ jsx36("a", { href, className: containerClass, children: content });
2695
2215
  }
2696
2216
  if (onPress) {
2697
- return /* @__PURE__ */ jsx39(
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__ */ jsx39("div", { className: containerClass, children: content });
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 twMerge14 } from "tailwind-merge";
2715
- import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
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__ */ jsxs26(
2288
+ return /* @__PURE__ */ jsxs23(
2769
2289
  "span",
2770
2290
  {
2771
- className: twMerge14(
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__ */ jsx40("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
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__ */ jsxs26(
2327
+ return /* @__PURE__ */ jsxs23(
2808
2328
  "span",
2809
2329
  {
2810
- className: twMerge14(
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__ */ jsx40("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
2822
- /* @__PURE__ */ jsx40(IconComponent, { size: 14, "aria-hidden": true }),
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 twMerge15 } from "tailwind-merge";
2831
- import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
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 sizeStyles9 = {
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__ */ jsxs27("div", { className: twMerge15("w-full", className), children: [
2855
- (label || description || showValue) && /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between mb-2", children: [
2856
- /* @__PURE__ */ jsx41("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
2857
- /* @__PURE__ */ jsx41("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
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__ */ jsx41(
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: twMerge15(
2387
+ className: twMerge14(
2868
2388
  "w-full rounded-full bg-(--color-progress-track)",
2869
- sizeStyles9[size]
2389
+ sizeStyles8[size]
2870
2390
  ),
2871
- children: /* @__PURE__ */ jsx41(
2391
+ children: /* @__PURE__ */ jsx38(
2872
2392
  "div",
2873
2393
  {
2874
- className: twMerge15(
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 useState3 } from "react";
2407
+ import { useState as useState2 } from "react";
2888
2408
  import {
2889
- Info as Info3,
2409
+ Info as Info2,
2890
2410
  AlertTriangle,
2891
- AlertCircle as AlertCircle2,
2411
+ AlertCircle,
2892
2412
  CheckCircle2,
2893
2413
  X as X3
2894
2414
  } from "lucide-react";
2895
- import { twMerge as twMerge16 } from "tailwind-merge";
2896
- import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
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: Info3,
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: AlertCircle2,
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] = useState3(false);
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__ */ jsxs28(
2460
+ return /* @__PURE__ */ jsxs25(
2941
2461
  "div",
2942
2462
  {
2943
2463
  role: config.role,
2944
- className: twMerge16(
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__ */ jsx42(
2471
+ /* @__PURE__ */ jsx39(
2952
2472
  IconComponent,
2953
2473
  {
2954
2474
  size: 20,
2955
- className: twMerge16("shrink-0 mt-0.5", config.iconClass),
2475
+ className: twMerge15("shrink-0 mt-0.5", config.iconClass),
2956
2476
  "aria-hidden": "true"
2957
2477
  }
2958
2478
  ),
2959
- /* @__PURE__ */ jsxs28("div", { className: "flex-1", children: [
2960
- title && /* @__PURE__ */ jsxs28("span", { className: "font-medium", children: [
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__ */ jsx42(
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__ */ jsx42(X3, { size: 16, "aria-hidden": "true" })
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 twMerge17 } from "tailwind-merge";
2983
- import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
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 = twMerge17(
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__ */ jsxs29(Fragment11, { children: [
3012
- /* @__PURE__ */ jsx43("div", { className: twMerge17(config.labelClass, "text-(--color-text-secondary)"), children: label }),
3013
- /* @__PURE__ */ jsx43(
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: twMerge17(
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__ */ jsx43("div", { className: "mt-1 text-sm", children: secondary })
2543
+ secondary && /* @__PURE__ */ jsx40("div", { className: "mt-1 text-sm", children: secondary })
3024
2544
  ] });
3025
2545
  if (href) {
3026
- return /* @__PURE__ */ jsx43("a", { href, className: containerClass, children: content });
2546
+ return /* @__PURE__ */ jsx40("a", { href, className: containerClass, children: content });
3027
2547
  }
3028
- return /* @__PURE__ */ jsx43("div", { className: containerClass, children: content });
2548
+ return /* @__PURE__ */ jsx40("div", { className: containerClass, children: content });
3029
2549
  }
3030
2550
 
3031
2551
  // src/components/SectionHeader/SectionHeader.tsx
3032
- import { twMerge as twMerge18 } from "tailwind-merge";
3033
- import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
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__ */ jsxs30(
2559
+ return /* @__PURE__ */ jsxs27(
3040
2560
  "div",
3041
2561
  {
3042
- className: twMerge18(
2562
+ className: twMerge17(
3043
2563
  "flex flex-wrap items-center gap-3 py-4",
3044
2564
  className
3045
2565
  ),
3046
2566
  children: [
3047
- /* @__PURE__ */ jsx44(H2, { children: title }),
3048
- children && /* @__PURE__ */ jsx44("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
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 twMerge19 } from "tailwind-merge";
3056
- import { jsx as jsx45 } from "react/jsx-runtime";
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 = twMerge19(
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__ */ jsx45("span", { className: cx, ...rest, children });
2614
+ return /* @__PURE__ */ jsx42("span", { className: cx, ...rest, children });
3095
2615
  }
3096
2616
 
3097
2617
  // src/components/Pill/PathPill.tsx
3098
- import { twMerge as twMerge20 } from "tailwind-merge";
3099
- import { jsx as jsx46 } from "react/jsx-runtime";
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__ */ jsx46(
2631
+ return /* @__PURE__ */ jsx43(
3112
2632
  "div",
3113
2633
  {
3114
- className: twMerge20("relative flex", 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 = twMerge20(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
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__ */ jsx46(
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 useCallback6, useMemo } from "react";
3138
- import { jsx as jsx47 } from "react/jsx-runtime";
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 = useCallback6(() => {
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__ */ jsx47(FormWizardContext.Provider, { value, children });
2693
+ return /* @__PURE__ */ jsx44(FormWizardContext.Provider, { value, children });
3174
2694
  }
3175
2695
 
3176
2696
  // src/components/FormWizard/FormWizardProgress.tsx
3177
- import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
2697
+ import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
3178
2698
  function CheckIcon() {
3179
- return /* @__PURE__ */ jsx48(
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__ */ jsx48("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
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__ */ jsx48("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx48("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
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__ */ jsxs31(
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__ */ jsxs31("div", { className: "flex w-full items-center", children: [
3207
- index > 0 ? /* @__PURE__ */ jsx48(
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__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" }),
3217
- /* @__PURE__ */ jsx48(
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__ */ jsx48(CheckIcon, {}) : index + 1
2749
+ children: isCompleted ? /* @__PURE__ */ jsx45(CheckIcon, {}) : index + 1
3230
2750
  }
3231
2751
  ),
3232
- index < totalSteps - 1 ? /* @__PURE__ */ jsx48(
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__ */ jsx48("div", { className: "flex-1", "aria-hidden": "true" })
2761
+ ) : /* @__PURE__ */ jsx45("div", { className: "flex-1", "aria-hidden": "true" })
3242
2762
  ] }),
3243
- /* @__PURE__ */ jsx48(
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 jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
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__ */ jsxs32("div", { className: "flex items-center justify-end gap-3", children: [
3269
- canGoBack && /* @__PURE__ */ jsx49(
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__ */ jsx49(
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,