@fayz-ai/ui 0.12.0 → 0.15.0

package/dist/{chunk-JGJNRNQW.js → chunk-KD2V3TAX.js}

@@ -1,12 +1,12 @@
-import { cn } from './chunk-OKZ6WQB3.js';
-import * as React2 from 'react';
+import { cn, Button } from './chunk-OKZ6WQB3.js';
+import * as React5 from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { ChevronRight, Check, Circle, Minus, ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
+import { ChevronRight, Check, Circle, Minus, ChevronDown, ArrowDown, ArrowUp, ArrowUpDown, Calendar, GripVertical, RefreshCw } from 'lucide-react';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useTranslation } from '@fayz-ai/core';
 
-var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -18,7 +18,7 @@ var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -27,7 +27,7 @@ var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -39,7 +39,7 @@ var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -48,9 +48,9 @@ var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
+var CardContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -65,7 +65,7 @@ var DropdownGroup = DropdownMenuPrimitive.Group;
 var DropdownPortal = DropdownMenuPrimitive.Portal;
 var DropdownSub = DropdownMenuPrimitive.Sub;
 var DropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownSubTrigger = React5.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -82,7 +82,7 @@ var DropdownSubTrigger = React2.forwardRef(({ className, inset, children, ...pro
   }
 ));
 DropdownSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownSubContent = React2.forwardRef(({ className, ...props }, ref) => (
+var DropdownSubContent = React5.forwardRef(({ className, ...props }, ref) => (
   // Portaled, like DropdownContent. Without it the submenu renders inside the
   // parent panel's DOM — and that panel is `overflow-hidden`, so the submenu
   // was clipped to its box: a flyout you could open and never reach.
@@ -91,7 +91,7 @@ var DropdownSubContent = React2.forwardRef(({ className, ...props }, ref) => (
     {
       ref,
       className: cn(
-        "fayz-glass-surface z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "fayz-glass-surface z-50 min-w-[8rem] overflow-hidden rounded-card border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       ),
       ...props
@@ -99,20 +99,20 @@ var DropdownSubContent = React2.forwardRef(({ className, ...props }, ref) => (
   ) })
 ));
 DropdownSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "fayz-glass-surface z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "fayz-glass-surface z-50 min-w-[8rem] overflow-hidden rounded-card border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
   }
 ) }));
 DropdownContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownItem = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -125,7 +125,7 @@ var DropdownItem = React2.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 DropdownItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownCheckboxItem = React5.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -142,7 +142,7 @@ var DropdownCheckboxItem = React2.forwardRef(({ className, children, checked, ..
   }
 ));
 DropdownCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownRadioItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -158,7 +158,7 @@ var DropdownRadioItem = React2.forwardRef(({ className, children, ...props }, re
   }
 ));
 DropdownRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownLabel = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -171,7 +171,7 @@ var DropdownLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 DropdownLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -199,7 +199,7 @@ var COLOR_CLASSES = {
   warning: "border-warning bg-warning text-white",
   destructive: "border-destructive bg-destructive text-destructive-foreground"
 };
