@fayz-ai/ui 0.23.0 → 0.24.0

package/dist/{chunk-XEUIYSW2.js → chunk-NXFVYZY7.js}

@@ -7,7 +7,7 @@ import React15__default, { useState, useRef, useEffect, useMemo, useCallback } f
 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, MoreHorizontal, Search, ChevronLeft, ChevronRight, ImageIcon, RefreshCw, Clock, Plus, Download, Calendar, Loader2, CalendarDays, SlidersHorizontal } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, ArrowLeft, MoreHorizontal, Search, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, ImageIcon, RefreshCw, Clock, Plus, Download, Calendar, Loader2, CalendarDays, SlidersHorizontal } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Toaster } from 'sonner';
 export { toast } from 'sonner';
@@ -564,6 +564,9 @@ function ChevronPager({ page, pageSize, total, onPageChange, noun }) {
   const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
   const to = Math.min(page * pageSize, total);
   const button = "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+  const JANELA = 5;
+  const inicio = Math.max(1, Math.min(page - Math.floor(JANELA / 2), pages - JANELA + 1));
+  const numeros = Array.from({ length: Math.min(JANELA, pages) }, (_, i) => inicio + i);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2", children: [
     /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
       from.toLocaleString(),
@@ -574,6 +577,17 @@ function ChevronPager({ page, pageSize, total, onPageChange, noun }) {
       noun ? ` ${noun}` : ""
     ] }),
     pages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      pages > JANELA && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Primeira p\xE1gina",
+          className: button,
+          disabled: page <= 1,
+          onClick: () => onPageChange(1),
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -585,11 +599,18 @@ function ChevronPager({ page, pageSize, total, onPageChange, noun }) {
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsxs("span", { className: "px-1 text-xs tabular-nums text-muted-foreground", children: [
-        page.toLocaleString(),
-        " / ",
-        pages.toLocaleString()
-      ] }),
+      numeros.map((n) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `P\xE1gina ${n}`,
+          "aria-current": n === page ? "page" : void 0,
+          onClick: () => onPageChange(n),
+          className: n === page ? "flex h-7 min-w-7 items-center justify-center rounded-md bg-primary px-1.5 text-xs font-medium tabular-nums text-primary-foreground" : "flex h-7 min-w-7 items-center justify-center rounded-md px-1.5 text-xs tabular-nums text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          children: n.toLocaleString()
+        },
+        n
+      )),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -600,6 +621,17 @@ function ChevronPager({ page, pageSize, total, onPageChange, noun }) {
           onClick: () => onPageChange(page + 1),
           children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
         }
+      ),
+      pages > JANELA && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "\xDAltima p\xE1gina",
+          className: button,
+          disabled: page >= pages,
+          onClick: () => onPageChange(pages),
+          children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+        }
       )
     ] })
   ] });
