@sigep/react 1.0.0 → 1.1.1

package/dist/index.mjs

@@ -1,8 +1,51 @@
-// src/components/Button/index.tsx
+// src/components/Avatar/index.tsx
 import { forwardRef } from "react";
 import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
-var button = tv({
+var avatar = tv({
+  base: "inline-flex items-center justify-center rounded-full font-medium select-none overflow-hidden",
+  variants: {
+    size: {
+      sm: "h-8 w-8 text-xs",
+      md: "h-10 w-10 text-sm",
+      lg: "h-12 w-12 text-base",
+      xl: "h-16 w-16 text-lg"
+    },
+    variant: {
+      primary: "bg-blue-600 text-white",
+      secondary: "bg-gray-200 text-gray-700",
+      outline: "bg-white text-blue-600 ring-2 ring-blue-600 ring-offset-2"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary"
+  }
+});
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+var Avatar = forwardRef(
+  ({ name, src, alt, size, variant, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: avatar({ size, variant, className }), ...props, children: src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: alt || name || "avatar",
+        className: "h-full w-full object-cover"
+      }
+    ) : /* @__PURE__ */ jsx("span", { children: name ? getInitials(name) : "?" }) });
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/Button/index.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { tv as tv2 } from "tailwind-variants";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var button = tv2({
   base: "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   variants: {
     variant: {
@@ -22,9 +65,9 @@ var button = tv({
     size: "md"
   }
 });
-var Button = forwardRef(
+var Button = forwardRef2(
   ({ variant, size, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "button",
       {
         ref,
@@ -35,7 +78,1087 @@ var Button = forwardRef(
   }
 );
 Button.displayName = "Button";
+
+// src/components/Card/index.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { tv as tv3 } from "tailwind-variants";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var card = tv3({
+  base: "rounded-lg bg-white text-gray-900 overflow-hidden",
+  variants: {
+    variant: {
+      elevated: "shadow-md",
+      outlined: "border border-gray-200",
+      filled: "bg-gray-50"
+    },
+    padding: {
+      none: "",
+      sm: "p-3",
+      md: "p-5",
+      lg: "p-8"
+    }
+  },
+  defaultVariants: {
+    variant: "elevated",
+    padding: "md"
+  }
+});
+var Card = forwardRef3(
+  ({ variant, padding, header, footer, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: card({ variant, padding: header || footer ? "none" : padding, className }), ...props, children: [
+      header && /* @__PURE__ */ jsx3("div", { className: "border-b border-gray-200 px-5 py-3 font-semibold text-sm", children: header }),
+      header || footer ? /* @__PURE__ */ jsx3("div", { className: card({ padding, className: "rounded-none shadow-none border-none bg-transparent" }), children }) : children,
+      footer && /* @__PURE__ */ jsx3("div", { className: "border-t border-gray-200 px-5 py-3 text-sm", children: footer })
+    ] });
+  }
+);
+Card.displayName = "Card";
+
+// src/components/Modal/index.tsx
+import { forwardRef as forwardRef4, useEffect, useCallback } from "react";
+import { tv as tv4 } from "tailwind-variants";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var overlay = tv4({
+  base: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 transition-opacity"
+});
+var modal = tv4({
+  base: "relative flex flex-col rounded-lg bg-white text-gray-900 shadow-xl overflow-hidden",
+  variants: {
+    size: {
+      sm: "w-[30vw] max-h-[40vh]",
+      md: "w-[50vw] max-h-[60vh]",
+      lg: "w-[70vw] max-h-[80vh]",
+      full: "w-[95vw] max-h-[90vh]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Modal = forwardRef4(
+  ({ isOpen, onClose, title, footer, size, className, children, ...props }, ref) => {
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Escape") onClose();
+      },
+      [onClose]
+    );
+    useEffect(() => {
+      if (!isOpen) return;
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.body.style.overflow = "";
+      };
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx4("div", { className: overlay(), onClick: onClose, children: /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        className: modal({ size, className }),
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50 px-5 py-3", children: [
+            /* @__PURE__ */ jsx4("span", { className: "text-sm font-semibold text-gray-900", children: title }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition-colors",
+                onClick: onClose,
+                "aria-label": "Fechar",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto p-5", children }),
+          footer && /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-end gap-2 border-t border-gray-200 px-5 py-3", children: footer })
+        ]
+      }
+    ) });
+  }
+);
+Modal.displayName = "Modal";
+
+// src/components/Tooltip/index.tsx
+import {
+  forwardRef as forwardRef5,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { tv as tv5 } from "tailwind-variants";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var tooltip = tv5({
+  base: "fixed z-[999999] pointer-events-none",
+  variants: {
+    variant: {
+      dark: "",
+      light: ""
+    }
+  },
+  defaultVariants: {
+    variant: "dark"
+  }
+});
+var tooltipContent = tv5({
+  base: "inline-flex items-center justify-center rounded px-2.5 py-1 text-xs font-medium whitespace-nowrap",
+  variants: {
+    variant: {
+      dark: "bg-gray-900 text-white",
+      light: "bg-white text-gray-900 shadow-md border border-gray-200"
+    }
+  },
+  defaultVariants: {
+    variant: "dark"
+  }
+});
+var tooltipArrow = tv5({
+  base: "absolute h-1.5 w-1.5 rotate-45",
+  variants: {
+    variant: {
+      dark: "bg-gray-900",
+      light: "bg-white border border-gray-200"
+    }
+  },
+  defaultVariants: {
+    variant: "dark"
+  }
+});
+var arrowPlacementStyles = {
+  top: "bottom-[-3px] left-1/2 -translate-x-1/2",
+  bottom: "top-[-3px] left-1/2 -translate-x-1/2",
+  left: "right-[-3px] top-1/2 -translate-y-1/2",
+  right: "left-[-3px] top-1/2 -translate-y-1/2"
+};
+var Tooltip = forwardRef5(
+  ({
+    content,
+    placement = "top",
+    offset: offsetPx = 8,
+    variant,
+    disabled,
+    delayShow = 100,
+    delayHide = 100,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const wrapperRef = useRef(null);
+    const tipRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState(null);
+    const [activePlacement, setActivePlacement] = useState(placement);
+    const showTimer = useRef(null);
+    const hideTimer = useRef(null);
+    function clearTimers() {
+      if (showTimer.current !== null) window.clearTimeout(showTimer.current);
+      if (hideTimer.current !== null) window.clearTimeout(hideTimer.current);
+      showTimer.current = null;
+      hideTimer.current = null;
+    }
+    function scheduleShow() {
+      if (disabled) return;
+      clearTimers();
+      showTimer.current = window.setTimeout(() => setVisible(true), delayShow);
+    }
+    function scheduleHide() {
+      clearTimers();
+      hideTimer.current = window.setTimeout(() => setVisible(false), delayHide);
+    }
+    const computePosition = useCallback2(() => {
+      const anchor = wrapperRef.current;
+      const tip = tipRef.current;
+      if (!anchor || !tip) return;
+      const rect = anchor.getBoundingClientRect();
+      const tipW = tip.offsetWidth;
+      const tipH = tip.offsetHeight;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const calc = (p2) => {
+        switch (p2) {
+          case "top":
+            return { top: rect.top - tipH - offsetPx, left: rect.left + rect.width / 2 - tipW / 2 };
+          case "bottom":
+            return { top: rect.bottom + offsetPx, left: rect.left + rect.width / 2 - tipW / 2 };
+          case "left":
+            return { top: rect.top + rect.height / 2 - tipH / 2, left: rect.left - tipW - offsetPx };
+          case "right":
+            return { top: rect.top + rect.height / 2 - tipH / 2, left: rect.right + offsetPx };
+        }
+      };
+      let pos = calc(placement);
+      let p = placement;
+      const fits = (c) => c.top >= 0 && c.left >= 0 && c.top + tipH <= vh && c.left + tipW <= vw;
+      if (!fits(pos)) {
+        const fallbacks = {
+          top: ["bottom", "right", "left"],
+          bottom: ["top", "right", "left"],
+          left: ["right", "top", "bottom"],
+          right: ["left", "top", "bottom"]
+        };
+        for (const candidate of fallbacks[placement]) {
+          const c = calc(candidate);
+          if (fits(c)) {
+            pos = c;
+            p = candidate;
+            break;
+          }
+        }
+      }
+      pos.top = Math.max(4, Math.min(vh - tipH - 4, pos.top));
+      pos.left = Math.max(4, Math.min(vw - tipW - 4, pos.left));
+      setActivePlacement(p);
+      setCoords(pos);
+    }, [placement, offsetPx]);
+    useLayoutEffect(() => {
+      if (!visible) return;
+      let raf1 = 0;
+      let raf2 = 0;
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(computePosition);
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+      };
+    }, [visible, computePosition]);
+    useEffect2(() => {
+      if (!visible) return;
+      const handler = () => computePosition();
+      window.addEventListener("scroll", handler, true);
+      window.addEventListener("resize", handler);
+      return () => {
+        window.removeEventListener("scroll", handler, true);
+        window.removeEventListener("resize", handler);
+      };
+    }, [visible, computePosition]);
+    return /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
+        "span",
+        {
+          ref: (el) => {
+            wrapperRef.current = el;
+            if (typeof ref === "function") ref(el);
+            else if (ref) ref.current = el;
+          },
+          onMouseEnter: scheduleShow,
+          onMouseLeave: scheduleHide,
+          onFocus: scheduleShow,
+          onBlur: scheduleHide,
+          style: { display: "contents" },
+          className,
+          ...props,
+          children
+        }
+      ),
+      visible && createPortal(
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            ref: tipRef,
+            role: "tooltip",
+            className: tooltip({ variant }),
+            style: {
+              top: coords?.top ?? -99999,
+              left: coords?.left ?? -99999,
+              visibility: coords ? "visible" : "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx5("div", { className: tooltipContent({ variant }), children: content }),
+              /* @__PURE__ */ jsx5("div", { className: `${tooltipArrow({ variant })} ${arrowPlacementStyles[activePlacement]}` })
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+// src/components/Input/InputString.tsx
+import { forwardRef as forwardRef7, useState as useState2 } from "react";
+
+// src/components/Input/InputWrapper.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { tv as tv6 } from "tailwind-variants";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var wrapper = tv6({
+  base: "flex w-full flex-col gap-1"
+});
+var labelStyle = tv6({
+  base: "text-xs text-gray-700 flex items-start gap-0.5"
+});
+var containerStyle = tv6({
+  base: "flex items-center w-full rounded-md border bg-white transition-colors",
+  variants: {
+    size: {
+      sm: "h-8 text-sm",
+      md: "h-9 text-sm",
+      lg: "h-10 text-base"
+    },
+    error: {
+      true: "border-red-500 focus-within:border-red-500 focus-within:ring-1 focus-within:ring-red-500",
+      false: "border-gray-300 hover:border-gray-400 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500"
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed bg-gray-50"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    error: false
+  }
+});
+var errorStyle = tv6({
+  base: "text-xs text-red-500 mt-0.5"
+});
+var InputWrapper = forwardRef6(
+  ({ label, error, errorMessage, required, disabled, size, children, className, classContainer, htmlFor }, ref) => {
+    return /* @__PURE__ */ jsxs4("div", { ref, className: wrapper({ className }), children: [
+      label && /* @__PURE__ */ jsxs4("label", { htmlFor, className: labelStyle(), children: [
+        /* @__PURE__ */ jsx6("span", { children: label }),
+        required && /* @__PURE__ */ jsx6("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: containerStyle({ size, error: !!error, disabled: !!disabled, className: classContainer }), children }),
+      error && errorMessage && /* @__PURE__ */ jsx6("span", { className: errorStyle(), children: errorMessage })
+    ] });
+  }
+);
+InputWrapper.displayName = "InputWrapper";
+
+// src/components/Input/InputString.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var InputString = forwardRef7(
+  ({
+    label,
+    error,
+    errorMessage,
+    required,
+    size,
+    showClearButton = true,
+    leftIcon,
+    rightIcon,
+    classContainer,
+    classInput,
+    value,
+    onChange,
+    disabled,
+    name,
+    ...props
+  }, ref) => {
+    const [hovered, setHovered] = useState2(false);
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        className: "w-full",
+        children: /* @__PURE__ */ jsxs5(
+          InputWrapper,
+          {
+            label,
+            error,
+            errorMessage,
+            required,
+            disabled,
+            size,
+            classContainer,
+            htmlFor: name,
+            children: [
+              leftIcon && /* @__PURE__ */ jsx7("span", { className: "pl-2.5 text-gray-400", children: leftIcon }),
+              /* @__PURE__ */ jsx7(
+                "input",
+                {
+                  ref,
+                  id: name,
+                  name,
+                  type: "text",
+                  value: value ?? "",
+                  onChange: (e) => onChange?.(e.target.value),
+                  disabled,
+                  "aria-invalid": !!error,
+                  className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+                  ...props
+                }
+              ),
+              showClearButton && hovered && value && !disabled && !required && /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": "Limpar campo",
+                  className: "px-2 text-gray-400 hover:text-gray-600",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => onChange?.(""),
+                  children: /* @__PURE__ */ jsxs5(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              rightIcon && /* @__PURE__ */ jsx7("span", { className: "pr-2.5 text-gray-400", children: rightIcon })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+InputString.displayName = "InputString";
+
+// src/components/Input/InputEmail.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var InputEmail = forwardRef8(
+  ({ label, error, errorMessage, required, size, leftIcon, rightIcon, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs6(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx8("span", { className: "pl-2.5 text-gray-400", children: leftIcon }),
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              ref,
+              id: name,
+              name,
+              type: "email",
+              autoComplete: "email",
+              value: value ?? "",
+              onChange: (e) => onChange?.(e.target.value),
+              disabled,
+              "aria-invalid": !!error,
+              className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+              ...props
+            }
+          ),
+          rightIcon && /* @__PURE__ */ jsx8("span", { className: "pr-2.5 text-gray-400", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+InputEmail.displayName = "InputEmail";
+
+// src/components/Input/InputPassword.tsx
+import { forwardRef as forwardRef9, useState as useState3 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var EyeIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx9("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+  /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOffIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx9("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+  /* @__PURE__ */ jsx9("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+] });
+var InputPassword = forwardRef9(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    const [visible, setVisible] = useState3(false);
+    return /* @__PURE__ */ jsxs7(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: [
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              ref,
+              id: name,
+              name,
+              type: visible ? "text" : "password",
+              autoComplete: "current-password",
+              value: value ?? "",
+              onChange: (e) => onChange?.(e.target.value),
+              disabled,
+              "aria-invalid": !!error,
+              className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
+              className: "px-2.5 text-gray-400 hover:text-gray-600",
+              onClick: () => setVisible(!visible),
+              children: visible ? /* @__PURE__ */ jsx9(EyeOffIcon, {}) : /* @__PURE__ */ jsx9(EyeIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InputPassword.displayName = "InputPassword";
+
+// src/components/Input/InputNumber.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var allowedKeys = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+var InputNumber = forwardRef10(
+  ({ label, error, errorMessage, required, size, leftIcon, rightIcon, classContainer, classInput, value, onChange, disabled, name, min = 0, max, ...props }, ref) => {
+    function handleKeyDown(e) {
+      if (e.ctrlKey || e.metaKey) return;
+      if (allowedKeys.includes(e.key)) return;
+      if (!/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+      }
+    }
+    function handleChange(raw) {
+      if (raw === "") {
+        onChange?.(void 0);
+        return;
+      }
+      const num = Number(raw);
+      if (isNaN(num)) return;
+      if (min !== void 0 && num < min) return;
+      if (max !== void 0 && num > max) return;
+      onChange?.(num);
+    }
+    return /* @__PURE__ */ jsxs8(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx10("span", { className: "pl-2.5 text-gray-400", children: leftIcon }),
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              ref,
+              id: name,
+              name,
+              type: "text",
+              inputMode: "numeric",
+              value: value ?? "",
+              onChange: (e) => handleChange(e.target.value),
+              onKeyDown: handleKeyDown,
+              disabled,
+              "aria-invalid": !!error,
+              className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+              ...props
+            }
+          ),
+          rightIcon && /* @__PURE__ */ jsx10("span", { className: "pr-2.5 text-gray-400", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+InputNumber.displayName = "InputNumber";
+
+// src/components/Input/InputCPF.tsx
+import { forwardRef as forwardRef11 } from "react";
+
+// src/components/Input/masks.ts
+function maskCPF(value) {
+  const digits = value.replace(/\D/g, "").slice(0, 11);
+  return digits.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
+}
+function maskCNPJ(value) {
+  const digits = value.replace(/\D/g, "").slice(0, 14);
+  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");
+}
+function maskPhone(value) {
+  const digits = value.replace(/\D/g, "").slice(0, 11);
+  if (digits.length <= 10) {
+    return digits.replace(/(\d{2})(\d)/, "($1) $2").replace(/(\d{4})(\d)/, "$1-$2");
+  }
+  return digits.replace(/(\d{2})(\d)/, "($1) $2").replace(/(\d{5})(\d)/, "$1-$2");
+}
+function maskCEP(value) {
+  const digits = value.replace(/\D/g, "").slice(0, 8);
+  return digits.replace(/(\d{5})(\d)/, "$1-$2");
+}
+function unmask(value) {
+  return value.replace(/\D/g, "");
+}
+function maskCurrency(value, prefix = "R$ ", decimalScale = 2) {
+  return prefix + value.toFixed(decimalScale).replace(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+}
+function unmaskCurrency(value) {
+  const cleaned = value.replace(/[^\d,-]/g, "").replace(",", ".");
+  return parseFloat(cleaned) || 0;
+}
+
+// src/components/Input/InputCPF.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var InputCPF = forwardRef11(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    function handleChange(raw) {
+      const digits = unmask(raw);
+      onChange?.(digits);
+    }
+    return /* @__PURE__ */ jsx11(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx11(
+          "input",
+          {
+            ref,
+            id: name,
+            name,
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 14,
+            placeholder: "000.000.000-00",
+            value: value ? maskCPF(value) : "",
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            "aria-invalid": !!error,
+            className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+InputCPF.displayName = "InputCPF";
+
+// src/components/Input/InputCNPJ.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var InputCNPJ = forwardRef12(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    function handleChange(raw) {
+      const digits = unmask(raw);
+      onChange?.(digits);
+    }
+    return /* @__PURE__ */ jsx12(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref,
+            id: name,
+            name,
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 18,
+            placeholder: "00.000.000/0000-00",
+            value: value ? maskCNPJ(value) : "",
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            "aria-invalid": !!error,
+            className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+InputCNPJ.displayName = "InputCNPJ";
+
+// src/components/Input/InputPhone.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var InputPhone = forwardRef13(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    function handleChange(raw) {
+      const digits = unmask(raw);
+      onChange?.(digits);
+    }
+    return /* @__PURE__ */ jsx13(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx13(
+          "input",
+          {
+            ref,
+            id: name,
+            name,
+            type: "tel",
+            inputMode: "numeric",
+            maxLength: 15,
+            placeholder: "(00) 00000-0000",
+            value: value ? maskPhone(value) : "",
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            "aria-invalid": !!error,
+            className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+InputPhone.displayName = "InputPhone";
+
+// src/components/Input/InputCurrency.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function formatCurrency(value, prefix, decimalScale) {
+  const fixed = Math.abs(value).toFixed(decimalScale);
+  const [intPart, decPart] = fixed.split(".");
+  const formatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+  const sign = value < 0 ? "-" : "";
+  return `${sign}${prefix}${formatted},${decPart}`;
+}
+var InputCurrency = forwardRef14(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, prefix = "R$ ", decimalScale = 2, allowNegative = false, ...props }, ref) => {
+    function handleChange(e) {
+      const raw = e.target.value;
+      const num = unmaskCurrency(raw);
+      if (!allowNegative && num < 0) return;
+      onChange?.(isNaN(num) ? void 0 : num);
+    }
+    const displayValue = value !== void 0 && value !== null ? formatCurrency(value, prefix, decimalScale) : "";
+    return /* @__PURE__ */ jsx14(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx14(
+          "input",
+          {
+            ref,
+            id: name,
+            name,
+            type: "text",
+            inputMode: "decimal",
+            value: displayValue,
+            onChange: handleChange,
+            disabled,
+            "aria-invalid": !!error,
+            placeholder: `${prefix}0,${"0".repeat(decimalScale)}`,
+            className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+InputCurrency.displayName = "InputCurrency";
+
+// src/components/Input/InputCep.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var InputCep = forwardRef15(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    function handleChange(raw) {
+      const digits = unmask(raw);
+      onChange?.(digits);
+    }
+    return /* @__PURE__ */ jsx15(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx15(
+          "input",
+          {
+            ref,
+            id: name,
+            name,
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "postal-code",
+            maxLength: 9,
+            placeholder: "00000-000",
+            value: value ? maskCEP(value) : "",
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            "aria-invalid": !!error,
+            className: `flex-1 min-w-0 h-full bg-transparent px-2.5 outline-none text-gray-900 placeholder:text-gray-400 disabled:cursor-not-allowed ${classInput ?? ""}`,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+InputCep.displayName = "InputCep";
+
+// src/components/Input/InputCheckbox.tsx
+import { forwardRef as forwardRef16 } from "react";
+import { tv as tv7 } from "tailwind-variants";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var checkboxContainer = tv7({
+  base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded border cursor-pointer transition-colors",
+  variants: {
+    checked: {
+      true: "bg-blue-600 border-blue-600",
+      false: "bg-white border-gray-300 hover:border-blue-500 hover:bg-blue-50"
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed"
+    },
+    error: {
+      true: "border-red-500"
+    }
+  },
+  defaultVariants: {
+    checked: false
+  }
+});
+var CheckIcon = () => /* @__PURE__ */ jsx16("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx16("polyline", { points: "20 6 9 17 4 12" }) });
+var IndeterminateIcon = () => /* @__PURE__ */ jsx16("div", { className: "w-2 h-2 rounded-sm bg-gray-300" });
+var InputCheckbox = forwardRef16(
+  ({ label, checked = false, indeterminate = false, onChange, disabled, error, labelPosition = "right", className, name, required }, ref) => {
+    function handleClick() {
+      if (disabled) return;
+      onChange?.(!checked);
+    }
+    const box = /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "checkbox",
+        id: name,
+        "aria-checked": indeterminate ? "mixed" : checked,
+        "aria-required": required,
+        className: checkboxContainer({ checked: checked || indeterminate, disabled: !!disabled, error: !!error }),
+        onClick: handleClick,
+        disabled,
+        children: [
+          checked && !indeterminate && /* @__PURE__ */ jsx16(CheckIcon, {}),
+          indeterminate && /* @__PURE__ */ jsx16(IndeterminateIcon, {})
+        ]
+      }
+    );
+    if (!label) return /* @__PURE__ */ jsx16("div", { className, children: box });
+    return /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
+      labelPosition === "left" && /* @__PURE__ */ jsx16("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      box,
+      labelPosition === "right" && /* @__PURE__ */ jsx16("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 text-[10px]", children: "*" })
+    ] });
+  }
+);
+InputCheckbox.displayName = "InputCheckbox";
+
+// src/components/Input/InputRadio.tsx
+import { forwardRef as forwardRef17 } from "react";
+import { tv as tv8 } from "tailwind-variants";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var radioButton = tv8({
+  base: "inline-flex items-center justify-center w-[18px] h-[18px] rounded-full border cursor-pointer transition-colors",
+  variants: {
+    selected: {
+      true: "border-blue-600",
+      false: "border-gray-300 hover:border-blue-500 hover:bg-blue-50"
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed"
+    },
+    error: {
+      true: "border-red-500"
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+});
+var InputRadio = forwardRef17(
+  ({ label, options, value, onChange, disabled, error, required, name, className, direction = "horizontal" }, ref) => {
+    return /* @__PURE__ */ jsxs10("div", { ref, className: `flex w-full flex-col gap-1 ${className ?? ""}`, children: [
+      label && /* @__PURE__ */ jsxs10("span", { className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
+        /* @__PURE__ */ jsx17("span", { children: label }),
+        required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": label,
+          className: `flex gap-3 ${direction === "vertical" ? "flex-col" : "items-center"}`,
+          children: options.map((option) => {
+            const isSelected = value === option.value;
+            const isDisabled = disabled || option.disabled;
+            return /* @__PURE__ */ jsxs10(
+              "label",
+              {
+                className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      type: "button",
+                      role: "radio",
+                      "aria-checked": isSelected,
+                      className: radioButton({ selected: isSelected, disabled: !!isDisabled, error: !!error }),
+                      onClick: () => !isDisabled && onChange?.(option.value),
+                      disabled: isDisabled,
+                      children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-600" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17("span", { className: "text-sm text-gray-700", children: option.label })
+                ]
+              },
+              String(option.value)
+            );
+          })
+        }
+      ),
+      error && /* @__PURE__ */ jsx17("span", { className: "text-xs text-red-500 mt-0.5", children: "Selecione uma op\xE7\xE3o" })
+    ] });
+  }
+);
+InputRadio.displayName = "InputRadio";
+
+// src/components/Input/Textarea.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { tv as tv9 } from "tailwind-variants";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var textareaStyle = tv9({
+  base: "w-full rounded-md border bg-white px-2.5 py-2 text-sm text-gray-900 outline-none placeholder:text-gray-400 resize-vertical transition-colors",
+  variants: {
+    error: {
+      true: "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500",
+      false: "border-gray-300 hover:border-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed bg-gray-50"
+    }
+  },
+  defaultVariants: {
+    error: false
+  }
+});
+var Textarea = forwardRef18(
+  ({ label, error, errorMessage, required, size, classInput, value, onChange, disabled, name, rows = 4, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsxs11("label", { htmlFor: name, className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
+        /* @__PURE__ */ jsx18("span", { children: label }),
+        required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx18(
+        "textarea",
+        {
+          ref,
+          id: name,
+          name,
+          rows,
+          value: value ?? "",
+          onChange: (e) => onChange?.(e.target.value),
+          disabled,
+          "aria-invalid": !!error,
+          className: textareaStyle({ error: !!error, disabled: !!disabled, className: classInput }),
+          ...props
+        }
+      ),
+      error && errorMessage && /* @__PURE__ */ jsx18("span", { className: "text-xs text-red-500 mt-0.5", children: errorMessage })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
 export {
+  Avatar,
   Button,
-  button
+  Card,
+  InputCNPJ,
+  InputCPF,
+  InputCep,
+  InputCheckbox,
+  InputCurrency,
+  InputEmail,
+  InputNumber,
+  InputPassword,
+  InputPhone,
+  InputRadio,
+  InputString,
+  InputWrapper,
+  Modal,
+  Textarea,
+  Tooltip,
+  avatar,
+  button,
+  card,
+  maskCEP,
+  maskCNPJ,
+  maskCPF,
+  maskCurrency,
+  maskPhone,
+  modal,
+  tooltip,
+  unmask,
+  unmaskCurrency
 };