-var Checkbox = React2.forwardRef(
+var Checkbox = React5.forwardRef(
   ({ checked = false, onChange, disabled, className, color = "primary", id, indeterminate = false, ...props }, ref) => {
     const filled = checked || indeterminate;
     return /* @__PURE__ */ jsx(
@@ -243,34 +243,34 @@ function DataTable({
 }) {
   const t = useTranslation();
   const isCard = variant === "card";
-  const wrapperCls = isCard ? "overflow-hidden rounded-lg border bg-card shadow-sm" : variant === "bare" ? "" : "overflow-hidden rounded-lg border";
+  const wrapperCls = isCard ? "overflow-hidden rounded-card border bg-card shadow-sm" : variant === "bare" ? "" : "overflow-hidden rounded-lg border";
   const headerCls = isCard ? "border-b bg-muted/50" : variant === "bare" ? "border-b bg-muted/30 rounded-none" : "border-b bg-muted/30";
   const thCls = compact ? "px-3 py-1.5 text-left text-[11px] font-medium text-muted-foreground" : "px-4 py-2.5 text-left font-medium text-muted-foreground";
   const tdCls = compact ? "px-3 py-1.5 align-middle text-xs" : "px-4 py-3 align-middle";
   const tableCls = compact ? "w-full text-xs min-w-max" : "w-full text-sm min-w-max";
   const rowHoverCls = isCard ? "hover:bg-muted/30" : "hover:bg-muted/20";
-  const [sorting, setSorting] = React2.useState([]);
-  const rowId = React2.useCallback(
+  const [sorting, setSorting] = React5.useState([]);
+  const rowId = React5.useCallback(
     (row) => getRowId ? getRowId(row) : String(row.id ?? ""),
     [getRowId]
   );
-  const selected = React2.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
-  const pageIds = React2.useMemo(() => data.map(rowId), [data, rowId]);
+  const selected = React5.useMemo(() => new Set(selectedIds ?? []), [selectedIds]);
+  const pageIds = React5.useMemo(() => data.map(rowId), [data, rowId]);
   const selectedOnPage = pageIds.filter((id) => selected.has(id)).length;
   const allOnPageSelected = pageIds.length > 0 && selectedOnPage === pageIds.length;
-  const toggleRow = React2.useCallback((id) => {
+  const toggleRow = React5.useCallback((id) => {
     const next = new Set(selected);
     if (next.has(id)) next.delete(id);
     else next.add(id);
     onSelectedIdsChange?.([...next]);
   }, [selected, onSelectedIdsChange]);
-  const toggleAllOnPage = React2.useCallback(() => {
+  const toggleAllOnPage = React5.useCallback(() => {
     const next = new Set(selected);
     if (allOnPageSelected) pageIds.forEach((id) => next.delete(id));
     else pageIds.forEach((id) => next.add(id));
     onSelectedIdsChange?.([...next]);
   }, [selected, allOnPageSelected, pageIds, onSelectedIdsChange]);
-  const selectionColumn = React2.useMemo(() => ({
+  const selectionColumn = React5.useMemo(() => ({
     id: "__select__",
     enableSorting: false,
     header: () => /* @__PURE__ */ jsx(
@@ -297,7 +297,7 @@ function DataTable({
     // ids: turning the page with nothing selected changes no other dep, and the
     // memo would hand the header a button that ticks the previous page's rows.
   }), [allOnPageSelected, selectedOnPage, selected, rowId, toggleRow, toggleAllOnPage, t]);
-  const allColumns = React2.useMemo(
+  const allColumns = React5.useMemo(
     () => selectable ? [selectionColumn, ...columns] : columns,
     [selectable, selectionColumn, columns]
   );
@@ -397,52 +397,275 @@ function TableSkeleton({ columns = 4, rows = 2 }) {
     )) }, r)) })
   ] });
 }
-var SIZE = {
-  sm: { container: "h-[26px]", segment: "px-2.5 text-xs" },
-  md: { container: "h-[30px]", segment: "px-3 text-sm" }
-};
-function SegmentedControl({
+var ToolbarButton = React5.forwardRef(function ToolbarButton2({ icon: Icon, caret = true, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "sm",
+      className: cn(
+        // Sem fundo no hover: um retângulo arredondado aparecendo atrás do
+        // rótulo desenha, no hover, exatamente o botão que o repouso não tem.
+        // O que muda é o texto e o traço — mais firmes, e o tracejado vira
+        // contínuo, que é o mesmo "agora sim, clique" sem inventar caixa.
+        "group gap-1.5 border-0 bg-transparent px-2 font-medium text-muted-foreground shadow-none",
+        "hover:bg-transparent hover:text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 shrink-0 opacity-70" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1.5 border-b border-dashed border-muted-foreground/40 pb-px transition-colors group-hover:border-solid group-hover:border-foreground", children }),
+        caret ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" }) : null
+      ]
+    }
+  );
+});
+var ToolbarAction = React5.forwardRef(function ToolbarAction2({ icon: Icon, caret = false, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "sm",
+      className: cn(
+        "gap-1.5 border-0 bg-transparent px-2 font-medium text-muted-foreground shadow-none",
+        "hover:bg-transparent hover:text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 shrink-0 opacity-70" }) : null,
+        children,
+        caret ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" }) : null
+      ]
+    }
+  );
+});
+function RangeControl({
   options,
   value,
   onChange,
-  size = "sm",
-  className,
-  ...rest
+  label,
+  span,
+  extra,
+  children,
+  icon = Calendar,
+  className
 }) {
-  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
+  const current = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs(Dropdown, { children: [
+      /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(ToolbarButton, { icon, children: [
+        label ?? current?.label ?? value,
+        span ? /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: span }) : null
+      ] }) }),
+      /* @__PURE__ */ jsxs(DropdownContent, { align: "end", className: "w-56", children: [
+        options.map((o) => /* @__PURE__ */ jsxs(DropdownItem, { onSelect: () => onChange(o.value), children: [
+          o.label,
+          o.value === value ? /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3.5 w-3.5 shrink-0 pl-1" }) : null
+        ] }, o.value)),
+        extra
+      ] })
+    ] }),
+    children
+  ] });
+}
+var OFFSET_KEY = (scope) => `fayz.toolbar.offset.${scope}`;
+var EDGE = 8;
+function readOffset(key) {
+  if (typeof window === "undefined") return { x: 0, y: 0 };
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return { x: 0, y: 0 };
+    const parsed = JSON.parse(raw);
+    return {
+      x: Number.isFinite(parsed.x) ? Number(parsed.x) : 0,
+      y: Number.isFinite(parsed.y) ? Number(parsed.y) : 0
+    };
+  } catch {
+    return { x: 0, y: 0 };
+  }
+}
+function writeOffset(key, offset) {
+  if (typeof window === "undefined") return;
+  try {
+    if (offset.x === 0 && offset.y === 0) window.localStorage.removeItem(key);
+    else window.localStorage.setItem(key, JSON.stringify(offset));
+  } catch {
+  }
+}
+function useToolbarOffset(storageKey, enabled) {
+  const key = OFFSET_KEY(storageKey);
+  const barRef = React5.useRef(null);
+  const [offset, setOffset] = React5.useState(() => enabled ? readOffset(key) : { x: 0, y: 0 });
+  const [dragging, setDragging] = React5.useState(false);
+  const latest = React5.useRef(offset);
+  latest.current = offset;
+  const origin = React5.useRef(null);
+  const clamp = React5.useCallback((next) => {
+    const el = barRef.current;
+    if (!el || typeof window === "undefined") return next;
+    const rect = el.getBoundingClientRect();
+    const anchorLeft = rect.left - latest.current.x;
+    const anchorTop = rect.top - latest.current.y;
+    return {
+      x: Math.min(
+        Math.max(next.x, EDGE - anchorLeft),
+        Math.max(EDGE - anchorLeft, window.innerWidth - EDGE - rect.width - anchorLeft)
       ),
-      children: items.map((item) => {
-        const active = item.value === value;
-        return /* @__PURE__ */ jsx(
-          "button",
+      y: Math.min(
+        Math.max(next.y, EDGE - anchorTop),
+        Math.max(EDGE - anchorTop, window.innerHeight - EDGE - rect.height - anchorTop)
+      )
+    };
+  }, []);
+  const move = React5.useCallback((next, persist) => {
+    const clamped = clamp(next);
+    setOffset(clamped);
+    if (persist) writeOffset(key, clamped);
+  }, [clamp, key]);
+  const onPointerDown = (event) => {
+    if (!enabled || event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    origin.current = { px: event.clientX, py: event.clientY, ox: latest.current.x, oy: latest.current.y };
+    setDragging(true);
+  };
+  const onPointerMove = (event) => {
+    const from = origin.current;
+    if (!from) return;
+    move({ x: from.ox + (event.clientX - from.px), y: from.oy + (event.clientY - from.py) }, false);
+  };
+  const endDrag = (event) => {
+    if (!origin.current) return;
+    origin.current = null;
+    setDragging(false);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    writeOffset(key, latest.current);
+  };
+  const onKeyDown = (event) => {
+    if (!enabled) return;
+    const step = event.shiftKey ? 24 : 8;
+    const delta = {
+      ArrowLeft: { x: -step, y: 0 },
+      ArrowRight: { x: step, y: 0 },
+      ArrowUp: { x: 0, y: -step },
+      ArrowDown: { x: 0, y: step }
+    };
+    if (event.key === "Escape" || event.key === "Home") {
+      event.preventDefault();
+      move({ x: 0, y: 0 }, true);
+      return;
+    }
+    const d = delta[event.key];
+    if (!d) return;
+    event.preventDefault();
+    move({ x: latest.current.x + d.x, y: latest.current.y + d.y }, true);
+  };
+  const reset = React5.useCallback(() => move({ x: 0, y: 0 }, true), [move]);
+  React5.useEffect(() => {
+    if (!enabled) return;
+    const onResize = () => move(latest.current, false);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [enabled, move]);
+  return { barRef, offset, dragging, reset, handlers: { onPointerDown, onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown } };
+}
+function PageToolbar({
+  range,
+  filters,
+  chips,
+  customize,
+  actions,
+  onRefresh,
+  refreshLabel,
+  sticky = true,
+  movable = true,
+  storageKey = "shared",
+  moveLabel,
+  className
+}) {
+  const { barRef, offset, dragging, reset, handlers } = useToolbarOffset(storageKey, movable);
+  if (!range && !filters && !chips && !customize && !actions && !onRefresh) return null;
+  return (
+    // Caixa de altura ZERO: a barra flutua sobre os cartões em vez de abrir uma
+    // linha só para ela. Ocupando espaço, ela empurrava a grade inteira para
+    // baixo para hospedar controles que a maioria das visitas nem toca — e
+    // "flutuante" que reserva o próprio lugar não está flutuando.
+    //
+    // Zero + sticky, não `absolute`: absoluto não gruda, e a pergunta que a
+    // página responde tem de continuar à mão depois de vinte cartões de rolagem.
+    // `pointer-events-none` na caixa para que a faixa vazia dos lados não coma o
+    // clique do cartão embaixo.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          // `items-start` não é enfeite: num flex de altura 0, o alinhamento
+          // padrão (stretch) achata o filho para 0px — a barra some e só os
+          // botões transbordam, sem vidro nenhum atrás.
+          "pointer-events-none z-20 flex h-0 items-start justify-end",
+          sticky && "sticky top-0"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            role: "tab",
-            "aria-selected": active,
-            onClick: () => onChange(item.value),
+            ref: barRef,
+            style: offset.x || offset.y ? { transform: `translate3d(${offset.x}px, ${offset.y}px, 0)` } : void 0,
             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"
+              // O mesmo vidro do assistente (fayz-floating-surface, em styles.css):
+              // é a outra coisa que flutua sobre a página, e as duas se diziam
+              // flutuantes em materiais diferentes. Fill fino + blur pesado, para a
+              // grade passar por baixo sem competir.
+              "fayz-floating-surface pointer-events-auto flex max-w-full flex-wrap items-center justify-end gap-2 rounded-2xl px-2 py-1.5",
+              dragging && "select-none",
+              className
             ),
-            children: item.label
-          },
-          item.value
-        );
-      })
-    }
+            children: [
+              movable ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": moveLabel ?? "Mover a barra",
+                  title: moveLabel ?? "Mover a barra",
+                  onDoubleClick: reset,
+                  ...handlers,
+                  className: cn(
+                    "flex h-[26px] w-4 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground/50",
+                    "transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    dragging ? "cursor-grabbing text-foreground" : "cursor-grab"
+                  ),
+                  children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5" })
+                }
+              ) : null,
+              range,
+              filters,
+              chips,
+              customize,
+              actions,
+              onRefresh ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onRefresh,
+                  "aria-label": refreshLabel,
+                  className: "w-[26px] border-0 bg-transparent p-0 text-muted-foreground shadow-none hover:bg-transparent hover:text-foreground",
+                  children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" })
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    )
   );
 }
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownShortcut, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, SegmentedControl, Skeleton, TableSkeleton };
-//# sourceMappingURL=chunk-JGJNRNQW.js.map
-//# sourceMappingURL=chunk-JGJNRNQW.js.map
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DataTable, Dropdown, DropdownCheckboxItem, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownShortcut, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger, PageToolbar, RangeControl, Skeleton, TableSkeleton, ToolbarAction, ToolbarButton };
+//# sourceMappingURL=chunk-KD2V3TAX.js.map
+//# sourceMappingURL=chunk-KD2V3TAX.js.map