@fayz-ai/ui 0.10.1 → 0.11.0

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

@@ -1,20 +1,20 @@
 import { useSaveBarVisible, useCrossModuleBack, useBackHandler, HeaderTabs } from './chunk-VAKWUUVC.js';
-import { Card, DataTable, Dropdown, DropdownTrigger, DropdownContent, DropdownItem, SegmentedControl } from './chunk-6V5MGYXH.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 { 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, Plus, Search, RefreshCw, Download, ChevronLeft, ChevronRight, Calendar, Loader2, CheckCircle2, AlertTriangle, XCircle, Info } from 'lucide-react';
+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 * as SelectPrimitive from '@radix-ui/react-select';
 import { Toaster } from 'sonner';
 export { toast } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { useTranslation, getCountry, unmaskPhone, maskPhone, getCurrentLocale } from '@fayz-ai/core';
 import { createPortal } from 'react-dom';
-import { useTranslation, getCurrentLocale } from '@fayz-ai/core';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 var Input = React13.forwardRef(
@@ -143,7 +143,10 @@ var ModalContent = React13.forwardRef(({ className, children, size = "lg", hideC
       onInteractOutside?.(e);
     },
     className: cn(
-      "fayz-glass-surface fayz-modal-content saas-mdl-ct relative z-50 flex flex-col w-full outline-none",
+      // fz-container: a form inside a dialog measures the DIALOG. Without
+      // it a two-column field grid in an `sm` modal read the window's width
+      // and kept both columns in 380px.
+      "fayz-glass-surface fayz-modal-content saas-mdl-ct fz-container relative z-50 flex flex-col w-full outline-none",
       // Mobile fullscreen
       "h-full rounded-none border-0",
       // Desktop centered card
@@ -176,38 +179,6 @@ var ModalTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE
 ModalTitle.displayName = "ModalTitle";
 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",
-  success: "border-success bg-success text-white dark:border-success dark:bg-success",
-  warning: "border-warning bg-warning text-white",
-  destructive: "border-destructive bg-destructive text-destructive-foreground"
-};
-var Checkbox = React13.forwardRef(
-  ({ checked = false, onChange, disabled, className, color = "primary", id, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        id,
-        type: "button",
-        role: "checkbox",
-        "aria-checked": checked,
-        disabled,
-        onClick: () => onChange?.(!checked),
-        className: cn(
-          "peer inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border-2 transition-all duration-150",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          checked ? `${COLOR_CLASSES[color]} shadow-sm` : "border-muted-foreground/40 bg-background hover:border-muted-foreground/60",
-          className
-        ),
-        ...props,
-        children: checked && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5", strokeWidth: 3 })
-      }
-    );
-  }
-);
-Checkbox.displayName = "Checkbox";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
@@ -493,6 +464,222 @@ var TooltipContent = React13.forwardRef(({ className, sideOffset = 4, ...props }
   }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function SearchField({ value, onChange, placeholder, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", 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",
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        "data-testid": rest["data-testid"],
+        className: "w-full bg-transparent py-1.5 pl-8 pr-3 text-sm placeholder:text-muted-foreground focus:outline-none"
+      }
+    )
+  ] });
+}
+function ChevronPager({ page, pageSize, total, onPageChange, noun }) {
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  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";
+  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(),
+      "\u2013",
+      to.toLocaleString(),
+      " de ",
+      total.toLocaleString(),
+      noun ? ` ${noun}` : ""
+    ] }),
+    pages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "P\xE1gina anterior",
+          className: button,
+          disabled: page <= 1,
+          onClick: () => onPageChange(page - 1),
+          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()
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Pr\xF3xima p\xE1gina",
+          className: button,
+          disabled: page >= pages,
+          onClick: () => onPageChange(page + 1),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+function BulkActionBar({
+  count,
+  total,
+  onSelectAll,
+  onClear,
+  actions = [],
+  className
+}) {
+  const t = useTranslation();
+  if (count === 0) return null;
+  const inline = actions.filter((a) => !a.overflow);
+  const overflow = actions.filter((a) => a.overflow);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2",
+        className
+      ),
+      role: "region",
+      "aria-label": t("crud.list.bulkActions"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: count === 1 ? t("crud.list.selectedOne") : t("crud.list.selectedMany", { count: count.toLocaleString() }) }),
+          onSelectAll && count < total && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onSelectAll,
+              className: "text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline",
+              children: t("crud.list.selectAllCount", { total: total.toLocaleString() })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClear,
+              className: "text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline",
+              children: t("crud.list.deselectAll")
+            }
+          )
+        ] }),
+        (inline.length > 0 || overflow.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          inline.map((action) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: action.disabled,
+              onClick: () => void action.onSelect(),
+              className: action.destructive ? "text-destructive hover:text-destructive" : void 0,
+              children: [
+                action.icon && /* @__PURE__ */ jsx(action.icon, { className: "mr-1.5 h-3.5 w-3.5" }),
+                action.label
+              ]
+            },
+            action.id
+          )),
+          overflow.length > 0 && /* @__PURE__ */ jsxs(Dropdown, { children: [
+            /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", "aria-label": t("crud.list.moreActions"), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-3.5 w-3.5" }) }) }),
+            /* @__PURE__ */ jsx(DropdownContent, { align: "end", children: overflow.map((action) => /* @__PURE__ */ jsxs(
+              DropdownItem,
+              {
+                disabled: action.disabled,
+                onClick: () => void action.onSelect(),
+                className: action.destructive ? "text-destructive focus:text-destructive" : void 0,
+                children: [
+                  action.icon && /* @__PURE__ */ jsx(action.icon, { className: "mr-2 h-3.5 w-3.5 shrink-0" }),
+                  action.label
+                ]
+              },
+              action.id
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+BulkActionBar.displayName = "BulkActionBar";
+var SIZE_CLASSES = {
+  sm: "h-8 w-8 rounded",
+  md: "h-9 w-9 rounded",
+  lg: "h-12 w-12 rounded-md"
+};
+var ICON_CLASSES = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+function Thumbnail({ src, alt = "", size = "md", icon: Icon2 = ImageIcon, className }) {
+  const [failed, setFailed] = React13.useState(false);
+  React13.useEffect(() => {
+    setFailed(false);
+  }, [src]);
+  const base = cn("shrink-0 overflow-hidden", SIZE_CLASSES[size], className);
+  if (!src || failed) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(base, "flex items-center justify-center border border-border/60 bg-muted/50 text-muted-foreground/60"),
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsx(Icon2, { className: ICON_CLASSES[size], strokeWidth: 1.75 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      loading: "lazy",
+      onError: () => setFailed(true),
+      className: cn(base, "border border-border/60 object-cover")
+    }
+  );
+}
+Thumbnail.displayName = "Thumbnail";
+function PhoneField({
+  value,
+  onChange,
+  country,
+  placeholder,
+  disabled,
+  autoFocus,
+  className,
+  ...rest
+}) {
+  const mask = getCountry(country).mask;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "tel",
+      inputMode: "tel",
+      autoComplete: "tel",
+      value: maskPhone(value, mask),
+      onChange: (event) => onChange(unmaskPhone(event.target.value)),
+      placeholder: placeholder ?? mask.replace(/#/gu, "0"),
+      disabled,
+      autoFocus,
+      "aria-label": rest["aria-label"],
+      "data-testid": rest["data-testid"],
+      className: cn(
+        "w-full rounded-md border bg-background px-2.5 py-1.5 text-sm outline-none focus:border-primary",
+        className
+      )
+    }
+  );
+}
+function formatPhone2(value, country) {
+  const digits = unmaskPhone(String(value ?? ""));
+  if (!digits) return "";
+  return maskPhone(digits, getCountry(country).mask) || digits;
+}
 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) => {
@@ -1034,6 +1221,8 @@ function SearchSelect({
   required,
   debounce = 250,
   minChars = 1,
+  noResultsLabel,
+  searchingLabel = "Searching...",
   allowCreate,
   createLabel = "Add",
   onCreate,
@@ -1180,9 +1369,10 @@ 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" }),
-      " Searching..."
+      " ",
+      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: query ? `No results for "${query}"` : "No results" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: noResultsLabel ?? (query ? `No results for "${query}"` : "No results") }),
       allowCreate && onCreate && /* @__PURE__ */ jsxs(
         "button",
         {
@@ -1816,6 +2006,6 @@ function SearchCombobox({
   ] });
 }
 
-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
+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