@campfire-interactive/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1894 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles/base.css
+styleInject('@layer components {\n  :where(:root) {\n    --cfi-ui-surface: var(--cfi-surface, #ffffff);\n    --cfi-ui-surface-raised: var(--cfi-surface-raised, #ffffff);\n    --cfi-ui-surface-sunken: var(--cfi-surface-sunken, #f9fafb);\n    --cfi-ui-surface-hover: var(--cfi-surface-hover, #f9fafb);\n    --cfi-ui-surface-active: var(--cfi-surface-active, #f3f4f6);\n    --cfi-ui-surface-selected: var(--cfi-surface-selected, #f3f4f6);\n    --cfi-ui-surface-disabled: var(--cfi-surface-disabled, #f3f4f6);\n    --cfi-ui-surface-muted: var(--cfi-surface-muted, #ececf0);\n    --cfi-ui-input-bg: var(--cfi-input-bg, #f3f3f5);\n    --cfi-ui-switch-bg: var(--cfi-switch-bg, #cbced4);\n    --cfi-ui-content: var(--cfi-content, oklch(0.145 0 0));\n    --cfi-ui-content-muted: var(--cfi-content-muted, #666676);\n    --cfi-ui-content-subtle: var(--cfi-content-subtle, #9ca3af);\n    --cfi-ui-content-inverse: var(--cfi-content-inverse, #ffffff);\n    --cfi-ui-content-disabled: var(--cfi-content-disabled, #9ca3af);\n    --cfi-ui-content-link: var(--cfi-content-link, #1d4ed8);\n    --cfi-ui-border: var(--cfi-border, #e5e7eb);\n    --cfi-ui-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n    --cfi-ui-border-strong: var(--cfi-border-strong, #d1d5db);\n    --cfi-ui-accent: var(--cfi-action, #030213);\n    --cfi-ui-accent-hover: var(--cfi-action-hover, #1a1a2e);\n    --cfi-ui-accent-soft: var(--cfi-action-soft, #f3f4f6);\n    --cfi-ui-accent-fg: var(--cfi-action-fg, #ffffff);\n    --cfi-ui-success: var(--cfi-color-success, #10b981);\n    --cfi-ui-success-soft: var(--cfi-color-success-soft, #ecfdf5);\n    --cfi-ui-success-text: var(--cfi-color-success-text, #047857);\n    --cfi-ui-success-border: var(--cfi-color-success-border, #a7f3d0);\n    --cfi-ui-warning: var(--cfi-color-warning, #f59e0b);\n    --cfi-ui-warning-soft: var(--cfi-color-warning-soft, #fffbeb);\n    --cfi-ui-warning-text: var(--cfi-color-warning-text, #b45309);\n    --cfi-ui-warning-border: var(--cfi-color-warning-border, #fde68a);\n    --cfi-ui-error: var(--cfi-color-error, #ef4444);\n    --cfi-ui-error-strong: var(--cfi-color-error-strong, #dc2626);\n    --cfi-ui-error-soft: var(--cfi-color-error-soft, #fef2f2);\n    --cfi-ui-error-text: var(--cfi-color-error-text, #b91c1c);\n    --cfi-ui-error-border: var(--cfi-color-error-border, #fecaca);\n    --cfi-ui-info: var(--cfi-color-info, #3b82f6);\n    --cfi-ui-info-soft: var(--cfi-color-info-soft, #eff6ff);\n    --cfi-ui-info-text: var(--cfi-color-info-text, #1d4ed8);\n    --cfi-ui-info-border: var(--cfi-color-info-border, #bfdbfe);\n    --cfi-ui-neutral-soft: var(--cfi-color-neutral-soft, #f3f4f6);\n    --cfi-ui-neutral-text: var(--cfi-color-neutral-text, #374151);\n    --cfi-ui-neutral-border: var(--cfi-color-neutral-border, #e5e7eb);\n    --cfi-ui-focus-color: var(--cfi-focus-ring-color, var(--cfi-ui-accent));\n    --cfi-ui-focus-width: var(--cfi-focus-ring-width, 2px);\n    --cfi-ui-focus-offset: var(--cfi-focus-ring-offset, 2px);\n    --cfi-ui-overlay: var(--cfi-overlay, rgb(17 24 39 / 0.45));\n    --cfi-ui-font: var(--cfi-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);\n    --cfi-ui-font-mono: var(--cfi-font-family-mono, ui-monospace, Consolas, monospace);\n    --cfi-ui-text-xs: var(--cfi-font-size-xs, 0.75rem);\n    --cfi-ui-text-sm: var(--cfi-font-size-sm, 0.875rem);\n    --cfi-ui-text-base: var(--cfi-font-size-base, 1rem);\n    --cfi-ui-text-lg: var(--cfi-font-size-lg, 1.125rem);\n    --cfi-ui-text-xl: var(--cfi-font-size-xl, 1.25rem);\n    --cfi-ui-weight-normal: var(--cfi-font-weight-normal, 400);\n    --cfi-ui-weight-medium: var(--cfi-font-weight-medium, 500);\n    --cfi-ui-weight-semibold: var(--cfi-font-weight-semibold, 600);\n    --cfi-ui-leading-tight: var(--cfi-line-height-tight, 1.2);\n    --cfi-ui-leading-snug: var(--cfi-line-height-snug, 1.35);\n    --cfi-ui-leading-normal: var(--cfi-line-height-normal, 1.5);\n    --cfi-ui-tracking-caps: var(--cfi-letter-spacing-caps, 0.08em);\n    --cfi-ui-space-3xs: var(--cfi-spacing-3xs, 0.125rem);\n    --cfi-ui-space-2xs: var(--cfi-spacing-2xs, 0.1875rem);\n    --cfi-ui-space-xs: var(--cfi-spacing-xs, 0.25rem);\n    --cfi-ui-space-sm: var(--cfi-spacing-sm, 0.5rem);\n    --cfi-ui-space-md: var(--cfi-spacing-md, 1rem);\n    --cfi-ui-space-lg: var(--cfi-spacing-lg, 1.5rem);\n    --cfi-ui-space-xl: var(--cfi-spacing-xl, 2rem);\n    --cfi-ui-radius-sm: var(--cfi-radius-sm, 0.375rem);\n    --cfi-ui-radius-md: var(--cfi-radius-md, 0.5rem);\n    --cfi-ui-radius-lg: var(--cfi-radius-lg, 0.625rem);\n    --cfi-ui-radius-xl: var(--cfi-radius-xl, 0.875rem);\n    --cfi-ui-radius-full: var(--cfi-radius-full, 9999px);\n    --cfi-ui-shadow-xs: var(--cfi-shadow-xs, 0 1px 1px rgb(17 24 39 / 0.04));\n    --cfi-ui-shadow-sm: var(--cfi-shadow-sm, 0 1px 2px rgb(17 24 39 / 0.05));\n    --cfi-ui-shadow-md: var(--cfi-shadow-md, 0 4px 6px rgb(17 24 39 / 0.07));\n    --cfi-ui-shadow-lg: var(--cfi-shadow-lg, 0 10px 15px rgb(17 24 39 / 0.1));\n    --cfi-ui-shadow-xl: var(--cfi-shadow-xl, 0 20px 40px -12px rgb(17 24 39 / 0.22));\n    --cfi-ui-transition-fast: var(--cfi-transition-fast, 120ms cubic-bezier(0.4, 0, 0.2, 1));\n    --cfi-ui-transition-base: var(--cfi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));\n    --cfi-ui-z-dropdown: var(--cfi-z-dropdown, 1000);\n    --cfi-ui-z-overlay: var(--cfi-z-overlay, 1100);\n    --cfi-ui-z-modal: var(--cfi-z-modal, 1200);\n    --cfi-ui-z-popover: var(--cfi-z-popover, 1300);\n    --cfi-ui-z-toast: var(--cfi-z-toast, 1400);\n    --cfi-ui-z-tooltip: var(--cfi-z-tooltip, 1500);\n    --cfi-ui-control-height-sm: 2rem;\n    --cfi-ui-control-height-md: 2.25rem;\n    --cfi-ui-control-height-lg: 2.75rem;\n  }\n  .cfi-ui {\n    box-sizing: border-box;\n    font-family: var(--cfi-ui-font);\n  }\n  .cfi-ui *,\n  .cfi-ui *::before,\n  .cfi-ui *::after {\n    box-sizing: border-box;\n  }\n  .cfi-ui:focus-visible,\n  .cfi-ui :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-sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n  @keyframes cfi-ui-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes cfi-ui-pulse {\n    50% {\n      opacity: 0.45;\n    }\n  }\n  @keyframes cfi-ui-fade-in {\n    from {\n      opacity: 0;\n    }\n  }\n  @keyframes cfi-ui-zoom-in {\n    from {\n      opacity: 0;\n      transform: scale(0.97);\n    }\n  }\n  @keyframes cfi-ui-slide-in-right {\n    from {\n      transform: translateX(100%);\n    }\n  }\n  @keyframes cfi-ui-slide-in-left {\n    from {\n      transform: translateX(-100%);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .cfi-ui,\n    .cfi-ui *,\n    [data-cfi-ui-portal],\n    [data-cfi-ui-portal] * {\n      animation-duration: 1ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 1ms !important;\n    }\n  }\n}\n');
+
+// src/lib/cn.ts
+function cn(...values) {
+  const out = [];
+  for (const value of values) {
+    if (!value) continue;
+    if (Array.isArray(value)) {
+      const nested = cn(...value);
+      if (nested) out.push(nested);
+    } else {
+      out.push(String(value));
+    }
+  }
+  return out.join(" ");
+}
+
+// src/Button.tsx
+import { forwardRef } from "react";
+
+// src/Button.css
+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");
+
+// src/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({
+  variant = "secondary",
+  size = "md",
+  loading = false,
+  leadingIcon,
+  trailingIcon,
+  fullWidth = false,
+  className,
+  children,
+  disabled,
+  type,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      "data-variant": variant,
+      "data-size": size,
+      "data-loading": loading || void 0,
+      className: cn("cfi-ui", "cfi-ui-btn", fullWidth && "cfi-ui-btn--full", className),
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__spinner", "aria-hidden": "true" }) : leadingIcon && /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__icon", children: leadingIcon }),
+        children != null && children !== "" && /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__label", children }),
+        trailingIcon && !loading && /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__icon", children: trailingIcon })
+      ]
+    }
+  );
+});
+var IconButton = forwardRef(function IconButton2({ icon, label, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      size: "icon",
+      "aria-label": label,
+      title: label,
+      className: cn("cfi-ui-btn--icon", className),
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: "cfi-ui-btn__icon", children: icon })
+    }
+  );
+});
+function ButtonGroup({ align = "end", className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { "data-align": align, className: cn("cfi-ui", "cfi-ui-btn-group", className), ...rest });
+}
+
+// src/Input.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/Input.css
+styleInject("@layer components {\n  :where(.cfi-ui-input, .cfi-ui-textarea) {\n    display: block;\n    width: 100%;\n    min-width: 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    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    transition: border-color var(--cfi-ui-transition-fast), background-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-input {\n    height: var(--cfi-ui-control-height-md);\n    padding-inline: 0.625rem;\n  }\n  .cfi-ui-textarea {\n    padding: 0.5rem 0.625rem;\n    line-height: var(--cfi-ui-leading-normal);\n    resize: vertical;\n    min-height: calc(var(--cfi-ui-control-height-md) * 1.5);\n  }\n  .cfi-ui-input[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-input[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-input::placeholder,\n  .cfi-ui-textarea::placeholder {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-input:hover:not(:disabled),\n  .cfi-ui-textarea:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-input:disabled,\n  .cfi-ui-textarea:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-input:read-only:not(:disabled),\n  .cfi-ui-textarea:read-only:not(:disabled) {\n    background: var(--cfi-ui-surface-sunken);\n    border-color: var(--cfi-ui-border);\n  }\n  .cfi-ui-input[data-invalid],\n  .cfi-ui-textarea[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-input[type=number],\n  .cfi-ui-input[inputmode=decimal],\n  .cfi-ui-input[inputmode=numeric] {\n    font-variant-numeric: tabular-nums;\n    text-align: right;\n  }\n  .cfi-ui-input[type=number]::-webkit-outer-spin-button,\n  .cfi-ui-input[type=number]::-webkit-inner-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n  .cfi-ui-input[type=number] {\n    appearance: textfield;\n  }\n  :where(.cfi-ui-input-wrap) {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    background: var(--cfi-ui-surface);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    transition: border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-input-wrap:hover:not([data-disabled]) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-input-wrap:focus-within {\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-input-wrap[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-input-wrap[data-disabled] {\n    background: var(--cfi-ui-surface-disabled);\n  }\n  .cfi-ui-input-wrap > .cfi-ui-input {\n    border: 0;\n    background: transparent;\n    border-radius: 0;\n    flex: 1 1 auto;\n  }\n  .cfi-ui-input-wrap > .cfi-ui-input:focus-visible {\n    outline: none;\n  }\n  .cfi-ui-input-wrap__affix {\n    display: inline-flex;\n    align-items: center;\n    flex: none;\n    padding-inline: 0.625rem;\n    color: var(--cfi-ui-content-muted);\n    font-size: var(--cfi-ui-text-sm);\n    white-space: nowrap;\n  }\n  .cfi-ui-input-wrap__affix > svg {\n    width: 1em;\n    height: 1em;\n    display: block;\n  }\n  .cfi-ui-input-wrap__affix:first-child {\n    padding-right: 0;\n  }\n  .cfi-ui-input-wrap__affix:last-child {\n    padding-left: 0;\n  }\n  .cfi-ui-input-wrap[data-size=sm] {\n    font-size: var(--cfi-ui-text-xs);\n  }\n  .cfi-ui-input-wrap[data-size=sm] > .cfi-ui-input {\n    height: var(--cfi-ui-control-height-sm);\n  }\n  .cfi-ui-input-wrap[data-size=lg] > .cfi-ui-input {\n    height: var(--cfi-ui-control-height-lg);\n  }\n}\n");
+
+// src/Input.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = forwardRef2(function Input2({ size = "md", invalid, prefix, suffix, className, disabled, ...rest }, ref) {
+  const field = /* @__PURE__ */ jsx2(
+    "input",
+    {
+      ref,
+      disabled,
+      "aria-invalid": invalid || void 0,
+      "data-size": size,
+      "data-invalid": invalid || void 0,
+      className: cn("cfi-ui", "cfi-ui-input", className),
+      ...rest
+    }
+  );
+  if (!prefix && !suffix) return field;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-size": size,
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: cn("cfi-ui", "cfi-ui-input-wrap"),
+      children: [
+        prefix && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-input-wrap__affix", children: prefix }),
+        field,
+        suffix && /* @__PURE__ */ jsx2("span", { className: "cfi-ui-input-wrap__affix", children: suffix })
+      ]
+    }
+  );
+});
+var Textarea = forwardRef2(function Textarea2({ invalid, className, rows = 3, ...rest }, ref) {
+  return /* @__PURE__ */ jsx2(
+    "textarea",
+    {
+      ref,
+      rows,
+      "aria-invalid": invalid || void 0,
+      "data-invalid": invalid || void 0,
+      className: cn("cfi-ui", "cfi-ui-textarea", className),
+      ...rest
+    }
+  );
+});
+
+// src/Field.tsx
+import { Children, cloneElement, createContext, isValidElement, useContext, useId } from "react";
+
+// src/Field.css
+styleInject('@layer components {\n  .cfi-ui-label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-label__required {\n    color: var(--cfi-ui-error);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-field__label {\n    justify-self: start;\n  }\n  .cfi-ui-field__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n    min-width: 0;\n  }\n  .cfi-ui-field__hint,\n  .cfi-ui-field__error {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-field__hint {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-field__error {\n    color: var(--cfi-ui-error-text);\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-field[data-orientation=horizontal] {\n    grid-template-columns: minmax(8rem, 12rem) 1fr;\n    align-items: start;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n    padding-top: 0.4375rem;\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-field[data-orientation=horizontal] {\n      grid-template-columns: 1fr;\n      gap: var(--cfi-ui-space-xs);\n    }\n    .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n      padding-top: 0;\n    }\n  }\n  .cfi-ui-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .cfi-ui-fieldset__legend {\n    padding: 0 0 var(--cfi-ui-space-sm);\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-fieldset__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  @media (max-width: 720px) {\n    .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body,\n    .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n      grid-template-columns: 1fr;\n    }\n  }\n}\n');
+
+// src/Field.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Label({ required, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs3("label", { className: cn("cfi-ui", "cfi-ui-label", className), ...rest, children: [
+    children,
+    required && /* @__PURE__ */ jsx3("span", { className: "cfi-ui-label__required", "aria-hidden": "true", children: "*" })
+  ] });
+}
+var FieldContext = createContext(null);
+function useFieldControl() {
+  return useContext(FieldContext);
+}
+function Field({
+  label,
+  hint,
+  error,
+  required = false,
+  orientation = "vertical",
+  className,
+  children,
+  id
+}) {
+  const generatedId = useId();
+  const controlId = id ?? `cfi-field-${generatedId}`;
+  const hintId = `${controlId}-hint`;
+  const errorId = `${controlId}-error`;
+  const invalid = error != null && error !== false && error !== "";
+  const describedBy = invalid ? errorId : hint ? hintId : void 0;
+  return /* @__PURE__ */ jsx3(FieldContext.Provider, { value: { controlId, describedBy, invalid, required }, children: /* @__PURE__ */ jsxs3("div", { "data-orientation": orientation, className: cn("cfi-ui", "cfi-ui-field", className), children: [
+    /* @__PURE__ */ jsx3(Label, { htmlFor: controlId, required, className: "cfi-ui-field__label", children: label }),
+    /* @__PURE__ */ jsxs3("div", { className: "cfi-ui-field__body", children: [
+      /* @__PURE__ */ jsx3(FieldControl, { children }),
+      invalid ? /* @__PURE__ */ jsx3("p", { id: errorId, className: "cfi-ui-field__error", role: "alert", children: error }) : hint && /* @__PURE__ */ jsx3("p", { id: hintId, className: "cfi-ui-field__hint", children: hint })
+    ] })
+  ] }) });
+}
+function FieldControl({ children }) {
+  const ctx = useContext(FieldContext);
+  if (!ctx) return /* @__PURE__ */ jsx3(Fragment, { children });
+  const only = Children.count(children) === 1 ? Children.toArray(children)[0] : null;
+  if (!only || !isValidElement(only)) return /* @__PURE__ */ jsx3(Fragment, { children });
+  const props = only.props;
+  return cloneElement(only, {
+    id: props.id ?? ctx.controlId,
+    // A control that already declares its own description keeps it — the
+    // field's id is appended rather than replacing it.
+    "aria-describedby": [props["aria-describedby"], ctx.describedBy].filter(Boolean).join(" ") || void 0,
+    "aria-invalid": ctx.invalid || props["aria-invalid"] || void 0,
+    invalid: ctx.invalid || props.invalid || void 0,
+    required: ctx.required || props.required || void 0
+  });
+}
+function Fieldset({ legend, columns = 1, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs3("fieldset", { "data-columns": columns, className: cn("cfi-ui", "cfi-ui-fieldset", className), ...rest, children: [
+    /* @__PURE__ */ jsx3("legend", { className: "cfi-ui-fieldset__legend", children: legend }),
+    /* @__PURE__ */ jsx3("div", { className: "cfi-ui-fieldset__body", children })
+  ] });
+}
+
+// src/Checkbox.tsx
+import { forwardRef as forwardRef3 } from "react";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+
+// src/Checkbox.css
+styleInject("@layer components {\n  .cfi-ui-checkbox {\n    flex: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    padding: 0;\n    background: var(--cfi-ui-input-bg);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: 4px;\n    cursor: pointer;\n    transition: background-color var(--cfi-ui-transition-fast), border-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-checkbox:hover:not(:disabled) {\n    border-color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-checkbox[data-state=checked],\n  .cfi-ui-checkbox[data-state=indeterminate] {\n    background: var(--cfi-ui-accent);\n    border-color: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-fg);\n  }\n  .cfi-ui-checkbox[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-checkbox:disabled {\n    cursor: not-allowed;\n    background: var(--cfi-ui-surface-disabled);\n    border-color: var(--cfi-ui-border);\n    opacity: 0.65;\n  }\n  .cfi-ui-checkbox__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .cfi-ui-checkbox__indicator > svg {\n    width: 0.75rem;\n    height: 0.75rem;\n    stroke-width: 3;\n    display: block;\n  }\n  .cfi-ui-checkbox-row {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--cfi-ui-space-sm);\n  }\n  .cfi-ui-checkbox-row > .cfi-ui-checkbox {\n    margin-top: 0.1875rem;\n  }\n  .cfi-ui-checkbox-row__text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-checkbox-row__label {\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n  }\n  .cfi-ui-checkbox-row__description {\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
+
+// src/Checkbox.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Checkbox = forwardRef3(
+  function Checkbox2({ label, description, invalid, className, id, ...rest }, ref) {
+    const box = /* @__PURE__ */ jsx4(
+      RadixCheckbox.Root,
+      {
+        ref,
+        id,
+        "aria-invalid": invalid || void 0,
+        "data-invalid": invalid || void 0,
+        className: cn("cfi-ui", "cfi-ui-checkbox", !label && className),
+        ...rest,
+        children: /* @__PURE__ */ jsx4(RadixCheckbox.Indicator, { className: "cfi-ui-checkbox__indicator", children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx4(Minus, {}) : /* @__PURE__ */ jsx4(Check, {}) })
+      }
+    );
+    if (!label) return box;
+    return /* @__PURE__ */ jsxs4("div", { className: cn("cfi-ui", "cfi-ui-checkbox-row", className), children: [
+      box,
+      /* @__PURE__ */ jsxs4("div", { className: "cfi-ui-checkbox-row__text", children: [
+        /* @__PURE__ */ jsx4("label", { htmlFor: id, className: "cfi-ui-checkbox-row__label", children: label }),
+        description && /* @__PURE__ */ jsx4("span", { className: "cfi-ui-checkbox-row__description", children: description })
+      ] })
+    ] });
+  }
+);
+
+// src/Switch.tsx
+import { forwardRef as forwardRef4 } from "react";
+import * as RadixSwitch from "@radix-ui/react-switch";
+
+// src/Switch.css
+styleInject("@layer components {\n  .cfi-ui-switch {\n    flex: none;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    width: 2rem;\n    height: 1.125rem;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-switch-bg);\n    cursor: pointer;\n    transition: background-color var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-switch[data-state=checked] {\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-switch:disabled {\n    cursor: not-allowed;\n    opacity: 0.55;\n  }\n  .cfi-ui-switch__thumb {\n    display: block;\n    width: 0.875rem;\n    height: 0.875rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: #ffffff;\n    box-shadow: var(--cfi-ui-shadow-sm);\n    transform: translateX(0.125rem);\n    transition: transform var(--cfi-ui-transition-base);\n    will-change: transform;\n  }\n  .cfi-ui-switch__thumb[data-state=checked] {\n    transform: translateX(1rem);\n  }\n  .cfi-ui-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-switch-row[data-label-position=end] .cfi-ui-switch-row__text {\n    flex: 1 1 auto;\n  }\n  .cfi-ui-switch-row__text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-switch-row__label {\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n  }\n  .cfi-ui-switch-row__description {\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
+
+// src/Switch.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Switch = forwardRef4(
+  function Switch2({ label, description, labelPosition = "end", className, id, ...rest }, ref) {
+    const control = /* @__PURE__ */ jsx5(
+      RadixSwitch.Root,
+      {
+        ref,
+        id,
+        className: cn("cfi-ui", "cfi-ui-switch", !label && className),
+        ...rest,
+        children: /* @__PURE__ */ jsx5(RadixSwitch.Thumb, { className: "cfi-ui-switch__thumb" })
+      }
+    );
+    if (!label) return control;
+    return /* @__PURE__ */ jsxs5("div", { "data-label-position": labelPosition, className: cn("cfi-ui", "cfi-ui-switch-row", className), children: [
+      labelPosition === "start" && control,
+      /* @__PURE__ */ jsxs5("div", { className: "cfi-ui-switch-row__text", children: [
+        /* @__PURE__ */ jsx5("label", { htmlFor: id, className: "cfi-ui-switch-row__label", children: label }),
+        description && /* @__PURE__ */ jsx5("span", { className: "cfi-ui-switch-row__description", children: description })
+      ] }),
+      labelPosition === "end" && control
+    ] });
+  }
+);
+
+// src/Slider.tsx
+import { forwardRef as forwardRef5 } from "react";
+import * as RadixSlider from "@radix-ui/react-slider";
+
+// src/Slider.css
+styleInject("@layer components {\n  .cfi-ui-slider-wrap {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-md);\n    width: 100%;\n  }\n  .cfi-ui-slider {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 1 1 auto;\n    height: 1.25rem;\n    touch-action: none;\n    user-select: none;\n  }\n  .cfi-ui-slider[data-orientation=vertical] {\n    flex-direction: column;\n    width: 1.25rem;\n    height: 8rem;\n  }\n  .cfi-ui-slider__track {\n    position: relative;\n    flex-grow: 1;\n    height: 0.25rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-slider[data-orientation=vertical] .cfi-ui-slider__track {\n    width: 0.25rem;\n    height: auto;\n  }\n  .cfi-ui-slider__range {\n    position: absolute;\n    height: 100%;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-slider[data-orientation=vertical] .cfi-ui-slider__range {\n    width: 100%;\n    height: auto;\n  }\n  .cfi-ui-slider__thumb {\n    display: block;\n    width: 1rem;\n    height: 1rem;\n    border: 1px solid var(--cfi-ui-accent);\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface);\n    box-shadow: var(--cfi-ui-shadow-sm);\n    cursor: grab;\n  }\n  .cfi-ui-slider__thumb:active {\n    cursor: grabbing;\n  }\n  .cfi-ui-slider[data-disabled] {\n    opacity: 0.55;\n  }\n  .cfi-ui-slider[data-disabled] .cfi-ui-slider__thumb {\n    cursor: not-allowed;\n  }\n  .cfi-ui-slider__value {\n    flex: none;\n    min-width: 3.5ch;\n    font-size: var(--cfi-ui-text-sm);\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content-muted);\n    text-align: right;\n  }\n}\n");
+
+// src/Slider.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Slider = forwardRef5(
+  function Slider2({ showValue = false, formatValue, className, ...rest }, ref) {
+    const values = rest.value ?? rest.defaultValue ?? [rest.min ?? 0];
+    const format = formatValue ?? ((v) => String(v));
+    return /* @__PURE__ */ jsxs6("div", { className: cn("cfi-ui", "cfi-ui-slider-wrap", className), children: [
+      /* @__PURE__ */ jsxs6(RadixSlider.Root, { ref, className: "cfi-ui-slider", ...rest, children: [
+        /* @__PURE__ */ jsx6(RadixSlider.Track, { className: "cfi-ui-slider__track", children: /* @__PURE__ */ jsx6(RadixSlider.Range, { className: "cfi-ui-slider__range" }) }),
+        values.map((_, i) => /* @__PURE__ */ jsx6(RadixSlider.Thumb, { className: "cfi-ui-slider__thumb" }, i))
+      ] }),
+      showValue && /* @__PURE__ */ jsx6("output", { className: "cfi-ui-slider__value", children: values.map(format).join(" \u2013 ") })
+    ] });
+  }
+);
+
+// src/Dialog.tsx
+import { forwardRef as forwardRef6 } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+// src/Dialog.css
+styleInject("@layer components {\n  .cfi-ui-dialog__overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--cfi-ui-z-overlay);\n    background: var(--cfi-ui-overlay);\n    animation: cfi-ui-fade-in var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog {\n    position: fixed;\n    z-index: var(--cfi-ui-z-modal);\n    display: flex;\n    flex-direction: column;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-dialog[data-side=center] {\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: calc(100vw - 2 * var(--cfi-ui-space-md));\n    max-height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n    border-radius: var(--cfi-ui-radius-lg);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog[data-side=center][data-size=sm] {\n    max-width: 26rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=md] {\n    max-width: 34rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=lg] {\n    max-width: 48rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=xl] {\n    max-width: 64rem;\n  }\n  .cfi-ui-dialog[data-side=center][data-size=full] {\n    max-width: none;\n    width: calc(100vw - 2 * var(--cfi-ui-space-xl));\n    height: calc(100vh - 2 * var(--cfi-ui-space-xl));\n    max-height: none;\n  }\n  .cfi-ui-dialog[data-side=right],\n  .cfi-ui-dialog[data-side=left] {\n    top: 0;\n    bottom: 0;\n    height: 100vh;\n    max-height: 100vh;\n    width: calc(100vw - var(--cfi-ui-space-xl));\n    border-radius: 0;\n    border: 0;\n  }\n  .cfi-ui-dialog[data-side=right] {\n    right: 0;\n    border-right: 0;\n    animation: cfi-ui-slide-in-right var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog[data-side=left] {\n    left: 0;\n    border-left: 0;\n    animation: cfi-ui-slide-in-left var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-dialog[data-side=right][data-size=sm],\n  .cfi-ui-dialog[data-side=left][data-size=sm] {\n    max-width: 22rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=md],\n  .cfi-ui-dialog[data-side=left][data-size=md] {\n    max-width: 24rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=lg],\n  .cfi-ui-dialog[data-side=left][data-size=lg] {\n    max-width: 42rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=xl],\n  .cfi-ui-dialog[data-side=left][data-size=xl] {\n    max-width: 56rem;\n  }\n  .cfi-ui-dialog[data-side=right][data-size=full],\n  .cfi-ui-dialog[data-side=left][data-size=full] {\n    max-width: none;\n  }\n  .cfi-ui-dialog__header {\n    flex: none;\n    display: grid;\n    gap: var(--cfi-ui-space-xs);\n    padding: var(--cfi-ui-space-md) 3rem var(--cfi-ui-space-md) var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-dialog__title {\n    margin: 0;\n    font-size: var(--cfi-ui-text-lg);\n    font-weight: var(--cfi-ui-weight-semibold);\n    line-height: var(--cfi-ui-leading-tight);\n    letter-spacing: var(--cfi-letter-spacing-tight, -0.015em);\n    color: var(--cfi-ui-content);\n    text-wrap: balance;\n  }\n  .cfi-ui-sheet__title {\n    font-size: var(--cfi-ui-text-base);\n  }\n  .cfi-ui-dialog__description {\n    margin: 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  :where(.cfi-ui-dialog__body) {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow-y: auto;\n    padding: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-dialog__footer {\n    flex: none;\n    padding: var(--cfi-ui-space-md);\n    border-top: 1px solid var(--cfi-ui-border);\n    background: var(--cfi-ui-surface-sunken);\n  }\n  .cfi-ui-dialog[data-side=center] .cfi-ui-dialog__footer {\n    border-bottom-left-radius: var(--cfi-ui-radius-lg);\n    border-bottom-right-radius: var(--cfi-ui-radius-lg);\n  }\n  .cfi-ui-dialog__close {\n    position: absolute;\n    top: var(--cfi-ui-space-sm);\n    right: var(--cfi-ui-space-sm);\n  }\n  .cfi-ui-dialog:not(:has(.cfi-ui-dialog__header)) .cfi-ui-dialog__body {\n    padding-right: 3rem;\n  }\n}\n");
+
+// src/Dialog.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var Dialog = RadixDialog.Root;
+var DialogRoot = RadixDialog.Root;
+var DialogTrigger = RadixDialog.Trigger;
+var DialogClose = RadixDialog.Close;
+var DialogPortal = RadixDialog.Portal;
+var DialogContent = forwardRef6(
+  function DialogContent2({ size = "md", side = "center", hideClose = false, closeLabel = "Close", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs7(RadixDialog.Portal, { children: [
+      /* @__PURE__ */ jsx7(RadixDialog.Overlay, { className: "cfi-ui-dialog__overlay", "data-cfi-ui-portal": "" }),
+      /* @__PURE__ */ jsxs7(
+        RadixDialog.Content,
+        {
+          ref,
+          "data-size": size,
+          "data-side": side,
+          "data-cfi-ui-portal": "",
+          className: cn("cfi-ui", "cfi-ui-dialog", className),
+          ...rest,
+          children: [
+            children,
+            !hideClose && /* @__PURE__ */ jsx7(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+              IconButton,
+              {
+                variant: "ghost",
+                size: "sm",
+                icon: /* @__PURE__ */ jsx7(X, {}),
+                label: closeLabel,
+                className: "cfi-ui-dialog__close"
+              }
+            ) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+function DialogHeader({ className, ...rest }) {
+  return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__header", className), ...rest });
+}
+var DialogTitle = forwardRef6(function DialogTitle2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx7(RadixDialog.Title, { ref, className: cn("cfi-ui-dialog__title", className), ...rest });
+});
+var DialogDescription = forwardRef6(function DialogDescription2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx7(RadixDialog.Description, { ref, className: cn("cfi-ui-dialog__description", className), ...rest });
+});
+function DialogBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__body", className), ...rest });
+}
+function DialogFooter({ className, ...rest }) {
+  return /* @__PURE__ */ jsx7("div", { className: cn("cfi-ui-dialog__footer", className), ...rest });
+}
+function Modal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  size = "md",
+  side = "center",
+  footer,
+  hideClose,
+  dismissible = true,
+  className,
+  children
+}) {
+  const block = dismissible ? void 0 : (e) => e.preventDefault();
+  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(
+    DialogContent,
+    {
+      size,
+      side,
+      hideClose,
+      className,
+      onEscapeKeyDown: block,
+      onPointerDownOutside: block,
+      onInteractOutside: block,
+      children: [
+        /* @__PURE__ */ jsxs7(DialogHeader, { children: [
+          /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx7(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx7(DialogBody, { children }),
+        footer && /* @__PURE__ */ jsx7(DialogFooter, { children: footer })
+      ]
+    }
+  ) });
+}
+function SideModal({ side = "right", size = "md", ...rest }) {
+  return /* @__PURE__ */ jsx7(Modal, { side, size, ...rest });
+}
+var Sheet = RadixDialog.Root;
+var SheetTrigger = RadixDialog.Trigger;
+var SheetClose = RadixDialog.Close;
+var SheetPortal = RadixDialog.Portal;
+var SheetContent = forwardRef6(
+  function SheetContent2({ side = "right", ...rest }, ref) {
+    return /* @__PURE__ */ jsx7(DialogContent, { ref, side, ...rest });
+  }
+);
+var SheetHeader = DialogHeader;
+var SheetTitle = forwardRef6(function SheetTitle2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx7(DialogTitle, { ref, className: cn("cfi-ui-sheet__title", className), ...rest });
+});
+var SheetDescription = DialogDescription;
+var SheetBody = DialogBody;
+var SheetFooter = DialogFooter;
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = true,
+  loading = false,
+  onConfirm,
+  children
+}) {
+  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs7(
+    DialogContent,
+    {
+      size: "sm",
+      role: "alertdialog",
+      hideClose: true,
+      onPointerDownOutside: (e) => e.preventDefault(),
+      onInteractOutside: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsxs7(DialogHeader, { children: [
+          /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+          description && /* @__PURE__ */ jsx7(DialogDescription, { children: description })
+        ] }),
+        children && /* @__PURE__ */ jsx7(DialogBody, { children }),
+        /* @__PURE__ */ jsx7(DialogFooter, { children: /* @__PURE__ */ jsxs7(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { autoFocus: true, disabled: loading, children: cancelLabel }) }),
+          /* @__PURE__ */ jsx7(
+            Button,
+            {
+              variant: destructive ? "danger" : "primary",
+              loading,
+              onClick: onConfirm,
+              children: confirmLabel
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+}
+
+// src/Popover.tsx
+import { forwardRef as forwardRef7 } from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+
+// src/Floating.css
+styleInject("@layer components {\n  .cfi-ui-floating {\n    z-index: var(--cfi-ui-z-popover);\n    background: var(--cfi-ui-surface-raised);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-md);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n    max-height: var(--radix-popper-available-height, none);\n    overflow: hidden auto;\n  }\n  .cfi-ui-floating__arrow {\n    fill: var(--cfi-ui-surface-raised);\n    filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n  }\n  .cfi-ui-popover {\n    padding: var(--cfi-ui-space-md);\n    min-width: 12rem;\n  }\n  .cfi-ui-popover[data-flush] {\n    padding: 0;\n  }\n  .cfi-ui-menu {\n    z-index: var(--cfi-ui-z-dropdown);\n    min-width: 11rem;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-menu__item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-menu__item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-menu__item[data-variant=danger] {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n    background: var(--cfi-ui-error-soft);\n  }\n  .cfi-ui-menu__item > svg,\n  .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-menu__icon {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n    color: inherit;\n  }\n  .cfi-ui-menu__shortcut {\n    margin-left: auto;\n    padding-left: var(--cfi-ui-space-md);\n    font-family: var(--cfi-ui-font-mono);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-menu__label {\n    padding: 0.375rem 0.5rem 0.25rem;\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-menu__separator {\n    height: 1px;\n    margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n    background: var(--cfi-ui-border);\n  }\n  .cfi-ui-select-content {\n    z-index: var(--cfi-ui-z-dropdown);\n    padding: var(--cfi-ui-space-xs);\n    min-width: var(--radix-select-trigger-width, 11rem);\n  }\n  .cfi-ui-select-viewport {\n    max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n  }\n  .cfi-ui-select-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-select-item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-select-item[data-state=checked] {\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-select-item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select-item__indicator {\n    display: inline-flex;\n    flex: none;\n    width: 0.875rem;\n    color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-select-item__indicator > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-select-empty {\n    padding: var(--cfi-ui-space-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n  .cfi-ui-tooltip {\n    z-index: var(--cfi-ui-z-tooltip);\n    max-width: 20rem;\n    padding: 0.3125rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-content);\n    color: var(--cfi-ui-surface);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    box-shadow: var(--cfi-ui-shadow-md);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-tooltip__arrow {\n    fill: var(--cfi-ui-content);\n  }\n}\n");
+
+// src/Popover.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var PopoverRoot = RadixPopover.Root;
+var PopoverTrigger = RadixPopover.Trigger;
+var PopoverAnchor = RadixPopover.Anchor;
+var PopoverClose = RadixPopover.Close;
+var PopoverContent = forwardRef7(function PopoverContent2({ showArrow = false, flush = false, className, children, sideOffset = 6, collisionPadding = 8, ...rest }, ref) {
+  return /* @__PURE__ */ jsx8(RadixPopover.Portal, { children: /* @__PURE__ */ jsxs8(
+    RadixPopover.Content,
+    {
+      ref,
+      sideOffset,
+      collisionPadding,
+      "data-cfi-ui-portal": "",
+      "data-flush": flush || void 0,
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-popover", className),
+      ...rest,
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ jsx8(RadixPopover.Arrow, { className: "cfi-ui-floating__arrow", width: 11, height: 5 })
+      ]
+    }
+  ) });
+});
+function Popover({ trigger, open, onOpenChange, defaultOpen, modal, children, ...content }) {
+  return /* @__PURE__ */ jsxs8(PopoverRoot, { open, onOpenChange, defaultOpen, modal, children: [
+    /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx8(PopoverContent, { ...content, children })
+  ] });
+}
+
+// src/Menu.tsx
+import { Fragment as Fragment2, forwardRef as forwardRef8 } from "react";
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var MenuRoot = RadixMenu.Root;
+var MenuTrigger = RadixMenu.Trigger;
+var MenuGroup = RadixMenu.Group;
+var MenuSub = RadixMenu.Sub;
+var MenuRadioGroup = RadixMenu.RadioGroup;
+var MenuContent = forwardRef8(function MenuContent2({ className, sideOffset = 4, collisionPadding = 8, ...rest }, ref) {
+  return /* @__PURE__ */ jsx9(RadixMenu.Portal, { children: /* @__PURE__ */ jsx9(
+    RadixMenu.Content,
+    {
+      ref,
+      sideOffset,
+      collisionPadding,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
+      ...rest
+    }
+  ) });
+});
+var MenuItem = forwardRef8(
+  function MenuItem2({ icon, shortcut, variant = "default", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs9(
+      RadixMenu.Item,
+      {
+        ref,
+        "data-variant": variant,
+        className: cn("cfi-ui-menu__item", className),
+        ...rest,
+        children: [
+          icon && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-menu__icon", children: icon }),
+          /* @__PURE__ */ jsx9("span", { children }),
+          shortcut && /* @__PURE__ */ jsx9("span", { className: "cfi-ui-menu__shortcut", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+var MenuCheckboxItem = forwardRef8(function MenuCheckboxItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs9(RadixMenu.CheckboxItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
+    /* @__PURE__ */ jsx9("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx9(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check2, {}) }) }),
+    /* @__PURE__ */ jsx9("span", { children })
+  ] });
+});
+var MenuRadioItem = forwardRef8(function MenuRadioItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs9(RadixMenu.RadioItem, { ref, className: cn("cfi-ui-menu__item", className), ...rest, children: [
+    /* @__PURE__ */ jsx9("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx9(RadixMenu.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check2, {}) }) }),
+    /* @__PURE__ */ jsx9("span", { children })
+  ] });
+});
+function MenuLabel({ className, ...rest }) {
+  return /* @__PURE__ */ jsx9(RadixMenu.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
+}
+function MenuSeparator({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx9(RadixMenu.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
+}
+var MenuSubTrigger = forwardRef8(function MenuSubTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx9(RadixMenu.SubTrigger, { ref, className: cn("cfi-ui-menu__item", className), ...rest });
+});
+var MenuSubContent = forwardRef8(function MenuSubContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx9(RadixMenu.Portal, { children: /* @__PURE__ */ jsx9(
+    RadixMenu.SubContent,
+    {
+      ref,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-menu", className),
+      ...rest
+    }
+  ) });
+});
+function Menu({ trigger, items, align = "end", side = "bottom", className }) {
+  return /* @__PURE__ */ jsxs9(MenuRoot, { children: [
+    /* @__PURE__ */ jsx9(MenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx9(MenuContent, { align, side, className, children: items.map((item) => /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      item.separatorBefore && /* @__PURE__ */ jsx9(MenuSeparator, {}),
+      /* @__PURE__ */ jsx9(
+        MenuItem,
+        {
+          icon: item.icon,
+          shortcut: item.shortcut,
+          variant: item.variant,
+          disabled: item.disabled,
+          onSelect: item.onSelect,
+          children: item.label
+        }
+      )
+    ] }, item.id)) })
+  ] });
+}
+
+// src/Select.tsx
+import { forwardRef as forwardRef9 } from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
+
+// src/Select.css
+styleInject("@layer components {\n  :where(.cfi-ui-select) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-sm);\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-select--full {\n    width: 100%;\n  }\n  .cfi-ui-select:hover:not(:disabled) {\n    border-color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-select:disabled {\n    background: var(--cfi-ui-surface-disabled);\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select[data-invalid] {\n    border-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-select[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-select[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-select[data-placeholder] .cfi-ui-select__value {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-select__value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: left;\n  }\n  .cfi-ui-select__chevron {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-select__chevron > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    display: block;\n  }\n  .cfi-ui-select-scroll {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 1.25rem;\n    color: var(--cfi-ui-content-muted);\n    cursor: default;\n  }\n  .cfi-ui-select-scroll > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n}\n");
+
+// src/Select.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var SelectRoot = RadixSelect.Root;
+var SelectValue = RadixSelect.Value;
+var SelectGroup = RadixSelect.Group;
+var SelectTrigger = forwardRef9(
+  function SelectTrigger2({ size = "md", invalid, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs10(
+      RadixSelect.Trigger,
+      {
+        ref,
+        "data-size": size,
+        "data-invalid": invalid || void 0,
+        "aria-invalid": invalid || void 0,
+        className: cn("cfi-ui", "cfi-ui-select", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx10("span", { className: "cfi-ui-select__value", children }),
+          /* @__PURE__ */ jsx10(RadixSelect.Icon, { className: "cfi-ui-select__chevron", children: /* @__PURE__ */ jsx10(ChevronDown, {}) })
+        ]
+      }
+    );
+  }
+);
+var SelectContent = forwardRef9(function SelectContent2({ className, children, position = "popper", sideOffset = 4, ...rest }, ref) {
+  return /* @__PURE__ */ jsx10(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs10(
+    RadixSelect.Content,
+    {
+      ref,
+      position,
+      sideOffset,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-floating", "cfi-ui-select-content", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx10(RadixSelect.ScrollUpButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx10(ChevronUp, {}) }),
+        /* @__PURE__ */ jsx10(RadixSelect.Viewport, { className: "cfi-ui-select-viewport", children }),
+        /* @__PURE__ */ jsx10(RadixSelect.ScrollDownButton, { className: "cfi-ui-select-scroll", children: /* @__PURE__ */ jsx10(ChevronDown, {}) })
+      ]
+    }
+  ) });
+});
+var SelectItem = forwardRef9(function SelectItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs10(RadixSelect.Item, { ref, className: cn("cfi-ui-select-item", className), ...rest, children: [
+    /* @__PURE__ */ jsx10("span", { className: "cfi-ui-select-item__indicator", children: /* @__PURE__ */ jsx10(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx10(Check3, {}) }) }),
+    /* @__PURE__ */ jsx10(RadixSelect.ItemText, { children })
+  ] });
+});
+function SelectLabel({ className, ...rest }) {
+  return /* @__PURE__ */ jsx10(RadixSelect.Label, { className: cn("cfi-ui-menu__label", className), ...rest });
+}
+function SelectSeparator({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx10(RadixSelect.Separator, { className: cn("cfi-ui-menu__separator", className), ...rest });
+}
+function Select({
+  options,
+  value,
+  onValueChange,
+  defaultValue,
+  placeholder = "Select...",
+  size = "md",
+  invalid,
+  disabled,
+  required,
+  name,
+  id,
+  className,
+  fullWidth = true,
+  emptyLabel = "No options",
+  onOpenChange,
+  onBlur,
+  ...aria
+}) {
+  const groups = [];
+  for (const option of options) {
+    const existing = groups.find((g) => g.name === option.group);
+    if (existing) existing.options.push(option);
+    else groups.push({ name: option.group, options: [option] });
+  }
+  return /* @__PURE__ */ jsxs10(
+    SelectRoot,
+    {
+      value,
+      onValueChange,
+      defaultValue,
+      disabled,
+      required,
+      name,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx10(
+          SelectTrigger,
+          {
+            id,
+            size,
+            invalid,
+            className: cn(fullWidth && "cfi-ui-select--full", className),
+            onBlur,
+            ...aria,
+            children: /* @__PURE__ */ jsx10(SelectValue, { placeholder })
+          }
+        ),
+        /* @__PURE__ */ jsxs10(SelectContent, { children: [
+          groups.map(
+            (group, i) => group.name ? /* @__PURE__ */ jsxs10(SelectGroup, { children: [
+              i > 0 && /* @__PURE__ */ jsx10(SelectSeparator, {}),
+              /* @__PURE__ */ jsx10(SelectLabel, { children: group.name }),
+              group.options.map((o) => /* @__PURE__ */ jsx10(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+            ] }, group.name) : group.options.map((o) => /* @__PURE__ */ jsx10(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+          ),
+          options.length === 0 && /* @__PURE__ */ jsx10("p", { className: "cfi-ui-select-empty", children: emptyLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/Combobox.tsx
+import { useEffect, useId as useId2, useMemo, useRef, useState } from "react";
+import { Check as Check4, ChevronDown as ChevronDown2, Search, X as X2 } from "lucide-react";
+
+// src/Combobox.css
+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");
+
+// src/Combobox.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  onSearchChange,
+  loading = false,
+  emptyLabel = "No matches",
+  loadingLabel = "Searching...",
+  clearable = false,
+  size = "md",
+  invalid,
+  disabled,
+  id,
+  name,
+  className,
+  style,
+  fullWidth = true,
+  ...aria
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [highlighted, setHighlighted] = useState(0);
+  const listId = useId2();
+  const searchRef = useRef(null);
+  const listRef = useRef(null);
+  const filtered = useMemo(() => {
+    if (onSearchChange) return options;
+    const q = search.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || (o.hint?.toLowerCase().includes(q) ?? false)
+    );
+  }, [options, search, onSearchChange]);
+  const selectable = filtered.filter((o) => !o.disabled);
+  const selected = options.find((o) => o.value === value) ?? null;
+  useEffect(() => {
+    setHighlighted((h) => selectable.length === 0 ? 0 : Math.min(h, selectable.length - 1));
+  }, [selectable.length]);
+  useEffect(() => {
+    if (!open) {
+      setSearch("");
+      setHighlighted(0);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const el = listRef.current?.querySelector('[data-highlighted="true"]');
+    el?.scrollIntoView({ block: "nearest" });
+  }, [highlighted, open]);
+  function commit(option) {
+    onValueChange(option.value);
+    setOpen(false);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlighted((h) => Math.min(h + 1, Math.max(selectable.length - 1, 0)));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlighted((h) => Math.max(h - 1, 0));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setHighlighted(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setHighlighted(Math.max(selectable.length - 1, 0));
+    } else if (e.key === "Enter") {
+      const option = selectable[highlighted];
+      if (option) {
+        e.preventDefault();
+        commit(option);
+      }
+    }
+  }
+  function handleSearch(next) {
+    setSearch(next);
+    setHighlighted(0);
+    onSearchChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs11(PopoverRoot, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx11(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        style,
+        className: cn("cfi-ui", "cfi-ui-combobox", fullWidth && "cfi-ui-combobox--full", className),
+        children: [
+          /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              type: "button",
+              id,
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-controls": open ? listId : void 0,
+              "aria-invalid": invalid || void 0,
+              disabled,
+              "data-size": size,
+              "data-invalid": invalid || void 0,
+              "data-placeholder": selected ? void 0 : "",
+              className: "cfi-ui-combobox__trigger",
+              onClick: () => setOpen((o) => !o),
+              ...aria,
+              children: [
+                /* @__PURE__ */ jsx11("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
+                /* @__PURE__ */ jsx11("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx11(ChevronDown2, {}) })
+              ]
+            }
+          ),
+          clearable && selected && !disabled && /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              className: "cfi-ui-combobox__clear",
+              "aria-label": `Clear ${selected.label}`,
+              title: "Clear",
+              onClick: () => onValueChange(null),
+              children: /* @__PURE__ */ jsx11(X2, { "aria-hidden": "true" })
+            }
+          ),
+          name && /* @__PURE__ */ jsx11("input", { type: "hidden", name, value: value ?? "" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs11(
+      PopoverContent,
+      {
+        flush: true,
+        align: "start",
+        className: "cfi-ui-combobox__panel",
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          searchRef.current?.focus();
+        },
+        style: { width: "var(--radix-popover-trigger-width)" },
+        children: [
+          /* @__PURE__ */ jsxs11("div", { className: "cfi-ui-combobox__search", children: [
+            /* @__PURE__ */ jsx11(Search, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx11(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                role: "searchbox",
+                value: search,
+                placeholder: searchPlaceholder,
+                "aria-controls": listId,
+                "aria-activedescendant": selectable[highlighted] ? `${listId}-${selectable[highlighted].value}` : void 0,
+                autoComplete: "off",
+                onChange: (e) => handleSearch(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              ref: listRef,
+              id: listId,
+              role: "listbox",
+              "aria-busy": loading || void 0,
+              className: "cfi-ui-combobox__list",
+              children: loading ? /* @__PURE__ */ jsx11("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx11("p", { className: "cfi-ui-select-empty", children: emptyLabel }) : filtered.map((option) => {
+                const index = selectable.indexOf(option);
+                const isHighlighted = index !== -1 && index === highlighted;
+                return /* @__PURE__ */ jsxs11(
+                  "div",
+                  {
+                    id: `${listId}-${option.value}`,
+                    role: "option",
+                    "aria-selected": option.value === value,
+                    "aria-disabled": option.disabled || void 0,
+                    "data-highlighted": isHighlighted || void 0,
+                    "data-disabled": option.disabled || void 0,
+                    className: "cfi-ui-select-item cfi-ui-combobox__option",
+                    onClick: () => !option.disabled && commit(option),
+                    onPointerMove: () => index !== -1 && setHighlighted(index),
+                    children: [
+                      /* @__PURE__ */ jsx11("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx11(Check4, { "aria-hidden": "true" }) }),
+                      /* @__PURE__ */ jsxs11("span", { className: "cfi-ui-combobox__option-text", children: [
+                        /* @__PURE__ */ jsx11("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
+                        option.hint && /* @__PURE__ */ jsx11("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
+                      ] })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/Tooltip.tsx
+import { forwardRef as forwardRef10 } from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var TooltipProvider = RadixTooltip.Provider;
+var TooltipRoot = RadixTooltip.Root;
+var TooltipTrigger = RadixTooltip.Trigger;
+var TooltipContent = forwardRef10(function TooltipContent2({ className, children, sideOffset = 5, ...rest }, ref) {
+  return /* @__PURE__ */ jsx12(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs12(
+    RadixTooltip.Content,
+    {
+      ref,
+      sideOffset,
+      collisionPadding: 8,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-tooltip", className),
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx12(RadixTooltip.Arrow, { className: "cfi-ui-tooltip__arrow", width: 10, height: 4 })
+      ]
+    }
+  ) });
+});
+function Tooltip({ content, side = "top", align = "center", delay = 300, disabled, children }) {
+  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx12(Fragment3, { children });
+  return /* @__PURE__ */ jsx12(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs12(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx12(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx12(TooltipContent, { side, align, children: content })
+  ] }) });
+}
+
+// src/Toast.tsx
+import { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { AlertTriangle, CheckCircle2, Info, X as X3, XCircle } from "lucide-react";
+
+// src/Toast.css
+styleInject("@layer components {\n  .cfi-ui-toast-viewport {\n    position: fixed;\n    z-index: var(--cfi-ui-z-toast);\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-sm);\n    width: min(24rem, calc(100vw - 2 * var(--cfi-ui-space-md)));\n    pointer-events: none;\n  }\n  .cfi-ui-toast-viewport[data-position=bottom-right] {\n    right: var(--cfi-ui-space-md);\n    bottom: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-toast-viewport[data-position=top-right] {\n    right: var(--cfi-ui-space-md);\n    top: calc(var(--cfi-shell-header-height, 48px) + var(--cfi-ui-space-md));\n    flex-direction: column-reverse;\n  }\n  .cfi-ui-toast-viewport[data-position=bottom-center] {\n    left: 50%;\n    bottom: var(--cfi-ui-space-md);\n    transform: translateX(-50%);\n  }\n  .cfi-ui-toast-viewport[data-position=top-center] {\n    left: 50%;\n    top: calc(var(--cfi-shell-header-height, 48px) + var(--cfi-ui-space-md));\n    transform: translateX(-50%);\n    flex-direction: column-reverse;\n  }\n  .cfi-ui-toast {\n    pointer-events: auto;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--cfi-ui-space-sm);\n    align-items: start;\n    padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-sm) var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n    background: var(--cfi-ui-surface-raised);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-left: 3px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-base);\n  }\n  .cfi-ui-toast[data-tone=success] {\n    border-left-color: var(--cfi-ui-success);\n  }\n  .cfi-ui-toast[data-tone=warning] {\n    border-left-color: var(--cfi-ui-warning);\n  }\n  .cfi-ui-toast[data-tone=error] {\n    border-left-color: var(--cfi-ui-error);\n  }\n  .cfi-ui-toast[data-tone=info] {\n    border-left-color: var(--cfi-ui-info);\n  }\n  .cfi-ui-toast__icon {\n    display: inline-flex;\n    flex: none;\n    padding-top: 0.0625rem;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-toast[data-tone=success] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-toast[data-tone=warning] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-toast[data-tone=error] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-toast[data-tone=info] .cfi-ui-toast__icon {\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-toast__icon > svg {\n    width: 1rem;\n    height: 1rem;\n    display: block;\n  }\n  .cfi-ui-toast__text {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-toast__title {\n    margin: 0;\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-toast__description {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n    overflow-wrap: anywhere;\n  }\n  .cfi-ui-toast__action {\n    justify-self: start;\n    margin-top: var(--cfi-ui-space-xs);\n    padding: 0;\n    border: 0;\n    background: none;\n    color: var(--cfi-ui-content-link);\n    font-family: inherit;\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n  }\n  .cfi-ui-toast__close {\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
+
+// src/Toast.tsx
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var ToastContext = createContext2(null);
+function useToast() {
+  const api = useContext2(ToastContext);
+  if (!api) throw new Error("useToast must be used inside a <ToastProvider>");
+  return api;
+}
+function ToastProvider({
+  children,
+  defaultDuration = 4500,
+  max = 4,
+  position = "bottom-right"
+}) {
+  const [items, setItems] = useState2([]);
+  const nextId = useRef2(1);
+  const timers = useRef2(/* @__PURE__ */ new Map());
+  const dismiss = useCallback((id) => {
+    const timer = timers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
+    setItems((current) => current.filter((t) => t.id !== id));
+  }, []);
+  const toast = useCallback(
+    (options) => {
+      const id = nextId.current++;
+      const tone = options.tone ?? "neutral";
+      const duration = options.duration === void 0 ? tone === "error" ? null : defaultDuration : options.duration;
+      setItems((current) => [...current, { ...options, tone, duration, id }].slice(-max));
+      if (duration != null) {
+        timers.current.set(
+          id,
+          setTimeout(() => dismiss(id), duration)
+        );
+      }
+      return id;
+    },
+    [defaultDuration, dismiss, max]
+  );
+  useEffect2(() => {
+    const pending = timers.current;
+    return () => {
+      pending.forEach(clearTimeout);
+      pending.clear();
+    };
+  }, []);
+  const api = useMemo2(
+    () => ({
+      toast,
+      dismiss,
+      success: (title, description) => toast({ title, description, tone: "success" }),
+      error: (title, description) => toast({ title, description, tone: "error" }),
+      warning: (title, description) => toast({ title, description, tone: "warning" }),
+      info: (title, description) => toast({ title, description, tone: "info" })
+    }),
+    [toast, dismiss]
+  );
+  return /* @__PURE__ */ jsxs13(ToastContext.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx13(ToastViewport, { items, onDismiss: dismiss, position })
+  ] });
+}
+var TONE_ICON = {
+  neutral: /* @__PURE__ */ jsx13(Info, {}),
+  info: /* @__PURE__ */ jsx13(Info, {}),
+  success: /* @__PURE__ */ jsx13(CheckCircle2, {}),
+  warning: /* @__PURE__ */ jsx13(AlertTriangle, {}),
+  error: /* @__PURE__ */ jsx13(XCircle, {})
+};
+function ToastViewport({
+  items,
+  onDismiss,
+  position
+}) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      role: "region",
+      "aria-live": "polite",
+      "aria-label": "Notifications",
+      "data-position": position,
+      "data-cfi-ui-portal": "",
+      className: cn("cfi-ui", "cfi-ui-toast-viewport"),
+      children: items.map((item) => /* @__PURE__ */ jsxs13("div", { "data-tone": item.tone, className: "cfi-ui-toast", children: [
+        /* @__PURE__ */ jsx13("span", { className: "cfi-ui-toast__icon", "aria-hidden": "true", children: TONE_ICON[item.tone ?? "neutral"] }),
+        /* @__PURE__ */ jsxs13("div", { className: "cfi-ui-toast__text", children: [
+          /* @__PURE__ */ jsx13("p", { className: "cfi-ui-toast__title", children: item.title }),
+          item.description && /* @__PURE__ */ jsx13("p", { className: "cfi-ui-toast__description", children: item.description }),
+          item.action && /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              className: "cfi-ui-toast__action",
+              onClick: () => {
+                item.action?.onClick();
+                onDismiss(item.id);
+              },
+              children: item.action.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            icon: /* @__PURE__ */ jsx13(X3, {}),
+            label: "Dismiss",
+            className: "cfi-ui-toast__close",
+            onClick: () => onDismiss(item.id)
+          }
+        )
+      ] }, item.id))
+    }
+  );
+}
+
+// src/Card.tsx
+import { forwardRef as forwardRef11 } from "react";
+
+// src/Card.css
+styleInject("@layer components {\n  :where(.cfi-ui-card) {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-xl);\n    box-shadow: var(--cfi-ui-shadow-xs);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-card[data-variant=outline] {\n    box-shadow: none;\n  }\n  .cfi-ui-card[data-variant=plain] {\n    border-color: transparent;\n    box-shadow: none;\n    background: transparent;\n  }\n  .cfi-ui-card[data-interactive] {\n    cursor: pointer;\n    transition: border-color var(--cfi-ui-transition-fast), box-shadow var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-card[data-interactive]:hover {\n    border-color: var(--cfi-ui-border-strong);\n    box-shadow: var(--cfi-ui-shadow-md);\n  }\n  :where(.cfi-ui-card__header) {\n    flex: none;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: var(--cfi-ui-space-md);\n    padding: var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-card__heading {\n    display: grid;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n  }\n  .cfi-ui-card__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    flex: none;\n  }\n  :where(.cfi-ui-card__title) {\n    margin: 0;\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-semibold);\n    line-height: var(--cfi-ui-leading-snug);\n    color: var(--cfi-ui-content);\n    text-wrap: balance;\n  }\n  .cfi-ui-card__description {\n    flex-basis: 100%;\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n  :where(.cfi-ui-card__body) {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-card[data-flush] > .cfi-ui-card__body {\n    padding: 0;\n  }\n  .cfi-ui-card[data-flush] > .cfi-ui-card__body:last-child {\n    overflow: hidden;\n    border-bottom-left-radius: var(--cfi-ui-radius-lg);\n    border-bottom-right-radius: var(--cfi-ui-radius-lg);\n  }\n  :where(.cfi-ui-card__footer) {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n    border-top: 1px solid var(--cfi-ui-border);\n    background: var(--cfi-ui-surface-sunken);\n    border-bottom-left-radius: var(--cfi-ui-radius-lg);\n    border-bottom-right-radius: var(--cfi-ui-radius-lg);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n}\n");
+
+// src/Card.tsx
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var Card = forwardRef11(function Card2({ variant = "default", flush = false, interactive = false, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      "data-flush": flush || void 0,
+      "data-interactive": interactive || void 0,
+      className: cn("cfi-ui", "cfi-ui-card", className),
+      ...rest
+    }
+  );
+});
+function CardHeader({ actions, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs14("div", { className: cn("cfi-ui-card__header", className), ...rest, children: [
+    actions ? /* @__PURE__ */ jsx14("div", { className: "cfi-ui-card__heading", children }) : children,
+    actions && /* @__PURE__ */ jsx14("div", { className: "cfi-ui-card__actions", children: actions })
+  ] });
+}
+function CardTitle({ as: Tag = "h3", className, ...rest }) {
+  return /* @__PURE__ */ jsx14(Tag, { className: cn("cfi-ui-card__title", className), ...rest });
+}
+function CardDescription({ className, ...rest }) {
+  return /* @__PURE__ */ jsx14("p", { className: cn("cfi-ui-card__description", className), ...rest });
+}
+function CardBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx14("div", { className: cn("cfi-ui-card__body", className), ...rest });
+}
+function CardFooter({ className, ...rest }) {
+  return /* @__PURE__ */ jsx14("div", { className: cn("cfi-ui-card__footer", className), ...rest });
+}
+
+// src/Badge.tsx
+import { forwardRef as forwardRef12 } from "react";
+
+// src/Badge.css
+styleInject("@layer components {\n  :where(.cfi-ui-badge) {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    padding: 0.125rem 0.5rem;\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-full);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: 1.4;\n    white-space: nowrap;\n    vertical-align: middle;\n  }\n  .cfi-ui-badge[data-size=sm] {\n    padding: 0 0.375rem;\n    font-size: 0.6875rem;\n  }\n  .cfi-ui-badge__dot {\n    flex: none;\n    width: 0.375rem;\n    height: 0.375rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: currentColor;\n  }\n  .cfi-ui-badge__icon {\n    display: inline-flex;\n    flex: none;\n  }\n  .cfi-ui-badge__icon > svg {\n    width: 0.75rem;\n    height: 0.75rem;\n    display: block;\n  }\n  .cfi-ui-badge--count {\n    justify-content: center;\n    min-width: 1.25rem;\n    padding-inline: 0.375rem;\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=neutral] {\n    background: var(--cfi-ui-neutral-soft);\n    color: var(--cfi-ui-neutral-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=success] {\n    background: var(--cfi-ui-success-soft);\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=warning] {\n    background: var(--cfi-ui-warning-soft);\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=error] {\n    background: var(--cfi-ui-error-soft);\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=info] {\n    background: var(--cfi-ui-info-soft);\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=soft][data-tone=accent] {\n    background: var(--cfi-ui-accent-soft);\n    color: var(--cfi-ui-accent-hover);\n  }\n  .cfi-ui-badge[data-variant=solid] {\n    color: var(--cfi-ui-content-inverse);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=neutral] {\n    background: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=success] {\n    background: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=warning] {\n    background: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=error] {\n    background: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=info] {\n    background: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=solid][data-tone=accent] {\n    background: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-fg);\n  }\n  .cfi-ui-badge[data-variant=outline] {\n    background: transparent;\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=neutral] {\n    border-color: var(--cfi-ui-neutral-border);\n    color: var(--cfi-ui-neutral-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=success] {\n    border-color: var(--cfi-ui-success-border);\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=warning] {\n    border-color: var(--cfi-ui-warning-border);\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=error] {\n    border-color: var(--cfi-ui-error-border);\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=info] {\n    border-color: var(--cfi-ui-info-border);\n    color: var(--cfi-ui-info-text);\n  }\n  .cfi-ui-badge[data-variant=outline][data-tone=accent] {\n    border-color: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-hover);\n  }\n}\n");
+
+// src/Badge.tsx
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var Badge = forwardRef12(function Badge2({ tone = "neutral", variant = "soft", size = "md", dot = false, icon, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs15(
+    "span",
+    {
+      ref,
+      "data-tone": tone,
+      "data-variant": variant,
+      "data-size": size,
+      className: cn("cfi-ui", "cfi-ui-badge", className),
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx15("span", { className: "cfi-ui-badge__icon", children: icon }) : dot && /* @__PURE__ */ jsx15("span", { className: "cfi-ui-badge__dot", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+});
+var CountBadge = forwardRef12(function CountBadge2({ count, max = 99, hideZero = true, className, ...rest }, ref) {
+  if (count === 0 && hideZero) return null;
+  return /* @__PURE__ */ jsx15(Badge, { ref, className: cn("cfi-ui-badge--count", className), ...rest, children: count > max ? `${max}+` : count });
+});
+
+// src/Table.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+
+// src/Table.css
+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__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");
+
+// src/Table.tsx
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+var Table = forwardRef13(function Table2({ density = "comfortable", stickyHeader = false, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx16(
+    "table",
+    {
+      ref,
+      "data-density": density,
+      "data-sticky": stickyHeader || void 0,
+      className: cn("cfi-ui", "cfi-ui-table", className),
+      ...rest
+    }
+  );
+});
+function TableScroller({ className, ...rest }) {
+  return /* @__PURE__ */ jsx16("div", { className: cn("cfi-ui", "cfi-ui-table-scroller", className), ...rest });
+}
+function TableHeader({ className, ...rest }) {
+  return /* @__PURE__ */ jsx16("thead", { className: cn("cfi-ui-table__head", className), ...rest });
+}
+function TableBody({ className, ...rest }) {
+  return /* @__PURE__ */ jsx16("tbody", { className: cn("cfi-ui-table__body", className), ...rest });
+}
+function TableFooter({ className, ...rest }) {
+  return /* @__PURE__ */ jsx16("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
+}
+var TableFoot = TableFooter;
+function TableRow({ selected, interactive, className, ...rest }) {
+  return /* @__PURE__ */ jsx16(
+    "tr",
+    {
+      "data-selected": selected || void 0,
+      "data-interactive": interactive || void 0,
+      "aria-selected": selected || void 0,
+      className: cn("cfi-ui-table__row", className),
+      ...rest
+    }
+  );
+}
+function TableHead({
+  numeric,
+  sortable,
+  sortDirection = null,
+  onSort,
+  width,
+  className,
+  children,
+  style,
+  ...rest
+}) {
+  const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
+  return /* @__PURE__ */ jsx16(
+    "th",
+    {
+      scope: "col",
+      "aria-sort": ariaSort,
+      "data-numeric": numeric || void 0,
+      style: { width, ...style },
+      className: cn("cfi-ui-table__th", className),
+      ...rest,
+      children: sortable ? /* @__PURE__ */ jsxs16("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
+        /* @__PURE__ */ jsx16("span", { children }),
+        /* @__PURE__ */ jsx16("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx16(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx16(ArrowDown, {}) : /* @__PURE__ */ jsx16(ChevronsUpDown, {}) })
+      ] }) : children
+    }
+  );
+}
+function TableCell({ numeric, truncate, className, ...rest }) {
+  return /* @__PURE__ */ jsx16(
+    "td",
+    {
+      "data-numeric": numeric || void 0,
+      "data-truncate": truncate || void 0,
+      className: cn("cfi-ui-table__td", className),
+      ...rest
+    }
+  );
+}
+function TableEmpty({ colSpan, children }) {
+  return /* @__PURE__ */ jsx16("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx16("td", { colSpan, className: "cfi-ui-table__empty", children }) });
+}
+function TableCaption({ className, ...rest }) {
+  return /* @__PURE__ */ jsx16("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
+}
+
+// src/Tabs.tsx
+import { forwardRef as forwardRef14 } from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+
+// src/Tabs.css
+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");
+
+// src/Tabs.tsx
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var Tabs = RadixTabs.Root;
+var TabsRoot = RadixTabs.Root;
+var TabsList = forwardRef14(
+  function TabsList2({ variant = "pill", className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx17(
+      RadixTabs.List,
+      {
+        ref,
+        "data-variant": variant,
+        className: cn("cfi-ui", "cfi-ui-tabs__list", className),
+        ...rest
+      }
+    );
+  }
+);
+var TabsTrigger = forwardRef14(
+  function TabsTrigger2({ icon, count, className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs17(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
+      icon && /* @__PURE__ */ jsx17("span", { className: "cfi-ui-tabs__icon", children: icon }),
+      /* @__PURE__ */ jsx17("span", { children }),
+      count !== void 0 && /* @__PURE__ */ jsx17(CountBadge, { count, size: "sm" })
+    ] });
+  }
+);
+var TabsContent = forwardRef14(function TabsContent2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx17(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
+});
+function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
+  return /* @__PURE__ */ jsxs17(
+    Tabs,
+    {
+      value,
+      onValueChange,
+      defaultValue: defaultValue ?? tabs[0]?.value,
+      className: cn("cfi-ui", "cfi-ui-tabs", className),
+      children: [
+        /* @__PURE__ */ jsx17(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx17(
+          TabsTrigger,
+          {
+            value: tab.value,
+            icon: tab.icon,
+            count: tab.count,
+            disabled: tab.disabled,
+            children: tab.label
+          },
+          tab.value
+        )) }),
+        tabs.map((tab) => /* @__PURE__ */ jsx17(TabsContent, { value: tab.value, children: tab.content }, tab.value))
+      ]
+    }
+  );
+}
+
+// src/Display.tsx
+import { forwardRef as forwardRef15 } from "react";
+
+// src/Display.css
+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');
+
+// src/Display.tsx
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+function Separator3({ orientation = "horizontal", label, className, ...rest }) {
+  if (label) {
+    return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx18("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
+  }
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      "data-orientation": orientation,
+      className: cn("cfi-ui", "cfi-ui-separator", className),
+      ...rest
+    }
+  );
+}
+function Progress({
+  value,
+  tone = "accent",
+  size = "md",
+  label,
+  showValue = false,
+  className,
+  ...rest
+}) {
+  const clamped = value == null ? null : Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsxs18("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
+    /* @__PURE__ */ jsx18(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": clamped ?? void 0,
+        "data-tone": tone,
+        "data-size": size,
+        "data-indeterminate": clamped == null || void 0,
+        className: "cfi-ui-progress",
+        children: /* @__PURE__ */ jsx18(
+          "div",
+          {
+            className: "cfi-ui-progress__fill",
+            style: clamped == null ? void 0 : { width: `${clamped}%` }
+          }
+        )
+      }
+    ),
+    showValue && clamped != null && /* @__PURE__ */ jsxs18("span", { className: "cfi-ui-progress__value", children: [
+      Math.round(clamped),
+      "%"
+    ] })
+  ] });
+}
+function Skeleton({ shape = "block", width, height, lines = 1, className, style, ...rest }) {
+  if (shape === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx18("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx18(
+      "div",
+      {
+        "data-shape": "text",
+        className: "cfi-ui-skeleton",
+        style: { width: i === lines - 1 ? "60%" : width ?? "100%" }
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-shape": shape,
+      style: { width, height, ...style },
+      className: cn("cfi-ui", "cfi-ui-skeleton", className),
+      ...rest
+    }
+  );
+}
+var Avatar = forwardRef15(function Avatar2({ name, src, size = "md", className, ...rest }, ref) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  const initials = parts.length === 0 ? "?" : parts.length === 1 ? parts[0].slice(0, 2).toUpperCase() : `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  return /* @__PURE__ */ jsxs18("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
+    src ? /* @__PURE__ */ jsx18("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: initials }),
+    !src && /* @__PURE__ */ jsx18("span", { className: "cfi-ui-sr-only", children: name })
+  ] });
+});
+function AvatarGroup({ max, className, children, ...rest }) {
+  const items = Array.isArray(children) ? children : [children];
+  const shown = max ? items.slice(0, max) : items;
+  const hidden = items.length - shown.length;
+  return /* @__PURE__ */ jsxs18("div", { className: cn("cfi-ui", "cfi-ui-avatar-group", className), ...rest, children: [
+    shown,
+    hidden > 0 && /* @__PURE__ */ jsxs18("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
+      "+",
+      hidden
+    ] })
+  ] });
+}
+function ScrollArea({
+  maxHeight,
+  orientation = "vertical",
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      "data-orientation": orientation,
+      style: { maxHeight, ...style },
+      className: cn("cfi-ui", "cfi-ui-scroll-area", className),
+      ...rest
+    }
+  );
+}
+
+// src/Accordion.tsx
+import { forwardRef as forwardRef16 } from "react";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+import { ChevronDown as ChevronDown3 } from "lucide-react";
+
+// src/Accordion.css
+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");
+
+// src/Accordion.tsx
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+var AccordionRoot = RadixAccordion.Root;
+var AccordionItem = forwardRef16(function AccordionItem2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(RadixAccordion.Item, { ref, className: cn("cfi-ui-accordion__item", className), ...rest });
+});
+var AccordionTrigger = forwardRef16(function AccordionTrigger2({ meta, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs19(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
+    /* @__PURE__ */ jsx19("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx19(ChevronDown3, {}) }),
+    /* @__PURE__ */ jsx19("span", { className: "cfi-ui-accordion__label", children }),
+    meta && /* @__PURE__ */ jsx19("span", { className: "cfi-ui-accordion__meta", children: meta })
+  ] }) });
+});
+var AccordionContent = forwardRef16(function AccordionContent2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx19(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx19("div", { className: "cfi-ui-accordion__inner", children }) });
+});
+function Accordion({
+  sections,
+  type = "multiple",
+  defaultValue,
+  value,
+  onValueChange,
+  className
+}) {
+  const rootProps = {
+    type,
+    defaultValue,
+    value,
+    onValueChange,
+    className: cn("cfi-ui", "cfi-ui-accordion", className)
+  };
+  return /* @__PURE__ */ jsx19(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs19(AccordionItem, { value: section.value, disabled: section.disabled, children: [
+    /* @__PURE__ */ jsx19(AccordionTrigger, { meta: section.meta, children: section.label }),
+    /* @__PURE__ */ jsx19(AccordionContent, { children: section.content })
+  ] }, section.value)) });
+}
+function ToggleGroup({
+  options,
+  value,
+  onValueChange,
+  size = "md",
+  allowEmpty = false,
+  className,
+  ...aria
+}) {
+  return /* @__PURE__ */ jsx19(
+    RadixToggleGroup.Root,
+    {
+      type: "single",
+      value,
+      onValueChange: (next) => {
+        if (!next && !allowEmpty) return;
+        onValueChange?.(next);
+      },
+      "data-size": size,
+      className: cn("cfi-ui", "cfi-ui-toggle-group", className),
+      ...aria,
+      children: options.map((option) => /* @__PURE__ */ jsxs19(
+        RadixToggleGroup.Item,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          "aria-label": option.ariaLabel,
+          title: option.ariaLabel,
+          className: "cfi-ui-toggle-group__item",
+          children: [
+            option.icon && /* @__PURE__ */ jsx19("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
+            option.label
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+}
+
+// src/PageState.tsx
+import { AlertCircle, Loader2 } from "lucide-react";
+
+// src/PageState.css
+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");
+
+// src/PageState.tsx
+import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+function LoadingState({ label = "Loading\u2026", size = "block", className }) {
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: cn("cfi-ui", "cfi-ui-pagestate", className),
+      "data-size": size,
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsx20(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx20("span", { className: "cfi-ui-pagestate__muted", children: label })
+      ]
+    }
+  );
+}
+function ErrorState({
+  error,
+  title = "Something went wrong",
+  onRetry,
+  retryLabel = "Try again",
+  size = "block",
+  className
+}) {
+  const message = error instanceof Error ? error.message : error == null ? "" : String(error);
+  return /* @__PURE__ */ jsxs20("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
+    /* @__PURE__ */ jsx20(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs20("div", { children: [
+      /* @__PURE__ */ jsx20("p", { className: "cfi-ui-pagestate__title", children: title }),
+      message && /* @__PURE__ */ jsx20("p", { className: "cfi-ui-pagestate__muted", children: message })
+    ] }),
+    onRetry && /* @__PURE__ */ jsx20("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
+  ] });
+}
+function EmptyState({
+  title,
+  description,
+  action,
+  icon,
+  size = "block",
+  className
+}) {
+  return /* @__PURE__ */ jsxs20("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
+    icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-pagestate__icon", children: icon }),
+    /* @__PURE__ */ jsxs20("div", { children: [
+      /* @__PURE__ */ jsx20("p", { className: "cfi-ui-pagestate__title", children: title }),
+      description && /* @__PURE__ */ jsx20("p", { className: "cfi-ui-pagestate__muted", children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx20("div", { className: "cfi-ui-pagestate__action", children: action })
+  ] });
+}
+function ComingSoon({ title, detail, className }) {
+  return /* @__PURE__ */ jsx20(
+    EmptyState,
+    {
+      title,
+      description: detail ?? "This screen is planned and has no data behind it yet.",
+      className
+    }
+  );
+}
+
+// src/useSortState.ts
+import { useCallback as useCallback2, useMemo as useMemo3, useState as useState3 } from "react";
+function useSortState(initialKey, initialDirection = "asc") {
+  const [sort, setSort] = useState3({ key: initialKey, direction: initialDirection });
+  const toggle = useCallback2((key) => {
+    setSort(
+      (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
+    );
+  }, []);
+  const sortProps = useCallback2(
+    (key) => ({
+      sortable: true,
+      sortDirection: sort.key === key ? sort.direction : null,
+      onSort: () => toggle(key)
+    }),
+    [sort, toggle]
+  );
+  const sortBy = useCallback2(
+    (rows, accessor) => {
+      const dir = sort.direction === "asc" ? 1 : -1;
+      return [...rows].sort((a, b) => {
+        const av = accessor(a, sort.key);
+        const bv = accessor(b, sort.key);
+        if (av == null && bv == null) return 0;
+        if (av == null) return 1;
+        if (bv == null) return -1;
+        if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
+        if (av instanceof Date && bv instanceof Date) return (av.getTime() - bv.getTime()) * dir;
+        return String(av).localeCompare(String(bv), void 0, { numeric: true }) * dir;
+      });
+    },
+    [sort]
+  );
+  return useMemo3(
+    () => ({ sort, toggle, setSort, sortProps, sortBy }),
+    [sort, toggle, sortProps, sortBy]
+  );
+}
+
+// src/SearchInput.tsx
+import { forwardRef as forwardRef17, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { Search as Search2, X as X4 } from "lucide-react";
+
+// src/SearchInput.css
+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");
+
+// src/SearchInput.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
+  const [local, setLocal] = useState4(value);
+  const timer = useRef3(void 0);
+  const latest = useRef3(onChange);
+  latest.current = onChange;
+  useEffect3(() => setLocal(value), [value]);
+  useEffect3(() => () => clearTimeout(timer.current), []);
+  const push = (next) => {
+    setLocal(next);
+    clearTimeout(timer.current);
+    if (delay <= 0) latest.current(next);
+    else timer.current = setTimeout(() => latest.current(next), delay);
+  };
+  const clear = () => {
+    clearTimeout(timer.current);
+    setLocal("");
+    latest.current("");
+  };
+  return /* @__PURE__ */ jsx21(
+    Input,
+    {
+      ...rest,
+      ref,
+      type: "search",
+      value: local,
+      placeholder,
+      onChange: (e) => push(e.target.value),
+      prefix: /* @__PURE__ */ jsx21(Search2, { "aria-hidden": "true" }),
+      suffix: local ? /* @__PURE__ */ jsx21("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx21(X4, { "aria-hidden": "true" }) }) : void 0
+    }
+  );
+});
+
+// src/Pagination.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+// src/Pagination.css
+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");
+
+// src/Pagination.tsx
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+function Pagination({
+  page,
+  pageSize,
+  totalItems,
+  onPageChange,
+  showRange = true,
+  labels,
+  className
+}) {
+  const pageCount = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
+  if (pageCount <= 1) return null;
+  const current = Math.min(Math.max(1, page), pageCount);
+  const from = (current - 1) * pageSize + 1;
+  const to = Math.min(current * pageSize, totalItems);
+  const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
+  return /* @__PURE__ */ jsxs21("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
+    showRange && // aria-live so a screen-reader user hears where they landed; paging
+    // otherwise moves focus nowhere and announces nothing.
+    /* @__PURE__ */ jsx22("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
+    /* @__PURE__ */ jsxs21("div", { className: "cfi-ui-pagination__controls", children: [
+      /* @__PURE__ */ jsx22(
+        "button",
+        {
+          type: "button",
+          className: "cfi-ui-pagination__btn",
+          onClick: () => onPageChange(current - 1),
+          disabled: current <= 1,
+          "aria-label": labels?.previous ?? "Previous page",
+          children: /* @__PURE__ */ jsx22(ChevronLeft, { "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-pagination__page", children: [
+        current,
+        " / ",
+        pageCount
+      ] }),
+      /* @__PURE__ */ jsx22(
+        "button",
+        {
+          type: "button",
+          className: "cfi-ui-pagination__btn",
+          onClick: () => onPageChange(current + 1),
+          disabled: current >= pageCount,
+          "aria-label": labels?.next ?? "Next page",
+          children: /* @__PURE__ */ jsx22(ChevronRight, { "aria-hidden": "true" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/format.ts
+function formatDate(value) {
+  const d = toDate(value);
+  if (!d) return "\u2014";
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function formatDateTime(value) {
+  const d = toDate(value);
+  if (!d) return "\u2014";
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${formatDate(d)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function formatMoney(value, { currency = "USD", decimals, perUnit = false } = {}) {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  const places = decimals ?? (perUnit ? 4 : 2);
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: places,
+    maximumFractionDigits: places
+  }).format(value);
+}
+function formatNumber(value, decimals = 0) {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(value);
+}
+function formatPercent(value, decimals = 1) {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  return `${formatNumber(value, decimals)}%`;
+}
+function toDate(value) {
+  if (value == null || value === "") return null;
+  const d = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Button,
+  ButtonGroup,
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Combobox,
+  ComingSoon,
+  ConfirmDialog,
+  CountBadge,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  EmptyState,
+  ErrorState,
+  Field,
+  Fieldset,
+  IconButton,
+  Input,
+  Label,
+  LoadingState,
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRoot,
+  MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+  Modal,
+  Pagination,
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+  Progress,
+  ScrollArea,
+  SearchInput,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Separator3 as Separator,
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  SideModal,
+  Skeleton,
+  Slider,
+  Switch,
+  TabSet,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableEmpty,
+  TableFoot,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableScroller,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  Textarea,
+  ToastProvider,
+  ToggleGroup,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  cn,
+  formatDate,
+  formatDateTime,
+  formatMoney,
+  formatNumber,
+  formatPercent,
+  useFieldControl,
+  useSortState,
+  useToast
+};