@facter/ds-core 1.33.11 → 1.34.1

package/dist/index.mjs

@@ -17,12 +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 { createPortal } from 'react-dom';
+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 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';
 import { Slot } from '@radix-ui/react-slot';
@@ -33,7 +32,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-70",
   {
     variants: {
       variant: {
@@ -166,6 +165,7 @@ var Input = React10.forwardRef(
     label,
     icon: Icon2,
     required,
+    labelSuffix,
     containerClassName,
     labelClassName,
     ...props
@@ -210,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
@@ -218,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
           ]
         }
       ),
@@ -3226,238 +3227,487 @@ function FormFieldProvider({ name, children }) {
   );
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children });
 }
-function applyMask(value, mask) {
-  const digits = value.replace(/\D/g, "");
-  switch (mask) {
-    case "phone":
-      if (digits.length <= 10) {
-        return digits.replace(/(\d{2})(\d{4})(\d{0,4})/, "($1) $2-$3").trim();
-      }
-      return digits.replace(/(\d{2})(\d{5})(\d{0,4})/, "($1) $2-$3").trim();
-    case "cpf":
-      return digits.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
-    case "cnpj":
-      return digits.replace(/(\d{2})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1/$2").replace(/(\d{4})(\d{1,2})$/, "$1-$2");
-    case "cep":
-      return digits.replace(/(\d{5})(\d{0,3})/, "$1-$2");
-    case "money":
-      if (!digits) return "";
-      const cents = parseInt(digits, 10) / 100;
-      return new Intl.NumberFormat("pt-BR", {
-        style: "currency",
-        currency: "BRL"
-      }).format(cents);
-    case "percent":
-      if (!digits) return "";
-      const percent = parseInt(digits, 10) / 100;
-      return `${percent.toFixed(2)}%`;
-    case "plate":
-      const upper = value.toUpperCase().replace(/[^A-Z0-9]/g, "");
-      if (upper.length <= 3) return upper;
-      if (upper.length <= 7) {
-        return upper.replace(/([A-Z]{3})(\d{0,1})([A-Z0-9]{0,1})(\d{0,2})/, "$1-$2$3$4");
-      }
-      return upper.slice(0, 7).replace(/([A-Z]{3})(\d{0,1})([A-Z0-9]{0,1})(\d{0,2})/, "$1-$2$3$4");
-    case "date":
-      return digits.replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{2})(\d)/, "$1/$2").slice(0, 10);
-    case "time":
-      return digits.replace(/(\d{2})(\d{0,2})/, "$1:$2").slice(0, 5);
-    case "datetime":
-      const dateTime = digits.replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{4})(\d)/, "$1 $2").replace(/(\d{2})(\d{0,2})$/, "$1:$2");
-      return dateTime.slice(0, 16);
-    default:
-      return value;
-  }
-}
-function getMaxLength(mask) {
-  switch (mask) {
-    case "phone":
-      return 15;
-    case "cpf":
-      return 14;
-    case "cnpj":
-      return 18;
-    case "cep":
-      return 9;
-    case "plate":
-      return 8;
-    case "date":
-      return 10;
-    case "time":
-      return 5;
-    case "datetime":
-      return 16;
-    default:
-      return void 0;
-  }
-}
-function parseValue(displayValue, mask) {
-  if (!displayValue) return void 0;
-  switch (mask) {
-    case "money":
-      const moneyDigits = displayValue.replace(/\D/g, "");
-      return moneyDigits ? parseInt(moneyDigits, 10) / 100 : void 0;
-    case "percent":
-      const percentDigits = displayValue.replace(/\D/g, "");
-      return percentDigits ? parseInt(percentDigits, 10) / 100 : void 0;
-    default:
-      return displayValue || void 0;
+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
   }
-}
-function FormInput({
-  name,
-  label,
-  description,
-  required,
-  disabled,
-  className,
-  mask,
-  icon,
-  showPasswordToggle = true,
-  inputSize = "default",
-  hideError = false,
-  type = "text",
-  maxLength,
-  ...inputProps
-}) {
-  const form = useFormContext();
-  const fieldState = form.getFieldState(name, form.formState);
-  const error = fieldState.error?.message;
-  const getInputType = React10.useCallback(() => {
-    if (["money", "percent", "phone", "cpf", "cnpj", "cep"].includes(mask || "")) {
-      return "tel";
-    }
-    return type;
-  }, [mask, type]);
-  return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
-    Controller,
-    {
-      control: form.control,
-      name,
-      render: ({ field }) => {
-        const getDisplayValue = () => {
-          if (field.value === void 0 || field.value === null) return "";
-          if (mask) {
-            return applyMask(String(field.value), mask);
-          }
-          return String(field.value);
-        };
-        const handleChange = (e) => {
-          let newValue = e.target.value;
-          if (mask) {
-            newValue = applyMask(newValue, mask);
-            const parsed = parseValue(newValue, mask);
-            field.onChange(parsed);
-          } else {
-            field.onChange(newValue || void 0);
-          }
-        };
-        return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              ...inputProps,
-              ref: field.ref,
-              name: field.name,
-              value: getDisplayValue(),
-              onChange: handleChange,
-              onBlur: field.onBlur,
-              disabled,
-              type: getInputType(),
-              label,
-              required,
-              error: !!error,
-              icon,
-              inputSize,
-              maxLength: maxLength ?? getMaxLength(mask)
-            }
-          ),
-          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 })
-        ] });
+));
+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"
     }
