@fayz-ai/ui 0.12.0 → 0.15.0

package/dist/{chunk-7BHG3XGJ.js → chunk-SLWTKHNY.js}

@@ -1,12 +1,12 @@
-import { useSaveBarVisible, useCrossModuleBack, useBackHandler, HeaderTabs } from './chunk-VAKWUUVC.js';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, Card, DataTable, SegmentedControl } from './chunk-JGJNRNQW.js';
+import { useSaveBarVisible, useCrossModuleBack, useBackHandler, PageHeaderActions } from './chunk-NA3GE4H3.js';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, Card, DataTable } from './chunk-KD2V3TAX.js';
 import { cn, Button } from './chunk-OKZ6WQB3.js';
 import * as React14 from 'react';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, ArrowLeft, Search, ChevronLeft, ChevronRight, MoreHorizontal, ImageIcon, RefreshCw, Clock, Plus, Download, Calendar, Loader2, CheckCircle2, AlertTriangle, XCircle, Info } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, ArrowLeft, Search, ChevronLeft, ChevronRight, MoreHorizontal, ImageIcon, RefreshCw, Clock, Plus, Download, Calendar, Loader2 } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Toaster } from 'sonner';
 export { toast } from 'sonner';
@@ -320,7 +320,9 @@ var TabsList = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      // Theme radius, not a fixed one: the chip and its track are controls, and
+      // an app that states 12px corners had these two answering 6px.
+      "inline-flex h-10 items-center justify-center rounded-button bg-muted p-1 text-muted-foreground",
       className
     ),
     ...props
@@ -332,7 +334,7 @@ var TabsTrigger = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-button px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     ),
     ...props
@@ -531,6 +533,7 @@ function BulkActionBar({
   onSelectAll,
   onClear,
   actions = [],
+  variant = "band",
   className
 }) {
   const t = useTranslation();
@@ -541,7 +544,8 @@ function BulkActionBar({
     "div",
     {
       className: cn(
-        "flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2",
+        "flex flex-wrap items-center justify-between gap-2",
+        variant === "band" ? "rounded-lg border border-border bg-muted/30 px-3 py-2" : "w-full min-h-8",
         className
       ),
       role: "region",
@@ -737,65 +741,6 @@ function StatTiles({ tiles, loading, className }) {
     ] }, tile.id);
   }) });
 }
-var TRACK = {
-  sm: "h-4 w-7",
-  md: "h-5 w-9"
-};
-var THUMB = {
-  sm: "h-3 w-3 data-[on=true]:translate-x-3",
-  md: "h-4 w-4 data-[on=true]:translate-x-4"
-};
-var Switch = React14.forwardRef(function Switch2({ checked, onCheckedChange, size = "sm", label, className, disabled, ...rest }, ref) {
-  const control = /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      role: "switch",
-      "aria-checked": checked,
-      disabled,
-      onClick: (e) => {
-        e.stopPropagation();
-        rest.onClick?.(e);
-        if (!disabled) onCheckedChange(!checked);
-      },
-      className: cn(
-        "relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        TRACK[size],
-        checked ? "bg-primary" : "bg-muted-foreground/30",
-        className
-      ),
-      ...rest,
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-on": checked,
-          className: cn(
-            "pointer-events-none ml-0.5 inline-block rounded-full bg-background shadow-sm transition-transform",
-            THUMB[size]
-          )
-        }
-      )
-    }
-  );
-  if (label == null) return control;
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: cn(
-        "inline-flex items-center gap-2 text-xs text-muted-foreground",
-        disabled ? "cursor-not-allowed" : "cursor-pointer"
-      ),
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        control,
-        /* @__PURE__ */ jsx("span", { children: label })
-      ]
-    }
-  );
-});
 var Hint = React14.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
   if (!label) return React14.cloneElement(children, { ...rest, ref });
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -880,7 +825,7 @@ function TimePicker({ value, onChange, interval = 15, min = "00:00", max = "23:4
         onClick: () => !readOnly && setOpen((p) => !p),
         onKeyDown: handleKeyDown,
         disabled: readOnly,
-        className: `flex items-center gap-2 rounded-lg border px-3 py-2 text-sm w-full text-left transition-colors ${readOnly ? "bg-muted/40 text-muted-foreground cursor-default" : "bg-background hover:bg-muted/30"}`,
+        className: `flex items-center gap-2 rounded-button border px-3 py-2 text-sm w-full text-left transition-colors ${readOnly ? "bg-muted/40 text-muted-foreground cursor-default" : "bg-background hover:bg-muted/30"}`,
         children: [
           /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }),
           /* @__PURE__ */ jsx("span", { children: displayValue || "--:--" })
@@ -918,7 +863,91 @@ function TimePicker({ value, onChange, interval = 15, min = "00:00", max = "23:4
     )
   ] });
 }
