@campfire-interactive/ui 0.5.1 → 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 +313 -3
  2. package/dist/index.js +396 -133
  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 }),
@@ -1067,11 +1075,11 @@ function CreatableSelect({
1067
1075
  }
1068
1076
 
1069
1077
  // src/Combobox.tsx
1070
- import { useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
1078
+ import { Fragment as Fragment3, useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
1071
1079
  import { Check as Check4, ChevronDown as ChevronDown3, Search, X as X3 } from "lucide-react";
1072
1080
 
1073
1081
  // src/Combobox.css
1074
- styleInject("@layer components {\n .cfi-ui-combobox {\n position: relative;\n display: inline-flex;\n align-items: center;\n }\n .cfi-ui-combobox--full {\n display: flex;\n width: 100%;\n }\n :where(.cfi-ui-combobox__trigger) {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n height: var(--cfi-ui-control-height-md);\n padding-inline: 0.625rem;\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 transition: border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-combobox__trigger:hover:not(:disabled) {\n border-color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-combobox__trigger:disabled {\n background: var(--cfi-ui-surface-disabled);\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-combobox__trigger[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-combobox__trigger[data-size=sm] {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: 0.5rem;\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-combobox__trigger[data-size=lg] {\n height: var(--cfi-ui-control-height-lg);\n padding-inline: 0.875rem;\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-combobox__trigger[data-placeholder] .cfi-ui-combobox__value {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n .cfi-ui-combobox__chevron {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__chevron > svg,\n .cfi-ui-combobox__clear > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-combobox__clear {\n position: absolute;\n right: 1.75rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: transparent;\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n }\n .cfi-ui-combobox__clear:hover {\n background: var(--cfi-ui-surface-active);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-combobox__panel {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n max-height: min(22rem, var(--radix-popover-content-available-height, 22rem));\n }\n .cfi-ui-combobox__search {\n flex: none;\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: var(--cfi-ui-space-sm);\n border-bottom: 1px solid var(--cfi-ui-border);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__search > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-combobox__search input {\n flex: 1 1 auto;\n min-width: 0;\n border: 0;\n background: transparent;\n color: var(--cfi-ui-content);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n outline: none;\n }\n .cfi-ui-combobox__search input::placeholder {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__list {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-ui-space-xs);\n }\n .cfi-ui-combobox__option {\n align-items: flex-start;\n }\n .cfi-ui-combobox__option > .cfi-ui-select-item__indicator {\n padding-top: 0.125rem;\n }\n .cfi-ui-combobox__option-text {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-combobox__option-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-combobox__option-hint {\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n");
1082
+ styleInject("@layer components {\n .cfi-ui-combobox {\n position: relative;\n display: inline-flex;\n align-items: center;\n }\n .cfi-ui-combobox--full {\n display: flex;\n width: 100%;\n }\n :where(.cfi-ui-combobox__trigger) {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-ui-space-sm);\n width: 100%;\n height: var(--cfi-ui-control-height-md);\n padding-inline: 0.625rem;\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 transition: border-color var(--cfi-ui-transition-fast);\n }\n .cfi-ui-combobox__trigger:hover:not(:disabled) {\n border-color: var(--cfi-ui-content-subtle);\n }\n .cfi-ui-combobox__trigger:disabled {\n background: var(--cfi-ui-surface-disabled);\n color: var(--cfi-ui-content-disabled);\n cursor: not-allowed;\n }\n .cfi-ui-combobox__trigger[data-invalid] {\n border-color: var(--cfi-ui-error);\n }\n .cfi-ui-combobox__trigger[data-size=sm] {\n height: var(--cfi-ui-control-height-sm);\n padding-inline: 0.5rem;\n font-size: var(--cfi-ui-text-xs);\n }\n .cfi-ui-combobox__trigger[data-size=lg] {\n height: var(--cfi-ui-control-height-lg);\n padding-inline: 0.875rem;\n font-size: var(--cfi-ui-text-base);\n }\n .cfi-ui-combobox__trigger[data-placeholder] .cfi-ui-combobox__value {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n .cfi-ui-combobox__chevron {\n display: inline-flex;\n flex: none;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__chevron > svg,\n .cfi-ui-combobox__clear > svg {\n width: 0.875rem;\n height: 0.875rem;\n display: block;\n }\n .cfi-ui-combobox__clear {\n position: absolute;\n right: 1.75rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--cfi-ui-radius-sm);\n background: transparent;\n color: var(--cfi-ui-content-muted);\n cursor: pointer;\n }\n .cfi-ui-combobox__clear:hover {\n background: var(--cfi-ui-surface-active);\n color: var(--cfi-ui-content);\n }\n .cfi-ui-combobox__panel {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n max-height: min(22rem, var(--radix-popover-content-available-height, 22rem));\n }\n .cfi-ui-combobox__search {\n flex: none;\n display: flex;\n align-items: center;\n gap: var(--cfi-ui-space-sm);\n padding: var(--cfi-ui-space-sm);\n border-bottom: 1px solid var(--cfi-ui-border);\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__search > svg {\n width: 0.875rem;\n height: 0.875rem;\n flex: none;\n }\n .cfi-ui-combobox__search input {\n flex: 1 1 auto;\n min-width: 0;\n border: 0;\n background: transparent;\n color: var(--cfi-ui-content);\n font-family: inherit;\n font-size: var(--cfi-ui-text-sm);\n outline: none;\n }\n .cfi-ui-combobox__search input::placeholder {\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__list {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-ui-space-xs);\n }\n .cfi-ui-combobox__option {\n align-items: flex-start;\n }\n .cfi-ui-combobox__option > .cfi-ui-select-item__indicator {\n padding-top: 0.125rem;\n }\n .cfi-ui-combobox__option-text {\n display: grid;\n gap: var(--cfi-ui-space-3xs);\n min-width: 0;\n }\n .cfi-ui-combobox__option-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-combobox__option-hint {\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ui-combobox__group-label {\n padding: 0.375rem 0.5rem 0.25rem;\n margin: 0;\n font-size: var(--cfi-ui-text-xs);\n font-weight: var(--cfi-ui-weight-semibold);\n letter-spacing: var(--cfi-ui-tracking-caps);\n text-transform: uppercase;\n color: var(--cfi-ui-content-muted);\n }\n .cfi-ui-combobox__list > [role=group] + [role=group] .cfi-ui-combobox__group-label {\n margin-top: var(--cfi-ui-space-xs);\n padding-top: calc(0.25rem + var(--cfi-ui-space-xs));\n border-top: 1px solid var(--cfi-ui-border);\n }\n .cfi-ui-combobox__truncated {\n flex: none;\n margin: 0;\n padding: var(--cfi-ui-space-sm);\n border-top: 1px solid var(--cfi-ui-border);\n background: var(--cfi-ui-surface-muted);\n font-size: var(--cfi-ui-text-xs);\n color: var(--cfi-ui-content-muted);\n text-align: center;\n }\n}\n");
1075
1083
 
1076
1084
  // src/Combobox.tsx
1077
1085
  import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1085,6 +1093,10 @@ function Combobox({
1085
1093
  loading = false,
1086
1094
  emptyLabel = "No matches",
1087
1095
  loadingLabel = "Searching...",
1096
+ maxResults = 50,
1097
+ truncatedLabel = (shown) => `Showing the first ${shown}. Keep typing to narrow.`,
1098
+ onOpenChange,
1099
+ onBlur,
1088
1100
  clearable = false,
1089
1101
  size = "md",
1090
1102
  invalid,
@@ -1110,8 +1122,25 @@ function Combobox({
1110
1122
  (o) => o.label.toLowerCase().includes(q) || (o.hint?.toLowerCase().includes(q) ?? false)
1111
1123
  );
1112
1124
  }, [options, search, onSearchChange]);
1113
- const selectable = filtered.filter((o) => !o.disabled);
1125
+ const visible = useMemo3(
1126
+ () => maxResults > 0 ? filtered.slice(0, maxResults) : filtered,
1127
+ [filtered, maxResults]
1128
+ );
1129
+ const truncated = visible.length < filtered.length;
1130
+ const selectable = visible.filter((o) => !o.disabled);
1114
1131
  const selected = options.find((o) => o.value === value) ?? null;
1132
+ const lastLabel = useRef(null);
1133
+ if (selected) lastLabel.current = { value: selected.value, label: selected.label };
1134
+ const selectedLabel = selected?.label ?? (lastLabel.current?.value === value ? lastLabel.current.label : null);
1135
+ const groups = useMemo3(() => {
1136
+ const runs = [];
1137
+ for (const option of visible) {
1138
+ const last = runs[runs.length - 1];
1139
+ if (last && last.group === option.group) last.options.push(option);
1140
+ else runs.push({ group: option.group, options: [option] });
1141
+ }
1142
+ return runs;
1143
+ }, [visible]);
1115
1144
  useEffect(() => {
1116
1145
  setHighlighted((h) => selectable.length === 0 ? 0 : Math.min(h, selectable.length - 1));
1117
1146
  }, [selectable.length]);
@@ -1126,9 +1155,13 @@ function Combobox({
1126
1155
  const el = listRef.current?.querySelector('[data-highlighted="true"]');
1127
1156
  el?.scrollIntoView({ block: "nearest" });
1128
1157
  }, [highlighted, open]);
1158
+ function changeOpen(next) {
1159
+ setOpen(next);
1160
+ onOpenChange?.(next);
1161
+ }
1129
1162
  function commit(option) {
1130
1163
  onValueChange(option.value);
1131
- setOpen(false);
1164
+ changeOpen(false);
1132
1165
  }
1133
1166
  function handleKeyDown(e) {
1134
1167
  if (e.key === "ArrowDown") {
@@ -1156,7 +1189,7 @@ function Combobox({
1156
1189
  setHighlighted(0);
1157
1190
  onSearchChange?.(next);
1158
1191
  }
1159
- return /* @__PURE__ */ jsxs15(PopoverRoot, { open, onOpenChange: setOpen, children: [
1192
+ return /* @__PURE__ */ jsxs15(PopoverRoot, { open, onOpenChange: changeOpen, children: [
1160
1193
  /* @__PURE__ */ jsx15(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs15(
1161
1194
  "div",
1162
1195
  {
@@ -1175,22 +1208,23 @@ function Combobox({
1175
1208
  disabled,
1176
1209
  "data-size": size,
1177
1210
  "data-invalid": invalid || void 0,
1178
- "data-placeholder": selected ? void 0 : "",
1211
+ "data-placeholder": selectedLabel == null ? "" : void 0,
1179
1212
  className: "cfi-ui-combobox__trigger",
1180
- onClick: () => setOpen((o) => !o),
1213
+ onClick: () => changeOpen(!open),
1214
+ onBlur,
1181
1215
  ...aria,
1182
1216
  children: [
1183
- /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
1217
+ /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__value", children: selectedLabel ?? placeholder }),
1184
1218
  /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx15(ChevronDown3, {}) })
1185
1219
  ]
1186
1220
  }
1187
1221
  ),
1188
- clearable && selected && !disabled && /* @__PURE__ */ jsx15(
1222
+ clearable && selectedLabel != null && !disabled && /* @__PURE__ */ jsx15(
1189
1223
  "button",
1190
1224
  {
1191
1225
  type: "button",
1192
1226
  className: "cfi-ui-combobox__clear",
1193
- "aria-label": `Clear ${selected.label}`,
1227
+ "aria-label": `Clear ${selectedLabel}`,
1194
1228
  title: "Clear",
1195
1229
  onClick: () => onValueChange(null),
1196
1230
  children: /* @__PURE__ */ jsx15(X3, { "aria-hidden": "true" })
@@ -1238,34 +1272,42 @@ function Combobox({
1238
1272
  role: "listbox",
1239
1273
  "aria-busy": loading || void 0,
1240
1274
  className: "cfi-ui-combobox__list",
1241
- children: loading ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : filtered.map((option) => {
1242
- const index = selectable.indexOf(option);
1243
- const isHighlighted = index !== -1 && index === highlighted;
1244
- return /* @__PURE__ */ jsxs15(
1245
- "div",
1246
- {
1247
- id: `${listId}-${option.value}`,
1248
- role: "option",
1249
- "aria-selected": option.value === value,
1250
- "aria-disabled": option.disabled || void 0,
1251
- "data-highlighted": isHighlighted || void 0,
1252
- "data-disabled": option.disabled || void 0,
1253
- className: "cfi-ui-select-item cfi-ui-combobox__option",
1254
- onClick: () => !option.disabled && commit(option),
1255
- onPointerMove: () => index !== -1 && setHighlighted(index),
1256
- children: [
1257
- /* @__PURE__ */ jsx15("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx15(Check4, { "aria-hidden": "true" }) }),
1258
- /* @__PURE__ */ jsxs15("span", { className: "cfi-ui-combobox__option-text", children: [
1259
- /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
1260
- option.hint && /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
1261
- ] })
1262
- ]
1263
- },
1264
- option.value
1265
- );
1275
+ children: loading ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : visible.length === 0 ? /* @__PURE__ */ jsx15("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : groups.map((run, runIndex) => {
1276
+ const rows = run.options.map((option) => {
1277
+ const index = selectable.indexOf(option);
1278
+ const isHighlighted = index !== -1 && index === highlighted;
1279
+ return /* @__PURE__ */ jsxs15(
1280
+ "div",
1281
+ {
1282
+ id: `${listId}-${option.value}`,
1283
+ role: "option",
1284
+ "aria-selected": option.value === value,
1285
+ "aria-disabled": option.disabled || void 0,
1286
+ "data-highlighted": isHighlighted || void 0,
1287
+ "data-disabled": option.disabled || void 0,
1288
+ className: "cfi-ui-select-item cfi-ui-combobox__option",
1289
+ onClick: () => !option.disabled && commit(option),
1290
+ onPointerMove: () => index !== -1 && setHighlighted(index),
1291
+ children: [
1292
+ /* @__PURE__ */ jsx15("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx15(Check4, { "aria-hidden": "true" }) }),
1293
+ /* @__PURE__ */ jsxs15("span", { className: "cfi-ui-combobox__option-text", children: [
1294
+ /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
1295
+ option.hint && /* @__PURE__ */ jsx15("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
1296
+ ] })
1297
+ ]
1298
+ },
1299
+ option.value
1300
+ );
1301
+ });
1302
+ if (!run.group) return /* @__PURE__ */ jsx15(Fragment3, { children: rows }, `ungrouped-${runIndex}`);
1303
+ return /* @__PURE__ */ jsxs15("div", { role: "group", "aria-label": run.group, children: [
1304
+ /* @__PURE__ */ jsx15("p", { className: "cfi-ui-combobox__group-label", "aria-hidden": "true", children: run.group }),
1305
+ rows
1306
+ ] }, `${run.group}-${runIndex}`);
1266
1307
  })
1267
1308
  }
1268
- )
1309
+ ),
1310
+ !loading && truncated && /* @__PURE__ */ jsx15("p", { className: "cfi-ui-combobox__truncated", children: truncatedLabel(visible.length) })
1269
1311
  ]
1270
1312
  }
1271
1313
  )
@@ -1275,7 +1317,7 @@ function Combobox({
1275
1317
  // src/Tooltip.tsx
1276
1318
  import { forwardRef as forwardRef12 } from "react";
1277
1319
  import * as RadixTooltip from "@radix-ui/react-tooltip";
1278
- import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
1320
+ import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
1279
1321
  var TooltipProvider = RadixTooltip.Provider;
1280
1322
  var TooltipRoot = RadixTooltip.Root;
1281
1323
  var TooltipTrigger = RadixTooltip.Trigger;
@@ -1297,7 +1339,7 @@ var TooltipContent = forwardRef12(function TooltipContent2({ className, children
1297
1339
  ) });
1298
1340
  });
1299
1341
  function Tooltip({ content, side = "top", align = "center", delay = 300, disabled, children }) {
1300
- if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment3, { children });
1342
+ if (disabled || content == null || content === "") return /* @__PURE__ */ jsx16(Fragment4, { children });
1301
1343
  return /* @__PURE__ */ jsx16(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs16(TooltipRoot, { children: [
1302
1344
  /* @__PURE__ */ jsx16(TooltipTrigger, { asChild: true, children }),
1303
1345
  /* @__PURE__ */ jsx16(TooltipContent, { side, align, children: content })
@@ -1470,17 +1512,132 @@ function CardFooter({ className, ...rest }) {
1470
1512
  return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui-card__footer", className), ...rest });
1471
1513
  }
1472
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
+
1473
1630
  // src/Table.tsx
1474
1631
  import { forwardRef as forwardRef14 } from "react";
1475
1632
  import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
1476
1633
 
1477
1634
  // src/Table.css
1478
- 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");
1479
1636
 
1480
1637
  // src/Table.tsx
1481
- import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
1638
+ import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1482
1639
  var Table = forwardRef14(function Table2({ density = "comfortable", stickyHeader = false, stickyFirstColumn = false, className, ...rest }, ref) {
1483
- return /* @__PURE__ */ jsx19(
1640
+ return /* @__PURE__ */ jsx21(
1484
1641
  "table",
1485
1642
  {
1486
1643
  ref,
@@ -1493,20 +1650,20 @@ var Table = forwardRef14(function Table2({ density = "comfortable", stickyHeader
1493
1650
  );
1494
1651
  });
1495
1652
  function TableScroller({ className, ...rest }) {
1496
- 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 });
1497
1654
  }
1498
1655
  function TableHeader({ className, ...rest }) {
1499
- 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 });
1500
1657
  }
1501
1658
  function TableBody({ className, ...rest }) {
1502
- 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 });
1503
1660
  }
1504
1661
  function TableFooter({ className, ...rest }) {
1505
- 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 });
1506
1663
  }
1507
1664
  var TableFoot = TableFooter;
1508
1665
  function TableRow({ selected, interactive, className, ...rest }) {
1509
- return /* @__PURE__ */ jsx19(
1666
+ return /* @__PURE__ */ jsx21(
1510
1667
  "tr",
1511
1668
  {
1512
1669
  "data-selected": selected || void 0,
@@ -1529,7 +1686,7 @@ function TableHead({
1529
1686
  ...rest
1530
1687
  }) {
1531
1688
  const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
1532
- return /* @__PURE__ */ jsx19(
1689
+ return /* @__PURE__ */ jsx21(
1533
1690
  "th",
1534
1691
  {
1535
1692
  scope: "col",
@@ -1538,29 +1695,30 @@ function TableHead({
1538
1695
  style: { width, ...style },
1539
1696
  className: cn("cfi-ui-table__th", className),
1540
1697
  ...rest,
1541
- children: sortable ? /* @__PURE__ */ jsxs19("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
1542
- /* @__PURE__ */ jsx19("span", { children }),
1543
- /* @__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, {}) })
1544
1701
  ] }) : children
1545
1702
  }
1546
1703
  );
1547
1704
  }
1548
- function TableCell({ numeric, truncate, className, ...rest }) {
1549
- return /* @__PURE__ */ jsx19(
1705
+ function TableCell({ numeric, truncate, mono, className, ...rest }) {
1706
+ return /* @__PURE__ */ jsx21(
1550
1707
  "td",
1551
1708
  {
1552
1709
  "data-numeric": numeric || void 0,
1553
1710
  "data-truncate": truncate || void 0,
1711
+ "data-mono": mono || void 0,
1554
1712
  className: cn("cfi-ui-table__td", className),
1555
1713
  ...rest
1556
1714
  }
1557
1715
  );
1558
1716
  }
1559
1717
  function TableEmpty({ colSpan, children }) {
1560
- 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 }) });
1561
1719
  }
1562
1720
  function TableCaption({ className, ...rest }) {
1563
- 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 });
1564
1722
  }
1565
1723
 
1566
1724
  // src/Tabs.tsx
@@ -1571,12 +1729,12 @@ import * as RadixTabs from "@radix-ui/react-tabs";
1571
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");
1572
1730
 
1573
1731
  // src/Tabs.tsx
1574
- import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
1732
+ import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
1575
1733
  var Tabs = RadixTabs.Root;
1576
1734
  var TabsRoot = RadixTabs.Root;
1577
1735
  var TabsList = forwardRef15(
1578
1736
  function TabsList2({ variant = "pill", className, ...rest }, ref) {
1579
- return /* @__PURE__ */ jsx20(
1737
+ return /* @__PURE__ */ jsx22(
1580
1738
  RadixTabs.List,
1581
1739
  {
1582
1740
  ref,
@@ -1589,18 +1747,18 @@ var TabsList = forwardRef15(
1589
1747
  );
1590
1748
  var TabsTrigger = forwardRef15(
1591
1749
  function TabsTrigger2({ icon, count, className, children, ...rest }, ref) {
1592
- return /* @__PURE__ */ jsxs20(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
1593
- icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-tabs__icon", children: icon }),
1594
- /* @__PURE__ */ jsx20("span", { children }),
1595
- 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" })
1596
1754
  ] });
1597
1755
  }
1598
1756
  );
1599
1757
  var TabsContent = forwardRef15(function TabsContent2({ className, ...rest }, ref) {
1600
- 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 });
1601
1759
  });
1602
1760
  function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
1603
- return /* @__PURE__ */ jsxs20(
1761
+ return /* @__PURE__ */ jsxs22(
1604
1762
  Tabs,
1605
1763
  {
1606
1764
  value,
@@ -1608,7 +1766,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1608
1766
  defaultValue: defaultValue ?? tabs[0]?.value,
1609
1767
  className: cn("cfi-ui", "cfi-ui-tabs", className),
1610
1768
  children: [
1611
- /* @__PURE__ */ jsx20(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx20(
1769
+ /* @__PURE__ */ jsx22(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx22(
1612
1770
  TabsTrigger,
1613
1771
  {
1614
1772
  value: tab.value,
@@ -1619,7 +1777,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
1619
1777
  },
1620
1778
  tab.value
1621
1779
  )) }),
1622
- 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))
1623
1781
  ]
1624
1782
  }
1625
1783
  );
@@ -1632,12 +1790,12 @@ import { forwardRef as forwardRef16 } from "react";
1632
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');
1633
1791
 
1634
1792
  // src/Display.tsx
1635
- import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
1793
+ import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
1636
1794
  function Separator3({ orientation = "horizontal", label, className, ...rest }) {
1637
1795
  if (label) {
1638
- 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 }) });
1639
1797
  }
1640
- return /* @__PURE__ */ jsx21(
1798
+ return /* @__PURE__ */ jsx23(
1641
1799
  "div",
1642
1800
  {
1643
1801
  role: "separator",
@@ -1658,8 +1816,8 @@ function Progress({
1658
1816
  ...rest
1659
1817
  }) {
1660
1818
  const clamped = value == null ? null : Math.max(0, Math.min(100, value));
1661
- return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1662
- /* @__PURE__ */ jsx21(
1819
+ return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
1820
+ /* @__PURE__ */ jsx23(
1663
1821
  "div",
1664
1822
  {
1665
1823
  role: "progressbar",
@@ -1671,7 +1829,7 @@ function Progress({
1671
1829
  "data-size": size,
1672
1830
  "data-indeterminate": clamped == null || void 0,
1673
1831
  className: "cfi-ui-progress",
1674
- children: /* @__PURE__ */ jsx21(
1832
+ children: /* @__PURE__ */ jsx23(
1675
1833
  "div",
1676
1834
  {
1677
1835
  className: "cfi-ui-progress__fill",
@@ -1680,7 +1838,7 @@ function Progress({
1680
1838
  )
1681
1839
  }
1682
1840
  ),
1683
- 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: [
1684
1842
  Math.round(clamped),
1685
1843
  "%"
1686
1844
  ] })
@@ -1688,7 +1846,7 @@ function Progress({
1688
1846
  }
1689
1847
  function Skeleton({ shape = "block", width, height, lines = 1, className, style, ...rest }) {
1690
1848
  if (shape === "text" && lines > 1) {
1691
- 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(
1692
1850
  "div",
1693
1851
  {
1694
1852
  "data-shape": "text",
@@ -1698,7 +1856,7 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1698
1856
  i
1699
1857
  )) });
1700
1858
  }
1701
- return /* @__PURE__ */ jsx21(
1859
+ return /* @__PURE__ */ jsx23(
1702
1860
  "div",
1703
1861
  {
1704
1862
  "aria-hidden": "true",
@@ -1712,18 +1870,18 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
1712
1870
  var Avatar = forwardRef16(function Avatar2({ name, src, size = "md", className, ...rest }, ref) {
1713
1871
  const parts = name.trim().split(/\s+/).filter(Boolean);
1714
1872
  const initials = parts.length === 0 ? "?" : parts.length === 1 ? parts[0].slice(0, 2).toUpperCase() : `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
1715
- return /* @__PURE__ */ jsxs21("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
1716
- src ? /* @__PURE__ */ jsx21("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", children: initials }),
1717
- !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 })
1718
1876
  ] });
1719
1877
  });
1720
1878
  function AvatarGroup({ max, className, children, ...rest }) {
1721
1879
  const items = Array.isArray(children) ? children : [children];
1722
1880
  const shown = max ? items.slice(0, max) : items;
1723
1881
  const hidden = items.length - shown.length;
1724
- 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: [
1725
1883
  shown,
1726
- 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: [
1727
1885
  "+",
1728
1886
  hidden
1729
1887
  ] })
@@ -1736,7 +1894,7 @@ function ScrollArea({
1736
1894
  style,
1737
1895
  ...rest
1738
1896
  }) {
1739
- return /* @__PURE__ */ jsx21(
1897
+ return /* @__PURE__ */ jsx23(
1740
1898
  "div",
1741
1899
  {
1742
1900
  "data-orientation": orientation,
@@ -1757,20 +1915,20 @@ import { ChevronDown as ChevronDown4 } from "lucide-react";
1757
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");
1758
1916
 
1759
1917
  // src/Accordion.tsx
1760
- import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
1918
+ import { jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
1761
1919
  var AccordionRoot = RadixAccordion.Root;
1762
1920
  var AccordionItem = forwardRef17(function AccordionItem2({ className, ...rest }, ref) {
1763
- 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 });
1764
1922
  });
1765
1923
  var AccordionTrigger = forwardRef17(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
1766
- 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: [
1767
- /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(ChevronDown4, {}) }),
1768
- /* @__PURE__ */ jsx22("span", { className: "cfi-ui-accordion__label", children }),
1769
- 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 })
1770
1928
  ] }) });
1771
1929
  });
1772
1930
  var AccordionContent = forwardRef17(function AccordionContent2({ className, children, ...rest }, ref) {
1773
- 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 }) });
1774
1932
  });
1775
1933
  function Accordion({
1776
1934
  sections,
@@ -1787,9 +1945,9 @@ function Accordion({
1787
1945
  onValueChange,
1788
1946
  className: cn("cfi-ui", "cfi-ui-accordion", className)
1789
1947
  };
1790
- return /* @__PURE__ */ jsx22(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs22(AccordionItem, { value: section.value, disabled: section.disabled, children: [
1791
- /* @__PURE__ */ jsx22(AccordionTrigger, { meta: section.meta, children: section.label }),
1792
- /* @__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 })
1793
1951
  ] }, section.value)) });
1794
1952
  }
1795
1953
  function ToggleGroup({
@@ -1801,7 +1959,7 @@ function ToggleGroup({
1801
1959
  className,
1802
1960
  ...aria
1803
1961
  }) {
1804
- return /* @__PURE__ */ jsx22(
1962
+ return /* @__PURE__ */ jsx24(
1805
1963
  RadixToggleGroup.Root,
1806
1964
  {
1807
1965
  type: "single",
@@ -1813,7 +1971,7 @@ function ToggleGroup({
1813
1971
  "data-size": size,
1814
1972
  className: cn("cfi-ui", "cfi-ui-toggle-group", className),
1815
1973
  ...aria,
1816
- children: options.map((option) => /* @__PURE__ */ jsxs22(
1974
+ children: options.map((option) => /* @__PURE__ */ jsxs24(
1817
1975
  RadixToggleGroup.Item,
1818
1976
  {
1819
1977
  value: option.value,
@@ -1822,7 +1980,7 @@ function ToggleGroup({
1822
1980
  title: option.ariaLabel,
1823
1981
  className: "cfi-ui-toggle-group__item",
1824
1982
  children: [
1825
- 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 }),
1826
1984
  option.label
1827
1985
  ]
1828
1986
  },
@@ -1833,15 +1991,15 @@ function ToggleGroup({
1833
1991
  }
1834
1992
 
1835
1993
  // src/PageState.tsx
1836
- import { AlertCircle, Loader2 } from "lucide-react";
1994
+ import { AlertCircle as AlertCircle2, Loader2 } from "lucide-react";
1837
1995
 
1838
1996
  // src/PageState.css
1839
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");
1840
1998
 
1841
1999
  // src/PageState.tsx
1842
- import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
2000
+ import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
1843
2001
  function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1844
- return /* @__PURE__ */ jsxs23(
2002
+ return /* @__PURE__ */ jsxs25(
1845
2003
  "div",
1846
2004
  {
1847
2005
  className: cn("cfi-ui", "cfi-ui-pagestate", className),
@@ -1849,8 +2007,8 @@ function LoadingState({ label = "Loading\u2026", size = "block", className }) {
1849
2007
  role: "status",
1850
2008
  "aria-live": "polite",
1851
2009
  children: [
1852
- /* @__PURE__ */ jsx23(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
1853
- /* @__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 })
1854
2012
  ]
1855
2013
  }
1856
2014
  );
@@ -1864,13 +2022,13 @@ function ErrorState({
1864
2022
  className
1865
2023
  }) {
1866
2024
  const message = error instanceof Error ? error.message : error == null ? "" : String(error);
1867
- return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
1868
- /* @__PURE__ */ jsx23(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
1869
- /* @__PURE__ */ jsxs23("div", { children: [
1870
- /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
1871
- 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 })
1872
2030
  ] }),
1873
- 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 })
1874
2032
  ] });
1875
2033
  }
1876
2034
  function EmptyState({
@@ -1881,17 +2039,17 @@ function EmptyState({
1881
2039
  size = "block",
1882
2040
  className
1883
2041
  }) {
1884
- return /* @__PURE__ */ jsxs23("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
1885
- icon && /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagestate__icon", children: icon }),
1886
- /* @__PURE__ */ jsxs23("div", { children: [
1887
- /* @__PURE__ */ jsx23("p", { className: "cfi-ui-pagestate__title", children: title }),
1888
- 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 })
1889
2047
  ] }),
1890
- action && /* @__PURE__ */ jsx23("div", { className: "cfi-ui-pagestate__action", children: action })
2048
+ action && /* @__PURE__ */ jsx25("div", { className: "cfi-ui-pagestate__action", children: action })
1891
2049
  ] });
1892
2050
  }
1893
2051
  function ComingSoon({ title, detail, className }) {
1894
- return /* @__PURE__ */ jsx23(
2052
+ return /* @__PURE__ */ jsx25(
1895
2053
  EmptyState,
1896
2054
  {
1897
2055
  title,
@@ -1942,13 +2100,13 @@ function useSortState(initialKey, initialDirection = "asc") {
1942
2100
 
1943
2101
  // src/SearchInput.tsx
1944
2102
  import { forwardRef as forwardRef18, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
1945
- import { Search as Search2, X as X5 } from "lucide-react";
2103
+ import { Search as Search2, X as X6 } from "lucide-react";
1946
2104
 
1947
2105
  // src/SearchInput.css
1948
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");
1949
2107
 
1950
2108
  // src/SearchInput.tsx
1951
- import { jsx as jsx24 } from "react/jsx-runtime";
2109
+ import { jsx as jsx26 } from "react/jsx-runtime";
1952
2110
  var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
1953
2111
  const [local, setLocal] = useState6(value);
1954
2112
  const timer = useRef3(void 0);
@@ -1967,7 +2125,7 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
1967
2125
  setLocal("");
1968
2126
  latest.current("");
1969
2127
  };
1970
- return /* @__PURE__ */ jsx24(
2128
+ return /* @__PURE__ */ jsx26(
1971
2129
  Input,
1972
2130
  {
1973
2131
  ...rest,
@@ -1976,8 +2134,8 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
1976
2134
  value: local,
1977
2135
  placeholder,
1978
2136
  onChange: (e) => push(e.target.value),
1979
- prefix: /* @__PURE__ */ jsx24(Search2, { "aria-hidden": "true" }),
1980
- 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
1981
2139
  }
1982
2140
  );
1983
2141
  });
@@ -1989,7 +2147,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
1989
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");
1990
2148
 
1991
2149
  // src/Pagination.tsx
1992
- import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
2150
+ import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
1993
2151
  function Pagination({
1994
2152
  page,
1995
2153
  pageSize,
@@ -2005,12 +2163,12 @@ function Pagination({
2005
2163
  const from = (current - 1) * pageSize + 1;
2006
2164
  const to = Math.min(current * pageSize, totalItems);
2007
2165
  const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
2008
- 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: [
2009
2167
  showRange && // aria-live so a screen-reader user hears where they landed; paging
2010
2168
  // otherwise moves focus nowhere and announces nothing.
2011
- /* @__PURE__ */ jsx25("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
2012
- /* @__PURE__ */ jsxs24("div", { className: "cfi-ui-pagination__controls", children: [
2013
- /* @__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(
2014
2172
  "button",
2015
2173
  {
2016
2174
  type: "button",
@@ -2018,15 +2176,15 @@ function Pagination({
2018
2176
  onClick: () => onPageChange(current - 1),
2019
2177
  disabled: current <= 1,
2020
2178
  "aria-label": labels?.previous ?? "Previous page",
2021
- children: /* @__PURE__ */ jsx25(ChevronLeft, { "aria-hidden": "true" })
2179
+ children: /* @__PURE__ */ jsx27(ChevronLeft, { "aria-hidden": "true" })
2022
2180
  }
2023
2181
  ),
2024
- /* @__PURE__ */ jsxs24("span", { className: "cfi-ui-pagination__page", children: [
2182
+ /* @__PURE__ */ jsxs26("span", { className: "cfi-ui-pagination__page", children: [
2025
2183
  current,
2026
2184
  " / ",
2027
2185
  pageCount
2028
2186
  ] }),
2029
- /* @__PURE__ */ jsx25(
2187
+ /* @__PURE__ */ jsx27(
2030
2188
  "button",
2031
2189
  {
2032
2190
  type: "button",
@@ -2034,7 +2192,7 @@ function Pagination({
2034
2192
  onClick: () => onPageChange(current + 1),
2035
2193
  disabled: current >= pageCount,
2036
2194
  "aria-label": labels?.next ?? "Next page",
2037
- children: /* @__PURE__ */ jsx25(ChevronRight, { "aria-hidden": "true" })
2195
+ children: /* @__PURE__ */ jsx27(ChevronRight, { "aria-hidden": "true" })
2038
2196
  }
2039
2197
  )
2040
2198
  ] })
@@ -2045,15 +2203,115 @@ function Pagination({
2045
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");
2046
2204
 
2047
2205
  // src/ListToolbar.tsx
2048
- import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
2206
+ import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
2049
2207
  function ListToolbar({ search, filters, actions, className }) {
2050
- return /* @__PURE__ */ jsxs25("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
2051
- search && /* @__PURE__ */ jsx26("div", { className: "cfi-ui-list-toolbar__search", children: search }),
2052
- filters && /* @__PURE__ */ jsx26("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
2053
- 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 })
2054
2212
  ] });
2055
2213
  }
2056
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
+
2057
2315
  // src/usePagedRows.ts
2058
2316
  import { useEffect as useEffect4, useMemo as useMemo6, useState as useState7 } from "react";
2059
2317
  function usePagedRows(all, initialPageSize = 25) {
@@ -2122,6 +2380,7 @@ export {
2122
2380
  AccordionItem,
2123
2381
  AccordionRoot,
2124
2382
  AccordionTrigger,
2383
+ Alert,
2125
2384
  Avatar,
2126
2385
  AvatarGroup,
2127
2386
  Badge,
@@ -2139,6 +2398,8 @@ export {
2139
2398
  ConfirmDialog,
2140
2399
  CountBadge,
2141
2400
  CreatableSelect,
2401
+ DataList,
2402
+ DataListItem,
2142
2403
  Dialog,
2143
2404
  DialogBody,
2144
2405
  DialogClose,
@@ -2175,6 +2436,7 @@ export {
2175
2436
  MenuSubTrigger,
2176
2437
  MenuTrigger,
2177
2438
  Modal,
2439
+ PageHeader,
2178
2440
  Pagination,
2179
2441
  Popover,
2180
2442
  PopoverAnchor,
@@ -2194,6 +2456,7 @@ export {
2194
2456
  SelectSeparator,
2195
2457
  SelectTrigger,
2196
2458
  SelectValue,
2459
+ SelectionBar,
2197
2460
  Separator3 as Separator,
2198
2461
  Sheet,
2199
2462
  SheetBody,