-  ) });
-}
-FormInput.displayName = "Form.Input";
-function FormSelect({
-  name,
-  label,
-  description,
-  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..."
-}) {
-  const form = useFormContext();
-  const fieldState = form.getFieldState(name, form.formState);
-  const error = fieldState.error?.message;
-  return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
-    Controller,
+  }
+);
+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,
     {
-      control: form.control,
-      name,
-      render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
-        variant === "card" ? /* @__PURE__ */ jsx(
-          CardSelect,
+      ref,
+      sideOffset,
+      className: cn(tooltipContentVariants({ variant, size }), className),
+      ...props,
+      children: [
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
           {
-            options,
-            value: field.value,
-            onChange: (v) => field.onChange(v || void 0),
-            disabled,
-            label,
-            required,
-            error: !!error,
-            placeholder,
-            searchable,
-            onSearch,
-            onLoadMore,
-            hasMore,
-            loading,
-            emptyText,
-            searchPlaceholder
+            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" })
           }
-        ) : /* @__PURE__ */ jsx(
-          Select,
-          {
-            value: field.value ?? "",
-            onValueChange: (value) => {
-              field.onChange(value || void 0);
-            },
-            disabled: disabled || loading,
-            label,
+        ),
+        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) {
+    case "phone":
+      if (digits.length <= 10) {
+        return digits.replace(/(\d{2})(\d{4})(\d{0,4})/, "($1) $2-$3").trim();
+      }
+      return digits.replace(/(\d{2})(\d{5})(\d{0,4})/, "($1) $2-$3").trim();
+    case "cpf":
+      return digits.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
+    case "cnpj":
+      return digits.replace(/(\d{2})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1/$2").replace(/(\d{4})(\d{1,2})$/, "$1-$2");
+    case "cep":
+      return digits.replace(/(\d{5})(\d{0,3})/, "$1-$2");
+    case "money":
+      if (!digits) return "";
+      const cents = parseInt(digits, 10) / 100;
+      return new Intl.NumberFormat("pt-BR", {
+        style: "currency",
+        currency: "BRL"
+      }).format(cents);
+    case "percent":
+      if (!digits) return "";
+      const percent = parseInt(digits, 10) / 100;
+      return `${percent.toFixed(2)}%`;
+    case "plate":
+      const upper = value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+      if (upper.length <= 3) return upper;
+      if (upper.length <= 7) {
+        return upper.replace(/([A-Z]{3})(\d{0,1})([A-Z0-9]{0,1})(\d{0,2})/, "$1-$2$3$4");
+      }
+      return upper.slice(0, 7).replace(/([A-Z]{3})(\d{0,1})([A-Z0-9]{0,1})(\d{0,2})/, "$1-$2$3$4");
+    case "date":
+      return digits.replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{2})(\d)/, "$1/$2").slice(0, 10);
+    case "time":
+      return digits.replace(/(\d{2})(\d{0,2})/, "$1:$2").slice(0, 5);
+    case "datetime":
+      const dateTime = digits.replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{2})(\d)/, "$1/$2").replace(/(\d{4})(\d)/, "$1 $2").replace(/(\d{2})(\d{0,2})$/, "$1:$2");
+      return dateTime.slice(0, 16);
+    default:
+      return value;
+  }
+}
+function getMaxLength(mask) {
+  switch (mask) {
+    case "phone":
+      return 15;
+    case "cpf":
+      return 14;
+    case "cnpj":
+      return 18;
+    case "cep":
+      return 9;
+    case "plate":
+      return 8;
+    case "date":
+      return 10;
+    case "time":
+      return 5;
+    case "datetime":
+      return 16;
+    default:
+      return void 0;
+  }
+}
+function parseValue(displayValue, mask) {
+  if (!displayValue) return void 0;
+  switch (mask) {
+    case "money":
+      const moneyDigits = displayValue.replace(/\D/g, "");
+      return moneyDigits ? parseInt(moneyDigits, 10) / 100 : void 0;
+    case "percent":
+      const percentDigits = displayValue.replace(/\D/g, "");
+      return percentDigits ? parseInt(percentDigits, 10) / 100 : void 0;
+    default:
+      return displayValue || void 0;
+  }
+}
+function FormInput({
+  name,
+  label,
+  description,
+  tooltip,
+  required,
+  disabled,
+  className,
+  mask,
+  icon,
+  showPasswordToggle = true,
+  inputSize = "default",
+  hideError = false,
+  type = "text",
+  maxLength,
+  ...inputProps
+}) {
+  const form = useFormContext();
+  const fieldState = form.getFieldState(name, form.formState);
+  const error = fieldState.error?.message;
+  const getInputType = React10.useCallback(() => {
+    if (["money", "percent", "phone", "cpf", "cnpj", "cep"].includes(mask || "")) {
+      return "tel";
+    }
+    return type;
+  }, [mask, type]);
+  return /* @__PURE__ */ jsx(FormFieldProvider, { name, children: /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control: form.control,
+      name,
+      render: ({ field }) => {
+        const getDisplayValue = () => {
+          if (field.value === void 0 || field.value === null) return "";
+          if (mask) {
+            return applyMask(String(field.value), mask);
+          }
+          return String(field.value);
+        };
+        const handleChange = (e) => {
+          let newValue = e.target.value;
+          if (mask) {
+            newValue = applyMask(newValue, mask);
+            const parsed = parseValue(newValue, mask);
+            field.onChange(parsed);
+          } else {
+            field.onChange(newValue || void 0);
+          }
+        };
+        return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...inputProps,
+              ref: field.ref,
+              name: field.name,
+              value: getDisplayValue(),
+              onChange: handleChange,
+              onBlur: field.onBlur,
+              disabled,
+              type: getInputType(),
+              label,
+              required,
+              error: !!error,
+              icon,
+              inputSize,
+              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 }),
+          !hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 px-1", children: error })
+        ] });
+      }
+    }
+  ) });
+}
+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...",
+  hideError = false,
+  emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
+  loading = false,
+  searchable = false,
+  onSearch,
+  onLoadMore,
+  hasMore,
+  searchPlaceholder = "Buscar...",
+  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 }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+        /* @__PURE__ */ jsx(
+          SelectDropdown,
+          {
+            options,
+            value: field.value,
+            onChange: (v) => field.onChange(v || void 0),
+            disabled,
+            label,
+            tooltip,
             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: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  option.icon && /* @__PURE__ */ jsx(option.icon, { className: "h-4 w-4 text-muted-foreground" }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("span", { children: option.label }),
-                    option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-2", children: option.description })
-                  ] })
-                ] })
-              },
-              option.value
-            ))
+            searchable,
+            onSearch,
+            onLoadMore,
+            hasMore,
+            loading,
+            emptyText,
+            searchPlaceholder,
+            dropdownPosition
           }
         ),
         description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-1", children: description }),