-var ALL_TAG = "__all__";
+function useRowSelection({
+  rows,
+  actions,
+  getRowId,
+  enabled = true
+}) {
+  const identify = React14.useCallback(
+    (row) => getRowId ? getRowId(row) : String(row?.id ?? ""),
+    [getRowId]
+  );
+  const visible = React14.useMemo(() => rows ?? [], [rows]);
+  const [rawSelection, setRawSelection] = React14.useState([]);
+  const visibleIds = React14.useMemo(() => new Set(visible.map(identify)), [visible, identify]);
+  const selectedIds = React14.useMemo(
+    () => rawSelection.filter((id) => visibleIds.has(id)),
+    [rawSelection, visibleIds]
+  );
+  const selectedRows = React14.useMemo(() => {
+    const picked = new Set(selectedIds);
+    return visible.filter((row) => picked.has(identify(row)));
+  }, [visible, selectedIds, identify]);
+  const clear = React14.useCallback(() => setRawSelection([]), []);
+  const selectAll = React14.useCallback(
+    () => setRawSelection(visible.map(identify)),
+    [visible, identify]
+  );
+  const barActions = React14.useMemo(
+    () => (actions ?? []).map((action) => ({
+      id: action.id,
+      label: action.label,
+      icon: action.icon,
+      destructive: action.destructive,
+      overflow: action.overflow,
+      disabled: action.disabled,
+      onSelect: () => action.onSelect(selectedRows)
+    })),
+    [actions, selectedRows]
+  );
+  const selectable = enabled && barActions.length > 0;
+  return {
+    selectedIds,
+    selectedRows,
+    setSelectedIds: setRawSelection,
+    clear,
+    selectAll,
+    barActions,
+    selectable,
+    hasSelection: selectable && selectedIds.length > 0,
+    getRowId: identify,
+    total: visible.length
+  };
+}
+function FilterChip({ allLabel, options, value, onChange, label, icon: Icon2, className }) {
+  const active = value != null && value !== "";
+  const current = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxs(Dropdown, { children: [
+    /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        className: cn(
+          "inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+          active ? "border-primary/30 bg-primary/10 text-primary hover:bg-primary/15" : "border-transparent bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground",
+          className
+        ),
+        children: [
+          Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-3 w-3 shrink-0 opacity-70" }),
+          /* @__PURE__ */ jsx("span", { className: "max-w-[12rem] truncate", children: current?.label ?? allLabel }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownContent, { align: "start", children: [
+      /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => onChange(void 0), children: [
+        allLabel,
+        !active && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3.5 w-3.5 shrink-0 pl-1" })
+      ] }),
+      options.map((o) => /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => onChange(o.value), children: [
+        o.label,
+        value === o.value && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3.5 w-3.5 shrink-0 pl-1" })
+      ] }, o.value))
+    ] })
+  ] });
+}
 var ICON_BTN = "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
 function ListView({
   columns,
@@ -930,11 +959,14 @@ function ListView({
   searchDebounce = 300,
   tags,
   allTagLabel = "All",
+  tagsLabel,
   activeTag,
   onTagChange,
   newLabel,
   onNew,
   onRowClick,
+  bulkActions,
+  getRowId,
   emptyIcon: EmptyIcon,
   emptyMessage = "No results found.",
   emptyActionLabel,
@@ -971,8 +1003,17 @@ function ListView({
   const showPagination = onPageChange && totalItems > pageSize;
   const showSearch = !!onSearchChange;
   const showTags = tags && tags.length > 0 && onTagChange;
-  const showHeader = showTags || onNew && newLabel || headerActions;
-  const headerTabs = showTags ? [{ value: ALL_TAG, label: allTagLabel }, ...tags.map((t) => ({ value: t.value, label: t.label }))] : null;
+  const selection = useRowSelection({ rows: loading ? [] : data, actions: bulkActions, getRowId });
+  const tagFilter = showTags ? /* @__PURE__ */ jsx(
+    FilterChip,
+    {
+      label: tagsLabel,
+      allLabel: allTagLabel,
+      options: tags.map((t) => ({ value: t.value, label: t.label })),
+      value: activeTag,
+      onChange: (next) => onTagChange(next)
+    }
+  ) : null;
   const emptyState = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 py-6", children: [
     EmptyIcon && /* @__PURE__ */ jsx(EmptyIcon, { className: "mb-2 h-9 w-9 text-muted-foreground/40" }),
     /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-foreground", children: emptyMessage }),
@@ -982,26 +1023,26 @@ function ListView({
     ] })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    showHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-      headerTabs ? /* @__PURE__ */ jsx(
-        HeaderTabs,
-        {
-          tabs: headerTabs,
-          value: activeTag ?? ALL_TAG,
-          onChange: (next) => onTagChange(next === ALL_TAG ? void 0 : next)
-        }
-      ) : /* @__PURE__ */ jsx("div", {}),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        headerActions,
-        onNew && newLabel && /* @__PURE__ */ jsxs(Button, { variant: "default", size: "default", onClick: onNew, className: "shrink-0", children: [
-          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
-          newLabel
-        ] })
+    (headerActions || onNew && newLabel) && /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      headerActions,
+      onNew && newLabel && /* @__PURE__ */ jsxs(Button, { variant: "default", size: "default", onClick: onNew, className: "shrink-0", children: [
+        /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+        newLabel
       ] })
-    ] }),
+    ] }) }),
     toolbar,
     /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
