@ceebee/ui 0.4.0 → 0.5.2

package/dist/client.js

@@ -1,16 +1,16 @@
 "use client";
-import { createContext, forwardRef, useContext, useMemo, useState, useRef, useEffect, useCallback, useId, Fragment, useReducer, Children } from 'react';
+import { createContext, forwardRef, useContext, useMemo, useState, useRef, useEffect, useCallback, useId, isValidElement, cloneElement, Fragment, useReducer, Children } from 'react';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { motion } from 'motion/react';
 import { Select as Select$1 } from '@base-ui/react/select';
-import { ChevronLeft, ChevronRight, ChevronsUpDown, Check, Minus, X, CalendarDays, Clock, Upload, Plus, Search, PanelLeftOpen, PanelLeftClose, ArrowUp, ArrowDown, XCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ChevronsUpDown, Check, Minus, X, CalendarDays, Clock, Upload as Upload$1, Plus, Search, Star, PanelLeftOpen, PanelLeftClose, ArrowUp, ArrowDown, XCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
-import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+import { Combobox } from '@base-ui/react/combobox';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
-import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Toast } from '@base-ui/react/toast';
 import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
@@ -204,7 +204,7 @@ function Field({ label, hint, error, required = false, labelHidden = false, clas
     error && error !== true ? /* @__PURE__ */ jsx("p", { className: "cb-field__error", id: errorId, role: "alert", children: error }) : null
   ] }) });
 }
