@campfire-interactive/ui 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -494,6 +494,71 @@ interface SelectProps<T extends string = string> {
  */
 declare function Select<T extends string = string>({ options, value, onValueChange, defaultValue, placeholder, size, invalid, disabled, required, name, id, className, fullWidth, emptyLabel, onOpenChange, onBlur, ...aria }: SelectProps<T>): react.JSX.Element;
 
+interface CreatableSelectProps<T extends string = string> extends SelectProps<T> {
+    /**
+     * Creates a new option from the typed label and returns it. The returned
+     * option is selected immediately, so the caller does not have to wait for
+     * its own list query to refetch before the field reads correctly.
+     *
+     * Reject to keep the dialog open with the message showing and the text
+     * intact — a name that collides server-side is the common case, and losing
+     * what they typed to learn that is the wrong trade.
+     *
+     * Omit it and this is a plain `Select`; the "+" does not render at all.
+     */
+    onCreate?: (label: string) => Promise<SelectOption<T>> | SelectOption<T>;
+    /**
+     * Whether this viewer may add to the list. False HIDES the "+" rather than
+     * disabling it: the lists behind these pickers are tenant configuration, and
+     * a disabled button advertises an action most people on a program will never
+     * be allowed to take.
+     */
+    canCreate?: boolean;
+    className?: string;
+    /** Accessible name and tooltip on the "+". */
+    addLabel?: string;
+    createTitle?: string;
+    createDescription?: React.ReactNode;
+    createFieldLabel?: string;
+    createPlaceholder?: string;
+    createSubmitLabel?: string;
+    createPendingLabel?: string;
+    createCancelLabel?: string;
+    /** Shown while the typed name already matches an option. */
+    duplicateHint?: string;
+}
+/**
+ * A select whose list can be extended without leaving the page.
+ *
+ * Every one of these lists is tenant configuration maintained on a Settings
+ * screen — work categories, health categories, process types, gate types,
+ * team roles. The cost of that is paid by the person filling in a form, who
+ * finds the value they need is not there yet and has to abandon what they are
+ * doing, navigate to Settings, add it, come back and start again. In practice
+ * they do not: they pick the closest wrong option, or the field gets widened
+ * to free text and the list stops meaning anything. pm's team-member role was
+ * free text for exactly that reason and grew "Tool Engineer", "tool eng" and
+ * "Tooling Eng" as three separate roles.
+ *
+ * So the "+" is not a convenience. It is what lets a constrained list stay
+ * constrained.
+ *
+ * Two behaviors are deliberate and easy to lose in a reimplementation:
+ *
+ *   - A name that already exists selects the existing option instead of
+ *     creating a second one. The duplicate is what the picker exists to
+ *     prevent, and the person typing it wants that value either way.
+ *   - The created option is held locally and merged into `options` until the
+ *     caller's own list catches up. Without that, an optimistic close lands on
+ *     an empty field for as long as the refetch takes, which reads as a failed
+ *     save.
+ *
+ * Wraps `Select`, so the list is the short, known kind. Reach for `Combobox`
+ * when it needs searching; a creatable combobox can follow the first caller
+ * that actually needs one.
+ */
+declare function CreatableSelect<T extends string = string>({ onCreate, canCreate, className, addLabel, createTitle, createDescription, createFieldLabel, createPlaceholder, createSubmitLabel, createPendingLabel, createCancelLabel, duplicateHint, options, onValueChange, disabled, ...select }: CreatableSelectProps<T>): react.JSX.Element;
+
 interface ComboboxOption<T extends string = string> {
     value: T;
     label: string;
@@ -736,6 +801,15 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     density?: 'comfortable' | 'compact';
     /** Keeps the header visible while the body scrolls. Requires a scrolling ancestor with a height. */
     stickyHeader?: boolean;
+    /**
+     * Pins the first column while the rest scrolls sideways.
+     *
+     * For any table wide enough to scroll in its `TableScroller` — which is most
+     * wide ones — because scrolling right otherwise takes the column that says
+     * which row you are looking at. Put the row's identity in the first column
+     * before turning this on; it pins position, not meaning.
+     */
+    stickyFirstColumn?: boolean;
 }
 /**
  * A data table.
@@ -1221,4 +1295,4 @@ declare function formatNumber(value: number | null | undefined, decimals?: numbe
  */
 declare function formatPercent(value: number | null | undefined, decimals?: number): string;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, useSortState, useToast };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, useSortState, useToast };

package/dist/index.js

@@ -724,15 +724,162 @@ function Select({
   );
 }
 
