@fayz-ai/ui 0.9.0 → 0.10.0

package/dist/{chunk-S5KNM4D2.js → chunk-SEIY2F5F.js}

@@ -1,12 +1,12 @@
-import { useSaveBarVisible, useCrossModuleBack, useBackHandler } from './chunk-75EFDLST.js';
-import { DataTable, SegmentedControl } from './chunk-G6OKZ7WL.js';
-import { cn, Button } from './chunk-YRVE4FOD.js';
-import * as React11 from 'react';
+import { useSaveBarVisible, useCrossModuleBack, useBackHandler, HeaderTabs } from './chunk-VAKWUUVC.js';
+import { Card, DataTable, Dropdown, DropdownTrigger, DropdownContent, DropdownItem, SegmentedControl } from './chunk-6V5MGYXH.js';
+import { cn, Button } from './chunk-OKZ6WQB3.js';
+import * as React13 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, Check, ChevronDown, ChevronUp, ArrowLeft, Clock, Search, Plus, ChevronLeft, ChevronRight, Calendar, Loader2, CheckCircle2, AlertTriangle, XCircle, Info } from 'lucide-react';
+import { X, Check, ChevronDown, ChevronUp, ArrowLeft, Clock, Plus, Search, RefreshCw, Download, ChevronLeft, ChevronRight, 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 { createPortal } from 'react-dom';
 import { useTranslation, getCurrentLocale } from '@fayz-ai/core';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-var Input = React11.forwardRef(
+var Input = React13.forwardRef(
   ({ className, type, error, description, id, ...props }, ref) => {
-    const inputId = id ?? React11.useId();
+    const inputId = id ?? React13.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 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ModalOverlay = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -120,7 +120,7 @@ var ModalOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 ModalOverlay.displayName = "ModalOverlay";
-var ModalContent = React11.forwardRef(({ className, children, size = "lg", hideClose, noPadding, onPointerDownOutside, onInteractOutside, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(
+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(
   DialogPrimitive.Content,
   {
     ref,
@@ -172,9 +172,9 @@ 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 = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", 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 }));
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var ModalDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 ModalDescription.displayName = "ModalDescription";
 var COLOR_CLASSES = {
   primary: "border-primary bg-primary text-primary-foreground",
@@ -182,7 +182,7 @@ var COLOR_CLASSES = {
   warning: "border-warning bg-warning text-white",
   destructive: "border-destructive bg-destructive text-destructive-foreground"
 };
-var Checkbox = React11.forwardRef(
+var Checkbox = React13.forwardRef(
   ({ checked = false, onChange, disabled, className, color = "primary", id, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -211,7 +211,7 @@ Checkbox.displayName = "Checkbox";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -227,7 +227,7 @@ var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -240,7 +240,7 @@ var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -253,7 +253,7 @@ var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React11.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -281,7 +281,7 @@ var SelectContent = React11.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -290,7 +290,7 @@ var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -306,7 +306,7 @@ var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -344,7 +344,7 @@ function ToastProvider({
   );
 }
 var Tabs = TabsPrimitive.Root;
-var TabsList = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -356,7 +356,7 @@ var TabsList = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -368,7 +368,7 @@ var TabsTrigger = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -380,7 +380,7 @@ var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
-var Separator2 = React11.forwardRef(
+var Separator2 = React13.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -431,7 +431,7 @@ function formatPhone(digits, fallback, countryCode) {
   const tail = rest.length === 9 ? rest.slice(5) : rest.slice(4);
   return `+55 (${ddd}) ${head}-${tail}`;
 }
-var PhoneLink = React11.forwardRef(
+var PhoneLink = React13.forwardRef(
   ({ phone, message, countryCode, raw, className, children, ...props }, ref) => {
     const { e164, display } = normalizePhone(phone, countryCode);
     const label = children ?? (raw ? phone ?? "" : display);
@@ -480,7 +480,7 @@ function Breadcrumb({ parent, current, onBack }) {
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React13.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -493,6 +493,88 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
   }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function StatTiles({ tiles, loading, className }) {
+  if (tiles.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-4 sm:grid-cols-2 lg:grid-cols-4", className), children: tiles.map((tile) => {
+    const Icon2 = tile.icon;
+    return /* @__PURE__ */ jsxs(Card, { className: "p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "min-w-0 truncate text-[13px] text-muted-foreground", title: tile.hint ?? tile.label, children: tile.label }),
+        Icon2 ? /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0 text-muted-foreground" }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-end justify-between gap-2", children: [
+        loading && tile.value === void 0 && !tile.pending ? /* @__PURE__ */ jsx("div", { className: "h-7 w-16 animate-pulse rounded bg-muted" }) : tile.pending ? /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-muted-foreground/50", children: "\u2014" }) : /* @__PURE__ */ jsx("span", { className: "truncate text-2xl font-semibold tabular-nums", children: tile.value }),
+        tile.pending && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground", children: tile.pending })
+      ] })
+    ] }, 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 = React13.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 = React13.forwardRef(function Hint2({ label, children, side = "top", delayDuration = 0, ...rest }, ref) {
+  if (!label) return React13.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 })
+  ] }) });
+});
 function formatTime12(h, m) {
   const period = h >= 12 ? "pm" : "am";
   const h12 = h % 12 || 12;
@@ -608,6 +690,8 @@ function TimePicker({ value, onChange, interval = 15, min = "00:00", max = "23:4
     )
   ] });
 }
+var ALL_TAG = "__all__";
+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,
   data,
@@ -632,6 +716,12 @@ function ListView({
   pageSize = 25,
   onPageChange,
   toolbar,
+  filters,
+  headerActions,
+  onExport,
+  exportLabel = "Export",
+  onRefresh,
+  refreshLabel = "Refresh",
   className
 }) {
   const [internalSearch, setInternalSearch] = useState(controlledSearch ?? "");
@@ -653,66 +743,69 @@ function ListView({
   const showPagination = onPageChange && totalItems > pageSize;
   const showSearch = !!onSearchChange;
   const showTags = tags && tags.length > 0 && onTagChange;
-  const showToolbar = showSearch || onNew || showTags;
+  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 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 }),
+    emptyActionLabel && onEmptyAction && /* @__PURE__ */ jsxs(Button, { variant: "default", className: "mt-3", onClick: onEmptyAction, children: [
+      /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+      emptyActionLabel
+    ] })
+  ] });
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    showToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between", children: [
-      showSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm", children: [
-        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            placeholder: searchPlaceholder,
-            value: internalSearch,
-            onChange: (e) => handleSearchChange(e.target.value),
-            className: "w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] pl-8 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-          }
-        )
-      ] }),
-      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
+    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
+        ] })
       ] })
     ] }),