-var TextInput = forwardRef(function TextInput2({ size = "md", invalid, className, ...rest }, ref) {
+var Input = forwardRef(function Input2({ size = "md", invalid, className, ...rest }, ref) {
   const field = useFieldWiring();
   return /* @__PURE__ */ jsx(
     "input",
@@ -271,10 +271,18 @@ function Select({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, { sideOffset: 6, alignItemWithTrigger: false, children: /* @__PURE__ */ jsx(Select$1.Popup, { className: "cb-select__popup", children: items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, { value: item.value, disabled: item.disabled, className: "cb-select__item", children: [
-          /* @__PURE__ */ jsx("span", { className: "cb-select__check", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14 }) }) }),
-          /* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label })
-        ] }, item.value)) }) }) })
+        /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+          Select$1.Positioner,
+          {
+            sideOffset: 6,
+            alignItemWithTrigger: false,
+            className: "cb-select__positioner",
+            children: /* @__PURE__ */ jsx(Select$1.Popup, { className: "cb-select__popup", children: items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, { value: item.value, disabled: item.disabled, className: "cb-select__item", children: [
+              /* @__PURE__ */ jsx("span", { className: "cb-select__check", children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14 }) }) }),
+              /* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label })
+            ] }, item.value)) })
+          }
+        ) })
       ]
     }
   );
@@ -326,6 +334,7 @@ function RadioGroup({
   name,
   label,
   direction = "column",
+  variant = "list",
   disabled,
   className
 }) {
@@ -341,7 +350,12 @@ function RadioGroup({
       disabled,
       "aria-label": label,
       "aria-describedby": field?.describedBy,
-      className: cn("cb-radio-group", `cb-radio-group--${direction}`, className),
+      className: cn(
+        "cb-radio-group",
+        `cb-radio-group--${variant === "segmented" ? "row" : direction}`,
+        variant === "segmented" && "cb-radio-group--segmented",
+        className
+      ),
       children: options.map((option) => {
         const id = `${groupId}-${option.value}`;
         const descriptionId = option.description ? `${id}-description` : void 0;
@@ -416,57 +430,146 @@ function Switch({
     ) : null
   ] });
 }
-function Combobox({
+function AutoComplete({
   items,
+  loadItems,
+  loadDelay = 250,
   value,
   defaultValue,
   onValueChange,
   placeholder = "Search\u2026",
   emptyMessage = "Nothing matched",
+  loadingMessage = "Searching\u2026",
+  errorMessage = "Could not search",
   size = "md",
   disabled,
   invalid,
   name,
+  id,
   className
 }) {
   const field = useFieldWiring();
   const labels = useLabels();
-  const optionFor = (candidate) => items.find((item) => item.value === candidate) ?? null;
+  const async = Boolean(loadItems);
+  const shell = useRef(null);
+  const [loaded, setLoaded] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [chosen, setChosen] = useState(null);
+  const [open, setOpen] = useState(false);
+  const available = async ? loaded : items ?? [];
+  const optionFor = (candidate) => {
+    if (candidate == null) return null;
+    if (chosen?.value === candidate) return chosen;
+    return available.find((item) => item.value === candidate) ?? null;
+  };
+  const asked = useRef(0);
+  const inFlight = useRef(null);
+  const search = useCallback((query2) => {
+    if (!loadItems) return;
+    const seq = asked.current + 1;
+    asked.current = seq;
+    inFlight.current?.abort();
+    const controller = new AbortController();
+    inFlight.current = controller;
+    setLoading(true);
+    setFailed(false);
+    loadItems(query2, controller.signal).then(
+      (next) => {
+        if (seq !== asked.current) return;
+        setLoaded(next);
+        setLoading(false);
+      },
+      () => {
+        if (seq !== asked.current || controller.signal.aborted) return;
+        setLoaded([]);
+        setFailed(true);
+        setLoading(false);
+      }
+    );
+  }, [loadItems]);
+  const [query, setQuery] = useState("");
+  useEffect(() => {
+    if (!async) return void 0;
+    const id2 = setTimeout(() => search(query), loadDelay);
+    return () => clearTimeout(id2);
+  }, [async, query, loadDelay, search]);
+  useEffect(() => () => {
+    asked.current += 1;
+    inFlight.current?.abort();
+  }, []);
+  useEffect(() => {
+    if (!open) return void 0;
+    const onScroll = (event) => {
+      const target = event.target;
+      if (target === document || target === document.documentElement || target === document.body) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    return () => window.removeEventListener("scroll", onScroll, { capture: true });
+  }, [open]);
   return /* @__PURE__ */ jsxs(
-    Combobox$1.Root,
+    Combobox.Root,
     {
-      items,
+      items: available,
+      filter: async ? null : void 0,
+      onInputValueChange: async ? (next) => setQuery(next) : void 0,
       value: value === void 0 ? void 0 : optionFor(value),
       defaultValue: defaultValue === void 0 ? void 0 : optionFor(defaultValue),
-      onValueChange: (next) => onValueChange?.(next?.value ?? null),
+      onValueChange: (next) => {
+        const option = next;
+        setChosen(option);
+        onValueChange?.(option?.value ?? null);
+      },
+      modal: true,
+      open,
+      onOpenChange: setOpen,
       isItemEqualToValue: (a, b) => a?.value === b?.value,
       itemToStringLabel: (item) => typeof item === "string" ? item : item.label,
       disabled,
       name,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("cb-combobox", `cb-combobox--${size}`, className), "data-disabled": disabled || void 0, children: [
-          /* @__PURE__ */ jsx(
-            Combobox$1.Input,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: shell,
+            className: cn("cb-autocomplete", `cb-autocomplete--${size}`, className),
+            "data-disabled": disabled || void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                Combobox.Input,
+                {
+                  className: "cb-autocomplete__input",
+                  placeholder,
+                  id: id ?? field?.controlId,
+                  "aria-describedby": field?.describedBy,
+                  "aria-invalid": invalid ?? field?.invalid ? true : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx(Combobox.Clear, { className: "cb-autocomplete__clear", "aria-label": labels.clear, children: /* @__PURE__ */ jsx(X, { size: 14 }) }),
+              /* @__PURE__ */ jsx(Combobox.Trigger, { className: "cb-autocomplete__trigger", "aria-label": labels.open, children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { anchor: shell, sideOffset: 6, className: "cb-autocomplete__positioner", children: /* @__PURE__ */ jsxs(Combobox.Popup, { className: "cb-autocomplete__popup", children: [
+          loading ? /* @__PURE__ */ jsx("p", { className: "cb-autocomplete__status", role: "status", children: loadingMessage }) : failed ? /* @__PURE__ */ jsx("p", { className: "cb-autocomplete__status", role: "alert", children: errorMessage }) : /* @__PURE__ */ jsx(Combobox.Empty, { className: "cb-autocomplete__empty", children: emptyMessage }),
+          /* @__PURE__ */ jsx(Combobox.List, { children: (item) => /* @__PURE__ */ jsxs(
+            Combobox.Item,
             {
-              className: "cb-combobox__input",
-              placeholder,
-              id: field?.controlId,
-              "aria-describedby": field?.describedBy,
-              "aria-invalid": invalid ?? field?.invalid ? true : void 0
-            }
-          ),
-          /* @__PURE__ */ jsx(Combobox$1.Clear, { className: "cb-combobox__clear", "aria-label": labels.clear, children: /* @__PURE__ */ jsx(X, { size: 14 }) }),
-          /* @__PURE__ */ jsx(Combobox$1.Trigger, { className: "cb-combobox__trigger", "aria-label": labels.open, children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 }) })
-        ] }),
-        /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsxs(Combobox$1.Popup, { className: "cb-combobox__popup", children: [
-          /* @__PURE__ */ jsx(Combobox$1.Empty, { className: "cb-combobox__empty", children: emptyMessage }),
-          /* @__PURE__ */ jsx(Combobox$1.List, { children: (item) => /* @__PURE__ */ jsxs(Combobox$1.Item, { value: item, className: "cb-combobox__item", children: [
-            /* @__PURE__ */ jsx("span", { className: "cb-combobox__check", children: /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14 }) }) }),
-            /* @__PURE__ */ jsxs("span", { className: "cb-combobox__text", children: [
-              /* @__PURE__ */ jsx("span", { className: "cb-combobox__label", children: item.label }),
-              item.description ? /* @__PURE__ */ jsx("span", { className: "cb-combobox__description", children: item.description }) : null
-            ] })
-          ] }, item.value) })
+              value: item,
+              disabled: item.disabled,
+              className: "cb-autocomplete__item",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "cb-autocomplete__check", children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14 }) }) }),
+                /* @__PURE__ */ jsxs("span", { className: "cb-autocomplete__text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "cb-autocomplete__label", children: item.label }),
+                  item.description ? /* @__PURE__ */ jsx("span", { className: "cb-autocomplete__description", children: item.description }) : null
+                ] })
+              ]
+            },
+            item.value
+          ) })
         ] }) }) })
       ]
     }