-      (showSearch || filters || onRefresh || onExport) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2", children: [
+      (showSearch || tagFilter || filters || onRefresh || onExport || selection.hasSelection) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2", children: selection.hasSelection ? /* @__PURE__ */ jsx(
+        BulkActionBar,
+        {
+          variant: "inline",
+          count: selection.selectedIds.length,
+          total: selection.total,
+          onSelectAll: selection.selectAll,
+          onClear: selection.clear,
+          actions: selection.barActions
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         showSearch && /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
           /* @__PURE__ */ jsx(
@@ -1015,12 +1056,13 @@ function ListView({
             }
           )
         ] }),
-        (filters || onRefresh || onExport) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: [
+        (tagFilter || filters || onRefresh || onExport) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: [
+          tagFilter,
           filters,
           onRefresh && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": refreshLabel, title: refreshLabel, onClick: onRefresh, className: ICON_BTN, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
           onExport && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": exportLabel, title: exportLabel, onClick: onExport, className: ICON_BTN, children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }) })
         ] })
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsx(
         DataTable,
         {
@@ -1030,7 +1072,11 @@ function ListView({
           loading,
           skeletonRows: loading ? 3 : void 0,
           emptyMessage: emptyState,
-          onRowClick
+          onRowClick,
+          selectable: selection.selectable,
+          selectedIds: selection.selectedIds,
+          onSelectedIdsChange: selection.setSelectedIds,
+          getRowId
         }
       )
     ] }),