-    showTags && /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
+    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 && /* @__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(
+            "input",
+            {
+              type: "text",
+              placeholder: searchPlaceholder,
+              value: internalSearch,
+              onChange: (e) => handleSearchChange(e.target.value),
+              className: "w-full bg-transparent py-1.5 pl-8 pr-3 text-sm placeholder:text-muted-foreground focus:outline-none"
+            }
+          )
+        ] }),
+        (filters || onRefresh || onExport) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: [
+          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(
-        "button",
+        DataTable,
         {
-          onClick: () => onTagChange(void 0),
-          className: cn(
-            "rounded-full px-2.5 py-1 text-xs font-medium transition-colors",
-            !activeTag ? "bg-primary text-primary-foreground" : "bg-muted/50 text-muted-foreground hover:bg-muted"
-          ),
-          children: allTagLabel
+          variant: "bare",
+          columns,
+          data: loading ? [] : data,
+          loading,
+          skeletonRows: loading ? 3 : void 0,
+          emptyMessage: emptyState,
+          onRowClick
         }
-      ),
-      tags.map((tag) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => onTagChange(tag.value),
-          className: cn(
-            "rounded-full px-2.5 py-1 text-xs font-medium transition-colors",
-            activeTag === tag.value ? "bg-primary text-primary-foreground" : "bg-muted/50 text-muted-foreground hover:bg-muted"
-          ),
-          children: tag.label
-        },
-        tag.value
-      ))
+      )
     ] }),
-    toolbar,
-    loading ? /* @__PURE__ */ jsx(DataTable, { columns, data: [], loading: true, variant: "card" }) : data.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center rounded-lg border-2 border-dashed border-muted", children: [
-      EmptyIcon && /* @__PURE__ */ jsx(EmptyIcon, { className: "h-8 w-8 text-muted-foreground/30 mb-2" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
-      emptyActionLabel && onEmptyAction && /* @__PURE__ */ jsx("button", { onClick: onEmptyAction, className: "text-xs text-primary hover:underline mt-1", children: emptyActionLabel })
-    ] }) : /* @__PURE__ */ jsx(
-      DataTable,
-      {
-        columns,
-        data,
-        onRowClick,
-        variant: "card"
-      }
-    ),
     showPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
       /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
         (page - 1) * pageSize + 1,