@@ -526,7 +629,7 @@ function isOutOfRange(date, min, max) {
   return false;
 }
 var WEEKDAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
-function DateInput({
+function DatePicker({
   value,
   defaultValue = null,
   onValueChange,
@@ -601,57 +704,67 @@ function DateInput({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { anchor: fieldRef, side: "bottom", align: "start", sideOffset: 6, children: /* @__PURE__ */ jsxs(Popover$1.Popup, { className: "cb-calendar", children: [
-      /* @__PURE__ */ jsxs("div", { className: "cb-calendar__head", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "cb-calendar__nav",
-            "aria-label": labels.previousMonth,
-            onClick: () => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1)),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { className: "cb-calendar__month", "aria-live": "polite", children: cursor.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "cb-calendar__nav",
-            "aria-label": labels.nextMonth,
-            onClick: () => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1)),
-            children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("table", { className: "cb-calendar__grid", children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdays.map((day) => /* @__PURE__ */ jsx("th", { scope: "col", abbr: day, children: day }, day)) }) }),
-        /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("tr", { children: week.map((cell) => {
-          const selected = isSameDay(cell.date, current);
-          const outside = isOutOfRange(cell.date, min, max);
-          return /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "cb-calendar__day",
-              "data-outside": !cell.inMonth || void 0,
-              "data-selected": selected || void 0,
-              "data-today": isSameDay(cell.date, /* @__PURE__ */ new Date()) || void 0,
-              disabled: outside,
-              "aria-pressed": selected,
-              "aria-label": formatISO(cell.date),
-              onClick: () => {
-                commit(cell.date);
-                setCursor(cell.date);
-                setOpen(false);
-              },
-              children: cell.date.getDate()
-            }
-          ) }, cell.date.toISOString());
-        }) }, weekIndex)) })
-      ] })
-    ] }) }) })
+    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+      Popover$1.Positioner,
+      {
+        anchor: fieldRef,
+        side: "bottom",
+        align: "start",
+        sideOffset: 6,
+        className: "cb-calendar__positioner",
+        children: /* @__PURE__ */ jsxs(Popover$1.Popup, { className: "cb-calendar", children: [
+          /* @__PURE__ */ jsxs("div", { className: "cb-calendar__head", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "cb-calendar__nav",
+                "aria-label": labels.previousMonth,
+                onClick: () => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1)),
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "cb-calendar__month", "aria-live": "polite", children: cursor.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "cb-calendar__nav",
+                "aria-label": labels.nextMonth,
+                onClick: () => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1)),
+                children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("table", { className: "cb-calendar__grid", children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdays.map((day) => /* @__PURE__ */ jsx("th", { scope: "col", abbr: day, children: day }, day)) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("tr", { children: week.map((cell) => {
+              const selected = isSameDay(cell.date, current);
+              const outside = isOutOfRange(cell.date, min, max);
+              return /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "cb-calendar__day",
+                  "data-outside": !cell.inMonth || void 0,
+                  "data-selected": selected || void 0,
+                  "data-today": isSameDay(cell.date, /* @__PURE__ */ new Date()) || void 0,
+                  disabled: outside,
+                  "aria-pressed": selected,
+                  "aria-label": formatISO(cell.date),
+                  onClick: () => {
+                    commit(cell.date);
+                    setCursor(cell.date);
+                    setOpen(false);
+                  },
+                  children: cell.date.getDate()
+                }
+              ) }, cell.date.toISOString());
+            }) }, weekIndex)) })
+          ] })
+        ] })
+      }
+    ) })
   ] });
 }
 