@@ -1124,6 +1156,7 @@ function ListView({
   search: controlledSearch,
   onSearchChange,
   searchDebounce = 300,
+  searchOwnRow,
   tags,
   allTagLabel = "All",
   tagsLabel,
@@ -1142,8 +1175,11 @@ function ListView({
   page = 1,
   pageSize = 25,
   rangeOfLabel = "of",
+  firstPageLabel = "First page",
   prevPageLabel = "Previous page",
   nextPageLabel = "Next page",
+  lastPageLabel = "Last page",
+  pageLabel = "Page",
   onPageChange,
   toolbar,
   filters,
@@ -1171,6 +1207,9 @@ function ListView({
   }, [onSearchChange, searchDebounce]);
   const totalItems = total ?? data.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const PAGE_WINDOW = 5;
+  const windowStart = Math.max(1, Math.min(page - Math.floor(PAGE_WINDOW / 2), totalPages - PAGE_WINDOW + 1));
+  const pageWindow = Array.from({ length: Math.min(PAGE_WINDOW, totalPages) }, (_, i) => windowStart + i);
   const showPagination = onPageChange && totalItems > pageSize;
   const showSearch = !!onSearchChange;
   const showTags = tags && tags.length > 0 && onTagChange;
@@ -1219,7 +1258,11 @@ function ListView({
           actions: selection.barActions
         }
       ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        showSearch && /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+        showSearch && // `basis-full` e não uma segunda `div`: o contentor já é
+        // `flex-wrap`, então uma primeira cria que ocupa a linha
+        // inteira empurra o resto para baixo sozinha. Sem filtros,
+        // a busca volta a partilhar a linha com atualizar/exportar.
+        /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0 flex-1", searchOwnRow && "basis-full"), 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",
@@ -1280,8 +1323,8 @@ function ListView({
           getRowId
         }
       ),
-      showPagination && /* @__PURE__ */ jsxs("div", { className: "-mt-px flex flex-wrap items-center justify-between gap-2 rounded-b-card border-t border-border px-3 py-2", children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      showPagination && /* @__PURE__ */ jsxs("div", { className: "-mt-px flex min-h-9 flex-col items-center gap-2 rounded-b-card border-t border-border px-3 py-2 sm:grid sm:grid-cols-[1fr_auto_1fr] sm:gap-3", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground sm:justify-self-start", children: [
           (page - 1) * pageSize + 1,
           "\u2013",
           Math.min(page * pageSize, totalItems),
@@ -1291,6 +1334,17 @@ function ListView({
           totalItems.toLocaleString()
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          totalPages > PAGE_WINDOW && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPageChange(1),
+              disabled: page <= 1,
+              "aria-label": firstPageLabel,
+              className: PAGER_BTN,
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+            }
+          ),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -1302,11 +1356,18 @@ function ListView({
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "px-1 text-xs tabular-nums text-muted-foreground", children: [
-            page,
-            " / ",
-            totalPages
-          ] }),
+          pageWindow.map((n) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPageChange(n),
+              "aria-label": `${pageLabel} ${n}`,
+              "aria-current": n === page ? "page" : void 0,
+              className: n === page ? "flex h-7 min-w-7 items-center justify-center rounded-md bg-primary px-1.5 text-xs font-medium tabular-nums text-primary-foreground" : "flex h-7 min-w-7 items-center justify-center rounded-md px-1.5 text-xs tabular-nums text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: n
+            },
+            n
+          )),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -1317,6 +1378,17 @@ function ListView({
               className: PAGER_BTN,
               children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
             }
+          ),
+          totalPages > PAGE_WINDOW && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onPageChange(totalPages),
+              disabled: page >= totalPages,
+              "aria-label": lastPageLabel,
+              className: PAGER_BTN,
+              children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+            }
           )
         ] })
       ] })