@@ -1252,6 +1298,7 @@ function DatePicker({ value, onChange, className, variant = "input", defaultOpen
     )
   ] });
 }
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React14.useLayoutEffect : React14.useEffect;
 function SearchSelect({
   value,
   displayValue,
@@ -1266,12 +1313,14 @@ function SearchSelect({
   searchingLabel = "Searching...",
   allowCreate,
   createLabel = "Add",
+  clearLabel = "Clear",
   onCreate,
   renderOption,
   loadOnOpen = true,
   className,
   disabled
 }) {
+  const canCreate = !!onCreate && allowCreate !== false;
   const [open, setOpen] = React14.useState(false);
   const [query, setQuery] = React14.useState("");
   const [results, setResults] = React14.useState([]);
@@ -1281,11 +1330,14 @@ function SearchSelect({
   const containerRef = React14.useRef(null);
   const inputRef = React14.useRef(null);
   const timerRef = React14.useRef();
+  const [rect, setRect] = React14.useState(null);
+  const dropdownRef = React14.useRef(null);
   React14.useEffect(() => {
     function handler(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
+      const target = e.target;
+      if (containerRef.current?.contains(target)) return;
+      if (dropdownRef.current?.contains(target)) return;
+      setOpen(false);
     }
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -1362,6 +1414,27 @@ function SearchSelect({
   }, [results]);
   const hasValue = !!value && !!selectedLabel;
   const showDropdown = open && (query.length >= minChars || loadOnOpen);
+  useIsomorphicLayoutEffect(() => {
+    if (!showDropdown) {
+      setRect(null);
+      return;
+    }
+    const measure = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const below = window.innerHeight - r.bottom;
+      const above = below < 240 && r.top > below;
+      setRect({ left: r.left, top: above ? r.top : r.bottom, width: r.width, above });
+    };
+    measure();
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [showDropdown]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
     label && /* @__PURE__ */ jsxs("label", { className: "text-xs font-medium text-muted-foreground", children: [
       label,
@@ -1408,65 +1481,72 @@ function SearchSelect({
         ]
       }
     ),
-    showDropdown && /* @__PURE__ */ jsx("div", { className: "fayz-glass-surface absolute top-full left-0 right-0 z-50 mt-1 rounded-lg border bg-popover shadow-lg overflow-hidden", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-      " ",
-      searchingLabel
-    ] }) : results.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 text-center", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: noResultsLabel ?? (query ? `No results for "${query}"` : "No results") }),
-      allowCreate && onCreate && /* @__PURE__ */ jsxs(
-        "button",
+    showDropdown && rect && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          onClick: () => handleCreate(query),
-          className: "mt-2 text-xs text-primary hover:underline",
-          children: [
-            "+ ",
-            createLabel,
-            ' "',
-            query,
-            '"'
-          ]
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-auto py-1", children: [
-      [...groups.entries()].map(([group, options]) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
-        group && /* @__PURE__ */ jsx("div", { className: "sticky top-0 bg-muted/50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
-        options.map((opt) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => handleSelect(opt),
-            disabled: opt.disabled,
-            className: cn(
-              "w-full text-left px-3 py-2 hover:bg-muted/50 transition-colors flex items-center gap-2.5",
-              opt.disabled && "opacity-40 cursor-not-allowed",
-              opt.id === value && "bg-muted/30"
-            ),
-            children: renderOption ? renderOption(opt) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              opt.icon,
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm truncate", children: opt.label }),
-                opt.subtitle && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: opt.subtitle })
-              ] })
-            ] })
+          ref: dropdownRef,
+          style: {
+            position: "fixed",
+            left: rect.left,
+            width: rect.width,
+            ...rect.above ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.top + 4 }
           },
-          opt.id
-        ))
-      ] }, group)),
-      allowCreate && onCreate && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => handleCreate(query),
-          className: "w-full text-left px-3 py-2 text-xs text-primary hover:bg-muted/50 transition-colors border-t",
+          className: "fayz-glass-surface z-[60] overflow-hidden rounded-lg border bg-popover shadow-lg",
           children: [
-            "+ ",
-            createLabel,
-            ' "',
-            query,
-            '"'
+            loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+              " ",
+              searchingLabel
+            ] }) : results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: noResultsLabel ?? (query ? `No results for "${query}"` : "No results") }) }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto py-1", children: [...groups.entries()].map(([group, options]) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+              group && /* @__PURE__ */ jsx("div", { className: "sticky top-0 bg-muted/50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
+              options.map((opt) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => handleSelect(opt),
+                  disabled: opt.disabled,
+                  className: cn(
+                    "w-full text-left px-3 py-2 hover:bg-muted/50 transition-colors flex items-center gap-2.5",
+                    opt.disabled && "opacity-40 cursor-not-allowed",
+                    opt.id === value && "bg-muted/30"
+                  ),
+                  children: renderOption ? renderOption(opt) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    opt.icon,
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm truncate", children: opt.label }),
+                      opt.subtitle && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: opt.subtitle })
+                    ] })
+                  ] })
+                },
+                opt.id
+              ))
+            ] }, group)) }),
+            (canCreate || hasValue || query.trim()) && !loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t bg-muted/20 px-1.5 py-1", children: [
+              hasValue || query.trim() ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleClear,
+                  className: "rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+                  children: clearLabel
+                }
+              ) : /* @__PURE__ */ jsx("span", {}),
+              canCreate && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleCreate(query),
+                  className: "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/10",
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
+                    query.trim() ? `${createLabel} "${query.trim()}"` : createLabel
+                  ]
+                }
+              )
+            ] })
           ]
         }