@@ -783,7 +876,9 @@ function parseDate(s) {
 }
 var TRIGGER_VARIANT = {
   input: "rounded-input border border-input bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm w-full",
-  toolbar: "h-[26px] rounded-button border border-border bg-card shadow-button px-2.5 text-xs font-medium"
+  toolbar: "h-[26px] rounded-button border border-border bg-card shadow-button px-2.5 text-xs font-medium",
+  // Mesmas medidas e cores de FilterChip.
+  chip: "rounded-full border border-transparent bg-muted/70 px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
 };
 function DatePicker({ value, onChange, className, variant = "input", defaultOpen, onOpenChange }) {
   const t = useTranslation();
@@ -857,10 +952,10 @@ function DatePicker({ value, onChange, className, variant = "input", defaultOpen
         ref: triggerRef,
         type: "button",
         onClick: () => setOpen((p) => !p),
-        className: `flex items-center gap-2 text-left transition-colors hover:bg-muted/30 ${TRIGGER_VARIANT[variant]}`,
+        className: `flex items-center text-left transition-colors ${variant === "chip" ? "gap-1" : "gap-2 hover:bg-muted/30"} ${TRIGGER_VARIANT[variant]}`,
         children: [
-          /* @__PURE__ */ jsx(Calendar, { className: `shrink-0 text-muted-foreground ${variant === "toolbar" ? "h-3 w-3" : "h-3.5 w-3.5"}` }),
-          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: value ? (variant === "toolbar" ? formatDateCompact : formatDate)(selectedDate, locale) : t("common.selectDate") })
+          /* @__PURE__ */ jsx(Calendar, { className: `shrink-0 ${variant === "input" ? "h-3.5 w-3.5 text-muted-foreground" : "h-3 w-3 opacity-70"}` }),
+          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: value ? (variant === "input" ? formatDate : formatDateCompact)(selectedDate, locale) : t("common.selectDate") })
         ]
       }
     ),
