@campfire-interactive/ui 0.6.0 → 0.7.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.
Files changed (3) hide show
  1. package/dist/index.d.ts +285 -2
  2. package/dist/index.js +324 -95
  3. package/package.json +56 -55
package/dist/index.js CHANGED
@@ -40,15 +40,17 @@ function cn(...values) {
40
40
 
41
41
  // src/Button.tsx
42
42
  import { forwardRef } from "react";
43
+ import { Slot } from "@radix-ui/react-slot";
43
44
 
44
45
  // src/Button.css
45
- styleInject("@layer components {\n :where(.cfi-ui-btn) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--cfi-ui-space-sm);\n height: 2rem;\n padding-inline: 0.75rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-md);\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: normal;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast),\n color var(--cfi-ui-transition-fast);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-btn:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n .cfi-ui-btn[data-loading] {\n cursor: progress;\n opacity: 1;\n }\n .cfi-ui-btn--full {\n width: 100%;\n }\n .cfi-ui-btn[data-size=sm] {\n height: 1.75rem;\n padding-inline: 0.5rem;\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn[data-size=lg] {\n height: var(--cfi-ui-control-height-md);\n padding-inline: 1rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-btn[data-size=icon] {\n width: var(--cfi-ui-control-height-md);\n padding-inline: 0;\n }\n .cfi-ui-btn--icon[data-size=icon] {\n aspect-ratio: 1;\n }\n .cfi-ui-btn[data-variant=primary] {\n background: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-btn[data-variant=primary]:hover:not(:disabled) {\n background: var(--cfi-ui-accent-hover);\n }\n .cfi-ui-btn[data-variant=secondary] {\n background: var(--cfi-ui-surface);\n border-color: var(--cfi-ui-border-strong);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=secondary]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-btn[data-variant=ghost] {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=ghost]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-btn[data-variant=danger] {\n background: var(--cfi-ui-error-strong);\n color: var(--cfi-ui-content-inverse);\n }\n .cfi-ui-btn[data-variant=danger]:hover:not(:disabled) {\n background: linear-gradient(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.14)), var(--cfi-ui-error-strong);\n }\n .cfi-ui-btn[data-variant=link] {\n color: var(--cfi-ui-accent);\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n .cfi-ui-btn[data-variant=link]:hover:not(:disabled) {\n text-decoration-thickness: 2px;\n }\n .cfi-ui-btn__icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n }\n .cfi-ui-btn__icon > svg {\n width: 1em;\n height: 1em;\n display: block;\n }\n .cfi-ui-btn[data-size=lg] .cfi-ui-btn__icon > svg {\n width: 1.15em;\n height: 1.15em;\n }\n .cfi-ui-btn__label {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n min-width: 0;\n }\n .cfi-ui-btn[data-size=sm] .cfi-ui-btn__label {\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn__label > svg,\n .cfi-ui-btn > svg {\n width: 1em;\n height: 1em;\n flex: none;\n display: block;\n }\n .cfi-ui-btn__spinner {\n flex: none;\n width: 1em;\n height: 1em;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: var(--cfi-ui-radius-full);\n animation: cfi-ui-spin 620ms linear infinite;\n }\n :where(.cfi-ui-btn-group) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n flex-wrap: wrap;\n }\n .cfi-ui-btn-group[data-align=start] {\n justify-content: flex-start;\n }\n .cfi-ui-btn-group[data-align=end] {\n justify-content: flex-end;\n }\n .cfi-ui-btn-group[data-align=between] {\n justify-content: space-between;\n width: 100%;\n }\n}\n");
46
+ styleInject("@layer components {\n :where(.cfi-ui-btn) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--cfi-ui-space-sm);\n height: 2rem;\n padding-inline: 0.75rem;\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-md);\n background: transparent;\n color: inherit;\n font-family: inherit;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n line-height: normal;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast),\n color var(--cfi-ui-transition-fast);\n font-variant-numeric: tabular-nums;\n }\n a.cfi-ui-btn,\n a.cfi-ui-btn:hover,\n a.cfi-ui-btn:visited {\n text-decoration: none;\n color: inherit;\n }\n .cfi-ui-btn:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n .cfi-ui-btn[data-loading] {\n cursor: progress;\n opacity: 1;\n }\n .cfi-ui-btn--full {\n width: 100%;\n }\n .cfi-ui-btn[data-size=sm] {\n height: 1.75rem;\n padding-inline: 0.5rem;\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn[data-size=lg] {\n height: var(--cfi-ui-control-height-md);\n padding-inline: 1rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-btn[data-size=icon] {\n width: var(--cfi-ui-control-height-md);\n padding-inline: 0;\n }\n .cfi-ui-btn--icon[data-size=icon] {\n aspect-ratio: 1;\n }\n .cfi-ui-btn[data-variant=primary] {\n background: var(--cfi-ui-accent);\n color: var(--cfi-ui-accent-fg);\n }\n .cfi-ui-btn[data-variant=primary]:hover:not(:disabled) {\n background: var(--cfi-ui-accent-hover);\n }\n .cfi-ui-btn[data-variant=secondary] {\n background: var(--cfi-ui-surface);\n border-color: var(--cfi-ui-border-strong);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=secondary]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-btn[data-variant=ghost] {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-btn[data-variant=ghost]:hover:not(:disabled) {\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-btn[data-variant=danger] {\n background: var(--cfi-ui-error-strong);\n color: var(--cfi-ui-content-inverse);\n }\n .cfi-ui-btn[data-variant=danger]:hover:not(:disabled) {\n background: linear-gradient(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.14)), var(--cfi-ui-error-strong);\n }\n .cfi-ui-btn[data-variant=link] {\n color: var(--cfi-ui-accent);\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n .cfi-ui-btn[data-variant=link]:hover:not(:disabled) {\n text-decoration-thickness: 2px;\n }\n .cfi-ui-btn__icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n }\n .cfi-ui-btn__icon > svg {\n width: 1em;\n height: 1em;\n display: block;\n }\n .cfi-ui-btn[data-size=lg] .cfi-ui-btn__icon > svg {\n width: 1.15em;\n height: 1.15em;\n }\n .cfi-ui-btn__label {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n min-width: 0;\n }\n .cfi-ui-btn[data-size=sm] .cfi-ui-btn__label {\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-btn__label > svg,\n .cfi-ui-btn > svg {\n width: 1em;\n height: 1em;\n flex: none;\n display: block;\n }\n .cfi-ui-btn__spinner {\n flex: none;\n width: 1em;\n height: 1em;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: var(--cfi-ui-radius-full);\n animation: cfi-ui-spin 620ms linear infinite;\n }\n :where(.cfi-ui-btn-group) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n flex-wrap: wrap;\n }\n .cfi-ui-btn-group[data-align=start] {\n justify-content: flex-start;\n }\n .cfi-ui-btn-group[data-align=end] {\n justify-content: flex-end;\n }\n .cfi-ui-btn-group[data-align=between] {\n justify-content: space-between;\n width: 100%;\n }\n}\n");
46
47
 
47
48
  // src/Button.tsx
48
49
  import { jsx, jsxs } from "react/jsx-runtime";
49
50
  var Button = forwardRef(function Button2({
50
51
  variant = "secondary",
51
52
  size = "md",
53
+ asChild = false,
52
54
  loading = false,
53
55
  leadingIcon,
54
56
  trailingIcon,
@@ -59,6 +61,14 @@ var Button = forwardRef(function Button2({
59
61
  type,
60
62
  ...rest
61
63
  }, ref) {
64
+ const styling = {
65
+ "data-variant": variant,
66
+ "data-size": size,
67
+ className: cn("cfi-ui", "cfi-ui-btn", fullWidth && "cfi-ui-btn--full", className)
68
+ };
69
+ if (asChild) {
70
+ return /* @__PURE__ */ jsx(Slot, { ref, ...styling, ...rest, children });
71
+ }
62
72
  return /* @__PURE__ */ jsxs(
63
73
  "button",
64
74
  {
@@ -66,10 +76,8 @@ var Button = forwardRef(function Button2({
66
76
  type: type ?? "button",
67
77
  disabled: disabled || loading,
68
78
  "aria-busy": loading || void 0,
69
- "data-variant": variant,
70
- "data-size": size,
71
79
  "data-loading": loading || void 0,
72
- className: cn("cfi-ui", "cfi-ui-btn", fullWidth && "cfi-ui-btn--full", className),
80
+ ...styling,
73
81
  ...rest,
74
82
  children: [
75
83
  loading ? /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__spinner", "aria-hidden": "true" }) : leadingIcon && /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__icon", children: leadingIcon }),
@@ -1504,17 +1512,132 @@ function CardFooter({ className, ...rest }) {
1504
1512
  return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui-card__footer", className), ...rest });
1505
1513
  }
1506
1514
 
1515
+ // src/Alert.tsx
1516
+ import { AlertCircle, AlertTriangle as AlertTriangle2, CheckCircle2 as CheckCircle22, Info as Info2, X as X5 } from "lucide-react";
1517
+
1518
+ // src/Alert.css
1519
+ styleInject("@layer components {\n :where(.cfi-ui-alert) {\n display: flex;\n align-items: flex-start;\n gap: var(--cfi-ui-space-xs);\n padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n border: 1px solid transparent;\n border-radius: var(--cfi-ui-radius-md);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n }\n .cfi-ui-alert__icon {\n display: inline-flex;\n flex: none;\n margin-top: 0.0625rem;\n }\n .cfi-ui-alert__icon > svg {\n width: 1rem;\n height: 1rem;\n display: block;\n }\n .cfi-ui-alert__body {\n min-width: 0;\n flex: 1;\n }\n .cfi-ui-alert__title {\n margin: 0;\n font-weight: var(--cfi-ui-weight-semibold);\n }\n .cfi-ui-alert__text {\n margin: 0;\n overflow-wrap: anywhere;\n }\n .cfi-ui-alert__title + .cfi-ui-alert__text {\n margin-top: 0.125rem;\n opacity: 0.9;\n }\n .cfi-ui-alert__text > p {\n margin: 0;\n }\n .cfi-ui-alert__text > p + p {\n margin-top: 0.25rem;\n }\n .cfi-ui-alert__actions {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-2xs);\n flex: none;\n margin-top: -0.125rem;\n }\n .cfi-ui-alert__dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: 1.25rem;\n height: 1.25rem;\n margin: -0.125rem -0.25rem 0 0;\n padding: 0;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: none;\n color: inherit;\n opacity: 0.65;\n cursor: pointer;\n transition: opacity var(--cfi-ui-transition-fast);\n }\n .cfi-ui-alert__dismiss:hover {\n opacity: 1;\n }\n .cfi-ui-alert__dismiss:focus-visible {\n outline: var(--cfi-ui-focus-width) solid currentColor;\n outline-offset: var(--cfi-ui-focus-offset);\n opacity: 1;\n }\n .cfi-ui-alert__dismiss > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n .cfi-ui-alert[data-variant=soft][data-tone=info] {\n background: var(--cfi-ui-info-soft);\n border-color: var(--cfi-ui-info-border);\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-alert[data-variant=soft][data-tone=success] {\n background: var(--cfi-ui-success-soft);\n border-color: var(--cfi-ui-success-border);\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-alert[data-variant=soft][data-tone=warning] {\n background: var(--cfi-ui-warning-soft);\n border-color: var(--cfi-ui-warning-border);\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-alert[data-variant=soft][data-tone=error] {\n background: var(--cfi-ui-error-soft);\n border-color: var(--cfi-ui-error-border);\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-alert[data-variant=soft][data-tone=neutral] {\n background: var(--cfi-ui-neutral-soft);\n border-color: var(--cfi-ui-neutral-border);\n color: var(--cfi-ui-neutral-text);\n }\n .cfi-ui-alert[data-variant=subtle] {\n padding-left: var(--cfi-ui-space-sm);\n background: transparent;\n border-color: transparent;\n border-left-width: 3px;\n border-radius: 0;\n color: var(--cfi-ui-content);\n }\n .cfi-ui-alert[data-variant=subtle] .cfi-ui-alert__icon {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=info] {\n border-left-color: var(--cfi-ui-info);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=info] .cfi-ui-alert__icon {\n color: var(--cfi-ui-info-text);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=success] {\n border-left-color: var(--cfi-ui-success);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=success] .cfi-ui-alert__icon {\n color: var(--cfi-ui-success-text);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=warning] {\n border-left-color: var(--cfi-ui-warning);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=warning] .cfi-ui-alert__icon {\n color: var(--cfi-ui-warning-text);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=error] {\n border-left-color: var(--cfi-ui-error);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=error] .cfi-ui-alert__icon {\n color: var(--cfi-ui-error-text);\n }\n .cfi-ui-alert[data-variant=subtle][data-tone=neutral] {\n border-left-color: var(--cfi-ui-border-strong);\n }\n @media (max-width: 640px) {\n .cfi-ui-alert {\n flex-wrap: wrap;\n }\n .cfi-ui-alert__actions {\n width: 100%;\n margin-top: var(--cfi-ui-space-2xs);\n }\n }\n}\n");
1520
+
1521
+ // src/Alert.tsx
1522
+ import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
1523
+ var ICONS = {
1524
+ info: Info2,
1525
+ success: CheckCircle22,
1526
+ warning: AlertTriangle2,
1527
+ error: AlertCircle,
1528
+ neutral: Info2
1529
+ };
1530
+ function Alert({
1531
+ tone = "info",
1532
+ title,
1533
+ icon,
1534
+ actions,
1535
+ onDismiss,
1536
+ dismissLabel = "Dismiss",
1537
+ variant = "soft",
1538
+ className,
1539
+ children,
1540
+ ...rest
1541
+ }) {
1542
+ const Icon2 = ICONS[tone];
1543
+ const showIcon = icon !== null;
1544
+ const loud = tone === "error" || tone === "warning";
1545
+ return /* @__PURE__ */ jsxs19(
1546
+ "div",
1547
+ {
1548
+ role: loud ? "alert" : "status",
1549
+ "aria-live": loud ? "assertive" : "polite",
1550
+ "data-tone": tone,
1551
+ "data-variant": variant,
1552
+ className: cn("cfi-ui", "cfi-ui-alert", className),
1553
+ ...rest,
1554
+ children: [
1555
+ showIcon && /* @__PURE__ */ jsx19("span", { className: "cfi-ui-alert__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx19(Icon2, {}) }),
1556
+ /* @__PURE__ */ jsxs19("div", { className: "cfi-ui-alert__body", children: [
1557
+ title && /* @__PURE__ */ jsx19("p", { className: "cfi-ui-alert__title", children: title }),
1558
+ children && /* @__PURE__ */ jsx19("div", { className: "cfi-ui-alert__text", children })
1559
+ ] }),
1560
+ actions && /* @__PURE__ */ jsx19("div", { className: "cfi-ui-alert__actions", children: actions }),
1561
+ onDismiss && /* @__PURE__ */ jsx19(
1562
+ "button",
1563
+ {
1564
+ type: "button",
1565
+ className: "cfi-ui-alert__dismiss",
1566
+ onClick: onDismiss,
1567
+ "aria-label": dismissLabel,
1568
+ children: /* @__PURE__ */ jsx19(X5, { "aria-hidden": "true" })
1569
+ }
1570
+ )
1571
+ ]
1572
+ }
1573
+ );
1574
+ }
1575
+
1576
+ // src/DataList.css
1577
+ styleInject('@layer components {\n :where(.cfi-ui-datalist) {\n --cfi-ui-datalist-label-w: 12rem;\n margin: 0;\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n }\n .cfi-ui-datalist[data-size=sm] {\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-datalist__label {\n margin: 0;\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-datalist__value {\n margin: 0;\n color: var(--cfi-ui-content);\n min-width: 0;\n overflow-wrap: anywhere;\n }\n .cfi-ui-datalist__value[data-mono] {\n font-family: var(--cfi-ui-font-mono);\n font-size: 0.9em;\n }\n .cfi-ui-datalist__item[data-empty] .cfi-ui-datalist__value {\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-datalist[data-layout=label] {\n display: grid;\n gap: var(--cfi-ui-space-sm) var(--cfi-ui-space-xl);\n }\n .cfi-ui-datalist[data-layout=label][data-columns="2"] {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .cfi-ui-datalist[data-layout=label][data-columns="3"] {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .cfi-ui-datalist[data-layout=label] .cfi-ui-datalist__item {\n display: grid;\n grid-template-columns: var(--cfi-ui-datalist-label-w) minmax(0, 1fr);\n gap: var(--cfi-ui-space-md);\n align-items: baseline;\n }\n .cfi-ui-datalist[data-layout=label] .cfi-ui-datalist__item[data-full] {\n grid-column: 1 / -1;\n }\n .cfi-ui-datalist[data-layout=stack] {\n display: grid;\n gap: var(--cfi-ui-space-md);\n }\n .cfi-ui-datalist[data-layout=stack] .cfi-ui-datalist__label {\n font-size: var(--cfi-ui-text-xs);\n text-transform: uppercase;\n letter-spacing: var(--cfi-ui-tracking-caps);\n }\n .cfi-ui-datalist[data-layout=stack] .cfi-ui-datalist__value {\n margin-top: 0.125rem;\n }\n .cfi-ui-datalist[data-layout=inline] {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cfi-ui-space-2xs) var(--cfi-ui-space-md);\n }\n .cfi-ui-datalist[data-layout=inline] .cfi-ui-datalist__item {\n display: flex;\n align-items: baseline;\n gap: var(--cfi-ui-space-2xs);\n }\n .cfi-ui-datalist[data-layout=inline] .cfi-ui-datalist__label::after {\n content: ":";\n }\n .cfi-ui-datalist[data-divided][data-layout=label] .cfi-ui-datalist__item,\n .cfi-ui-datalist[data-divided][data-layout=stack] .cfi-ui-datalist__item {\n padding-bottom: var(--cfi-ui-space-sm);\n border-bottom: 1px solid var(--cfi-ui-border-subtle);\n }\n .cfi-ui-datalist[data-divided][data-layout=label] .cfi-ui-datalist__item:last-child,\n .cfi-ui-datalist[data-divided][data-layout=stack] .cfi-ui-datalist__item:last-child {\n padding-bottom: 0;\n border-bottom: 0;\n }\n @media (max-width: 640px) {\n .cfi-ui-datalist[data-layout=label][data-columns="2"],\n .cfi-ui-datalist[data-layout=label][data-columns="3"] {\n grid-template-columns: minmax(0, 1fr);\n }\n .cfi-ui-datalist[data-layout=label] .cfi-ui-datalist__item {\n grid-template-columns: minmax(0, 1fr);\n gap: 0;\n }\n .cfi-ui-datalist[data-layout=label] .cfi-ui-datalist__value {\n margin-top: 0.125rem;\n }\n }\n}\n');
1578
+
1579
+ // src/DataList.tsx
1580
+ import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
1581
+ function DataList({
1582
+ layout = "label",
1583
+ columns = 1,
1584
+ labelWidth,
1585
+ divided = false,
1586
+ size = "md",
1587
+ className,
1588
+ style,
1589
+ children,
1590
+ ...rest
1591
+ }) {
1592
+ return /* @__PURE__ */ jsx20(
1593
+ "dl",
1594
+ {
1595
+ "data-layout": layout,
1596
+ "data-columns": layout === "label" ? columns : void 0,
1597
+ "data-divided": divided ? "" : void 0,
1598
+ "data-size": size,
1599
+ className: cn("cfi-ui", "cfi-ui-datalist", className),
1600
+ style: labelWidth ? { ...style, ["--cfi-ui-datalist-label-w"]: labelWidth } : style,
1601
+ ...rest,
1602
+ children
1603
+ }
1604
+ );
1605
+ }
1606
+ var isEmpty = (v) => v === null || v === void 0 || v === "";
1607
+ function DataListItem({
1608
+ label,
1609
+ children,
1610
+ empty = "\u2014",
1611
+ full = false,
1612
+ mono = false,
1613
+ className
1614
+ }) {
1615
+ const blank = isEmpty(children);
1616
+ return /* @__PURE__ */ jsxs20(
1617
+ "div",
1618
+ {
1619
+ className: cn("cfi-ui-datalist__item", className),
1620
+ "data-full": full ? "" : void 0,
1621
+ "data-empty": blank ? "" : void 0,
1622
+ children: [
1623
+ /* @__PURE__ */ jsx20("dt", { className: "cfi-ui-datalist__label", children: label }),
1624
+ /* @__PURE__ */ jsx20("dd", { className: "cfi-ui-datalist__value", "data-mono": mono ? "" : void 0, children: blank ? empty : children })
1625
+ ]
1626
+ }
1627
+ );
1628
+ }
1629
+
1507
1630
  // src/Table.tsx
1508
1631
  import { forwardRef as forwardRef14 } from "react";
1509
1632
  import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
1510
1633
 
1511
1634
  // src/Table.css
1512
- styleInject("@layer components {\n :where(.cfi-ui-table-scroller) {\n width: 100%;\n overflow-x: auto;\n position: relative;\n }\n :where(.cfi-ui-table) {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n text-align: left;\n }\n :where(.cfi-ui-table__th) {\n height: 2.75rem;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border);\n background: transparent;\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n white-space: nowrap;\n text-align: left;\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n background: var(--cfi-ui-surface-sunken);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n color: var(--cfi-ui-content-muted);\n border-bottom-color: var(--cfi-ui-border-strong);\n }\n .cfi-ui-table[data-sticky] .cfi-ui-table__th {\n position: sticky;\n top: 0;\n z-index: var(--cfi-ui-z-raised, 10);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child,\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n position: sticky;\n left: 0;\n background: var(--cfi-ui-surface);\n box-shadow: 1px 0 0 0 var(--cfi-ui-border-subtle);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n z-index: 1;\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child {\n z-index: calc(var(--cfi-ui-z-raised, 10) + 1);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-selected] .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__sort {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin: -0.125rem -0.25rem;\n padding: 0.125rem 0.25rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: none;\n color: inherit;\n font: inherit;\n cursor: pointer;\n }\n .cfi-ui-table__sort:hover {\n color: var(--cfi-ui-content);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-table__sort-icon {\n display: inline-flex;\n flex: none;\n opacity: 0.55;\n }\n .cfi-ui-table__th[aria-sort=ascending] .cfi-ui-table__sort-icon,\n .cfi-ui-table__th[aria-sort=descending] .cfi-ui-table__sort-icon {\n opacity: 1;\n color: var(--cfi-ui-accent);\n }\n .cfi-ui-table__sort-icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n :where(.cfi-ui-table__td) {\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border-subtle);\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__td,\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n padding: 0.3125rem 0.625rem;\n }\n .cfi-ui-table__row[data-interactive] {\n cursor: pointer;\n }\n .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table__row[data-selected] .cfi-ui-table__td {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__body .cfi-ui-table__row:last-child .cfi-ui-table__td {\n border-bottom: 0;\n }\n .cfi-ui-table__th[data-numeric],\n .cfi-ui-table__td[data-numeric] {\n text-align: right;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-table__td[data-truncate] {\n max-width: 18rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-table__foot .cfi-ui-table__td {\n border-top: 1px solid var(--cfi-ui-border-strong);\n border-bottom: 0;\n background: var(--cfi-ui-surface-sunken);\n font-weight: var(--cfi-ui-weight-semibold);\n }\n .cfi-ui-table__empty {\n padding: var(--cfi-ui-space-xl) var(--cfi-ui-space-md);\n border-bottom: 0;\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-table__caption {\n padding: var(--cfi-ui-space-sm) 0;\n caption-side: bottom;\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n text-align: left;\n }\n}\n");
1635
+ styleInject("@layer components {\n :where(.cfi-ui-table-scroller) {\n width: 100%;\n overflow-x: auto;\n position: relative;\n }\n :where(.cfi-ui-table) {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n text-align: left;\n }\n :where(.cfi-ui-table__th) {\n height: 2.75rem;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border);\n background: transparent;\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n white-space: nowrap;\n text-align: left;\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n background: var(--cfi-ui-surface-sunken);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n color: var(--cfi-ui-content-muted);\n border-bottom-color: var(--cfi-ui-border-strong);\n }\n .cfi-ui-table[data-sticky] .cfi-ui-table__th {\n position: sticky;\n top: 0;\n z-index: var(--cfi-ui-z-raised, 10);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child,\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n position: sticky;\n left: 0;\n background: var(--cfi-ui-surface);\n box-shadow: 1px 0 0 0 var(--cfi-ui-border-subtle);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n z-index: 1;\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child {\n z-index: calc(var(--cfi-ui-z-raised, 10) + 1);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-selected] .cfi-ui-table__td:first-child {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__sort {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin: -0.125rem -0.25rem;\n padding: 0.125rem 0.25rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: none;\n color: inherit;\n font: inherit;\n cursor: pointer;\n }\n .cfi-ui-table__sort:hover {\n color: var(--cfi-ui-content);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-table__sort-icon {\n display: inline-flex;\n flex: none;\n opacity: 0.55;\n }\n .cfi-ui-table__th[aria-sort=ascending] .cfi-ui-table__sort-icon,\n .cfi-ui-table__th[aria-sort=descending] .cfi-ui-table__sort-icon {\n opacity: 1;\n color: var(--cfi-ui-accent);\n }\n .cfi-ui-table__sort-icon > svg {\n width: 0.75rem;\n height: 0.75rem;\n display: block;\n }\n :where(.cfi-ui-table__td) {\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--cfi-ui-border-subtle);\n vertical-align: middle;\n }\n .cfi-ui-table[data-density=compact] .cfi-ui-table__td,\n .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n padding: 0.3125rem 0.625rem;\n }\n .cfi-ui-table__row[data-interactive] {\n cursor: pointer;\n }\n .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-table__row[data-selected] .cfi-ui-table__td {\n background: var(--cfi-ui-surface-selected);\n }\n .cfi-ui-table__body .cfi-ui-table__row:last-child .cfi-ui-table__td {\n border-bottom: 0;\n }\n .cfi-ui-table__th[data-numeric],\n .cfi-ui-table__td[data-numeric] {\n text-align: right;\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-table__td[data-truncate] {\n max-width: 18rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-table__td[data-mono] {\n font-family: var(--cfi-ui-font-mono);\n font-size: 0.9em;\n }\n .cfi-ui-table__foot .cfi-ui-table__td {\n border-top: 1px solid var(--cfi-ui-border-strong);\n border-bottom: 0;\n background: var(--cfi-ui-surface-sunken);\n font-weight: var(--cfi-ui-weight-semibold);\n }\n .cfi-ui-table__empty {\n padding: var(--cfi-ui-space-xl) var(--cfi-ui-space-md);\n border-bottom: 0;\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n .cfi-ui-table__caption {\n padding: var(--cfi-ui-space-sm) 0;\n caption-side: bottom;\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n text-align: left;\n }\n}\n");
1513
1636
 
1514
1637
  // src/Table.tsx
1515
- import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
1638
+ import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1516
1639
  var Table = forwardRef14(function Table2({ density = "comfortable", stickyHeader = false, stickyFirstColumn = false, className, ...rest }, ref) {
1517
- return /* @__PURE__ */ jsx19(
1640
+ return /* @__PURE__ */ jsx21(
1518
1641
  "table",
1519
1642
  {
1520
1643
  ref,
@@ -1527,20 +1650,20 @@ var Table = forwardRef14(function Table2({ density = "comfortable", stickyHeader
1527
1650
  );
1528
1651
  });
1529
1652
  function TableScroller({ className, ...rest }) {
1530
- return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-table-scroller", className), ...rest });
1653
+ return /* @__PURE__ */ jsx21("div", { className: cn("cfi-ui", "cfi-ui-table-scroller", className), ...rest });
1531
1654
  }
1532
1655
  function TableHeader({ className, ...rest }) {
1533
- return /* @__PURE__ */ jsx19("thead", { className: cn("cfi-ui-table__head", className), ...rest });
1656
+ return /* @__PURE__ */ jsx21("thead", { className: cn("cfi-ui-table__head", className), ...rest });
1534
1657
  }
1535
1658
  function TableBody({ className, ...rest }) {
1536
- return /* @__PURE__ */ jsx19("tbody", { className: cn("cfi-ui-table__body", className), ...rest });
1659
+ return /* @__PURE__ */ jsx21("tbody", { className: cn("cfi-ui-table__body", className), ...rest });
1537
1660
  }
1538
1661
  function TableFooter({ className, ...rest }) {
1539
- return /* @__PURE__ */ jsx19("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
1662
+ return /* @__PURE__ */ jsx21("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
1540
1663
  }
1541
1664
  var TableFoot = TableFooter;
1542
1665
  function TableRow({ selected, interactive, className, ...rest }) {
1543
- return /* @__PURE__ */ jsx19(
1666
+ return /* @__PURE__ */ jsx21(
1544
1667
  "tr",
1545
1668
  {
1546
1669
  "data-selected": selected || void 0,
@@ -1563,7 +1686,7 @@ function TableHead({
1563
1686
  ...rest
1564
1687
  }) {
1565
1688
  const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
1566
- return /* @__PURE__ */ jsx19(
1689
+ return /* @__PURE__ */ jsx21(
1567
1690
  "th",
1568
1691
  {
1569
1692
  scope: "col",
@@ -1572,29 +1695,30 @@ function TableHead({
1572
1695
  style: { width, ...style },
1573
1696
  className: cn("cfi-ui-table__th", className),
1574
1697
  ...rest,
1575
- children: sortable ? /* @__PURE__ */ jsxs19("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
1576
- /* @__PURE__ */ jsx19("span", { children }),
1577
- /* @__PURE__ */ jsx19("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx19(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx19(ArrowDown, {}) : /* @__PURE__ */ jsx19(ChevronsUpDown, {}) })
1698
+ children: sortable ? /* @__PURE__ */ jsxs21("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
1699
+ /* @__PURE__ */ jsx21("span", { children }),
1700
+ /* @__PURE__ */ jsx21("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx21(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx21(ArrowDown, {}) : /* @__PURE__ */ jsx21(ChevronsUpDown, {}) })
1578
1701
  ] }) : children
1579
1702
  }
1580
1703
  );
1581
1704
  }
1582
- function TableCell({ numeric, truncate, className, ...rest }) {
1583
- return /* @__PURE__ */ jsx19(
1705
+ function TableCell({ numeric, truncate, mono, className, ...rest }) {
1706
+ return /* @__PURE__ */ jsx21(
1584
1707
  "td",
1585
1708
  {
1586
1709
  "data-numeric": numeric || void 0,
1587
1710
  "data-truncate": truncate || void 0,
1711
+ "data-mono": mono || void 0,
1588
1712
  className: cn("cfi-ui-table__td", className),
1589
1713
  ...rest
1590
1714
  }
1591
1715
  );
1592
1716
  }
1593
1717
  function TableEmpty({ colSpan, children }) {
1594
- return /* @__PURE__ */ jsx19("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx19("td", { colSpan, className: "cfi-ui-table__empty", children }) });
1718
+ return /* @__PURE__ */ jsx21("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx21("td", { colSpan, className: "cfi-ui-table__empty", children }) });
1595
1719
  }
1596
1720
  function TableCaption({ className, ...rest }) {
1597
- return /* @__PURE__ */ jsx19("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
1721
+ return /* @__PURE__ */ jsx21("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
1598
1722
  }
1599
1723
 
1600
1724
  // src/Tabs.tsx
@@ -1605,12 +1729,12 @@ import * as RadixTabs from "@radix-ui/react-tabs";
1605
1729
  styleInject("@layer components {\n .cfi-ui-tabs {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n :where(.cfi-ui-tabs__list) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n overflow-x: auto;\n scrollbar-width: none;\n }\n .cfi-ui-tabs__list::-webkit-scrollbar {\n display: none;\n }\n :where(.cfi-ui-tabs__trigger) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n flex: none;\n border: 0;\n background: none;\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n cursor: pointer;\n transition:\n color var(--cfi-ui-transition-fast),\n background-color var(--cfi-ui-transition-fast),\n border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-tabs__trigger:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-tabs__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-tabs__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-tabs__list[data-variant=underline] {\n gap: var(--cfi-ui-space-md);\n border-bottom: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger {\n padding: 0.5rem 0.125rem;\n border-bottom: 2px solid transparent;\n margin-bottom: -1px;\n }\n .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=underline] .cfi-ui-tabs__trigger[data-state=active] {\n color: var(--cfi-ui-content);\n border-bottom-color: var(--cfi-ui-accent);\n }\n .cfi-ui-tabs__list[data-variant=pill] {\n gap: 0;\n padding: 0.1875rem;\n background: var(--cfi-ui-surface-muted);\n border: 0;\n border-radius: 14px;\n align-self: flex-start;\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger {\n padding: 0.25rem 0.75rem;\n border-radius: 14px;\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger:hover:not(:disabled) {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-tabs__list[data-variant=pill] .cfi-ui-tabs__trigger[data-state=active] {\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n box-shadow: var(--cfi-ui-shadow-xs);\n }\n :where(.cfi-ui-tabs__content) {\n min-width: 0;\n padding-top: var(--cfi-ui-space-md);\n }\n .cfi-ui-tabs__content:focus-visible {\n outline: none;\n }\n}\n");
1606
1730
 
1607
1731
  // src/Tabs.tsx
1608
- import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
1732
+ import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
1609
1733
  var Tabs = RadixTabs.Root;
1610
1734
  var TabsRoot = RadixTabs.Root;
1611
1735
  var TabsList = forwardRef15(
1612
1736
  function TabsList2({ variant = "pill", className, ...rest }, ref) {
1613
- return /* @__PURE__ */ jsx20(
1737
+ return /* @__PURE__ */ jsx22(
1614
1738
  RadixTabs.List,
1615
1739
  {
1616
1740
  ref,
@@ -1623,18 +1747,18 @@ var TabsList = forwardRef15(
1623
1747
  );
1624
1748
  var TabsTrigger = forwardRef15(
1625
1749
  function TabsTrigger2({ icon, count, className, children, ...rest }, ref) {
1626
- return /* @__PURE__ */ jsxs20(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
1627
- icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-tabs__icon", children: icon }),
1628
- /* @__PURE__ */ jsx20("span", { children }),
1629
- count !== void 0 && /* @__PURE__ */ jsx20(CountBadge, { count, size: "sm" })
1750
+ return /* @__PURE__ */ jsxs22(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
1751
+ icon && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-tabs__icon", children: icon }),
1752
+ /* @__PURE__ */ jsx22("span", { children }),
1753
+ count !== void 0 && /* @__PURE__ */ jsx22(CountBadge, { count, size: "sm" })
1630
1754
  ] });
1631
1755
  }
1632
1756
  );
1633
1757
  var TabsContent = forwardRef15(function TabsContent2({ className, ...rest }, ref) {
1634
- return /* @__PURE__ */ jsx20(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
1758
+ return /* @__PURE__ */ jsx22(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
1635
1759
  });
1636
1760
  function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
1637
- return /* @__PURE__ */ jsxs20(
1761
+ return /* @__PURE__ */ jsxs22(
1638
1762
  Tabs,
1639
1763
  {
1640
1764
  value,
@@ -1642,7 +1766,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1642
1766
  defaultValue: defaultValue ?? tabs[0]?.value,
1643
1767
  className: cn("cfi-ui", "cfi-ui-tabs", className),
1644
1768
  children: [
1645
- /* @__PURE__ */ jsx20(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx20(
1769
+ /* @__PURE__ */ jsx22(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx22(
1646
1770
  TabsTrigger,
1647
1771
  {
1648
1772
  value: tab.value,
@@ -1653,7 +1777,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1653
1777
  },
1654
1778
  tab.value
1655
1779
  )) }),
1656
- tabs.map((tab) => /* @__PURE__ */ jsx20(TabsContent, { value: tab.value, children: tab.content }, tab.value))
1780
+ tabs.map((tab) => /* @__PURE__ */ jsx22(TabsContent, { value: tab.value, children: tab.content }, tab.value))
1657
1781
  ]
1658
1782
  }
1659
1783
  );
@@ -1666,12 +1790,12 @@ import { forwardRef as forwardRef16 } from "react";
1666
1790
  styleInject('@layer components {\n :where(.cfi-ui-separator) {\n flex: none;\n background: var(--cfi-ui-border);\n }\n .cfi-ui-separator[data-orientation=horizontal] {\n width: 100%;\n height: 1px;\n }\n .cfi-ui-separator[data-orientation=vertical] {\n width: 1px;\n align-self: stretch;\n min-height: 1rem;\n }\n .cfi-ui-separator-labeled {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n color: var(--cfi-ui-content-muted);\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-separator-labeled::before,\n .cfi-ui-separator-labeled::after {\n content: "";\n flex: 1 1 auto;\n height: 1px;\n background: var(--cfi-ui-border);\n }\n .cfi-ui-separator-labeled__label {\n flex: none;\n white-space: nowrap;\n }\n .cfi-ui-progress-wrap {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n }\n .cfi-ui-progress {\n position: relative;\n flex: 1 1 auto;\n height: 0.5rem;\n overflow: hidden;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-surface-active);\n }\n .cfi-ui-progress[data-size=sm] {\n height: 0.25rem;\n }\n .cfi-ui-progress__fill {\n height: 100%;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-accent);\n transition: width var(--cfi-ui-transition-base);\n }\n .cfi-ui-progress[data-tone=success] .cfi-ui-progress__fill {\n background: var(--cfi-ui-success);\n }\n .cfi-ui-progress[data-tone=warning] .cfi-ui-progress__fill {\n background: var(--cfi-ui-warning);\n }\n .cfi-ui-progress[data-tone=error] .cfi-ui-progress__fill {\n background: var(--cfi-ui-error);\n }\n .cfi-ui-progress[data-indeterminate] .cfi-ui-progress__fill {\n width: 35%;\n animation: cfi-ui-progress-slide 1.2s ease-in-out infinite;\n transition: none;\n }\n @keyframes cfi-ui-progress-slide {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(300%);\n }\n }\n .cfi-ui-progress__value {\n flex: none;\n min-width: 3ch;\n font-size: var(--cfi-ui-text-xs);\n font-variant-numeric: tabular-nums;\n color: var(--cfi-ui-content-muted);\n text-align: right;\n }\n :where(.cfi-ui-skeleton) {\n background: var(--cfi-ui-surface-active);\n border-radius: var(--cfi-ui-radius-sm);\n animation: cfi-ui-pulse 1.6s ease-in-out infinite;\n }\n .cfi-ui-skeleton[data-shape=text] {\n height: 0.875em;\n margin-block: 0.25em;\n border-radius: var(--cfi-ui-radius-sm);\n }\n .cfi-ui-skeleton[data-shape=circle] {\n border-radius: var(--cfi-ui-radius-full);\n aspect-ratio: 1;\n }\n .cfi-ui-skeleton-stack {\n display: grid;\n gap: 0;\n }\n :where(.cfi-ui-avatar) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n overflow: hidden;\n width: 2rem;\n height: 2rem;\n border-radius: var(--cfi-ui-radius-full);\n background: var(--cfi-ui-surface-active);\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: 0.02em;\n user-select: none;\n }\n .cfi-ui-avatar[data-size=xs] {\n width: 1.25rem;\n height: 1.25rem;\n font-size: 0.5625rem;\n }\n .cfi-ui-avatar[data-size=sm] {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 0.625rem;\n }\n .cfi-ui-avatar[data-size=lg] {\n width: 2.5rem;\n height: 2.5rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n .cfi-ui-avatar-group {\n display: inline-flex;\n align-items: center;\n }\n .cfi-ui-avatar-group > .cfi-ui-avatar {\n box-shadow: 0 0 0 2px var(--cfi-ui-surface);\n }\n .cfi-ui-avatar-group > .cfi-ui-avatar + .cfi-ui-avatar {\n margin-left: -0.5rem;\n }\n .cfi-ui-avatar--overflow {\n background: var(--cfi-ui-surface-sunken);\n color: var(--cfi-ui-content-muted);\n font-variant-numeric: tabular-nums;\n }\n :where(.cfi-ui-scroll-area) {\n min-width: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--cfi-ui-border-strong) transparent;\n overscroll-behavior: contain;\n }\n .cfi-ui-scroll-area[data-orientation=vertical] {\n overflow-y: auto;\n overflow-x: hidden;\n }\n .cfi-ui-scroll-area[data-orientation=horizontal] {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .cfi-ui-scroll-area[data-orientation=both] {\n overflow: auto;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar-track {\n background: transparent;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar-thumb {\n background: var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-full);\n border: 3px solid transparent;\n background-clip: content-box;\n }\n .cfi-ui-scroll-area::-webkit-scrollbar-thumb:hover {\n background: var(--cfi-ui-content-subtle);\n background-clip: content-box;\n }\n}\n');
1667
1791
 
1668
1792
  // src/Display.tsx
1669
- import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1793
+ import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
1670
1794
  function Separator3({ orientation = "horizontal", label, className, ...rest }) {
1671
1795
  if (label) {
1672
- return /* @__PURE__ */ jsx21("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx21("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
1796
+ return /* @__PURE__ */ jsx23("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx23("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
1673
1797
  }
1674
- return /* @__PURE__ */ jsx21(
1798
+ return /* @__PURE__ */ jsx23(
1675
1799
  "div",
1676
1800
  {
1677
1801
  role: "separator",
@@ -1692,8 +1816,8 @@ function Progress({
1692
1816
  ...rest
1693
1817
  }) {
1694
1818
  const clamped = value == null ? null : Math.max(0, Math.min(100, value));
1695
- return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1696
- /* @__PURE__ */ jsx21(
1819
+ return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1820
+ /* @__PURE__ */ jsx23(
1697
1821
  "div",
1698
1822
  {
1699
1823
  role: "progressbar",
@@ -1705,7 +1829,7 @@ function Progress({
1705
1829
  "data-size": size,
1706
1830
  "data-indeterminate": clamped == null || void 0,
1707
1831
  className: "cfi-ui-progress",
1708
- children: /* @__PURE__ */ jsx21(
1832
+ children: /* @__PURE__ */ jsx23(
1709
1833
  "div",
1710
1834
  {
1711
1835
  className: "cfi-ui-progress__fill",
@@ -1714,7 +1838,7 @@ function Progress({
1714
1838
  )
1715
1839
  }
1716
1840
  ),
1717
- showValue && clamped != null && /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-progress__value", children: [
1841
+ showValue && clamped != null && /* @__PURE__ */ jsxs23("span", { className: "cfi-ui-progress__value", children: [
1718
1842
  Math.round(clamped),
1719
1843
  "%"
1720
1844
  ] })
@@ -1722,7 +1846,7 @@ function Progress({
1722
1846
  }
1723
1847
  function Skeleton({ shape = "block", width, height, lines = 1, className, style, ...rest }) {
1724
1848
  if (shape === "text" && lines > 1) {
1725
- return /* @__PURE__ */ jsx21("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx21(
1849
+ return /* @__PURE__ */ jsx23("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx23(
1726
1850
  "div",
1727
1851
  {
1728
1852
  "data-shape": "text",
@@ -1732,7 +1856,7 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1732
1856
  i
1733
1857
  )) });
1734
1858
  }
1735
- return /* @__PURE__ */ jsx21(
1859
+ return /* @__PURE__ */ jsx23(
1736
1860
  "div",
1737
1861
  {
1738
1862
  "aria-hidden": "true",
@@ -1746,18 +1870,18 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1746
1870
  var Avatar = forwardRef16(function Avatar2({ name, src, size = "md", className, ...rest }, ref) {
1747
1871
  const parts = name.trim().split(/\s+/).filter(Boolean);
1748
1872
  const initials = parts.length === 0 ? "?" : parts.length === 1 ? parts[0].slice(0, 2).toUpperCase() : `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
1749
- return /* @__PURE__ */ jsxs21("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
1750
- src ? /* @__PURE__ */ jsx21("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", children: initials }),
1751
- !src && /* @__PURE__ */ jsx21("span", { className: "cfi-ui-sr-only", children: name })
1873
+ return /* @__PURE__ */ jsxs23("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
1874
+ src ? /* @__PURE__ */ jsx23("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", children: initials }),
1875
+ !src && /* @__PURE__ */ jsx23("span", { className: "cfi-ui-sr-only", children: name })
1752
1876
  ] });
1753
1877
  });
1754
1878
  function AvatarGroup({ max, className, children, ...rest }) {
1755
1879
  const items = Array.isArray(children) ? children : [children];
1756
1880
  const shown = max ? items.slice(0, max) : items;
1757
1881
  const hidden = items.length - shown.length;
1758
- return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-avatar-group", className), ...rest, children: [
1882
+ return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-avatar-group", className), ...rest, children: [
1759
1883
  shown,
1760
- hidden > 0 && /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
1884
+ hidden > 0 && /* @__PURE__ */ jsxs23("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
1761
1885
  "+",
1762
1886
  hidden
1763
1887
  ] })
@@ -1770,7 +1894,7 @@ function ScrollArea({
1770
1894
  style,
1771
1895
  ...rest
1772
1896
  }) {
1773
- return /* @__PURE__ */ jsx21(
1897
+ return /* @__PURE__ */ jsx23(
1774
1898
  "div",
1775
1899
  {
1776
1900
  "data-orientation": orientation,
@@ -1791,20 +1915,20 @@ import { ChevronDown as ChevronDown4 } from "lucide-react";
1791
1915
  styleInject("@layer components {\n :where(.cfi-ui-accordion) {\n display: flex;\n flex-direction: column;\n min-width: 0;\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-lg);\n background: var(--cfi-ui-surface);\n overflow: hidden;\n }\n .cfi-ui-accordion__item + .cfi-ui-accordion__item {\n border-top: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-accordion__header {\n margin: 0;\n }\n .cfi-ui-accordion__trigger {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n padding: 0.625rem var(--cfi-ui-space-md);\n border: 0;\n background: none;\n color: var(--cfi-ui-content);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n font-weight: var(--cfi-ui-weight-medium);\n text-align: left;\n cursor: pointer;\n transition: background-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-accordion__trigger:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-accordion__trigger:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-accordion__chevron {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n transition: transform var(--cfi-ui-transition-fast);\n }\n .cfi-ui-accordion__trigger[data-state=open] .cfi-ui-accordion__chevron {\n transform: rotate(180deg);\n }\n .cfi-ui-accordion__chevron > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-accordion__label {\n flex: 1 1 auto;\n min-width: 0;\n }\n .cfi-ui-accordion__meta {\n flex: none;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-normal);\n font-variant-numeric: tabular-nums;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-accordion__content {\n overflow: hidden;\n }\n .cfi-ui-accordion__content[data-state=open] {\n animation: cfi-ui-accordion-open var(--cfi-ui-transition-base);\n }\n .cfi-ui-accordion__content[data-state=closed] {\n animation: cfi-ui-accordion-close var(--cfi-ui-transition-base);\n }\n @keyframes cfi-ui-accordion-open {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n @keyframes cfi-ui-accordion-close {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n .cfi-ui-accordion__inner {\n padding: 0 var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n }\n :where(.cfi-ui-toggle-group) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-3xs);\n padding: var(--cfi-ui-space-3xs);\n background: var(--cfi-ui-surface-sunken);\n border: 1px solid var(--cfi-ui-border);\n border-radius: var(--cfi-ui-radius-md);\n }\n :where(.cfi-ui-toggle-group__item) {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n height: 1.625rem;\n padding-inline: 0.5rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: transparent;\n color: var(--cfi-ui-content-muted);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-medium);\n white-space: nowrap;\n cursor: pointer;\n transition: background-color var(--cfi-ui-transition-fast), color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-toggle-group[data-size=md] .cfi-ui-toggle-group__item {\n height: 1.875rem;\n padding-inline: 0.625rem;\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-toggle-group__item:hover:not(:disabled) {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-toggle-group__item[data-state=on] {\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n box-shadow: var(--cfi-ui-shadow-xs);\n }\n .cfi-ui-toggle-group__item:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-toggle-group__icon {\n display: inline-flex;\n flex: none;\n }\n .cfi-ui-toggle-group__icon > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n}\n");
1792
1916
 
1793
1917
  // src/Accordion.tsx
1794
- import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
1918
+ import { jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
1795
1919
  var AccordionRoot = RadixAccordion.Root;
1796
1920
  var AccordionItem = forwardRef17(function AccordionItem2({ className, ...rest }, ref) {
1797
- return /* @__PURE__ */ jsx22(RadixAccordion.Item, { ref, className: cn("cfi-ui-accordion__item", className), ...rest });
1921
+ return /* @__PURE__ */ jsx24(RadixAccordion.Item, { ref, className: cn("cfi-ui-accordion__item", className), ...rest });
1798
1922
  });
1799
1923
  var AccordionTrigger = forwardRef17(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
1800
- return /* @__PURE__ */ jsx22(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs22(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
1801
- /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(ChevronDown4, {}) }),
1802
- /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__label", children }),
1803
- meta && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__meta", children: meta })
1924
+ return /* @__PURE__ */ jsx24(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs24(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
1925
+ /* @__PURE__ */ jsx24("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx24(ChevronDown4, {}) }),
1926
+ /* @__PURE__ */ jsx24("span", { className: "cfi-ui-accordion__label", children }),
1927
+ meta && /* @__PURE__ */ jsx24("span", { className: "cfi-ui-accordion__meta", children: meta })
1804
1928
  ] }) });
1805
1929
  });
1806
1930
  var AccordionContent = forwardRef17(function AccordionContent2({ className, children, ...rest }, ref) {
1807
- return /* @__PURE__ */ jsx22(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx22("div", { className: "cfi-ui-accordion__inner", children }) });
1931
+ return /* @__PURE__ */ jsx24(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx24("div", { className: "cfi-ui-accordion__inner", children }) });
1808
1932
  });
1809
1933
  function Accordion({
1810
1934
  sections,
@@ -1821,9 +1945,9 @@ function Accordion({
1821
1945
  onValueChange,
1822
1946
  className: cn("cfi-ui", "cfi-ui-accordion", className)
1823
1947
  };
1824
- return /* @__PURE__ */ jsx22(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs22(AccordionItem, { value: section.value, disabled: section.disabled, children: [
1825
- /* @__PURE__ */ jsx22(AccordionTrigger, { meta: section.meta, children: section.label }),
1826
- /* @__PURE__ */ jsx22(AccordionContent, { children: section.content })
1948
+ return /* @__PURE__ */ jsx24(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs24(AccordionItem, { value: section.value, disabled: section.disabled, children: [
1949
+ /* @__PURE__ */ jsx24(AccordionTrigger, { meta: section.meta, children: section.label }),
1950
+ /* @__PURE__ */ jsx24(AccordionContent, { children: section.content })
1827
1951
  ] }, section.value)) });
1828
1952
  }
1829
1953
  function ToggleGroup({
@@ -1835,7 +1959,7 @@ function ToggleGroup({
1835
1959
  className,
1836
1960
  ...aria
1837
1961
  }) {
1838
- return /* @__PURE__ */ jsx22(
1962
+ return /* @__PURE__ */ jsx24(
1839
1963
  RadixToggleGroup.Root,
1840
1964
  {
1841
1965
  type: "single",
@@ -1847,7 +1971,7 @@ function ToggleGroup({
1847
1971
  "data-size": size,
1848
1972
  className: cn("cfi-ui", "cfi-ui-toggle-group", className),
1849
1973
  ...aria,
1850
- children: options.map((option) => /* @__PURE__ */ jsxs22(
1974
+ children: options.map((option) => /* @__PURE__ */ jsxs24(
1851
1975
  RadixToggleGroup.Item,
1852
1976
  {
1853
1977
  value: option.value,
@@ -1856,7 +1980,7 @@ function ToggleGroup({
1856
1980
  title: option.ariaLabel,
1857
1981
  className: "cfi-ui-toggle-group__item",
1858
1982
  children: [
1859
- option.icon && /* @__PURE__ */ jsx22("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
1983
+ option.icon && /* @__PURE__ */ jsx24("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
1860
1984
  option.label
1861
1985
  ]
1862
1986
  },
@@ -1867,15 +1991,15 @@ function ToggleGroup({
1867
1991
  }
1868
1992
 
1869
1993
  // src/PageState.tsx
1870
- import { AlertCircle, Loader2 } from "lucide-react";
1994
+ import { AlertCircle as AlertCircle2, Loader2 } from "lucide-react";
1871
1995
 
1872
1996
  // src/PageState.css
1873
1997
  styleInject("@layer components {\n :where(.cfi-ui-pagestate) {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--cfi-ui-space-sm);\n padding-block: var(--cfi-ui-space-2xl, 4rem);\n text-align: center;\n color: var(--cfi-ui-content);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n }\n .cfi-ui-pagestate[data-size=inline] {\n padding-block: var(--cfi-ui-space-md);\n gap: var(--cfi-ui-space-xs);\n }\n .cfi-ui-pagestate:has(> .cfi-ui-pagestate__spinner) {\n flex-direction: row;\n }\n .cfi-ui-pagestate__spinner {\n width: 1rem;\n height: 1rem;\n flex: none;\n color: var(--cfi-ui-content-muted);\n animation: cfi-ui-pagestate-spin 1s linear infinite;\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ui-pagestate__spinner {\n animation-duration: 2.4s;\n }\n }\n .cfi-ui-pagestate__icon {\n display: inline-flex;\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-pagestate__icon > svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n .cfi-ui-pagestate__icon[data-tone=error] {\n width: 1.5rem;\n height: 1.5rem;\n color: var(--cfi-ui-error-strong);\n }\n .cfi-ui-pagestate__title {\n margin: 0;\n font-weight: var(--cfi-ui-weight-medium);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-pagestate__muted {\n margin: 0;\n max-width: 34rem;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-pagestate__title + .cfi-ui-pagestate__muted {\n margin-top: var(--cfi-ui-space-3xs);\n }\n .cfi-ui-pagestate__action {\n margin-top: var(--cfi-ui-space-xs);\n }\n .cfi-ui-pagestate__retry {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: var(--cfi-ui-space-sm);\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n line-height: normal;\n cursor: pointer;\n }\n .cfi-ui-pagestate__retry:hover {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-pagestate__retry:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n}\n@keyframes cfi-ui-pagestate-spin {\n to {\n transform: rotate(360deg);\n }\n}\n");
1874
1998
 
1875
1999
  // src/PageState.tsx
1876
- import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
2000
+ import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
1877
2001
  function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1878
- return /* @__PURE__ */ jsxs23(
2002
+ return /* @__PURE__ */ jsxs25(
1879
2003
  "div",
1880
2004
  {
1881
2005
  className: cn("cfi-ui", "cfi-ui-pagestate", className),
@@ -1883,8 +2007,8 @@ function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1883
2007
  role: "status",
1884
2008
  "aria-live": "polite",
1885
2009
  children: [
1886
- /* @__PURE__ */ jsx23(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
1887
- /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagestate__muted", children: label })
2010
+ /* @__PURE__ */ jsx25(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
2011
+ /* @__PURE__ */ jsx25("span", { className: "cfi-ui-pagestate__muted", children: label })
1888
2012
  ]
1889
2013
  }
1890
2014
  );
@@ -1898,13 +2022,13 @@ function ErrorState({
1898
2022
  className
1899
2023
  }) {
1900
2024
  const message = error instanceof Error ? error.message : error == null ? "" : String(error);
1901
- return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
1902
- /* @__PURE__ */ jsx23(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
1903
- /* @__PURE__ */ jsxs23("div", { children: [
1904
- /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
1905
- message && /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__muted", children: message })
2025
+ return /* @__PURE__ */ jsxs25("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
2026
+ /* @__PURE__ */ jsx25(AlertCircle2, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
2027
+ /* @__PURE__ */ jsxs25("div", { children: [
2028
+ /* @__PURE__ */ jsx25("p", { className: "cfi-ui-pagestate__title", children: title }),
2029
+ message && /* @__PURE__ */ jsx25("p", { className: "cfi-ui-pagestate__muted", children: message })
1906
2030
  ] }),
1907
- onRetry && /* @__PURE__ */ jsx23("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
2031
+ onRetry && /* @__PURE__ */ jsx25("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
1908
2032
  ] });
1909
2033
  }
1910
2034
  function EmptyState({
@@ -1915,17 +2039,17 @@ function EmptyState({
1915
2039
  size = "block",
1916
2040
  className
1917
2041
  }) {
1918
- return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
1919
- icon && /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagestate__icon", children: icon }),
1920
- /* @__PURE__ */ jsxs23("div", { children: [
1921
- /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
1922
- description && /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__muted", children: description })
2042
+ return /* @__PURE__ */ jsxs25("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
2043
+ icon && /* @__PURE__ */ jsx25("span", { className: "cfi-ui-pagestate__icon", children: icon }),
2044
+ /* @__PURE__ */ jsxs25("div", { children: [
2045
+ /* @__PURE__ */ jsx25("p", { className: "cfi-ui-pagestate__title", children: title }),
2046
+ description && /* @__PURE__ */ jsx25("p", { className: "cfi-ui-pagestate__muted", children: description })
1923
2047
  ] }),
1924
- action && /* @__PURE__ */ jsx23("div", { className: "cfi-ui-pagestate__action", children: action })
2048
+ action && /* @__PURE__ */ jsx25("div", { className: "cfi-ui-pagestate__action", children: action })
1925
2049
  ] });
1926
2050
  }
1927
2051
  function ComingSoon({ title, detail, className }) {
1928
- return /* @__PURE__ */ jsx23(
2052
+ return /* @__PURE__ */ jsx25(
1929
2053
  EmptyState,
1930
2054
  {
1931
2055
  title,
@@ -1976,13 +2100,13 @@ function useSortState(initialKey, initialDirection = "asc") {
1976
2100
 
1977
2101
  // src/SearchInput.tsx
1978
2102
  import { forwardRef as forwardRef18, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
1979
- import { Search as Search2, X as X5 } from "lucide-react";
2103
+ import { Search as Search2, X as X6 } from "lucide-react";
1980
2104
 
1981
2105
  // src/SearchInput.css
1982
2106
  styleInject("@layer components {\n .cfi-ui-search__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n background: none;\n border: none;\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n border-radius: var(--cfi-ui-radius-sm);\n }\n .cfi-ui-search__clear > svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n .cfi-ui-search__clear:hover {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-search__clear:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: 1px;\n }\n}\n");
1983
2107
 
1984
2108
  // src/SearchInput.tsx
1985
- import { jsx as jsx24 } from "react/jsx-runtime";
2109
+ import { jsx as jsx26 } from "react/jsx-runtime";
1986
2110
  var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
1987
2111
  const [local, setLocal] = useState6(value);
1988
2112
  const timer = useRef3(void 0);
@@ -2001,7 +2125,7 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
2001
2125
  setLocal("");
2002
2126
  latest.current("");
2003
2127
  };
2004
- return /* @__PURE__ */ jsx24(
2128
+ return /* @__PURE__ */ jsx26(
2005
2129
  Input,
2006
2130
  {
2007
2131
  ...rest,
@@ -2010,8 +2134,8 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
2010
2134
  value: local,
2011
2135
  placeholder,
2012
2136
  onChange: (e) => push(e.target.value),
2013
- prefix: /* @__PURE__ */ jsx24(Search2, { "aria-hidden": "true" }),
2014
- suffix: local ? /* @__PURE__ */ jsx24("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx24(X5, { "aria-hidden": "true" }) }) : void 0
2137
+ prefix: /* @__PURE__ */ jsx26(Search2, { "aria-hidden": "true" }),
2138
+ suffix: local ? /* @__PURE__ */ jsx26("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx26(X6, { "aria-hidden": "true" }) }) : void 0
2015
2139
  }
2016
2140
  );
2017
2141
  });
@@ -2023,7 +2147,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
2023
2147
  styleInject("@layer components {\n :where(.cfi-ui-pagination) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-ui-space-md);\n padding-block: var(--cfi-ui-space-sm);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-pagination__controls {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin-left: auto;\n }\n .cfi-ui-pagination__page {\n font-variant-numeric: tabular-nums;\n color: var(--cfi-ui-content);\n }\n .cfi-ui-pagination__range {\n font-variant-numeric: tabular-nums;\n }\n .cfi-ui-pagination__btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--cfi-ui-control-height-sm);\n height: var(--cfi-ui-control-height-sm);\n padding: 0;\n background: var(--cfi-ui-surface);\n color: var(--cfi-ui-content);\n border: 1px solid var(--cfi-ui-border-strong);\n border-radius: var(--cfi-ui-radius-md);\n cursor: pointer;\n }\n .cfi-ui-pagination__btn > svg {\n width: 1rem;\n height: 1rem;\n }\n .cfi-ui-pagination__btn:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n }\n .cfi-ui-pagination__btn:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: default;\n }\n .cfi-ui-pagination__btn:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n}\n");
2024
2148
 
2025
2149
  // src/Pagination.tsx
2026
- import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
2150
+ import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
2027
2151
  function Pagination({
2028
2152
  page,
2029
2153
  pageSize,
@@ -2039,12 +2163,12 @@ function Pagination({
2039
2163
  const from = (current - 1) * pageSize + 1;
2040
2164
  const to = Math.min(current * pageSize, totalItems);
2041
2165
  const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
2042
- return /* @__PURE__ */ jsxs24("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
2166
+ return /* @__PURE__ */ jsxs26("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
2043
2167
  showRange && // aria-live so a screen-reader user hears where they landed; paging
2044
2168
  // otherwise moves focus nowhere and announces nothing.
2045
- /* @__PURE__ */ jsx25("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
2046
- /* @__PURE__ */ jsxs24("div", { className: "cfi-ui-pagination__controls", children: [
2047
- /* @__PURE__ */ jsx25(
2169
+ /* @__PURE__ */ jsx27("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
2170
+ /* @__PURE__ */ jsxs26("div", { className: "cfi-ui-pagination__controls", children: [
2171
+ /* @__PURE__ */ jsx27(
2048
2172
  "button",
2049
2173
  {
2050
2174
  type: "button",
@@ -2052,15 +2176,15 @@ function Pagination({
2052
2176
  onClick: () => onPageChange(current - 1),
2053
2177
  disabled: current <= 1,
2054
2178
  "aria-label": labels?.previous ?? "Previous page",
2055
- children: /* @__PURE__ */ jsx25(ChevronLeft, { "aria-hidden": "true" })
2179
+ children: /* @__PURE__ */ jsx27(ChevronLeft, { "aria-hidden": "true" })
2056
2180
  }
2057
2181
  ),
2058
- /* @__PURE__ */ jsxs24("span", { className: "cfi-ui-pagination__page", children: [
2182
+ /* @__PURE__ */ jsxs26("span", { className: "cfi-ui-pagination__page", children: [
2059
2183
  current,
2060
2184
  " / ",
2061
2185
  pageCount
2062
2186
  ] }),
2063
- /* @__PURE__ */ jsx25(
2187
+ /* @__PURE__ */ jsx27(
2064
2188
  "button",
2065
2189
  {
2066
2190
  type: "button",
@@ -2068,7 +2192,7 @@ function Pagination({
2068
2192
  onClick: () => onPageChange(current + 1),
2069
2193
  disabled: current >= pageCount,
2070
2194
  "aria-label": labels?.next ?? "Next page",
2071
- children: /* @__PURE__ */ jsx25(ChevronRight, { "aria-hidden": "true" })
2195
+ children: /* @__PURE__ */ jsx27(ChevronRight, { "aria-hidden": "true" })
2072
2196
  }
2073
2197
  )
2074
2198
  ] })
@@ -2079,15 +2203,115 @@ function Pagination({
2079
2203
  styleInject("@layer components {\n :where(.cfi-ui-list-toolbar) {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--cfi-ui-space-sm);\n min-width: 0;\n }\n .cfi-ui-list-toolbar__search {\n flex: 1 1 14rem;\n min-width: 0;\n max-width: 22rem;\n }\n .cfi-ui-list-toolbar__filters {\n display: flex;\n align-items: center;\n min-width: 0;\n flex: 0 1 auto;\n }\n .cfi-ui-list-toolbar__actions {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin-inline-start: auto;\n }\n @media (max-width: 40rem) {\n .cfi-ui-list-toolbar__search,\n .cfi-ui-list-toolbar__filters,\n .cfi-ui-list-toolbar__actions {\n flex: 1 1 100%;\n max-width: none;\n margin-inline-start: 0;\n }\n }\n}\n");
2080
2204
 
2081
2205
  // src/ListToolbar.tsx
2082
- import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
2206
+ import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
2083
2207
  function ListToolbar({ search, filters, actions, className }) {
2084
- return /* @__PURE__ */ jsxs25("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
2085
- search && /* @__PURE__ */ jsx26("div", { className: "cfi-ui-list-toolbar__search", children: search }),
2086
- filters && /* @__PURE__ */ jsx26("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
2087
- actions && /* @__PURE__ */ jsx26("div", { className: "cfi-ui-list-toolbar__actions", children: actions })
2208
+ return /* @__PURE__ */ jsxs27("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
2209
+ search && /* @__PURE__ */ jsx28("div", { className: "cfi-ui-list-toolbar__search", children: search }),
2210
+ filters && /* @__PURE__ */ jsx28("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
2211
+ actions && /* @__PURE__ */ jsx28("div", { className: "cfi-ui-list-toolbar__actions", children: actions })
2088
2212
  ] });
2089
2213
  }
2090
2214
 
2215
+ // src/PageHeader.tsx
2216
+ import { ArrowLeft, ChevronRight as ChevronRight2 } from "lucide-react";
2217
+
2218
+ // src/PageHeader.css
2219
+ styleInject("@layer components {\n :where(.cfi-ui-page-header) {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-ui-space-xs);\n font-family: var(--cfi-ui-font);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-page-header[data-bordered] {\n padding-bottom: var(--cfi-ui-space-md);\n border-bottom: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-page-header__crumbs {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--cfi-ui-space-3xs);\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-page-header__crumb {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-3xs);\n }\n .cfi-ui-page-header__crumb-sep {\n width: 0.75rem;\n height: 0.75rem;\n flex: none;\n color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-page-header__crumb a {\n color: inherit;\n text-decoration: none;\n border-radius: var(--cfi-ui-radius-sm);\n transition: color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-page-header__crumb a:hover {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-page-header__crumb a:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n .cfi-ui-page-header__crumb[data-current] {\n color: var(--cfi-ui-content);\n }\n .cfi-ui-page-header__back {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n gap: var(--cfi-ui-space-2xs);\n margin-left: -0.5rem;\n padding: 0.25rem 0.5rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-md);\n background: none;\n font: inherit;\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n transition: color var(--cfi-ui-transition-fast), background var(--cfi-ui-transition-fast);\n }\n .cfi-ui-page-header__back:hover {\n background: var(--cfi-ui-surface-hover);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-page-header__back:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n .cfi-ui-page-header__back > svg {\n width: 1rem;\n height: 1rem;\n flex: none;\n }\n .cfi-ui-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--cfi-ui-space-md);\n }\n .cfi-ui-page-header__titles {\n min-width: 0;\n }\n .cfi-ui-page-header__title,\n h1.cfi-ui-page-header__title,\n h2.cfi-ui-page-header__title,\n h3.cfi-ui-page-header__title {\n margin: 0;\n font-size: var(--cfi-ui-text-xl);\n font-weight: var(--cfi-ui-weight-semibold);\n line-height: var(--cfi-ui-leading-tight);\n letter-spacing: -0.01em;\n color: var(--cfi-ui-content);\n }\n .cfi-ui-page-header__description {\n margin: 0.25rem 0 0;\n font-size: var(--cfi-ui-text-sm);\n line-height: var(--cfi-ui-leading-normal);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-page-header__actions {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n flex: none;\n }\n .cfi-ui-page-header__meta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--cfi-ui-space-xs);\n margin-top: var(--cfi-ui-space-3xs);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n }\n @media (max-width: 640px) {\n .cfi-ui-page-header__row {\n flex-direction: column;\n align-items: stretch;\n gap: var(--cfi-ui-space-sm);\n }\n .cfi-ui-page-header__actions {\n flex-wrap: wrap;\n }\n }\n}\n");
2220
+
2221
+ // src/PageHeader.tsx
2222
+ import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
2223
+ function PageHeader({
2224
+ title,
2225
+ description,
2226
+ actions,
2227
+ breadcrumbs,
2228
+ onBack,
2229
+ backLabel = "Back",
2230
+ level = 1,
2231
+ children,
2232
+ bordered = false,
2233
+ className
2234
+ }) {
2235
+ const Heading = `h${level}`;
2236
+ return /* @__PURE__ */ jsxs28(
2237
+ "div",
2238
+ {
2239
+ className: cn("cfi-ui", "cfi-ui-page-header", className),
2240
+ "data-bordered": bordered ? "" : void 0,
2241
+ children: [
2242
+ breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx29("nav", { className: "cfi-ui-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => {
2243
+ const last = i === breadcrumbs.length - 1;
2244
+ const label = crumb.render ? crumb.render(crumb.label) : crumb.href ? /* @__PURE__ */ jsx29("a", { href: crumb.href, children: crumb.label }) : crumb.label;
2245
+ return /* @__PURE__ */ jsxs28("span", { className: "cfi-ui-page-header__crumb", "data-current": last ? "" : void 0, children: [
2246
+ i > 0 && /* @__PURE__ */ jsx29(ChevronRight2, { className: "cfi-ui-page-header__crumb-sep", "aria-hidden": "true" }),
2247
+ /* @__PURE__ */ jsx29("span", { "aria-current": last ? "page" : void 0, children: label })
2248
+ ] }, i);
2249
+ }) }),
2250
+ onBack && /* @__PURE__ */ jsxs28("button", { type: "button", className: "cfi-ui-page-header__back", onClick: onBack, children: [
2251
+ /* @__PURE__ */ jsx29(ArrowLeft, { "aria-hidden": "true" }),
2252
+ backLabel
2253
+ ] }),
2254
+ /* @__PURE__ */ jsxs28("div", { className: "cfi-ui-page-header__row", children: [
2255
+ /* @__PURE__ */ jsxs28("div", { className: "cfi-ui-page-header__titles", children: [
2256
+ /* @__PURE__ */ jsx29(Heading, { className: "cfi-ui-page-header__title", children: title }),
2257
+ description && /* @__PURE__ */ jsx29("p", { className: "cfi-ui-page-header__description", children: description })
2258
+ ] }),
2259
+ actions && /* @__PURE__ */ jsx29("div", { className: "cfi-ui-page-header__actions", children: actions })
2260
+ ] }),
2261
+ children && /* @__PURE__ */ jsx29("div", { className: "cfi-ui-page-header__meta", children })
2262
+ ]
2263
+ }
2264
+ );
2265
+ }
2266
+
2267
+ // src/SelectionBar.tsx
2268
+ import { X as X7 } from "lucide-react";
2269
+
2270
+ // src/SelectionBar.css
2271
+ styleInject("@layer components {\n :where(.cfi-ui-selection-bar) {\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: var(--cfi-ui-space-2xs) var(--cfi-ui-space-sm);\n border: 1px solid var(--cfi-ui-accent);\n border-radius: var(--cfi-ui-radius-md);\n background: var(--cfi-ui-accent-soft);\n font-family: var(--cfi-ui-font);\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content);\n min-height: 2.5rem;\n }\n .cfi-ui-selection-bar__count {\n font-weight: var(--cfi-ui-weight-medium);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n }\n .cfi-ui-selection-bar__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--cfi-ui-space-2xs);\n }\n .cfi-ui-selection-bar__clear {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-ui-space-3xs);\n margin-left: auto;\n padding: 0.25rem 0.5rem;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: none;\n font: inherit;\n font-size: var(--cfi-ui-text-sm);\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n transition: color var(--cfi-ui-transition-fast), background var(--cfi-ui-transition-fast);\n }\n .cfi-ui-selection-bar__clear:hover:not(:disabled) {\n background: var(--cfi-ui-surface-hover);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-selection-bar__clear:focus-visible {\n outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n outline-offset: var(--cfi-ui-focus-offset);\n }\n .cfi-ui-selection-bar__clear:disabled {\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-selection-bar__clear > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-selection-bar[data-busy] {\n opacity: 0.6;\n pointer-events: none;\n }\n .cfi-ui-selection-bar[data-variant=floating] {\n position: fixed;\n left: 50%;\n bottom: var(--cfi-ui-space-lg);\n transform: translateX(-50%);\n z-index: var(--cfi-ui-z-dropdown);\n width: max-content;\n max-width: calc(100vw - 2 * var(--cfi-ui-space-lg));\n padding: var(--cfi-ui-space-xs) var(--cfi-ui-space-md);\n border-radius: var(--cfi-ui-radius-lg);\n background: var(--cfi-ui-surface-raised);\n box-shadow: var(--cfi-ui-shadow-lg);\n }\n @media (max-width: 640px) {\n .cfi-ui-selection-bar {\n flex-wrap: wrap;\n }\n .cfi-ui-selection-bar[data-variant=floating] {\n left: var(--cfi-ui-space-sm);\n right: var(--cfi-ui-space-sm);\n width: auto;\n max-width: none;\n transform: none;\n }\n }\n}\n");
2272
+
2273
+ // src/SelectionBar.tsx
2274
+ import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
2275
+ function SelectionBar({
2276
+ count,
2277
+ children,
2278
+ onClear,
2279
+ clearLabel = "Clear",
2280
+ label = (n) => `${n} selected`,
2281
+ busy = false,
2282
+ variant = "bar",
2283
+ className
2284
+ }) {
2285
+ if (count === 0) return null;
2286
+ return /* @__PURE__ */ jsxs29(
2287
+ "div",
2288
+ {
2289
+ role: "status",
2290
+ "aria-live": "polite",
2291
+ "data-variant": variant,
2292
+ "data-busy": busy ? "" : void 0,
2293
+ className: cn("cfi-ui", "cfi-ui-selection-bar", className),
2294
+ children: [
2295
+ /* @__PURE__ */ jsx30("span", { className: "cfi-ui-selection-bar__count", children: label(count) }),
2296
+ children && /* @__PURE__ */ jsx30("div", { className: "cfi-ui-selection-bar__actions", children }),
2297
+ onClear && /* @__PURE__ */ jsxs29(
2298
+ "button",
2299
+ {
2300
+ type: "button",
2301
+ className: "cfi-ui-selection-bar__clear",
2302
+ onClick: onClear,
2303
+ disabled: busy,
2304
+ children: [
2305
+ /* @__PURE__ */ jsx30(X7, { "aria-hidden": "true" }),
2306
+ clearLabel
2307
+ ]
2308
+ }
2309
+ )
2310
+ ]
2311
+ }
2312
+ );
2313
+ }
2314
+
2091
2315
  // src/usePagedRows.ts
2092
2316
  import { useEffect as useEffect4, useMemo as useMemo6, useState as useState7 } from "react";
2093
2317
  function usePagedRows(all, initialPageSize = 25) {
@@ -2156,6 +2380,7 @@ export {
2156
2380
  AccordionItem,
2157
2381
  AccordionRoot,
2158
2382
  AccordionTrigger,
2383
+ Alert,
2159
2384
  Avatar,
2160
2385
  AvatarGroup,
2161
2386
  Badge,
@@ -2173,6 +2398,8 @@ export {
2173
2398
  ConfirmDialog,
2174
2399
  CountBadge,
2175
2400
  CreatableSelect,
2401
+ DataList,
2402
+ DataListItem,
2176
2403
  Dialog,
2177
2404
  DialogBody,
2178
2405
  DialogClose,
@@ -2209,6 +2436,7 @@ export {
2209
2436
  MenuSubTrigger,
2210
2437
  MenuTrigger,
2211
2438
  Modal,
2439
+ PageHeader,
2212
2440
  Pagination,
2213
2441
  Popover,
2214
2442
  PopoverAnchor,
@@ -2228,6 +2456,7 @@ export {
2228
2456
  SelectSeparator,
2229
2457
  SelectTrigger,
2230
2458
  SelectValue,
2459
+ SelectionBar,
2231
2460
  Separator3 as Separator,
2232
2461
  Sheet,
2233
2462
  SheetBody,