@@ -705,7 +818,7 @@ function isTimeOutOfRange(value, min, max) {
   if (max && minutes > timeToMinutes(max)) return true;
   return false;
 }
-function TimeInput({
+function TimePicker({
   value,
   defaultValue = null,
   onValueChange,
@@ -772,27 +885,37 @@ function TimeInput({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { anchor: fieldRef, side: "bottom", align: "start", sideOffset: 6, children: /* @__PURE__ */ jsx(Popover$1.Popup, { className: "cb-times", children: /* @__PURE__ */ jsx("ul", { className: "cb-times__list", children: options.map((option) => {
-      const selected = current ? timeToMinutes(current) === timeToMinutes(option) : false;
-      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "cb-times__option",
-          "data-selected": selected || void 0,
-          "aria-pressed": selected,
-          onClick: () => {
-            commit(option);
-            setOpen(false);
-          },
-          children: formatTime(option)
-        }
-      ) }, formatTime(option));
-    }) }) }) }) })
+    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+      Popover$1.Positioner,
+      {
+        anchor: fieldRef,
+        side: "bottom",
+        align: "start",
+        sideOffset: 6,
+        className: "cb-times__positioner",
+        children: /* @__PURE__ */ jsx(Popover$1.Popup, { className: "cb-times", children: /* @__PURE__ */ jsx("ul", { className: "cb-times__list", children: options.map((option) => {
+          const selected = current ? timeToMinutes(current) === timeToMinutes(option) : false;
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "cb-times__option",
+              "data-selected": selected || void 0,
+              "aria-pressed": selected,
+              onClick: () => {
+                commit(option);
+                setOpen(false);
+              },
+              children: formatTime(option)
+            }
+          ) }, formatTime(option));
+        }) }) })
+      }
+    ) })
   ] });
 }
 