@@ -947,16 +1042,16 @@ function SearchSelect({
   className,
   disabled
 }) {
-  const [open, setOpen] = React11.useState(false);
-  const [query, setQuery] = React11.useState("");
-  const [results, setResults] = React11.useState([]);
-  const [loading, setLoading] = React11.useState(false);
-  const [creating, setCreating] = React11.useState(false);
-  const [selectedLabel, setSelectedLabel] = React11.useState(displayValue ?? "");
-  const containerRef = React11.useRef(null);
-  const inputRef = React11.useRef(null);
-  const timerRef = React11.useRef();
-  React11.useEffect(() => {
+  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(() => {
     function handler(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -965,10 +1060,10 @@ function SearchSelect({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, []);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     if (displayValue !== void 0) setSelectedLabel(displayValue);
   }, [displayValue]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     if (open && loadOnOpen && query.length === 0 && results.length === 0 && !loading) {
       setLoading(true);
       Promise.resolve(onSearch("")).then(setResults).catch(() => setResults([])).finally(() => setLoading(false));
@@ -1026,7 +1121,7 @@ function SearchSelect({
     setResults([]);
     setTimeout(() => inputRef.current?.focus(), 0);
   }
-  const groups = React11.useMemo(() => {
+  const groups = React13.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const opt of results) {
       const group = opt.group ?? "";
@@ -1103,7 +1198,7 @@ function SearchSelect({
         }
       )
     ] }) : /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-auto py-1", children: [
-      [...groups.entries()].map(([group, options]) => /* @__PURE__ */ jsxs(React11.Fragment, { 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",
@@ -1154,9 +1249,9 @@ function CurrencyInput({
   className,
   disabled
 }) {
-  const inputRef = React11.useRef(null);
-  const [focused, setFocused] = React11.useState(false);
-  const format = React11.useCallback((v) => {
+  const inputRef = React13.useRef(null);
+  const [focused, setFocused] = React13.useState(false);
+  const format = React13.useCallback((v) => {
     return new Intl.NumberFormat(locale, {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2
@@ -1265,7 +1360,7 @@ function ConfirmDialog({
 }) {
   const config = VARIANT_CONFIG[variant];
   const Icon2 = config.icon;
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     if (!open) return;
     function handleKey(e) {
       if (e.key === "Escape") onCancel();
@@ -1312,7 +1407,7 @@ function ConfirmDialog({
 }
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React11.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React13.forwardRef(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -1327,6 +1422,39 @@ var PopoverContent = React11.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 INLINE_TOKEN = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g;
 function renderInline(text, keyPrefix) {
   return text.split(INLINE_TOKEN).map((part, i) => {
@@ -1340,7 +1468,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(React11.Fragment, { children: part }, key);
+    return part === "" ? null : /* @__PURE__ */ jsx(React13.Fragment, { children: part }, key);
   });
 }
 function parseBlocks(source) {
@@ -1424,7 +1552,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(React11.Fragment, { children: [
+        return /* @__PURE__ */ jsx("p", { children: block.lines.map((l, li) => /* @__PURE__ */ jsxs(React13.Fragment, { children: [
           li > 0 && /* @__PURE__ */ jsx("br", {}),
           renderInline(l, `${key}-${li}`)
         ] }, `${key}-${li}`)) }, key);
@@ -1445,7 +1573,7 @@ function MarkdownEditor({
   renderPreview,
   className
 }) {
-  const [mode, setMode] = React11.useState(
+  const [mode, setMode] = React13.useState(
     defaultMode === "preview" && value.trim() === "" ? "edit" : defaultMode
   );
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
@@ -1688,6 +1816,6 @@ function SearchCombobox({
   ] });
 }
 
-export { Badge, Breadcrumb, Checkbox, ConfirmDialog, CurrencyInput, DatePicker, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PhoneLink, Popover, PopoverContent, PopoverTrigger, SearchCombobox, SearchSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Tabs, TabsContent, TabsList, TabsTrigger, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, normalizePhone, renderMarkdown };
-//# sourceMappingURL=chunk-S5KNM4D2.js.map
-//# sourceMappingURL=chunk-S5KNM4D2.js.map
+export { Badge, Breadcrumb, Checkbox, ConfirmDialog, CurrencyInput, DatePicker, FilterChip, Hint, Input, ListView, Markdown, MarkdownEditor, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, PhoneLink, Popover, PopoverContent, PopoverTrigger, SearchCombobox, SearchSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, StatTiles, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TimePicker, ToastProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, normalizePhone, renderMarkdown };
+//# sourceMappingURL=chunk-SEIY2F5F.js.map
+//# sourceMappingURL=chunk-SEIY2F5F.js.map