@@ -3466,229 +3716,554 @@ function FormSelect({
     }
   ) });
 }
-FormSelect.displayName = "Form.Select";
-function CardSelect({
+FormSelect.displayName = "Form.Select";
+function SelectDropdown({
+  options,
+  value,
+  onChange,
+  disabled,
+  label,
+  tooltip,
+  required,
+  error,
+  placeholder = "Selecione...",
+  searchable,
+  onSearch,
+  onLoadMore,
+  hasMore,
+  loading,
+  emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
+  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(() => {
+    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(
+    (val) => {
+      setSearch(val);
+      if (onSearch) onSearch(val);
+    },
+    [onSearch]
+  );
+  const handleOpenChange = React10.useCallback(
+    (nextOpen) => {
+      setOpen(nextOpen);
+      if (!nextOpen) {
+        setSearch("");
+        if (onSearch) onSearch("");
+      }
+    },
+    [onSearch]
+  );
+  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]);
+  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(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 ? "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: cn("h-4 w-4 shrink-0 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: {
+          minWidth: "var(--radix-popover-trigger-width)",
+          width: "fit-content",
+          maxWidth: "var(--radix-popover-content-available-width, 100%)",
+          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) => 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 min-h-0 flex-1",
+              onScroll: handleScroll,
+              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;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: isDisabled,
+                      onClick: () => {
+                        onChange(option.value);
+                        setOpen(false);
+                      },
+                      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
+                  );
+                }),
+                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,
-  onSearch,
-  onLoadMore,
-  hasMore,
   loading,
   emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
-  searchPlaceholder = "Buscar..."
+  searchPlaceholder = "Buscar...",
+  clearable = true,
+  maxVisibleChips = 3,
+  dropdownPosition = "bottom"
 }) {
   const [open, setOpen] = React10.useState(false);
   const [search, setSearch] = React10.useState("");
-  const selected = options.find((o) => o.value === value);
-  const containerRef = React10.useRef(null);
-  const dropdownRef = React10.useRef(null);
+  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 [dropdownPos, setDropdownPos] = React10.useState({});
+  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 || onSearch || !search) return options;
+    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, onSearch]);
-  const handleSearch = React10.useCallback(
-    (value2) => {
-      setSearch(value2);
-      if (onSearch) onSearch(value2);
+  }, [options, search, searchable]);
+  const toggleOption = React10.useCallback(
+    (optionValue) => {
+      if (value.includes(optionValue)) {
+        onChange(value.filter((v) => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
     },
-    [onSearch]
+    [value, onChange]
   );
-  React10.useEffect(() => {
-    if (!open || !containerRef.current) return;
-    const updatePosition = () => {
-      const rect = containerRef.current.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const estimatedHeight = 340;
-      const showAbove = spaceBelow < estimatedHeight && rect.top > spaceBelow;
-      setDropdownPos({
-        position: "fixed",
-        left: rect.left,
-        width: rect.width,
-        zIndex: 9999,
-        ...showAbove ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 }
-      });
-    };
-    updatePosition();
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [open]);
-  React10.useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (e) => {
-      const target = e.target;
-      if (containerRef.current && !containerRef.current.contains(target) && (!dropdownRef.current || !dropdownRef.current.contains(target))) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
-  React10.useEffect(() => {
-    if (!open) return;
-    const handleEscape = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [open]);
-  React10.useEffect(() => {
-    if (!open) {
+  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("");
-      if (onSearch) onSearch("");
-    }
-  }, [open, onSearch]);
-  React10.useEffect(() => {
-    if (open && searchable) {
-      setTimeout(() => searchRef.current?.focus(), 0);
     }
-  }, [open, searchable]);
+  }, []);
   React10.useEffect(() => {
-    const el = listRef.current;
-    if (!el || !open) return;
-    const handleWheel = (e) => {
-      const { scrollTop, scrollHeight, clientHeight } = el;
-      const isScrollable = scrollHeight > clientHeight;
-      if (!isScrollable) return;
-      e.preventDefault();
-      e.stopPropagation();
-      el.scrollTop = Math.max(
-        0,
-        Math.min(scrollTop + e.deltaY, scrollHeight - clientHeight)
-      );
+    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?.();
     };
-    el.addEventListener("wheel", handleWheel, { passive: false, capture: true });
-    return () => el.removeEventListener("wheel", handleWheel, { capture: true });
-  }, [open, filteredOptions]);
-  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("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        disabled,
-        onClick: () => setOpen((prev) => !prev),
-        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: cn("h-4 w-4 shrink-0 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 pointer-events-none",
-          error ? "text-red-500" : "text-foreground"
-        ),
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
-        ]
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
+  }, [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",
         {
-          ref: dropdownRef,
-          style: dropdownPos,
-          className: "rounded-md border border-border bg-popover shadow-md overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-150",
+          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: [
-            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",
+            /* @__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,
                 {
-                  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"
+                  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: {
+          minWidth: "var(--radix-popover-trigger-width)",
+          width: "fit-content",
+          maxWidth: "var(--radix-popover-content-available-width, 100%)",
+          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(
-              "div",
+              "input",
               {
-                ref: listRef,
-                className: "overflow-y-auto overscroll-contain max-h-[300px]",
-                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-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" }) }),
-                          /* @__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" }) })
-                ] })
+                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"
               }
             )
-          ]
-        }
-      ),
-      document.body
+          ] }),
+          /* @__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
+                  );
+                }),
+                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" }) })
+              ] })
+            }
+          )
+        ]
+      }
     )
   ] });
 }
@@ -3956,107 +4531,41 @@ function FormRadioGroup({
                         id: optionId,
                         value: option.value,
                         disabled: option.disabled || disabled,
-                        className: cn(
-                          "aspect-square h-4 w-4 rounded-full border",
-                          isSelected ? styles.radio : "border-border text-muted-foreground",
-                          "ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                          "disabled:cursor-not-allowed disabled:opacity-50"
-                        ),
-                        children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 leading-none", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "text-sm font-medium leading-none",
-                            isSelected && styles.text
-                          ),
-                          children: option.label
-                        }
-                      ),
-                      option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
-                    ] })
-                  ]
-                },
-                option.value
-              );
-            })
-          }
-        ),
-        !hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
-      ] })
-    }
-  ) });
-}
-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;
+                        className: cn(
+                          "aspect-square h-4 w-4 rounded-full border",
+                          isSelected ? styles.radio : "border-border text-muted-foreground",
+                          "ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                          "disabled:cursor-not-allowed disabled:opacity-50"
+                        ),
+                        children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 leading-none", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "text-sm font-medium leading-none",
+                            isSelected && styles.text
+                          ),
+                          children: option.label
+                        }
+                      ),
+                      option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+                    ] })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        ),
+        !hideError && error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+      ] })
     }
-    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";
+  ) });
+}
+FormRadioGroup.displayName = "Form.RadioGroup";
 function FormRoot({
   form,
   onSubmit,
@@ -4080,6 +4589,7 @@ var Form = Object.assign(FormRoot, {
   // Campos com auto-bind
   Input: FormInput,
   Select: FormSelect,
+  MultiSelect: FormMultiSelect,
   Textarea: FormTextarea,
   Checkbox: FormCheckbox,
   Switch: FormSwitch,
@@ -4253,207 +4763,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;
-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"
 });