-// src/form/file-drop.util.ts
+// src/form/upload.util.ts
 function matchesAccept(file, accept) {
   if (!accept || accept.length === 0) return true;
   const name = file.name.toLowerCase();
@@ -830,7 +953,7 @@ function describeAccept(rules) {
   if (typeof rules.maxSize === "number") parts.push(`up to ${Math.round(rules.maxSize / (1024 * 1024))} MB`);
   return parts.length > 0 ? ` \u2014 ${parts.join(" ")}` : "";
 }
-function FileDrop({
+function Upload({
   onFilesChange,
   files = [],
   onReject,
@@ -887,7 +1010,7 @@ function FileDrop({
               }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "cb-filedrop__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Upload, { size: 20 }) }),
+          /* @__PURE__ */ jsx("span", { className: "cb-filedrop__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Upload$1, { size: 20 }) }),
           /* @__PURE__ */ jsx("span", { className: "cb-filedrop__button", children: multiple ? labels.chooseFiles : labels.chooseFile }),
           /* @__PURE__ */ jsxs("p", { className: "cb-filedrop__hint", children: [
             multiple ? labels.dropFilesHere : labels.dropFileHere,
@@ -950,7 +1073,7 @@ function canStep(value, direction, bounds) {
   if (direction === 1) return typeof bounds.max !== "number" || value < bounds.max;
   return typeof bounds.min !== "number" || value > bounds.min;
 }
-function NumberInput({
+function InputNumber({
   value,
   defaultValue = null,
   onValueChange,
@@ -1038,7 +1161,7 @@ function NumberInput({
 function formatValue(value) {
   return value === null ? "" : String(value);
 }
-function Dialog({
+function Modal({
   open,
   defaultOpen,
   onOpenChange,
@@ -1051,26 +1174,51 @@ function Dialog({
   trigger,
   className
 }) {
-  return /* @__PURE__ */ jsxs(Dialog$1.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger ? /* @__PURE__ */ jsx(Dialog$1.Trigger, { render: trigger }) : null,
-    /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
-      /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "cb-dialog__backdrop" }),
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }) : null,
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-modal__backdrop" }),
       /* @__PURE__ */ jsxs(
-        Dialog$1.Popup,
+        Dialog.Popup,
         {
-          className: cn("cb-dialog", `cb-dialog--${size}`, `cb-dialog--${placement}`, className),
+          className: cn("cb-modal", `cb-modal--${size}`, `cb-modal--${placement}`, className),
           children: [
-            /* @__PURE__ */ jsx(Dialog$1.Title, { className: "cb-dialog__title", children: title }),
-            description ? /* @__PURE__ */ jsx(Dialog$1.Description, { className: "cb-dialog__description", children: description }) : null,
-            children ? /* @__PURE__ */ jsx("div", { className: "cb-dialog__body", children }) : null,
-            footer ? /* @__PURE__ */ jsx("div", { className: "cb-dialog__footer", children: footer }) : null
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "cb-modal__title", children: title }),
+            description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "cb-modal__description", children: description }) : null,
+            children ? /* @__PURE__ */ jsx("div", { className: "cb-modal__body", children }) : null,
+            footer ? /* @__PURE__ */ jsx("div", { className: "cb-modal__footer", children: footer }) : null
           ]
         }
       )
     ] })
   ] });
 }
-var DialogClose = Dialog$1.Close;
+var DialogClose = Dialog.Close;
+function Drawer({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  trigger,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }) : null,
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-drawer__backdrop" }),
+      /* @__PURE__ */ jsxs(Dialog.Popup, { className: cn("cb-drawer", className), children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { className: "cb-drawer__title", children: title }),
+        description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "cb-drawer__description", children: description }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "cb-drawer__body", children }) : null,
+        footer ? /* @__PURE__ */ jsx("div", { className: "cb-drawer__footer", children: footer }) : null
+      ] })
+    ] })
+  ] });
+}
+var DrawerClose = Dialog.Close;
 
 // src/overlay/command.util.ts
 function rankCommand(command, query) {
@@ -1119,9 +1267,9 @@ function CommandPalette({
     onOpenChange(false);
     command.onRun();
   };
-  return /* @__PURE__ */ jsx(Dialog$1.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
-    /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "cb-dialog__backdrop" }),
-    /* @__PURE__ */ jsxs(Dialog$1.Popup, { className: cn("cb-palette", className), "aria-label": "Command palette", children: [
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-palette__backdrop" }),
+    /* @__PURE__ */ jsxs(Dialog.Popup, { className: cn("cb-palette", className), "aria-label": "Command palette", children: [
       /* @__PURE__ */ jsxs("div", { className: "cb-palette__search", children: [
         /* @__PURE__ */ jsx(Search, { size: 16, className: "cb-palette__search-icon" }),
         /* @__PURE__ */ jsx(
@@ -1259,20 +1407,155 @@ function Popover({
 }) {
   return /* @__PURE__ */ jsxs(Popover$1.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx(Popover$1.Trigger, { render: trigger }),
-    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs(Popover$1.Popup, { className: cn("cb-popover", className), children: [
-      showArrow ? /* @__PURE__ */ jsx(Popover$1.Arrow, { className: "cb-popover__arrow", children: /* @__PURE__ */ jsx(ArrowShape, {}) }) : null,
-      children
-    ] }) }) })
+    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+      Popover$1.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        className: "cb-popover-positioner",
+        children: /* @__PURE__ */ jsxs(Popover$1.Popup, { className: cn("cb-popover", className), children: [
+          showArrow ? /* @__PURE__ */ jsx(Popover$1.Arrow, { className: "cb-popover__arrow", children: /* @__PURE__ */ jsx(ArrowShape, {}) }) : null,
+          children
+        ] })
+      }
+    ) })
   ] });
 }
-function Tooltip({ children, label, side = "top", delay = 400 }) {
+function Tooltip({
+  children,
+  label,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  showArrow = true,
+  delay = 400
+}) {
   return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsxs(Tooltip$1.Root, { children: [
     /* @__PURE__ */ jsx(Tooltip$1.Trigger, { render: children }),
-    /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { side, sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip$1.Popup, { className: "cb-tooltip", children: label }) }) })
+    /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+      Tooltip$1.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        className: "cb-tooltip-positioner",
+        children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, { className: "cb-tooltip", children: [
+          showArrow ? /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "cb-tooltip__arrow", children: /* @__PURE__ */ jsx(ArrowShape, {}) }) : null,
+          label
+        ] })
+      }
+    ) })
   ] }) });
 }
 function ArrowShape() {
-  return /* @__PURE__ */ jsx("span", { className: "cb-arrow", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "cb-arrow",
+      viewBox: "0 0 16 8",
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { className: "cb-arrow__fill", d: "M0 8 L8 0 L16 8 Z" }),
+        /* @__PURE__ */ jsx("path", { className: "cb-arrow__edge", d: "M0 8 L8 0 L16 8" })
+      ]
+    }
+  );
+}
+function Tag({
+  children,
+  tone = "neutral",
+  variant = "soft",
+  size = "md",
+  icon,
+  onClick,
+  pressed,
+  onClose,
+  render,
+  className
+}) {
+  const labels = useLabels();
+  const classes = cn("cb-badge", "cb-tag", `cb-badge--${variant}`, `cb-badge--${size}`, className);
+  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    icon,
+    children
+  ] });
+  if (render && isValidElement(render)) {
+    return cloneElement(render, {
+      className: cn(classes, "cb-tag--pressable", render.props.className),
+      "data-tone": tone,
+      children: body
+    });
+  }
+  if (onClose) {
+    return /* @__PURE__ */ jsxs("span", { className: classes, "data-tone": tone, children: [
+      body,
+      /* @__PURE__ */ jsx("button", { type: "button", className: "cb-tag__close", "aria-label": labels.dismiss, onClick: onClose, children: /* @__PURE__ */ jsx(X, { size: 12 }) })
+    ] });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(classes, "cb-tag--pressable"),
+        "data-tone": tone,
+        "aria-pressed": pressed,
+        onClick,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: classes, "data-tone": tone, children: body });
+}
+function Rate({
+  value,
+  onValueChange,
+  count = 5,
+  size = 20,
+  readOnly = false,
+  label,
+  className
+}) {
+  const group = useId();
+  const field = useFieldWiring();
+  const scores = Array.from({ length: count }, (_, i) => i + 1);
+  if (readOnly) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("cb-rate", "cb-rate--static", className),
+        role: "img",
+        "aria-label": label ? `${label}: ${value}/${count}` : `${value}/${count}`,
+        children: scores.map((n) => /* @__PURE__ */ jsx(Star, { size, strokeWidth: 2.5, fill: value >= n ? "currentColor" : "none" }, n))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("cb-rate", className),
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-describedby": field?.describedBy,
+      children: scores.map((n) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          id: `${group}-${n}`,
+          type: "button",
+          className: "cb-rate__star",
+          role: "radio",
+          "aria-checked": value === n,
+          "aria-label": `${n}/${count}`,
+          onClick: () => onValueChange?.(value === n ? 0 : n),
+          children: /* @__PURE__ */ jsx(Star, { size, strokeWidth: 2.5, fill: value >= n ? "currentColor" : "none" })
+        },
+        n
+      ))
+    }
+  );
 }
 var ICONS = {
   neutral: /* @__PURE__ */ jsx(Info, { size: 18 }),
@@ -1371,33 +1654,42 @@ function Tabs({ items, value, defaultValue, onValueChange, variant = "underline"
     }
   );
 }