@@ -2141,7 +2213,9 @@ function MultiSelect({
   emptyLabel = "Nada encontrado",
   disabled,
   className,
-  searchThreshold = 8
+  searchThreshold = 8,
+  variant = "field",
+  icon: Icon2
 }) {
   const [query, setQuery] = React15.useState("");
   const selected = React15.useMemo(() => new Set(value), [value]);
@@ -2160,15 +2234,22 @@ function MultiSelect({
       {
         type: "button",
         disabled,
+        "aria-label": allLabel,
         className: cn(
-          "flex h-9 w-full items-center justify-between gap-2 rounded-input border border-input bg-card px-3 py-1.5 text-xs",
-          "shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] transition-colors hover:bg-muted/40",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          value.length === 0 && "text-muted-foreground",
+          variant === "chip" ? cn(
+            "inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+            value.length > 0 ? "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"
+          ) : cn(
+            "flex h-9 w-full items-center justify-between gap-2 rounded-input border border-input bg-card px-3 py-1.5 text-xs",
+            "shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] transition-colors hover:bg-muted/40",
+            value.length === 0 && "text-muted-foreground"
+          ),
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label }),
+          variant === "chip" && Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-3 w-3 shrink-0 opacity-70" }),
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", variant === "chip" && "max-w-[12rem]"), children: label }),
           /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
             value.length > 0 && // Limpar dentro do gatilho: a alternativa é desmarcar cinco itens
             // um a um para voltar a "todos", e é o caminho de volta mais
@@ -2188,43 +2269,64 @@ function MultiSelect({
                 children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx(ChevronDown, { className: cn("shrink-0", variant === "chip" ? "h-3 w-3 opacity-60" : "h-3.5 w-3.5 opacity-50") })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs(DropdownContent, { align: "start", className: "w-[--radix-dropdown-menu-trigger-width] p-0", children: [
-      options.length >= searchThreshold && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-2 py-1.5", children: [
-        /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            value: query,
-            onChange: (e) => setQuery(e.target.value),
-            placeholder: searchPlaceholder,
-            onKeyDown: (e) => e.stopPropagation(),
-            className: "w-full bg-transparent text-xs outline-none placeholder:text-muted-foreground"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: emptyLabel }) : filtered.map((o) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            e.preventDefault();
-            toggle(o.value);
-          },
-          className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors hover:bg-muted",
-          children: [
-            /* @__PURE__ */ jsx(Checkbox, { checked: selected.has(o.value), onChange: () => toggle(o.value) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: o.label }),
-            o.hint && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: o.hint })
-          ]
-        },
-        o.value
-      )) })
-    ] })
+    /* @__PURE__ */ jsxs(
+      DropdownContent,
+      {
+        align: "start",
+        className: cn(
+          "p-0",
+          // Em `field` o painel casa com o campo, que é largo. Em `chip` a
+          // largura do gatilho é a do rótulo — herdá-la daria uma lista de
+          // dois dedos. Aqui ele ganha a sua própria medida de leitura.
+          variant === "chip" ? "w-[min(16rem,calc(100vw-1.5rem))]" : "w-[--radix-dropdown-menu-trigger-width]"
+        ),
+        children: [
+          options.length >= searchThreshold && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b px-2 py-1.5", children: [
+            /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: searchPlaceholder,
+                onKeyDown: (e) => e.stopPropagation(),
+                className: "w-full bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-4 text-center text-xs text-muted-foreground", children: emptyLabel }) : filtered.map((o) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.preventDefault();
+                toggle(o.value);
+              },
+              className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx(Checkbox, { checked: selected.has(o.value), onChange: () => toggle(o.value) }),
+                o.color && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "h-2 w-2 shrink-0 rounded-full ring-1 ring-inset ring-black/10",
+                    style: { backgroundColor: o.color }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: o.label }),
+                o.hint && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: o.hint })
+              ]
+            },
+            o.value
+          )) })
+        ]
+      }
+    )
   ] });
 }
 var INLINE_TOKEN = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g;
@@ -2772,5 +2874,5 @@ function StockEntryForm({
 }
 
 export { Badge, Breadcrumb, BulkActionBar, ChevronPager, CurrencyInput, DatePicker, DateRangeChip, DotBadge, DraftCommitBar, FilterCheckBox, FilterCheckList, FilterCheckRow, FilterChip, FilterSection, Input, ListView, Markdown, MarkdownEditor, MiniCalendar, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, MultiSelect, PhoneField, PhoneLink, RefreshButton, RowActions, SearchCombobox, SearchField, SearchSelect, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, StatTiles, StockEntryForm, Tabs, TabsContent, TabsList, TabsTrigger, Thumbnail, TimePicker, ToastProvider, WHATSAPP_BRAND_COLOR, WhatsAppIcon, badgeVariants, formatPhone2 as formatPhone, normalizePhone, renderMarkdown, setRowActionsLabel, toLocalISODate, useRowSelection };
-//# sourceMappingURL=chunk-XEUIYSW2.js.map
-//# sourceMappingURL=chunk-XEUIYSW2.js.map
+//# sourceMappingURL=chunk-NXFVYZY7.js.map
+//# sourceMappingURL=chunk-NXFVYZY7.js.map