@fayz-ai/ui 0.11.0 → 0.14.0

package/dist/{chunk-XRDCYOND.js → chunk-77CUIMOI.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 { cn, Button } from './chunk-OKZ6WQB3.js';
-import * as React13 from 'react';
+import { useSaveBarVisible, useCrossModuleBack, useBackHandler, PageHeaderActions } from './chunk-MVH64JFG.js';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, Card, DataTable } from './chunk-2EFRFYGF.js';
+import { cn, Button } from './chunk-LFZFBN3P.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, Clock, Plus, RefreshCw, 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, CheckCircle2, AlertTriangle, XCircle, Info } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Toaster } from 'sonner';
 export { toast } from 'sonner';
@@ -17,9 +17,9 @@ import { useTranslation, getCountry, unmaskPhone, maskPhone, getCurrentLocale }
 import { createPortal } from 'react-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-var Input = React13.forwardRef(
+var Input = React14.forwardRef(
   ({ className, type, error, description, id, ...props }, ref) => {
-    const inputId = id ?? React13.useId();
+    const inputId = id ?? React14.useId();
     const descriptionId = description ? `${inputId}-description` : void 0;
     const errorId = error ? `${inputId}-error` : void 0;
     return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
@@ -107,7 +107,7 @@ var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalClose = DialogPrimitive.Close;
 var ModalPortal = DialogPrimitive.Portal;
-var ModalOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ModalOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -120,7 +120,7 @@ var ModalOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 ModalOverlay.displayName = "ModalOverlay";
-var ModalContent = React13.forwardRef(({ className, children, size = "lg", hideClose, noPadding, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(
+var ModalContent = React14.forwardRef(({ className, children, size = "lg", hideClose, noPadding, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(
   DialogPrimitive.Content,
   {
     ref,
@@ -175,14 +175,14 @@ function ModalBody({ className, ...props }) {
 function ModalFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 shrink-0", className), ...props });
 }
-var ModalTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
+var ModalTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var ModalDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 ModalDescription.displayName = "ModalDescription";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -198,7 +198,7 @@ var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -211,7 +211,7 @@ var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -224,7 +224,7 @@ var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React14.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -252,7 +252,7 @@ var SelectContent = React13.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -261,7 +261,7 @@ var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -277,7 +277,7 @@ var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -315,31 +315,33 @@ function ToastProvider({
   );
 }
 var Tabs = TabsPrimitive.Root;
-var TabsList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     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
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     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
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -351,7 +353,7 @@ var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
-var Separator2 = React13.forwardRef(
+var Separator2 = React14.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -402,7 +404,7 @@ function formatPhone(digits, fallback, countryCode) {
   const tail = rest.length === 9 ? rest.slice(5) : rest.slice(4);
   return `+55 (${ddd}) ${head}-${tail}`;
 }
-var PhoneLink = React13.forwardRef(
+var PhoneLink = React14.forwardRef(
   ({ phone, message, countryCode, raw, className, children, ...props }, ref) => {
     const { e164, display } = normalizePhone(phone, countryCode);
     const label = children ?? (raw ? phone ?? "" : display);
@@ -451,7 +453,7 @@ function Breadcrumb({ parent, current, onBack }) {
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React13.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React14.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -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",
@@ -617,8 +621,8 @@ var ICON_CLASSES = {
   lg: "h-5 w-5"
 };
 function Thumbnail({ src, alt = "", size = "md", icon: Icon2 = ImageIcon, className }) {
-  const [failed, setFailed] = React13.useState(false);
-  React13.useEffect(() => {
+  const [failed, setFailed] = React14.useState(false);
+  React14.useEffect(() => {
     setFailed(false);
   }, [src]);
   const base = cn("shrink-0 overflow-hidden", SIZE_CLASSES[size], className);
@@ -644,6 +648,47 @@ function Thumbnail({ src, alt = "", size = "md", icon: Icon2 = ImageIcon, classN
   );
 }
 Thumbnail.displayName = "Thumbnail";
+function RefreshButton({ onRefresh, fromCache, label, labelCached, className, ...rest }) {
+  const [phase, setPhase] = React14.useState("idle");
+  const alive = React14.useRef(true);
+  React14.useEffect(() => () => {
+    alive.current = false;
+  }, []);
+  const title = fromCache ? labelCached ?? label : label;
+  async function run() {
+    if (phase === "busy") return;
+    setPhase("busy");
+    try {
+      await onRefresh();
+    } catch {
+    }
+    if (!alive.current) return;
+    setPhase("done");
+    setTimeout(() => {
+      if (alive.current) setPhase((p) => p === "done" ? "idle" : p);
+    }, 1400);
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      onClick: () => {
+        void run();
+      },
+      className: cn(
+        "inline-flex items-center justify-center transition",
+        fromCache && phase !== "done" && "text-amber-600 hover:text-amber-700 dark:text-amber-500 dark:hover:text-amber-400",
+        phase === "done" && "text-emerald-600 dark:text-emerald-500",
+        className
+      ),
+      ...rest,
+      children: phase === "done" ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(RefreshCw, { className: cn("h-4 w-4", phase === "busy" && "animate-spin") })
+    }
+  );
+}
+RefreshButton.displayName = "RefreshButton";
 function PhoneField({
   value,
   onChange,
@@ -704,7 +749,7 @@ 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 = React13.forwardRef(function Switch2({ checked, onCheckedChange, size = "sm", label, className, disabled, ...rest }, ref) {
+var Switch = React14.forwardRef(function Switch2({ checked, onCheckedChange, size = "sm", label, className, disabled, ...rest }, ref) {
   const control = /* @__PURE__ */ jsx(
     "button",
     {
@@ -755,8 +800,8 @@ var Switch = React13.forwardRef(function Switch2({ checked, onCheckedChange, siz
     }
   );
 });
-var Hint = React13.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
-  if (!label) return React13.cloneElement(children, { ...rest, ref });
+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: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, ...rest, ref, children }),
     /* @__PURE__ */ jsx(TooltipContent, { side, className: "px-2 py-1 text-xs font-medium", children: label })
@@ -877,7 +922,39 @@ function TimePicker({ value, onChange, interval = 15, min = "00:00", max = "23:4
     )
   ] });
 }
-var ALL_TAG = "__all__";
+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,
@@ -889,6 +966,7 @@ function ListView({
   searchDebounce = 300,
   tags,
   allTagLabel = "All",
+  tagsLabel,
   activeTag,
   onTagChange,
   newLabel,
@@ -930,8 +1008,16 @@ 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 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 }),
@@ -941,26 +1027,16 @@ 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) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2", 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(
@@ -974,7 +1050,8 @@ 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" }) })
@@ -1211,6 +1288,7 @@ function DatePicker({ value, onChange, className, variant = "input", defaultOpen
     )
   ] });
 }
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React14.useLayoutEffect : React14.useEffect;
 function SearchSelect({
   value,
   displayValue,
@@ -1225,34 +1303,39 @@ function SearchSelect({
   searchingLabel = "Searching...",
   allowCreate,
   createLabel = "Add",
+  clearLabel = "Clear",
   onCreate,
   renderOption,
   loadOnOpen = true,
   className,
   disabled
 }) {
-  const [open, setOpen] = React13.useState(false);
-  const [query, setQuery] = React13.useState("");
-  const [results, setResults] = React13.useState([]);
-  const [loading, setLoading] = React13.useState(false);
-  const [creating, setCreating] = React13.useState(false);
-  const [selectedLabel, setSelectedLabel] = React13.useState(displayValue ?? "");
-  const containerRef = React13.useRef(null);
-  const inputRef = React13.useRef(null);
-  const timerRef = React13.useRef();
-  React13.useEffect(() => {
+  const canCreate = !!onCreate && allowCreate !== false;
+  const [open, setOpen] = React14.useState(false);
+  const [query, setQuery] = React14.useState("");
+  const [results, setResults] = React14.useState([]);
+  const [loading, setLoading] = React14.useState(false);
+  const [creating, setCreating] = React14.useState(false);
+  const [selectedLabel, setSelectedLabel] = React14.useState(displayValue ?? "");
+  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);
   }, []);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (displayValue !== void 0) setSelectedLabel(displayValue);
   }, [displayValue]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (open && loadOnOpen && query.length === 0 && results.length === 0 && !loading) {
       setLoading(true);
       Promise.resolve(onSearch("")).then(setResults).catch(() => setResults([])).finally(() => setLoading(false));
@@ -1310,7 +1393,7 @@ function SearchSelect({
     setResults([]);
     setTimeout(() => inputRef.current?.focus(), 0);
   }
-  const groups = React13.useMemo(() => {
+  const groups = React14.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const opt of results) {
       const group = opt.group ?? "";
@@ -1321,6 +1404,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,
@@ -1367,65 +1471,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(React13.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({
@@ -1439,9 +1550,9 @@ function CurrencyInput({
   className,
   disabled
 }) {
-  const inputRef = React13.useRef(null);
-  const [focused, setFocused] = React13.useState(false);
-  const format = React13.useCallback((v) => {
+  const inputRef = React14.useRef(null);
+  const [focused, setFocused] = React14.useState(false);
+  const format = React14.useCallback((v) => {
     return new Intl.NumberFormat(locale, {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2
@@ -1550,7 +1661,7 @@ function ConfirmDialog({
 }) {
   const config = VARIANT_CONFIG[variant];
   const Icon2 = config.icon;
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (!open) return;
     function handleKey(e) {
       if (e.key === "Escape") onCancel();
@@ -1597,7 +1708,7 @@ function ConfirmDialog({
 }
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React13.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React14.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1612,38 +1723,50 @@ var PopoverContent = React13.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) {
@@ -1658,7 +1781,7 @@ function renderInline(text, keyPrefix) {
     if (part.startsWith("`") && part.endsWith("`") && part.length > 2) {
       return /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]", children: part.slice(1, -1) }, key);
     }
-    return part === "" ? null : /* @__PURE__ */ jsx(React13.Fragment, { children: part }, key);
+    return part === "" ? null : /* @__PURE__ */ jsx(React14.Fragment, { children: part }, key);
   });
 }
 function parseBlocks(source) {
@@ -1742,7 +1865,7 @@ function renderMarkdown(source) {
       case "ol":
         return /* @__PURE__ */ jsx("ol", { className: "list-decimal space-y-1 pl-5", children: block.items.map((item, li) => /* @__PURE__ */ jsx("li", { children: renderInline(item, `${key}-${li}`) }, `${key}-${li}`)) }, key);
       case "p":
-        return /* @__PURE__ */ jsx("p", { children: block.lines.map((l, li) => /* @__PURE__ */ jsxs(React13.Fragment, { children: [
+        return /* @__PURE__ */ jsx("p", { children: block.lines.map((l, li) => /* @__PURE__ */ jsxs(React14.Fragment, { children: [
           li > 0 && /* @__PURE__ */ jsx("br", {}),
           renderInline(l, `${key}-${li}`)
         ] }, `${key}-${li}`)) }, key);
@@ -1763,7 +1886,7 @@ function MarkdownEditor({
   renderPreview,
   className
 }) {
-  const [mode, setMode] = React13.useState(
+  const [mode, setMode] = React14.useState(
     defaultMode === "preview" && value.trim() === "" ? "edit" : defaultMode
   );
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
@@ -2006,6 +2129,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, 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-XRDCYOND.js.map
-//# sourceMappingURL=chunk-XRDCYOND.js.map
+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, SegmentedControl, 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-77CUIMOI.js.map
+//# sourceMappingURL=chunk-77CUIMOI.js.map