+// src/CreatableSelect.tsx
+import { useMemo, useState } from "react";
+import { Plus } from "lucide-react";
+
+// src/CreatableSelect.css
+styleInject("@layer components {\n  :where(.cfi-creatable) {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    width: 100%;\n  }\n  :where(.cfi-creatable__select) {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n  :where(.cfi-creatable) > :where(button) {\n    flex: 0 0 auto;\n  }\n}\n");
+
+// src/CreatableSelect.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function normalize(value) {
+  return value.trim().toLowerCase();
+}
+function labelText(option) {
+  return typeof option.label === "string" ? option.label : null;
+}
+function CreatableSelect({
+  onCreate,
+  canCreate = true,
+  className,
+  addLabel = "Add to list",
+  createTitle = "Add to list",
+  createDescription,
+  createFieldLabel = "Name",
+  createPlaceholder,
+  createSubmitLabel = "Add",
+  createPendingLabel = "Adding...",
+  createCancelLabel = "Cancel",
+  duplicateHint = "Already in the list \u2014 this will select the existing one.",
+  options,
+  onValueChange,
+  disabled,
+  ...select
+}) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(null);
+  const [created, setCreated] = useState([]);
+  const merged = useMemo(() => {
+    const seen = new Set(options.map((o) => o.value));
+    return [...options, ...created.filter((o) => !seen.has(o.value))];
+  }, [options, created]);
+  const match = useMemo(() => {
+    const wanted = normalize(draft);
+    if (wanted === "") return null;
+    return merged.find((o) => {
+      const text = labelText(o);
+      return text !== null && normalize(text) === wanted;
+    }) ?? null;
+  }, [draft, merged]);
+  const showAdd = Boolean(onCreate) && canCreate && !disabled;
+  function close() {
+    setOpen(false);
+    setDraft("");
+    setError(null);
+    setPending(false);
+  }
+  async function submit() {
+    const name = draft.trim();
+    if (name === "" || pending || !onCreate) return;
+    if (match) {
+      onValueChange?.(match.value);
+      close();
+      return;
+    }
+    setPending(true);
+    setError(null);
+    try {
+      const option = await onCreate(name);
+      setCreated((prev) => [...prev, option]);
+      onValueChange?.(option.value);
+      close();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      setPending(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: cn("cfi-creatable", className), children: [
+    /* @__PURE__ */ jsx11("div", { className: "cfi-creatable__select", children: /* @__PURE__ */ jsx11(Select, { ...select, options: merged, onValueChange, disabled }) }),
+    showAdd && /* @__PURE__ */ jsx11(
+      IconButton,
+      {
+        type: "button",
+        variant: "secondary",
+        size: select.size ?? "md",
+        icon: /* @__PURE__ */ jsx11(Plus, { "aria-hidden": "true" }),
+        label: addLabel,
+        onClick: () => setOpen(true)
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      Modal,
+      {
+        open,
+        onOpenChange: (next) => next ? setOpen(true) : close(),
+        title: createTitle,
+        description: createDescription,
+        size: "sm",
+        footer: /* @__PURE__ */ jsxs11(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx11(Button, { type: "button", variant: "secondary", onClick: close, disabled: pending, children: createCancelLabel }),
+          /* @__PURE__ */ jsx11(
+            Button,
+            {
+              type: "button",
+              loading: pending,
+              onClick: () => void submit(),
+              disabled: pending || draft.trim() === "",
+              children: pending ? createPendingLabel : createSubmitLabel
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs11(
+          "form",
+          {
+            onSubmit: (event) => {
+              event.preventDefault();
+              void submit();
+            },
+            children: [
+              /* @__PURE__ */ jsx11(
+                Field,
+                {
+                  label: createFieldLabel,
+                  required: true,
+                  error,
+                  hint: match ? duplicateHint : void 0,
+                  children: /* @__PURE__ */ jsx11(
+                    Input,
+                    {
+                      value: draft,
+                      onChange: (event) => setDraft(event.target.value),
+                      placeholder: createPlaceholder,
+                      disabled: pending,
+                      autoFocus: true
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx11("button", { type: "submit", hidden: true, "aria-hidden": "true", tabIndex: -1 })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/Combobox.tsx
-import { useEffect, useId as useId2, useMemo, useRef, useState } from "react";
+import { useEffect, useId as useId2, useMemo as useMemo2, useRef, useState as useState2 } 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";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function Combobox({
   options,
   value,
@@ -754,13 +901,13 @@ function Combobox({
   fullWidth = true,
   ...aria
 }) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const [highlighted, setHighlighted] = useState(0);
+  const [open, setOpen] = useState2(false);
+  const [search, setSearch] = useState2("");
+  const [highlighted, setHighlighted] = useState2(0);
   const listId = useId2();
   const searchRef = useRef(null);
   const listRef = useRef(null);
-  const filtered = useMemo(() => {
+  const filtered = useMemo2(() => {
     if (onSearchChange) return options;
     const q = search.trim().toLowerCase();
     if (!q) return options;
@@ -814,14 +961,14 @@ function Combobox({
     setHighlighted(0);
     onSearchChange?.(next);
   }
-  return /* @__PURE__ */ jsxs11(PopoverRoot, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx11(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(PopoverRoot, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx12(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs12(
       "div",
       {
         style,
         className: cn("cfi-ui", "cfi-ui-combobox", fullWidth && "cfi-ui-combobox--full", className),
         children: [
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs12(
             "button",
             {
               type: "button",
@@ -838,12 +985,12 @@ function Combobox({
               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, {}) })
+                /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__value", children: selected ? selected.label : placeholder }),
+                /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(ChevronDown2, {}) })
               ]
             }
           ),
-          clearable && selected && !disabled && /* @__PURE__ */ jsx11(
+          clearable && selected && !disabled && /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -851,14 +998,14 @@ function Combobox({
               "aria-label": `Clear ${selected.label}`,
               title: "Clear",
               onClick: () => onValueChange(null),
-              children: /* @__PURE__ */ jsx11(X2, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx12(X2, { "aria-hidden": "true" })
             }
           ),
-          name && /* @__PURE__ */ jsx11("input", { type: "hidden", name, value: value ?? "" })
+          name && /* @__PURE__ */ jsx12("input", { type: "hidden", name, value: value ?? "" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs12(
       PopoverContent,
       {
         flush: true,
@@ -870,9 +1017,9 @@ function Combobox({
         },
         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(
+          /* @__PURE__ */ jsxs12("div", { className: "cfi-ui-combobox__search", children: [
+            /* @__PURE__ */ jsx12(Search, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx12(
               "input",
               {
                 ref: searchRef,
@@ -888,7 +1035,7 @@ function Combobox({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             "div",
             {
               ref: listRef,
@@ -896,10 +1043,10 @@ function Combobox({
               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) => {
+              children: loading ? /* @__PURE__ */ jsx12("p", { className: "cfi-ui-select-empty", children: loadingLabel }) : filtered.length === 0 ? /* @__PURE__ */ jsx12("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(
+                return /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     id: `${listId}-${option.value}`,
@@ -912,10 +1059,10 @@ function Combobox({
                     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 })
+                      /* @__PURE__ */ jsx12("span", { className: "cfi-ui-select-item__indicator", children: option.value === value && /* @__PURE__ */ jsx12(Check4, { "aria-hidden": "true" }) }),
+                      /* @__PURE__ */ jsxs12("span", { className: "cfi-ui-combobox__option-text", children: [
+                        /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__option-label", children: option.label }),
+                        option.hint && /* @__PURE__ */ jsx12("span", { className: "cfi-ui-combobox__option-hint", children: option.hint })
                       ] })
                     ]
                   },
@@ -933,12 +1080,12 @@ function Combobox({
 // 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";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs13 } 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(
+  return /* @__PURE__ */ jsx13(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs13(
     RadixTooltip.Content,
     {
       ref,
@@ -949,28 +1096,28 @@ var TooltipContent = forwardRef10(function TooltipContent2({ className, children
       ...rest,
       children: [
         children,
-        /* @__PURE__ */ jsx12(RadixTooltip.Arrow, { className: "cfi-ui-tooltip__arrow", width: 10, height: 4 })
+        /* @__PURE__ */ jsx13(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 })
+  if (disabled || content == null || content === "") return /* @__PURE__ */ jsx13(Fragment3, { children });
+  return /* @__PURE__ */ jsx13(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs13(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx13(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 { createContext as createContext2, useCallback, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } 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";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 var ToastContext = createContext2(null);
 function useToast() {
   const api = useContext2(ToastContext);
@@ -983,7 +1130,7 @@ function ToastProvider({
   max = 4,
   position = "bottom-right"
 }) {
-  const [items, setItems] = useState2([]);
+  const [items, setItems] = useState3([]);
   const nextId = useRef2(1);
   const timers = useRef2(/* @__PURE__ */ new Map());
   const dismiss = useCallback((id) => {
@@ -1017,7 +1164,7 @@ function ToastProvider({
       pending.clear();
     };
   }, []);
-  const api = useMemo2(
+  const api = useMemo3(
     () => ({
       toast,
       dismiss,
@@ -1028,24 +1175,24 @@ function ToastProvider({
     }),
     [toast, dismiss]
   );
-  return /* @__PURE__ */ jsxs13(ToastContext.Provider, { value: api, children: [
+  return /* @__PURE__ */ jsxs14(ToastContext.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ jsx13(ToastViewport, { items, onDismiss: dismiss, position })
+    /* @__PURE__ */ jsx14(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, {})
+  neutral: /* @__PURE__ */ jsx14(Info, {}),
+  info: /* @__PURE__ */ jsx14(Info, {}),
+  success: /* @__PURE__ */ jsx14(CheckCircle2, {}),
+  warning: /* @__PURE__ */ jsx14(AlertTriangle, {}),
+  error: /* @__PURE__ */ jsx14(XCircle, {})
 };
 function ToastViewport({
   items,
   onDismiss,
   position
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       role: "region",
@@ -1054,12 +1201,12 @@ function ToastViewport({
       "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(
+      children: items.map((item) => /* @__PURE__ */ jsxs14("div", { "data-tone": item.tone, className: "cfi-ui-toast", children: [
+        /* @__PURE__ */ jsx14("span", { className: "cfi-ui-toast__icon", "aria-hidden": "true", children: TONE_ICON[item.tone ?? "neutral"] }),
+        /* @__PURE__ */ jsxs14("div", { className: "cfi-ui-toast__text", children: [
+          /* @__PURE__ */ jsx14("p", { className: "cfi-ui-toast__title", children: item.title }),
+          item.description && /* @__PURE__ */ jsx14("p", { className: "cfi-ui-toast__description", children: item.description }),
+          item.action && /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
@@ -1072,12 +1219,12 @@ function ToastViewport({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           IconButton,
           {
             variant: "ghost",
             size: "sm",
-            icon: /* @__PURE__ */ jsx13(X3, {}),
+            icon: /* @__PURE__ */ jsx14(X3, {}),
             label: "Dismiss",
             className: "cfi-ui-toast__close",
             onClick: () => onDismiss(item.id)
@@ -1095,9 +1242,9 @@ import { forwardRef as forwardRef11 } from "react";
 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";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var Card = forwardRef11(function Card2({ variant = "default", flush = false, interactive = false, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ref,
@@ -1110,22 +1257,22 @@ var Card = forwardRef11(function Card2({ variant = "default", flush = false, int
   );
 });
 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 })
+  return /* @__PURE__ */ jsxs15("div", { className: cn("cfi-ui-card__header", className), ...rest, children: [
+    actions ? /* @__PURE__ */ jsx15("div", { className: "cfi-ui-card__heading", children }) : children,
+    actions && /* @__PURE__ */ jsx15("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 });
+  return /* @__PURE__ */ jsx15(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 });
+  return /* @__PURE__ */ jsx15("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 });
+  return /* @__PURE__ */ jsx15("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 });
+  return /* @__PURE__ */ jsx15("div", { className: cn("cfi-ui-card__footer", className), ...rest });
 }
 
 // src/Badge.tsx
@@ -1135,9 +1282,9 @@ import { forwardRef as forwardRef12 } from "react";
 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";
+import { jsx as jsx16, jsxs as jsxs16 } 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(
+  return /* @__PURE__ */ jsxs16(
     "span",
     {
       ref,
@@ -1147,7 +1294,7 @@ var Badge = forwardRef12(function Badge2({ tone = "neutral", variant = "soft", s
       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" }),
+        icon ? /* @__PURE__ */ jsx16("span", { className: "cfi-ui-badge__icon", children: icon }) : dot && /* @__PURE__ */ jsx16("span", { className: "cfi-ui-badge__dot", "aria-hidden": "true" }),
         children
       ]
     }
@@ -1155,7 +1302,7 @@ var Badge = forwardRef12(function Badge2({ tone = "neutral", variant = "soft", s
 });
 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 });
+  return /* @__PURE__ */ jsx16(Badge, { ref, className: cn("cfi-ui-badge--count", className), ...rest, children: count > max ? `${max}+` : count });
 });
 
 // src/Table.tsx
@@ -1163,37 +1310,38 @@ 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");
+styleInject("@layer components {\n  :where(.cfi-ui-table-scroller) {\n    width: 100%;\n    overflow-x: auto;\n    position: relative;\n  }\n  :where(.cfi-ui-table) {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    text-align: left;\n  }\n  :where(.cfi-ui-table__th) {\n    height: 2.75rem;\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid var(--cfi-ui-border);\n    background: transparent;\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n    white-space: nowrap;\n    text-align: left;\n    vertical-align: middle;\n  }\n  .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n    background: var(--cfi-ui-surface-sunken);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    color: var(--cfi-ui-content-muted);\n    border-bottom-color: var(--cfi-ui-border-strong);\n  }\n  .cfi-ui-table[data-sticky] .cfi-ui-table__th {\n    position: sticky;\n    top: 0;\n    z-index: var(--cfi-ui-z-raised, 10);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child,\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n    position: sticky;\n    left: 0;\n    background: var(--cfi-ui-surface);\n    box-shadow: 1px 0 0 0 var(--cfi-ui-border-subtle);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__td:first-child {\n    z-index: 1;\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__th:first-child {\n    z-index: calc(var(--cfi-ui-z-raised, 10) + 1);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td:first-child {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-table[data-sticky-col] .cfi-ui-table__row[data-selected] .cfi-ui-table__td:first-child {\n    background: var(--cfi-ui-surface-selected);\n  }\n  .cfi-ui-table__sort {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin: -0.125rem -0.25rem;\n    padding: 0.125rem 0.25rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: none;\n    color: inherit;\n    font: inherit;\n    cursor: pointer;\n  }\n  .cfi-ui-table__sort:hover {\n    color: var(--cfi-ui-content);\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-table__sort-icon {\n    display: inline-flex;\n    flex: none;\n    opacity: 0.55;\n  }\n  .cfi-ui-table__th[aria-sort=ascending] .cfi-ui-table__sort-icon,\n  .cfi-ui-table__th[aria-sort=descending] .cfi-ui-table__sort-icon {\n    opacity: 1;\n    color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-table__sort-icon > svg {\n    width: 0.75rem;\n    height: 0.75rem;\n    display: block;\n  }\n  :where(.cfi-ui-table__td) {\n    padding: 0.5rem 0.75rem;\n    border-bottom: 1px solid var(--cfi-ui-border-subtle);\n    vertical-align: middle;\n  }\n  .cfi-ui-table[data-density=compact] .cfi-ui-table__td,\n  .cfi-ui-table[data-density=compact] .cfi-ui-table__th {\n    padding: 0.3125rem 0.625rem;\n  }\n  .cfi-ui-table__row[data-interactive] {\n    cursor: pointer;\n  }\n  .cfi-ui-table__row[data-interactive]:hover .cfi-ui-table__td {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-table__row[data-selected] .cfi-ui-table__td {\n    background: var(--cfi-ui-surface-selected);\n  }\n  .cfi-ui-table__body .cfi-ui-table__row:last-child .cfi-ui-table__td {\n    border-bottom: 0;\n  }\n  .cfi-ui-table__th[data-numeric],\n  .cfi-ui-table__td[data-numeric] {\n    text-align: right;\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-table__td[data-truncate] {\n    max-width: 18rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ui-table__foot .cfi-ui-table__td {\n    border-top: 1px solid var(--cfi-ui-border-strong);\n    border-bottom: 0;\n    background: var(--cfi-ui-surface-sunken);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-table__empty {\n    padding: var(--cfi-ui-space-xl) var(--cfi-ui-space-md);\n    border-bottom: 0;\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n  .cfi-ui-table__caption {\n    padding: var(--cfi-ui-space-sm) 0;\n    caption-side: bottom;\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n    text-align: left;\n  }\n}\n");
 
 // 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(
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var Table = forwardRef13(function Table2({ density = "comfortable", stickyHeader = false, stickyFirstColumn = false, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx17(
     "table",
     {
       ref,
       "data-density": density,
       "data-sticky": stickyHeader || void 0,
+      "data-sticky-col": stickyFirstColumn || 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 });
+  return /* @__PURE__ */ jsx17("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 });
+  return /* @__PURE__ */ jsx17("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 });
+  return /* @__PURE__ */ jsx17("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 });
+  return /* @__PURE__ */ jsx17("tfoot", { className: cn("cfi-ui-table__foot", className), ...rest });
 }
 var TableFoot = TableFooter;
 function TableRow({ selected, interactive, className, ...rest }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "tr",
     {
       "data-selected": selected || void 0,
@@ -1216,7 +1364,7 @@ function TableHead({
   ...rest
 }) {
   const ariaSort = sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "th",
     {
       scope: "col",
@@ -1225,15 +1373,15 @@ function TableHead({
       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: sortable ? /* @__PURE__ */ jsxs17("button", { type: "button", className: "cfi-ui-table__sort", onClick: onSort, children: [
+        /* @__PURE__ */ jsx17("span", { children }),
+        /* @__PURE__ */ jsx17("span", { className: "cfi-ui-table__sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx17(ArrowUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown, {}) })
       ] }) : children
     }
   );
 }
 function TableCell({ numeric, truncate, className, ...rest }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "td",
     {
       "data-numeric": numeric || void 0,
@@ -1244,10 +1392,10 @@ function TableCell({ numeric, truncate, 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 }) });
+  return /* @__PURE__ */ jsx17("tr", { className: "cfi-ui-table__row", children: /* @__PURE__ */ jsx17("td", { colSpan, className: "cfi-ui-table__empty", children }) });
 }
 function TableCaption({ className, ...rest }) {
-  return /* @__PURE__ */ jsx16("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
+  return /* @__PURE__ */ jsx17("caption", { className: cn("cfi-ui-table__caption", className), ...rest });
 }
 
 // src/Tabs.tsx
@@ -1258,12 +1406,12 @@ import * as RadixTabs from "@radix-ui/react-tabs";
 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";
+import { jsx as jsx18, jsxs as jsxs18 } 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(
+    return /* @__PURE__ */ jsx18(
       RadixTabs.List,
       {
         ref,
@@ -1276,18 +1424,18 @@ var TabsList = forwardRef14(
 );
 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" })
+    return /* @__PURE__ */ jsxs18(RadixTabs.Trigger, { ref, className: cn("cfi-ui-tabs__trigger", className), ...rest, children: [
+      icon && /* @__PURE__ */ jsx18("span", { className: "cfi-ui-tabs__icon", children: icon }),
+      /* @__PURE__ */ jsx18("span", { children }),
+      count !== void 0 && /* @__PURE__ */ jsx18(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 });
+  return /* @__PURE__ */ jsx18(RadixTabs.Content, { ref, className: cn("cfi-ui-tabs__content", className), ...rest });
 });
 function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     Tabs,
     {
       value,
@@ -1295,7 +1443,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
       defaultValue: defaultValue ?? tabs[0]?.value,
       className: cn("cfi-ui", "cfi-ui-tabs", className),
       children: [
-        /* @__PURE__ */ jsx17(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(TabsList, { variant, children: tabs.map((tab) => /* @__PURE__ */ jsx18(
           TabsTrigger,
           {
             value: tab.value,
@@ -1306,7 +1454,7 @@ function TabSet({ tabs, value, onValueChange, defaultValue, variant, className }
           },
           tab.value
         )) }),
-        tabs.map((tab) => /* @__PURE__ */ jsx17(TabsContent, { value: tab.value, children: tab.content }, tab.value))
+        tabs.map((tab) => /* @__PURE__ */ jsx18(TabsContent, { value: tab.value, children: tab.content }, tab.value))
       ]
     }
   );
@@ -1319,12 +1467,12 @@ import { forwardRef as forwardRef15 } from "react";
 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";
+import { jsx as jsx19, jsxs as jsxs19 } 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__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-separator-labeled", className), ...rest, children: /* @__PURE__ */ jsx19("span", { className: "cfi-ui-separator-labeled__label", children: label }) });
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       role: "separator",
@@ -1345,8 +1493,8 @@ function Progress({
   ...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(
+  return /* @__PURE__ */ jsxs19("div", { className: cn("cfi-ui", "cfi-ui-progress-wrap", className), ...rest, children: [
+    /* @__PURE__ */ jsx19(
       "div",
       {
         role: "progressbar",
@@ -1358,7 +1506,7 @@ function Progress({
         "data-size": size,
         "data-indeterminate": clamped == null || void 0,
         className: "cfi-ui-progress",
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           "div",
           {
             className: "cfi-ui-progress__fill",
@@ -1367,7 +1515,7 @@ function Progress({
         )
       }
     ),
-    showValue && clamped != null && /* @__PURE__ */ jsxs18("span", { className: "cfi-ui-progress__value", children: [
+    showValue && clamped != null && /* @__PURE__ */ jsxs19("span", { className: "cfi-ui-progress__value", children: [
       Math.round(clamped),
       "%"
     ] })
@@ -1375,7 +1523,7 @@ function Progress({
 }
 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(
+    return /* @__PURE__ */ jsx19("div", { className: cn("cfi-ui", "cfi-ui-skeleton-stack", className), "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx19(
       "div",
       {
         "data-shape": "text",
@@ -1385,7 +1533,7 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
       i
     )) });
   }
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       "aria-hidden": "true",
@@ -1399,18 +1547,18 @@ function Skeleton({ shape = "block", width, height, lines = 1, className, style,
 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 })
+  return /* @__PURE__ */ jsxs19("span", { ref, "data-size": size, className: cn("cfi-ui", "cfi-ui-avatar", className), ...rest, children: [
+    src ? /* @__PURE__ */ jsx19("img", { src, alt: name, className: "cfi-ui-avatar__image" }) : /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", children: initials }),
+    !src && /* @__PURE__ */ jsx19("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: [
+  return /* @__PURE__ */ jsxs19("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 > 0 && /* @__PURE__ */ jsxs19("span", { className: "cfi-ui-avatar cfi-ui-avatar--overflow", children: [
       "+",
       hidden
     ] })
@@ -1423,7 +1571,7 @@ function ScrollArea({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       "data-orientation": orientation,
@@ -1444,20 +1592,20 @@ import { ChevronDown as ChevronDown3 } from "lucide-react";
 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";
+import { jsx as jsx20, jsxs as jsxs20 } 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 });
+  return /* @__PURE__ */ jsx20(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 })
+  return /* @__PURE__ */ jsx20(RadixAccordion.Header, { className: "cfi-ui-accordion__header", children: /* @__PURE__ */ jsxs20(RadixAccordion.Trigger, { ref, className: cn("cfi-ui-accordion__trigger", className), ...rest, children: [
+    /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(ChevronDown3, {}) }),
+    /* @__PURE__ */ jsx20("span", { className: "cfi-ui-accordion__label", children }),
+    meta && /* @__PURE__ */ jsx20("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 }) });
+  return /* @__PURE__ */ jsx20(RadixAccordion.Content, { ref, className: cn("cfi-ui-accordion__content", className), ...rest, children: /* @__PURE__ */ jsx20("div", { className: "cfi-ui-accordion__inner", children }) });
 });
 function Accordion({
   sections,
@@ -1474,9 +1622,9 @@ function Accordion({
     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 })
+  return /* @__PURE__ */ jsx20(AccordionRoot, { ...rootProps, children: sections.map((section) => /* @__PURE__ */ jsxs20(AccordionItem, { value: section.value, disabled: section.disabled, children: [
+    /* @__PURE__ */ jsx20(AccordionTrigger, { meta: section.meta, children: section.label }),
+    /* @__PURE__ */ jsx20(AccordionContent, { children: section.content })
   ] }, section.value)) });
 }
 function ToggleGroup({
@@ -1488,7 +1636,7 @@ function ToggleGroup({
   className,
   ...aria
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     RadixToggleGroup.Root,
     {
       type: "single",
@@ -1500,7 +1648,7 @@ function ToggleGroup({
       "data-size": size,
       className: cn("cfi-ui", "cfi-ui-toggle-group", className),
       ...aria,
-      children: options.map((option) => /* @__PURE__ */ jsxs19(
+      children: options.map((option) => /* @__PURE__ */ jsxs20(
         RadixToggleGroup.Item,
         {
           value: option.value,
@@ -1509,7 +1657,7 @@ function ToggleGroup({
           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.icon && /* @__PURE__ */ jsx20("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
             option.label
           ]
         },
@@ -1526,9 +1674,9 @@ import { AlertCircle, Loader2 } from "lucide-react";
 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";
+import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 function LoadingState({ label = "Loading\u2026", size = "block", className }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       className: cn("cfi-ui", "cfi-ui-pagestate", className),
@@ -1536,8 +1684,8 @@ function LoadingState({ label = "Loading\u2026", size = "block", className }) {
       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 })
+        /* @__PURE__ */ jsx21(Loader2, { className: "cfi-ui-pagestate__spinner", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx21("span", { className: "cfi-ui-pagestate__muted", children: label })
       ]
     }
   );
@@ -1551,13 +1699,13 @@ function ErrorState({
   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 })
+  return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, role: "alert", children: [
+    /* @__PURE__ */ jsx21(AlertCircle, { className: "cfi-ui-pagestate__icon", "data-tone": "error", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
+      message && /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__muted", children: message })
     ] }),
-    onRetry && /* @__PURE__ */ jsx20("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
+    onRetry && /* @__PURE__ */ jsx21("button", { type: "button", className: "cfi-ui-pagestate__retry", onClick: onRetry, children: retryLabel })
   ] });
 }
 function EmptyState({
@@ -1568,17 +1716,17 @@ function EmptyState({
   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 })
+  return /* @__PURE__ */ jsxs21("div", { className: cn("cfi-ui", "cfi-ui-pagestate", className), "data-size": size, children: [
+    icon && /* @__PURE__ */ jsx21("span", { className: "cfi-ui-pagestate__icon", children: icon }),
+    /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__title", children: title }),
+      description && /* @__PURE__ */ jsx21("p", { className: "cfi-ui-pagestate__muted", children: description })
     ] }),
-    action && /* @__PURE__ */ jsx20("div", { className: "cfi-ui-pagestate__action", children: action })
+    action && /* @__PURE__ */ jsx21("div", { className: "cfi-ui-pagestate__action", children: action })
   ] });
 }
 function ComingSoon({ title, detail, className }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     EmptyState,
     {
       title,
@@ -1589,9 +1737,9 @@ function ComingSoon({ title, detail, className }) {
 }
 
 // src/useSortState.ts
-import { useCallback as useCallback2, useMemo as useMemo3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo4, useState as useState4 } from "react";
 function useSortState(initialKey, initialDirection = "asc") {
-  const [sort, setSort] = useState3({ key: initialKey, direction: initialDirection });
+  const [sort, setSort] = useState4({ key: initialKey, direction: initialDirection });
   const toggle = useCallback2((key) => {
     setSort(
       (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
@@ -1621,23 +1769,23 @@ function useSortState(initialKey, initialDirection = "asc") {
     },
     [sort]
   );
-  return useMemo3(
+  return useMemo4(
     () => ({ 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 { forwardRef as forwardRef17, useEffect as useEffect3, useRef as useRef3, useState as useState5 } 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";
+import { jsx as jsx22 } 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 [local, setLocal] = useState5(value);
   const timer = useRef3(void 0);
   const latest = useRef3(onChange);
   latest.current = onChange;
@@ -1654,7 +1802,7 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
     setLocal("");
     latest.current("");
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Input,
     {
       ...rest,
@@ -1663,8 +1811,8 @@ var SearchInput = forwardRef17(function SearchInput2({ value, onChange, delay =
       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
+      prefix: /* @__PURE__ */ jsx22(Search2, { "aria-hidden": "true" }),
+      suffix: local ? /* @__PURE__ */ jsx22("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx22(X4, { "aria-hidden": "true" }) }) : void 0
     }
   );
 });
@@ -1676,7 +1824,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 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";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -1692,12 +1840,12 @@ function Pagination({
   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: [
+  return /* @__PURE__ */ jsxs22("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(
+    /* @__PURE__ */ jsx23("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
+    /* @__PURE__ */ jsxs22("div", { className: "cfi-ui-pagination__controls", children: [
+      /* @__PURE__ */ jsx23(
         "button",
         {
           type: "button",
@@ -1705,15 +1853,15 @@ function Pagination({
           onClick: () => onPageChange(current - 1),
           disabled: current <= 1,
           "aria-label": labels?.previous ?? "Previous page",
-          children: /* @__PURE__ */ jsx22(ChevronLeft, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx23(ChevronLeft, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsxs21("span", { className: "cfi-ui-pagination__page", children: [
+      /* @__PURE__ */ jsxs22("span", { className: "cfi-ui-pagination__page", children: [
         current,
         " / ",
         pageCount
       ] }),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         "button",
         {
           type: "button",
@@ -1721,7 +1869,7 @@ function Pagination({
           onClick: () => onPageChange(current + 1),
           disabled: current >= pageCount,
           "aria-label": labels?.next ?? "Next page",
-          children: /* @__PURE__ */ jsx22(ChevronRight, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx23(ChevronRight, { "aria-hidden": "true" })
         }
       )
     ] })
@@ -1789,6 +1937,7 @@ export {
   ComingSoon,
   ConfirmDialog,
   CountBadge,
+  CreatableSelect,
   Dialog,
   DialogBody,
   DialogClose,

package/package.json

@@ -1,56 +1,55 @@
-{
-  "name": "@campfire-interactive/ui",
-  "version": "0.1.0",
-  "_notReady": "NOT READY FOR APP ADOPTION — see docs/plans/2026-09-09-ui-package-and-showcase.md. private:true blocks npm publish until the components are vetted.",
-  "description": "UNVETTED, DO NOT ADOPT YET — Shared UI primitives for the Campfire Suite — Radix behaviour, plain CSS styled entirely from the design tokens, no Tailwind required",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "npm run build",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "@campfire-interactive/design-tokens": "*",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "lucide-react": "^0.487.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.3"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  }
-}
+{
+  "name": "@campfire-interactive/ui",
+  "version": "0.3.0",
+  "description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@campfire-interactive/design-tokens": "*",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "lucide-react": "^0.487.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}