-function DropdownMenu({ trigger, items, sections, align = "end", side = "bottom", className }) {
+function Dropdown({ trigger, items, sections, align = "end", side = "bottom", className }) {
   const groups = sections ?? [{ items }];
   return /* @__PURE__ */ jsxs(Menu.Root, { children: [
     /* @__PURE__ */ jsx(Menu.Trigger, { render: trigger }),
-    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side, align, sideOffset: 6, children: /* @__PURE__ */ jsx(Menu.Popup, { className: cn("cb-menu", className), children: groups.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      sectionIndex > 0 ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }) : null,
-      /* @__PURE__ */ jsxs(Menu.Group, { className: "cb-menu__group", children: [
-        section.label ? /* @__PURE__ */ jsx(Menu.GroupLabel, { className: "cb-menu__group-label", children: section.label }) : null,
-        section.items.map(
-          (item, itemIndex) => item.separator ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }, `separator-${itemIndex}`) : /* @__PURE__ */ jsxs(
-            Menu.Item,
-            {
-              className: "cb-menu__item",
-              "data-tone": item.tone,
-              disabled: item.disabled,
-              onClick: item.onSelect,
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "cb-menu__icon", children: item.checked ? /* @__PURE__ */ jsx(Check, { size: 14 }) : item.icon }),
-                /* @__PURE__ */ jsx("span", { className: "cb-menu__label", children: item.label }),
-                item.shortcut ? /* @__PURE__ */ jsx("kbd", { className: "cb-menu__shortcut", children: item.shortcut }) : null
-              ]
-            },
-            `${String(item.label)}-${itemIndex}`
-          )
-        )
-      ] })
-    ] }, `section-${sectionIndex}`)) }) }) })
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+      Menu.Positioner,
+      {
+        side,
+        align,
+        sideOffset: 6,
+        className: "cb-menu-positioner",
+        children: /* @__PURE__ */ jsx(Menu.Popup, { className: cn("cb-menu", className), children: groups.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          sectionIndex > 0 ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }) : null,
+          /* @__PURE__ */ jsxs(Menu.Group, { className: "cb-menu__group", children: [
+            section.label ? /* @__PURE__ */ jsx(Menu.GroupLabel, { className: "cb-menu__group-label", children: section.label }) : null,
+            section.items.map(
+              (item, itemIndex) => item.separator ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }, `separator-${itemIndex}`) : /* @__PURE__ */ jsxs(
+                Menu.Item,
+                {
+                  className: "cb-menu__item",
+                  "data-tone": item.tone,
+                  disabled: item.disabled,
+                  onClick: item.onSelect,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "cb-menu__icon", children: item.checked ? /* @__PURE__ */ jsx(Check, { size: 14 }) : item.icon }),
+                    /* @__PURE__ */ jsx("span", { className: "cb-menu__label", children: item.label }),
+                    item.shortcut ? /* @__PURE__ */ jsx("kbd", { className: "cb-menu__shortcut", children: item.shortcut }) : null
+                  ]
+                },
+                `${String(item.label)}-${itemIndex}`
+              )
+            )
+          ] })
+        ] }, `section-${sectionIndex}`)) })
+      }
+    ) })
   ] });
 }
 var hasActiveChild = (item) => Boolean(item.items?.some((child) => child.active));
