@sigep/react 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -35,7 +35,773 @@ var Button = forwardRef(
   }
 );
 Button.displayName = "Button";
+
+// src/components/Input/InputString.tsx
+import { forwardRef as forwardRef3, useState } from "react";
+
+// src/components/Input/InputWrapper.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { tv as tv2 } from "tailwind-variants";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var wrapper = tv2({
+  base: "flex w-full flex-col gap-1"
+});
+var labelStyle = tv2({
+  base: "text-xs text-gray-700 flex items-start gap-0.5"
+});
+var containerStyle = tv2({
+  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 = tv2({
+  base: "text-xs text-red-500 mt-0.5"
+});
+var InputWrapper = forwardRef2(
+  ({ label, error, errorMessage, required, disabled, size, children, className, classContainer, htmlFor }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: wrapper({ className }), children: [
+      label && /* @__PURE__ */ jsxs("label", { htmlFor, className: labelStyle(), children: [
+        /* @__PURE__ */ jsx2("span", { children: label }),
+        required && /* @__PURE__ */ jsx2("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: containerStyle({ size, error: !!error, disabled: !!disabled, className: classContainer }), children }),
+      error && errorMessage && /* @__PURE__ */ jsx2("span", { className: errorStyle(), children: errorMessage })
+    ] });
+  }
+);
+InputWrapper.displayName = "InputWrapper";
+
+// src/components/Input/InputString.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var InputString = forwardRef3(
+  ({
+    label,
+    error,
+    errorMessage,
+    required,
+    size,
+    showClearButton = true,
+    leftIcon,
+    rightIcon,
+    classContainer,
+    classInput,
+    value,
+    onChange,
+    disabled,
+    name,
+    ...props
+  }, ref) => {
+    const [hovered, setHovered] = useState(false);
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        className: "w-full",
+        children: /* @__PURE__ */ jsxs2(
+          InputWrapper,
+          {
+            label,
+            error,
+            errorMessage,
+            required,
+            disabled,
+            size,
+            classContainer,
+            htmlFor: name,
+            children: [
+              leftIcon && /* @__PURE__ */ jsx3("span", { className: "pl-2.5 text-gray-400", children: leftIcon }),
+              /* @__PURE__ */ jsx3(
+                "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__ */ jsx3(
+                "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__ */ jsxs2(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              rightIcon && /* @__PURE__ */ jsx3("span", { className: "pr-2.5 text-gray-400", children: rightIcon })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+InputString.displayName = "InputString";
+
+// src/components/Input/InputEmail.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var InputEmail = forwardRef4(
+  ({ label, error, errorMessage, required, size, leftIcon, rightIcon, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs3(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx4("span", { className: "pl-2.5 text-gray-400", children: leftIcon }),
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsx4("span", { className: "pr-2.5 text-gray-400", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+InputEmail.displayName = "InputEmail";
+
+// src/components/Input/InputPassword.tsx
+import { forwardRef as forwardRef5, useState as useState2 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var EyeIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx5("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+  /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOffIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx5("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__ */ jsx5("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+] });
+var InputPassword = forwardRef5(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    const [visible, setVisible] = useState2(false);
+    return /* @__PURE__ */ jsxs4(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: [
+          /* @__PURE__ */ jsx5(
+            "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__ */ jsx5(
+            "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__ */ jsx5(EyeOffIcon, {}) : /* @__PURE__ */ jsx5(EyeIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InputPassword.displayName = "InputPassword";
+
+// src/components/Input/InputNumber.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var allowedKeys = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+var InputNumber = forwardRef6(
+  ({ 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__ */ jsxs5(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx6("span", { className: "pl-2.5 text-gray-400", children: leftIcon }),
+          /* @__PURE__ */ jsx6(
+            "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__ */ jsx6("span", { className: "pr-2.5 text-gray-400", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+InputNumber.displayName = "InputNumber";
+
+// src/components/Input/InputCPF.tsx
+import { forwardRef as forwardRef7 } 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 jsx7 } from "react/jsx-runtime";
+var InputCPF = forwardRef7(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    function handleChange(raw) {
+      const digits = unmask(raw);
+      onChange?.(digits);
+    }
+    return /* @__PURE__ */ jsx7(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx7(
+          "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 forwardRef8 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var InputCNPJ = forwardRef8(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    function handleChange(raw) {
+      const digits = unmask(raw);
+      onChange?.(digits);
+    }
+    return /* @__PURE__ */ jsx8(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx8(
+          "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 forwardRef9 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var InputPhone = forwardRef9(
+  ({ label, error, errorMessage, required, size, classContainer, classInput, value, onChange, disabled, name, ...props }, ref) => {
+    function handleChange(raw) {
+      const digits = unmask(raw);
+      onChange?.(digits);
+    }
+    return /* @__PURE__ */ jsx9(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx9(
+          "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 forwardRef10 } from "react";
+import { jsx as jsx10 } 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 = forwardRef10(
+  ({ 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__ */ jsx10(
+      InputWrapper,
+      {
+        label,
+        error,
+        errorMessage,
+        required,
+        disabled,
+        size,
+        classContainer,
+        htmlFor: name,
+        children: /* @__PURE__ */ jsx10(
+          "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 forwardRef11 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var InputCep = 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",
+            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 forwardRef12 } from "react";
+import { tv as tv3 } from "tailwind-variants";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var checkboxContainer = tv3({
+  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__ */ jsx12("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx12("polyline", { points: "20 6 9 17 4 12" }) });
+var IndeterminateIcon = () => /* @__PURE__ */ jsx12("div", { className: "w-2 h-2 rounded-sm bg-gray-300" });
+var InputCheckbox = forwardRef12(
+  ({ label, checked = false, indeterminate = false, onChange, disabled, error, labelPosition = "right", className, name, required }, ref) => {
+    function handleClick() {
+      if (disabled) return;
+      onChange?.(!checked);
+    }
+    const box = /* @__PURE__ */ jsxs6(
+      "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__ */ jsx12(CheckIcon, {}),
+          indeterminate && /* @__PURE__ */ jsx12(IndeterminateIcon, {})
+        ]
+      }
+    );
+    if (!label) return /* @__PURE__ */ jsx12("div", { className, children: box });
+    return /* @__PURE__ */ jsxs6("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
+      labelPosition === "left" && /* @__PURE__ */ jsx12("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      box,
+      labelPosition === "right" && /* @__PURE__ */ jsx12("label", { htmlFor: name, className: "text-sm text-gray-700 cursor-pointer select-none", children: label }),
+      required && /* @__PURE__ */ jsx12("span", { className: "text-red-500 text-[10px]", children: "*" })
+    ] });
+  }
+);
+InputCheckbox.displayName = "InputCheckbox";
+
+// src/components/Input/InputRadio.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { tv as tv4 } from "tailwind-variants";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var radioButton = tv4({
+  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 = forwardRef13(
+  ({ label, options, value, onChange, disabled, error, required, name, className, direction = "horizontal" }, ref) => {
+    return /* @__PURE__ */ jsxs7("div", { ref, className: `flex w-full flex-col gap-1 ${className ?? ""}`, children: [
+      label && /* @__PURE__ */ jsxs7("span", { className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
+        /* @__PURE__ */ jsx13("span", { children: label }),
+        required && /* @__PURE__ */ jsx13("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx13(
+        "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__ */ jsxs7(
+              "label",
+              {
+                className: `flex items-center gap-2 cursor-pointer select-none ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx13(
+                    "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__ */ jsx13("div", { className: "w-[10px] h-[10px] rounded-full bg-blue-600" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13("span", { className: "text-sm text-gray-700", children: option.label })
+                ]
+              },
+              String(option.value)
+            );
+          })
+        }
+      ),
+      error && /* @__PURE__ */ jsx13("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 forwardRef14 } from "react";
+import { tv as tv5 } from "tailwind-variants";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var textareaStyle = tv5({
+  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 = forwardRef14(
+  ({ label, error, errorMessage, required, size, classInput, value, onChange, disabled, name, rows = 4, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsxs8("label", { htmlFor: name, className: "text-xs text-gray-700 flex items-start gap-0.5", children: [
+        /* @__PURE__ */ jsx14("span", { children: label }),
+        required && /* @__PURE__ */ jsx14("span", { className: "text-red-500 text-[10px] leading-none mt-0.5", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx14(
+        "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__ */ jsx14("span", { className: "text-xs text-red-500 mt-0.5", children: errorMessage })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
 export {
   Button,
-  button
+  InputCNPJ,
+  InputCPF,
+  InputCep,
+  InputCheckbox,
+  InputCurrency,
+  InputEmail,
+  InputNumber,
+  InputPassword,
+  InputPhone,
+  InputRadio,
+  InputString,
+  InputWrapper,
+  Textarea,
+  button,
+  maskCEP,
+  maskCNPJ,
+  maskCPF,
+  maskCurrency,
+  maskPhone,
+  unmask,
+  unmaskCurrency
 };