@facter/ds-core 1.10.0 → 1.12.0

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, Check, Inbox, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, X, Circle, PinOff, Pin, ArrowDown, ArrowUp, ChevronsUpDown, FileText, FileSpreadsheet, Download, Rows4, Rows3, LayoutList, SlidersHorizontal, Info, AlertTriangle, XCircle, CheckCircle2, Building2, Star, ArrowRight, Search, User, LogOut, Menu, AlertCircle, TrendingUp, TrendingDown, Sun, Moon, Bell, MoreHorizontal, Settings } from 'lucide-react';
+import { ChevronDown, Check, Inbox, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, X, Circle, PinOff, Pin, ArrowDown, ArrowUp, ChevronsUpDown, FileText, FileSpreadsheet, Download, Rows4, Rows3, LayoutList, SlidersHorizontal, Info, AlertTriangle, XCircle, CheckCircle2, Building2, Star, ArrowRight, Search, User, LogOut, Menu, Loader2, AlertCircle, TrendingUp, TrendingDown, Sun, Moon, Bell, MoreHorizontal, Settings } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -17,10 +17,10 @@ import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { FormProvider, useFormContext, Controller } from 'react-hook-form';
 export { FormProvider, useFormContext } from 'react-hook-form';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -3208,6 +3208,22 @@ function FormInput({
   ) });
 }
 FormInput.displayName = "Form.Input";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none 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
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 function FormSelect({
   name,
   label,
@@ -3221,7 +3237,13 @@ function FormSelect({
   hideError = false,
   selectSize = "default",
   emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
-  loading = false
+  loading = false,
+  variant = "default",
+  searchable = false,
+  onSearch,
+  onLoadMore,
+  hasMore,
+  searchPlaceholder = "Buscar..."
 }) {
   const form = useFormContext();
   const fieldState = form.getFieldState(name, form.formState);
@@ -3232,7 +3254,26 @@ function FormSelect({
       control: form.control,
       name,
       render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
-        /* @__PURE__ */ jsx(
+        variant === "card" ? /* @__PURE__ */ jsx(
+          CardSelect,
+          {
+            options,
+            value: field.value,
+            onChange: (v) => field.onChange(v || void 0),
+            disabled,
+            label,
+            required,
+            error: !!error,
+            placeholder,
+            searchable,
+            onSearch,
+            onLoadMore,
+            hasMore,
+            loading,
+            emptyText,
+            searchPlaceholder
+          }
+        ) : /* @__PURE__ */ jsx(
           Select,
           {
             value: field.value ?? "",
@@ -3270,6 +3311,170 @@ function FormSelect({
   ) });
 }
 FormSelect.displayName = "Form.Select";
+function CardSelect({
+  options,
+  value,
+  onChange,
+  disabled,
+  label,
+  required,
+  error,
+  placeholder = "Selecione...",
+  searchable,
+  onSearch,
+  onLoadMore,
+  hasMore,
+  loading,
+  emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
+  searchPlaceholder = "Buscar..."
+}) {
+  const [open, setOpen] = React10.useState(false);
+  const [search, setSearch] = React10.useState("");
+  const selected = options.find((o) => o.value === value);
+  const listRef = React10.useRef(null);
+  const searchRef = React10.useRef(null);
+  const filteredOptions = React10.useMemo(() => {
+    if (!searchable || onSearch || !search) return options;
+    const q = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)
+    );
+  }, [options, search, searchable, onSearch]);
+  const handleSearch = React10.useCallback(
+    (value2) => {
+      setSearch(value2);
+      if (onSearch) onSearch(value2);
+    },
+    [onSearch]
+  );
+  React10.useEffect(() => {
+    if (!open) {
+      setSearch("");
+      if (onSearch) onSearch("");
+    }
+  }, [open, onSearch]);
+  React10.useEffect(() => {
+    if (open && searchable) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    }
+  }, [open, searchable]);
+  const handleScroll = React10.useCallback(() => {
+    if (!onLoadMore || !hasMore || loading) return;
+    const el = listRef.current;
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    if (scrollHeight - scrollTop - clientHeight < 80) {
+      onLoadMore();
+    }
+  }, [onLoadMore, hasMore, loading]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "flex w-full items-center justify-between rounded-md border-2 bg-background px-3 text-sm transition-colors",
+            "focus:outline-none focus:border-primary",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            label ? "h-12 pt-4 pb-2" : "h-9 py-2",
+            error ? "border-red-500" : "border-border",
+            open && !error && "border-primary"
+          ),
+          children: [
+            selected ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+              selected.icon && /* @__PURE__ */ jsx(selected.icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: selected.label })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: cn(
+            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 pointer-events-none",
+            error ? "text-red-500" : "text-foreground"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        className: "p-0 overflow-hidden",
+        style: {
+          width: "var(--radix-popover-trigger-width)",
+          maxHeight: "var(--radix-popover-content-available-height)"
+        },
+        children: [
+          searchable && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [
+            /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                value: search,
+                onChange: (e) => handleSearch(e.target.value),
+                placeholder: searchPlaceholder,
+                className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: listRef,
+              className: "overflow-y-auto overscroll-contain",
+              style: { maxHeight: searchable ? "calc(var(--radix-popover-content-available-height) - 45px)" : "var(--radix-popover-content-available-height)" },
+              onScroll: handleScroll,
+              children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border/50 p-2", children: [
+                filteredOptions.length === 0 && !loading ? /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: emptyText }) : filteredOptions.map((option) => {
+                  const isSelected = value === option.value;
+                  const isDisabled = option.disabled || disabled;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: isDisabled,
+                      onClick: () => {
+                        onChange(option.value);
+                        setOpen(false);
+                      },
+                      className: cn(
+                        "flex w-full items-center gap-3 p-3 text-left transition-all",
+                        "cursor-pointer hover:bg-accent",
+                        isSelected && "bg-primary/5",
+                        isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
+                      ),
+                      children: [
+                        option.icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-5 w-5 text-primary" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-tight", children: option.label }),
+                          option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-tight text-muted-foreground", children: option.description })
+                        ] }),
+                        isSelected && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) })
+                      ]
+                    },
+                    option.value
+                  );
+                }),
+                loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 function FormTextarea({
   name,
   label,
@@ -3831,22 +4036,6 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none 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
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;