-      )
-    ] }) })
+      ),
+      document.body
+    )
   ] });
 }
 function CurrencyInput({
@@ -1552,92 +1632,9 @@ function CurrencyInput({
     )
   ] });
 }
-var VARIANT_CONFIG = {
-  default: {
-    icon: Info,
-    iconBg: "bg-info/10",
-    iconColor: "text-info",
-    buttonVariant: "default"
-  },
-  destructive: {
-    icon: XCircle,
-    iconBg: "bg-destructive/10",
-    iconColor: "text-destructive",
-    buttonVariant: "destructive"
-  },
-  warning: {
-    icon: AlertTriangle,
-    iconBg: "bg-warning/10",
-    iconColor: "text-warning",
-    buttonVariant: "destructive"
-  },
-  success: {
-    icon: CheckCircle2,
-    iconBg: "bg-success/10",
-    iconColor: "text-success",
-    buttonVariant: "default"
-  }
-};
-function ConfirmDialog({
-  open,
-  onConfirm,
-  onCancel,
-  title,
-  description,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  variant = "default",
-  loading = false
-}) {
-  const config = VARIANT_CONFIG[variant];
-  const Icon2 = config.icon;
-  React14.useEffect(() => {
-    if (!open) return;
-    function handleKey(e) {
-      if (e.key === "Escape") onCancel();
-    }
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [open, onCancel]);
-  if (!open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[60] flex items-center justify-center", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute inset-0 bg-black/50 backdrop-blur-[2px] animate-fade-in",
-          onClick: onCancel
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "relative z-10 w-full max-w-sm mx-4 rounded-modal border border-border bg-card shadow-lg animate-zoom-in",
-          role: "alertdialog",
-          "aria-modal": "true",
-          "aria-labelledby": "confirm-title",
-          "aria-describedby": description ? "confirm-desc" : void 0,
-          children: /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-              /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-full shrink-0", config.iconBg), children: /* @__PURE__ */ jsx(Icon2, { className: cn("h-5 w-5", config.iconColor) }) }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 pt-0.5", children: [
-                /* @__PURE__ */ jsx("h3", { id: "confirm-title", className: "text-sm font-semibold text-foreground", children: title }),
-                description && /* @__PURE__ */ jsx("p", { id: "confirm-desc", className: "text-xs text-muted-foreground mt-1 leading-relaxed", children: description })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-5", children: [
-              /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onCancel, disabled: loading, children: cancelLabel }),
-              /* @__PURE__ */ jsx(Button, { variant: config.buttonVariant, size: "sm", onClick: onConfirm, disabled: loading, children: loading ? "Processing..." : confirmLabel })
-            ] })
-          ] })
-        }
-      )
-    ] }),
-    document.body
-  );
-}
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverContent = React14.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
@@ -1653,38 +1650,50 @@ var PopoverContent = React14.forwardRef(({ className, align = "start", sideOffse
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-function FilterChip({ allLabel, options, value, onChange, label, icon: Icon2, className }) {
-  const active = value != null && value !== "";
-  const current = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxs(Dropdown, { children: [
-    /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-label": label,
-        className: cn(
-          "inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
-          active ? "border-primary/30 bg-primary/10 text-primary hover:bg-primary/15" : "border-transparent bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground",
-          className
-        ),
-        children: [
-          Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-3 w-3 shrink-0 opacity-70" }),
-          /* @__PURE__ */ jsx("span", { className: "max-w-[12rem] truncate", children: current?.label ?? allLabel }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(DropdownContent, { align: "start", children: [
-      /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => onChange(void 0), children: [
-        allLabel,
-        !active && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3.5 w-3.5 shrink-0 pl-1" })
-      ] }),
-      options.map((o) => /* @__PURE__ */ jsxs(DropdownItem, { onClick: () => onChange(o.value), children: [
-        o.label,
-        value === o.value && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3.5 w-3.5 shrink-0 pl-1" })
-      ] }, o.value))
-    ] })
-  ] });
+var SIZE = {
+  sm: { container: "h-[26px]", segment: "px-2.5 text-xs" },
+  md: { container: "h-[30px]", segment: "px-3 text-sm" }
+};
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+  ...rest
+}) {
+  const items = options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": rest["aria-label"],
+      className: cn(
+        "inline-flex items-center rounded-button border border-border bg-card p-0.5 shadow-button",
+        SIZE[size].container,
+        className
+      ),
+      children: items.map((item) => {
+        const active = item.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            onClick: () => onChange(item.value),
+            className: cn(
+              "flex h-full items-center rounded-button font-semibold transition-colors",
+              SIZE[size].segment,
+              active ? "bg-foreground text-background" : "text-muted-foreground hover:bg-muted/60"
+            ),
+            children: item.label
+          },
+          item.value
+        );
+      })
+    }
+  );
 }
 var INLINE_TOKEN = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g;
 function renderInline(text, keyPrefix) {
@@ -1853,7 +1862,9 @@ function SearchCombobox({
   inlineLabel,
   inlineIcon = "search",
   loading,
-  onFocus: onFocusProp
+  onFocus: onFocusProp,
+  chevron,
+  required
 }) {
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -1938,10 +1949,11 @@ function SearchCombobox({
           setExpanded(true);
           setTimeout(() => inputRef.current?.focus(), 50);
         },
-        className: `flex items-center gap-1.5 w-full text-left text-sm py-1.5 pl-2 transition-colors ${isPlus ? "text-primary hover:text-primary/80" : "text-muted-foreground hover:text-foreground"} ${className ?? ""}`,
+        className: `flex items-center gap-1.5 w-full text-left text-sm py-1.5 pl-2 ${chevron ? "pr-2" : ""} transition-colors ${isPlus ? "text-primary hover:text-primary/80" : "text-muted-foreground hover:text-foreground"} ${className ?? ""}`,
         children: [
           isPlus && /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5 shrink-0" }),
-          inlineLabel
+          inlineLabel,
+          chevron && /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" })
         ]
       }
     );
@@ -1968,13 +1980,28 @@ function SearchCombobox({
         onKeyDown: handleKeyDown,
         placeholder,
         autoFocus,
-        className: minimal ? "w-full bg-transparent pl-2 pr-3 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none border-b border-transparent hover:border-border focus:border-foreground transition-colors" : "w-full rounded-lg border bg-background pl-8 pr-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+        className: minimal ? `w-full bg-transparent pl-2 ${chevron ? "pr-7" : "pr-3"} py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none border-b border-transparent hover:border-border focus:border-foreground transition-colors` : `w-full rounded-lg border bg-background pl-8 ${chevron ? "pr-8" : "pr-3"} py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`,
         role: "combobox",
         "aria-expanded": hasDropdown,
         "aria-autocomplete": "list",
+        "aria-required": required || void 0,
         "aria-activedescendant": activeIndex >= 0 ? `combobox-opt-${activeIndex}` : void 0
       }
     ),
+    chevron && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onMouseDown: (e) => {
+          e.preventDefault();
+          inputRef.current?.focus();
+        },
+        className: `absolute ${minimal ? "right-2" : "right-2.5"} top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors`,
+        children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+      }
+    ),
     hasDropdown && dropRect && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -2047,6 +2074,6 @@ function SearchCombobox({
   ] });
 }
 
-export { Badge, Breadcrumb, BulkActionBar, ChevronPager, ConfirmDialog, CurrencyInput, DatePicker, FilterChip, Hint, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PhoneField, PhoneLink, Popover, PopoverContent, PopoverTrigger, RefreshButton, SearchCombobox, SearchField, SearchSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, StatTiles, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, formatPhone2 as formatPhone, normalizePhone, renderMarkdown };
-//# sourceMappingURL=chunk-7BHG3XGJ.js.map
-//# sourceMappingURL=chunk-7BHG3XGJ.js.map
+export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, FilterChip, Hint, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PhoneField, PhoneLink, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RefreshButton, SearchCombobox, SearchField, SearchSelect, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, StatTiles, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, formatPhone2 as formatPhone, normalizePhone, renderMarkdown, useRowSelection };
+//# sourceMappingURL=chunk-SLWTKHNY.js.map
+//# sourceMappingURL=chunk-SLWTKHNY.js.map