@@ -1548,7 +1840,7 @@ function pageRange(page, pageSize, total, siblings = 1) {
   });
   return { items, totalPages, from, to };
 }
-function DataTable({
+function Table({
   columns,
   rows,
   rowKey,
@@ -1616,7 +1908,7 @@ function DataTableSkeleton({ columns, rows = 5, className }) {
     /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: columns }, (_2, cellIndex) => /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Skeleton, { width: cellIndex === 0 ? "70%" : "45%", height: "0.875rem" }) }, cellIndex)) }, rowIndex)) })
   ] }) });
 }
-DataTable.Skeleton = DataTableSkeleton;
+Table.Skeleton = DataTableSkeleton;
 function Pagination({
   page,
   pageSize,
@@ -2108,4 +2400,4 @@ function Stagger({ children, step = 0.06, from = "below", onView = false, classN
   return /* @__PURE__ */ jsx("div", { className, children: Children.map(children, (child, index) => /* @__PURE__ */ jsx(Reveal, { from, delay: index * step, onView, children: child })) });
 }
 
-export { Alert, Button, Carousel, Checkbox, Checklist, Coachmark, Combobox, CommandPalette, DEFAULT_LABELS, DataTable, DateInput, Dialog, DialogClose, DropdownMenu, Field, FileDrop, Image, LabelsProvider, MotionProvider, NumberInput, Pagination, Popover, RadioGroup, Reveal, Select, Sidebar, Stagger, Switch, Tabs, TextInput, Textarea, ThemeProvider, TimeInput, ToastProvider, Tooltip, TopBar, Tour, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };
+export { Alert, AutoComplete, Button, Carousel, Checkbox, Checklist, Coachmark, CommandPalette, DEFAULT_LABELS, DatePicker, DialogClose, Drawer, DrawerClose, Dropdown, Field, Image, Input, InputNumber, LabelsProvider, Modal, MotionProvider, Pagination, Popover, RadioGroup, Rate, Reveal, Select, Sidebar, Stagger, Switch, Table, Tabs, Tag, Textarea, ThemeProvider, TimePicker, ToastProvider, Tooltip, TopBar, Tour, Upload, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };