@facter/ds-core 1.33.10 → 1.34.0

package/dist/index.mjs

@@ -17,11 +17,11 @@ 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 PopoverPrimitive2 from '@radix-ui/react-popover';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+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 TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { Slot } from '@radix-ui/react-slot';
@@ -165,6 +165,7 @@ var Input = React10.forwardRef(
     label,
     icon: Icon2,
     required,
+    labelSuffix,
     containerClassName,
     labelClassName,
     ...props
@@ -209,7 +210,7 @@ var Input = React10.forwardRef(
         "label",
         {
           className: cn(
-            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 cursor-pointer",
+            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 cursor-pointer inline-flex items-center gap-1",
             error ? "text-red-500" : "text-foreground",
             Icon2 && "left-10",
             labelClassName
@@ -217,7 +218,8 @@ var Input = React10.forwardRef(
           onClick: focusInput,
           children: [
             label,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+            required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" }),
+            labelSuffix
           ]
         }
       ),
@@ -3225,6 +3227,266 @@ function FormFieldProvider({ name, children }) {
   );
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children });
 }
+var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipRoot = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipPortal = TooltipPrimitive.Portal;
+var TooltipArrow = React10.forwardRef(({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ jsx(
+  TooltipPrimitive.Arrow,
+  {
+    ref,
+    className: cn(
+      "z-50",
+      variant === "dark" ? "fill-popover" : "fill-background",
+      className
+    ),
+    ...props
+  }
+));
+TooltipArrow.displayName = "TooltipArrow";
+var tooltipContentVariants = cva(
+  "z-50 overflow-hidden rounded-lg shadow-lg outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+  {
+    variants: {
+      variant: {
+        light: "bg-background text-foreground border border-border",
+        dark: "bg-popover text-popover-foreground border border-border"
+      },
+      size: {
+        sm: "max-w-[200px] p-2",
+        md: "max-w-[280px] p-3",
+        lg: "max-w-[360px] p-4"
+      }
+    },
+    defaultVariants: {
+      variant: "light",
+      size: "md"
+    }
+  }
+);
+var TooltipContent = React10.forwardRef(
+  ({
+    className,
+    variant = "light",
+    size = "md",
+    sideOffset = 8,
+    showArrow = true,
+    onDismiss,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(tooltipContentVariants({ variant, size }), className),
+      ...props,
+      children: [
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onDismiss,
+            className: "absolute top-2 right-2 p-1 rounded-full transition-colors hover:bg-muted text-muted-foreground hover:text-foreground",
+            "aria-label": "Fechar",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        children,
+        showArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant: variant ?? "light", width: 12, height: 6 })
+      ]
+    }
+  ) })
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var TooltipHeader = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1", className), ...props })
+);
+TooltipHeader.displayName = "TooltipHeader";
+var TooltipTitle = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h4",
+    {
+      ref,
+      className: cn("text-sm font-semibold leading-tight", className),
+      ...props
+    }
+  )
+);
+TooltipTitle.displayName = "TooltipTitle";
+var TooltipDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-xs leading-relaxed text-muted-foreground", className),
+    ...props
+  }
+));
+TooltipDescription.displayName = "TooltipDescription";
+var TooltipActions = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center gap-2 mt-3", className),
+      ...props
+    }
+  )
+);
+TooltipActions.displayName = "TooltipActions";
+var tooltipActionVariants = cva(
+  "inline-flex items-center justify-center text-xs font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90 px-3 py-1.5",
+        secondary: "bg-transparent text-muted-foreground hover:text-foreground hover:underline px-2 py-1.5",
+        outline: "border border-border bg-background text-foreground hover:bg-muted px-3 py-1.5"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+var TooltipAction = React10.forwardRef(
+  ({ className, variant = "primary", ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: cn(tooltipActionVariants({ variant }), className),
+      ...props
+    }
+  )
+);
+TooltipAction.displayName = "TooltipAction";
+var TooltipIcon = React10.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-center w-10 h-10 rounded-full mb-3 bg-muted",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+TooltipIcon.displayName = "TooltipIcon";
+var SimpleTooltip = ({
+  children,
+  content,
+  variant = "light",
+  side = "top",
+  align = "center",
+  delayDuration = 200,
+  open,
+  defaultOpen,
+  onOpenChange
+}) => /* @__PURE__ */ jsxs(
+  TooltipRoot,
+  {
+    open,
+    defaultOpen,
+    onOpenChange,
+    delayDuration,
+    children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx(TooltipContent, { variant, side, align, size: "sm", children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: content }) })
+    ]
+  }
+);
+SimpleTooltip.displayName = "SimpleTooltip";
+var Tooltip = Object.assign(TooltipRoot, {
+  Provider: TooltipProvider,
+  Trigger: TooltipTrigger,
+  Portal: TooltipPortal,
+  Content: TooltipContent,
+  Arrow: TooltipArrow,
+  Header: TooltipHeader,
+  Title: TooltipTitle,
+  Description: TooltipDescription,
+  Actions: TooltipActions,
+  Action: TooltipAction,
+  Icon: TooltipIcon,
+  Simple: SimpleTooltip
+});
+var FormLabel = React10.forwardRef(
+  ({ className, required, children, ...props }, ref) => {
+    const fieldContext = useFormFieldContextOptional();
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref,
+        htmlFor: fieldContext?.id,
+        className: cn(
+          "text-sm font-medium leading-none",
+          fieldContext?.error && "text-red-500",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          (required || fieldContext?.isRequired) && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+        ]
+      }
+    );
+  }
+);
+FormLabel.displayName = "Form.Label";
+var FormDescription = React10.forwardRef(({ className, ...props }, ref) => {
+  const fieldContext = useFormFieldContextOptional();
+  if (fieldContext?.error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-xs text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "Form.Description";
+var FormError = React10.forwardRef(
+  ({ className, message, children, ...props }, ref) => {
+    const fieldContext = useFormFieldContextOptional();
+    const errorMessage = message ?? fieldContext?.error;
+    if (!errorMessage && !children) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn("text-xs text-red-500", className),
+        ...props,
+        children: children || errorMessage
+      }
+    );
+  }
+);
+FormError.displayName = "Form.Error";
+var FormFieldWrapper = React10.forwardRef(({ className, label, description, required, error, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { required, children: label }),
+    children,
+    description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+    error && /* @__PURE__ */ jsx(FormError, { message: error })
+  ] });
+});
+FormFieldWrapper.displayName = "Form.FieldWrapper";
+function FieldTooltipIcon({ tooltip }) {
+  return /* @__PURE__ */ jsxs(TooltipRoot, { delayDuration: 200, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { className: "h-3 w-3 text-primary cursor-help shrink-0" }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "top", size: "md", children: typeof tooltip === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: tooltip }) : /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold leading-snug", children: tooltip.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-snug", children: tooltip.description })
+    ] }) })
+  ] });
+}
 function applyMask(value, mask) {
   const digits = value.replace(/\D/g, "");
   switch (mask) {
@@ -3307,6 +3569,7 @@ function FormInput({
   name,
   label,
   description,
+  tooltip,
   required,
   disabled,
   className,
@@ -3368,7 +3631,8 @@ function FormInput({
               error: !!error,
               icon,
               inputSize,
-              maxLength: maxLength ?? getMaxLength(mask)
+              maxLength: maxLength ?? getMaxLength(mask),
+              labelSuffix: tooltip ? /* @__PURE__ */ jsx(FieldTooltipIcon, { tooltip }) : void 0
             }
           ),
           description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
@@ -3379,26 +3643,41 @@ 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,
   description,
+  tooltip,
   required,
   disabled,
   className,
   options,
   placeholder = "Selecione...",
-  icon,
   hideError = false,
-  selectSize = "default",
   emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
   loading = false,
-  variant = "default",
   searchable = false,
   onSearch,
   onLoadMore,
   hasMore,
-  searchPlaceholder = "Buscar..."
+  searchPlaceholder = "Buscar...",
+  dropdownPosition = "bottom"
 }) {
   const form = useFormContext();
   const fieldState = form.getFieldState(name, form.formState);
@@ -3409,14 +3688,15 @@ function FormSelect({
       control: form.control,
       name,
       render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
-        variant === "card" ? /* @__PURE__ */ jsx(
-          CardSelect,
+        /* @__PURE__ */ jsx(
+          SelectDropdown,
           {
             options,
             value: field.value,
             onChange: (v) => field.onChange(v || void 0),
             disabled,
             label,
+            tooltip,
             required,
             error: !!error,
             placeholder,
@@ -3426,31 +3706,8 @@ function FormSelect({
             hasMore,
             loading,
             emptyText,
-            searchPlaceholder
-          }
-        ) : /* @__PURE__ */ jsx(
-          Select,
-          {
-            value: field.value ?? "",
-            onValueChange: (value) => {
-              field.onChange(value || void 0);
-            },
-            disabled: disabled || loading,
-            label,
-            required,
-            error: !!error,
-            icon,
-            selectSize,
-            placeholder,
-            children: loading ? /* @__PURE__ */ jsx(SelectItem, { value: "__loading__", disabled: true, children: "Carregando..." }) : options.length === 0 ? /* @__PURE__ */ jsx(SelectItem, { value: "__empty__", disabled: true, children: emptyText }) : options.map((option) => /* @__PURE__ */ jsx(
-              SelectItem,
-              {
-                value: option.value,
-                disabled: option.disabled,
-                children: option.label
-              },
-              option.value
-            ))
+            searchPlaceholder,
+            dropdownPosition
           }
         ),
         description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
@@ -3460,12 +3717,13 @@ function FormSelect({
   ) });
 }
 FormSelect.displayName = "Form.Select";
-function CardSelect({
+function SelectDropdown({
   options,
   value,
   onChange,
   disabled,
   label,
+  tooltip,
   required,
   error,
   placeholder = "Selecione...",
@@ -3475,11 +3733,13 @@ function CardSelect({
   hasMore,
   loading,
   emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
-  searchPlaceholder = "Buscar..."
+  searchPlaceholder = "Buscar...",
+  dropdownPosition = "bottom"
 }) {
   const [open, setOpen] = React10.useState(false);
   const [search, setSearch] = React10.useState("");
   const selected = options.find((o) => o.value === value);
+  const contentRef = React10.useRef(null);
   const listRef = React10.useRef(null);
   const searchRef = React10.useRef(null);
   const filteredOptions = React10.useMemo(() => {
@@ -3490,9 +3750,9 @@ function CardSelect({
     );
   }, [options, search, searchable, onSearch]);
   const handleSearch = React10.useCallback(
-    (value2) => {
-      setSearch(value2);
-      if (onSearch) onSearch(value2);
+    (val) => {
+      setSearch(val);
+      if (onSearch) onSearch(val);
     },
     [onSearch]
   );
@@ -3515,9 +3775,36 @@ function CardSelect({
       onLoadMore();
     }
   }, [onLoadMore, hasMore, loading]);
-  return /* @__PURE__ */ jsxs(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, children: [
+  React10.useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    let removeHandler;
+    requestAnimationFrame(() => {
+      if (cancelled) return;
+      const content = contentRef.current;
+      const list = listRef.current;
+      if (!content || !list) return;
+      const handleWheel = (e) => {
+        if (!content.contains(e.target)) return;
+        const { scrollTop, scrollHeight, clientHeight } = list;
+        if (scrollHeight <= clientHeight) return;
+        e.preventDefault();
+        e.stopPropagation();
+        list.scrollTop = Math.max(0, Math.min(scrollTop + e.deltaY, scrollHeight - clientHeight));
+      };
+      document.addEventListener("wheel", handleWheel, { passive: false, capture: true });
+      removeHandler = () => document.removeEventListener("wheel", handleWheel, { capture: true });
+    });
+    return () => {
+      cancelled = true;
+      removeHandler?.();
+    };
+  }, [open]);
+  const side = dropdownPosition === "top" ? "top" : "bottom";
+  const avoidCollisions = dropdownPosition === "auto";
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -3543,30 +3830,36 @@ function CardSelect({
         "label",
         {
           className: cn(
-            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 pointer-events-none",
+            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 inline-flex items-center gap-1",
+            tooltip ? "pointer-events-auto" : "pointer-events-none",
             error ? "text-red-500" : "text-foreground"
           ),
           children: [
             label,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+            required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" }),
+            tooltip && /* @__PURE__ */ jsx(FieldTooltipIcon, { tooltip })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxs(
-      PopoverPrimitive2.Content,
+      PopoverContent,
       {
+        ref: contentRef,
+        side,
         align: "start",
         sideOffset: 4,
-        className: cn(
-          "z-50 rounded-md border bg-popover text-popover-foreground shadow-lg p-0 overflow-hidden",
-          "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=top]:slide-in-from-bottom-2"
-        ),
-        style: { width: "var(--radix-popover-trigger-width)" },
+        avoidCollisions,
+        collisionPadding: 16,
+        className: "p-0 overflow-hidden flex flex-col",
+        style: {
+          width: "var(--radix-popover-trigger-width)",
+          maxHeight: "min(340px, var(--radix-popover-content-available-height, 340px))"
+        },
         onOpenAutoFocus: (e) => {
           e.preventDefault();
           if (searchable) {
-            searchRef.current?.focus();
+            setTimeout(() => searchRef.current?.focus(), 0);
           }
         },
         children: [
@@ -3588,10 +3881,9 @@ function CardSelect({
             "div",
             {
               ref: listRef,
-              className: "overflow-y-auto overscroll-contain",
-              style: { maxHeight: "min(300px, var(--radix-popover-content-available-height, 300px))" },
+              className: "overflow-y-auto overscroll-contain min-h-0 flex-1",
               onScroll: handleScroll,
-              children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border/50 p-2", children: [
+              children: /* @__PURE__ */ jsxs("div", { className: "p-1", 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;
@@ -3602,21 +3894,361 @@ function CardSelect({
                       disabled: isDisabled,
                       onClick: () => {
                         onChange(option.value);
-                        handleOpenChange(false);
+                        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"
+                        "flex w-full items-center gap-2 rounded-sm px-2 text-left text-sm outline-none",
+                        "cursor-pointer hover:bg-accent hover:text-accent-foreground",
+                        isSelected && "bg-accent/50",
+                        isDisabled && "pointer-events-none opacity-50",
+                        option.description ? "py-2" : "py-1.5"
                       ),
                       children: [
-                        option.icon && /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-3.5 w-3.5 text-primary" }) }),
+                        option.icon && /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-3 w-3 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 })
+                          /* @__PURE__ */ jsx("span", { className: "block leading-tight", children: option.label }),
+                          option.description && /* @__PURE__ */ jsx("span", { className: "block 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" }) })
+                        isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-primary" })
+                      ]
+                    },
+                    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 FormMultiSelect({
+  name,
+  label,
+  description,
+  tooltip,
+  required,
+  disabled,
+  className,
+  options,
+  placeholder = "Selecione...",
+  hideError = false,
+  emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
+  loading = false,
+  searchable = false,
+  searchPlaceholder = "Buscar...",
+  clearable = true,
+  maxVisibleChips = 3,
+  dropdownPosition = "bottom"
+}) {
+  const form = useFormContext();
+  const fieldState = form.getFieldState(name, form.formState);
+  const error = fieldState.error?.message;
+  return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control: form.control,
+      name,
+      render: ({ field }) => {
+        const values = Array.isArray(field.value) ? field.value : [];
+        return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+          /* @__PURE__ */ jsx(
+            MultiSelectDropdown,
+            {
+              options,
+              value: values,
+              onChange: (v) => field.onChange(v),
+              disabled,
+              label,
+              tooltip,
+              required,
+              error: !!error,
+              placeholder,
+              searchable,
+              loading,
+              emptyText,
+              searchPlaceholder,
+              clearable,
+              maxVisibleChips,
+              dropdownPosition
+            }
+          ),
+          description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
+          !hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 px-1", children: error })
+        ] });
+      }
+    }
+  ) });
+}
+FormMultiSelect.displayName = "Form.MultiSelect";
+function MultiSelectDropdown({
+  options,
+  value,
+  onChange,
+  disabled,
+  label,
+  tooltip,
+  required,
+  error,
+  placeholder = "Selecione...",
+  searchable,
+  loading,
+  emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
+  searchPlaceholder = "Buscar...",
+  clearable = true,
+  maxVisibleChips = 3,
+  dropdownPosition = "bottom"
+}) {
+  const [open, setOpen] = React10.useState(false);
+  const [search, setSearch] = React10.useState("");
+  const [computedMax, setComputedMax] = React10.useState(maxVisibleChips);
+  const [prevValueKey, setPrevValueKey] = React10.useState(() => value.join(","));
+  const contentRef = React10.useRef(null);
+  const listRef = React10.useRef(null);
+  const searchRef = React10.useRef(null);
+  const chipsRef = React10.useRef(null);
+  const selectedOptions = React10.useMemo(
+    () => options.filter((o) => value.includes(o.value)),
+    [options, value]
+  );
+  const valueKey = value.join(",");
+  if (valueKey !== prevValueKey) {
+    setPrevValueKey(valueKey);
+    setComputedMax(maxVisibleChips);
+  }
+  React10.useLayoutEffect(() => {
+    const container = chipsRef.current;
+    if (!container || selectedOptions.length === 0) return;
+    const containerRect = container.getBoundingClientRect();
+    const containerWidth = containerRect.width;
+    const chips = container.querySelectorAll("[data-chip]");
+    if (chips.length === 0 || containerWidth === 0) return;
+    const gap = 4;
+    const buffer = 4;
+    const badge = container.querySelector("[data-badge]");
+    const badgeWidth = badge ? badge.getBoundingClientRect().width : 28;
+    const availableWidth = containerWidth - buffer;
+    let usedWidth = 0;
+    let fits = 0;
+    for (let i = 0; i < chips.length; i++) {
+      const chipWidth = chips[i].getBoundingClientRect().width;
+      const widthWithGap = fits > 0 ? chipWidth + gap : chipWidth;
+      const remaining = selectedOptions.length - (fits + 1);
+      const needsBadge = remaining > 0;
+      const badgeSpace = needsBadge ? badgeWidth + gap : 0;
+      if (usedWidth + widthWithGap + badgeSpace > availableWidth && fits > 0) {
+        break;
+      }
+      usedWidth += widthWithGap;
+      fits++;
+    }
+    const newMax = Math.max(1, fits);
+    if (newMax !== computedMax) {
+      setComputedMax(newMax);
+    }
+  });
+  const filteredOptions = React10.useMemo(() => {
+    if (!searchable || !search) return options;
+    const q = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)
+    );
+  }, [options, search, searchable]);
+  const toggleOption = React10.useCallback(
+    (optionValue) => {
+      if (value.includes(optionValue)) {
+        onChange(value.filter((v) => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
+    },
+    [value, onChange]
+  );
+  const handleClearAll = React10.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onChange([]);
+    },
+    [onChange]
+  );
+  const handleRemoveChip = React10.useCallback(
+    (e, optionValue) => {
+      e.stopPropagation();
+      onChange(value.filter((v) => v !== optionValue));
+    },
+    [value, onChange]
+  );
+  const handleOpenChange = React10.useCallback((nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      setSearch("");
+    }
+  }, []);
+  React10.useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    let removeHandler;
+    requestAnimationFrame(() => {
+      if (cancelled) return;
+      const content = contentRef.current;
+      const list = listRef.current;
+      if (!content || !list) return;
+      const handleWheel = (e) => {
+        if (!content.contains(e.target)) return;
+        const { scrollTop, scrollHeight, clientHeight } = list;
+        if (scrollHeight <= clientHeight) return;
+        e.preventDefault();
+        e.stopPropagation();
+        list.scrollTop = Math.max(0, Math.min(scrollTop + e.deltaY, scrollHeight - clientHeight));
+      };
+      document.addEventListener("wheel", handleWheel, { passive: false, capture: true });
+      removeHandler = () => document.removeEventListener("wheel", handleWheel, { capture: true });
+    });
+    return () => {
+      cancelled = true;
+      removeHandler?.();
+    };
+  }, [open]);
+  const side = dropdownPosition === "top" ? "top" : "bottom";
+  const avoidCollisions = dropdownPosition === "auto";
+  const visibleChips = selectedOptions.slice(0, computedMax);
+  const overflowCount = selectedOptions.length - computedMax;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          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 ? "min-h-[3rem] pt-4 pb-1.5" : "min-h-[2.25rem] py-1.5",
+            error ? "border-red-500" : "border-border",
+            open && !error && "border-primary"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: chipsRef, className: "flex gap-1 items-center flex-1 overflow-hidden", children: selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              visibleChips.map((option) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-chip": true,
+                  className: "inline-flex items-center gap-1 max-w-[150px] shrink-0 rounded-sm bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary",
+                  children: [
+                    option.icon && /* @__PURE__ */ jsx(option.icon, { className: "h-3 w-3 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                    /* @__PURE__ */ jsx(
+                      X,
+                      {
+                        className: "h-3 w-3 shrink-0 cursor-pointer hover:text-destructive",
+                        onClick: (e) => handleRemoveChip(e, option.value)
+                      }
+                    )
+                  ]
+                },
+                option.value
+              )),
+              overflowCount > 0 && /* @__PURE__ */ jsxs("span", { "data-badge": true, className: "inline-flex items-center justify-center h-5 min-w-5 px-1.5 shrink-0 rounded-full bg-gray-100 text-gray-500 text-[10px] font-medium", children: [
+                "+",
+                overflowCount
+              ] })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-1 shrink-0", children: [
+              clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx(
+                X,
+                {
+                  className: "h-4 w-4 text-muted-foreground hover:text-foreground cursor-pointer",
+                  onClick: handleClearAll
+                }
+              ),
+              /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 opacity-50 transition-transform", open && "rotate-180") })
+            ] })
+          ]
+        }
+      ) }),
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: cn(
+            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 inline-flex items-center gap-1",
+            tooltip ? "pointer-events-auto" : "pointer-events-none",
+            error ? "text-red-500" : "text-foreground"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" }),
+            tooltip && /* @__PURE__ */ jsx(FieldTooltipIcon, { tooltip })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        ref: contentRef,
+        side,
+        align: "start",
+        sideOffset: 4,
+        avoidCollisions,
+        collisionPadding: 16,
+        className: "p-0 overflow-hidden flex flex-col",
+        style: {
+          width: "var(--radix-popover-trigger-width)",
+          maxHeight: "min(340px, var(--radix-popover-content-available-height, 340px))"
+        },
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          if (searchable) {
+            setTimeout(() => searchRef.current?.focus(), 0);
+          }
+        },
+        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) => setSearch(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 min-h-0 flex-1",
+              children: /* @__PURE__ */ jsxs("div", { className: "p-1", 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.includes(option.value);
+                  const isDisabled = option.disabled || disabled;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: isDisabled,
+                      onClick: () => toggleOption(option.value),
+                      className: cn(
+                        "flex w-full items-center gap-2 rounded-sm px-2 text-left text-sm outline-none",
+                        "cursor-pointer hover:bg-accent hover:text-accent-foreground",
+                        isSelected && "bg-accent/50",
+                        isDisabled && "pointer-events-none opacity-50",
+                        option.description ? "py-2" : "py-1.5"
+                      ),
+                      children: [
+                        option.icon && /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-3 w-3 text-primary" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "block leading-tight", children: option.label }),
+                          option.description && /* @__PURE__ */ jsx("span", { className: "block text-xs leading-tight text-muted-foreground", children: option.description })
+                        ] }),
+                        isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 shrink-0 text-primary" })
                       ]
                     },
                     option.value
@@ -3930,72 +4562,6 @@ function FormRadioGroup({
   ) });
 }
 FormRadioGroup.displayName = "Form.RadioGroup";
-var FormLabel = React10.forwardRef(
-  ({ className, required, children, ...props }, ref) => {
-    const fieldContext = useFormFieldContextOptional();
-    return /* @__PURE__ */ jsxs(
-      "label",
-      {
-        ref,
-        htmlFor: fieldContext?.id,
-        className: cn(
-          "text-sm font-medium leading-none",
-          fieldContext?.error && "text-red-500",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          (required || fieldContext?.isRequired) && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
-        ]
-      }
-    );
-  }
-);
-FormLabel.displayName = "Form.Label";
-var FormDescription = React10.forwardRef(({ className, ...props }, ref) => {
-  const fieldContext = useFormFieldContextOptional();
-  if (fieldContext?.error) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref,
-      className: cn("text-xs text-muted-foreground", className),
-      ...props
-    }
-  );
-});
-FormDescription.displayName = "Form.Description";
-var FormError = React10.forwardRef(
-  ({ className, message, children, ...props }, ref) => {
-    const fieldContext = useFormFieldContextOptional();
-    const errorMessage = message ?? fieldContext?.error;
-    if (!errorMessage && !children) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        ref,
-        className: cn("text-xs text-red-500", className),
-        ...props,
-        children: children || errorMessage
-      }
-    );
-  }
-);
-FormError.displayName = "Form.Error";
-var FormFieldWrapper = React10.forwardRef(({ className, label, description, required, error, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
-    label && /* @__PURE__ */ jsx(FormLabel, { required, children: label }),
-    children,
-    description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
-    error && /* @__PURE__ */ jsx(FormError, { message: error })
-  ] });
-});
-FormFieldWrapper.displayName = "Form.FieldWrapper";
 function FormRoot({
   form,
   onSubmit,
@@ -4019,6 +4585,7 @@ var Form = Object.assign(FormRoot, {
   // Campos com auto-bind
   Input: FormInput,
   Select: FormSelect,
+  MultiSelect: FormMultiSelect,
   Textarea: FormTextarea,
   Checkbox: FormCheckbox,
   Switch: FormSwitch,
@@ -4192,207 +4759,6 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var Popover = PopoverPrimitive2.Root;
-var PopoverTrigger = PopoverPrimitive2.Trigger;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive2.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 = PopoverPrimitive2.Content.displayName;
-var TooltipProvider = TooltipPrimitive.Provider;
-var TooltipRoot = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipPortal = TooltipPrimitive.Portal;
-var TooltipArrow = React10.forwardRef(({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ jsx(
-  TooltipPrimitive.Arrow,
-  {
-    ref,
-    className: cn(
-      "z-50",
-      variant === "dark" ? "fill-popover" : "fill-background",
-      className
-    ),
-    ...props
-  }
-));
-TooltipArrow.displayName = "TooltipArrow";
-var tooltipContentVariants = cva(
-  "z-50 overflow-hidden rounded-lg shadow-lg outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
-  {
-    variants: {
-      variant: {
-        light: "bg-background text-foreground border border-border",
-        dark: "bg-popover text-popover-foreground border border-border"
-      },
-      size: {
-        sm: "max-w-[200px] p-2",
-        md: "max-w-[280px] p-3",
-        lg: "max-w-[360px] p-4"
-      }
-    },
-    defaultVariants: {
-      variant: "light",
-      size: "md"
-    }
-  }
-);
-var TooltipContent = React10.forwardRef(
-  ({
-    className,
-    variant = "light",
-    size = "md",
-    sideOffset = 8,
-    showArrow = true,
-    onDismiss,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-    TooltipPrimitive.Content,
-    {
-      ref,
-      sideOffset,
-      className: cn(tooltipContentVariants({ variant, size }), className),
-      ...props,
-      children: [
-        onDismiss && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onDismiss,
-            className: "absolute top-2 right-2 p-1 rounded-full transition-colors hover:bg-muted text-muted-foreground hover:text-foreground",
-            "aria-label": "Fechar",
-            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
-          }
-        ),
-        children,
-        showArrow && /* @__PURE__ */ jsx(TooltipArrow, { variant: variant ?? "light", width: 12, height: 6 })
-      ]
-    }
-  ) })
-);
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var TooltipHeader = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1", className), ...props })
-);
-TooltipHeader.displayName = "TooltipHeader";
-var TooltipTitle = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "h4",
-    {
-      ref,
-      className: cn("text-sm font-semibold leading-tight", className),
-      ...props
-    }
-  )
-);
-TooltipTitle.displayName = "TooltipTitle";
-var TooltipDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-xs leading-relaxed text-muted-foreground", className),
-    ...props
-  }
-));
-TooltipDescription.displayName = "TooltipDescription";
-var TooltipActions = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("flex items-center gap-2 mt-3", className),
-      ...props
-    }
-  )
-);
-TooltipActions.displayName = "TooltipActions";
-var tooltipActionVariants = cva(
-  "inline-flex items-center justify-center text-xs font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        primary: "bg-primary text-primary-foreground hover:bg-primary/90 px-3 py-1.5",
-        secondary: "bg-transparent text-muted-foreground hover:text-foreground hover:underline px-2 py-1.5",
-        outline: "border border-border bg-background text-foreground hover:bg-muted px-3 py-1.5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary"
-    }
-  }
-);
-var TooltipAction = React10.forwardRef(
-  ({ className, variant = "primary", ...props }, ref) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      className: cn(tooltipActionVariants({ variant }), className),
-      ...props
-    }
-  )
-);
-TooltipAction.displayName = "TooltipAction";
-var TooltipIcon = React10.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex items-center justify-center w-10 h-10 rounded-full mb-3 bg-muted",
-        className
-      ),
-      ...props,
-      children
-    }
-  )
-);
-TooltipIcon.displayName = "TooltipIcon";
-var SimpleTooltip = ({
-  children,
-  content,
-  variant = "light",
-  side = "top",
-  align = "center",
-  delayDuration = 200,
-  open,
-  defaultOpen,
-  onOpenChange
-}) => /* @__PURE__ */ jsxs(
-  TooltipRoot,
-  {
-    open,
-    defaultOpen,
-    onOpenChange,
-    delayDuration,
-    children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
-      /* @__PURE__ */ jsx(TooltipContent, { variant, side, align, size: "sm", children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: content }) })
-    ]
-  }
-);
-SimpleTooltip.displayName = "SimpleTooltip";
-var Tooltip = Object.assign(TooltipRoot, {
-  Provider: TooltipProvider,
-  Trigger: TooltipTrigger,
-  Portal: TooltipPortal,
-  Content: TooltipContent,
-  Arrow: TooltipArrow,
-  Header: TooltipHeader,
-  Title: TooltipTitle,
-  Description: TooltipDescription,
-  Actions: TooltipActions,
-  Action: TooltipAction,
-  Icon: TooltipIcon,
-  Simple: SimpleTooltip
-});
 var AuthLayoutContext = React10.createContext({
   imagePosition: "left"
 });